@charset "UTF-8";

/**
 * Static pages CSS extracted from inline styles in Blade templates.
 * Targets:
 *  - /content/privacy/
 *  - /user_data/kiyaku.php
 *  - /user_data/tokusyou.php
 *  - /user_data/kojin.php
 *  - /user_data/advice.php
 *  - /user_data/faq.php
 *  - /user_data/api.php
 *  - /user_data/business_guide.php
 *  - /user_data/guide.php
 *  - /user_data/newuser_guide.php
 *  - /user_data/nyuko_guide.php
 *  - /user_data/bill_pay.php
 *  - /user_data/media_send.php
 *  - /user_data/dokodemo_kiyaku.php
 */

/* /user_data/api.php */
body#api #api_header {
  background-color: #339900;
  height: 40px;
}
body#api #api_header h1 {
  width: 960px;
  text-align: left;
  margin: 0 auto;
  padding: 5px 0;
}
body#api #api {
  width: 960px;
  margin: 0 auto;
}
body#api #api > h2 {
  margin: 25px 0;
}
body#api #api > h3 {
  margin: 25px 0;
}
body#api #api > p {
  font-size: 16px;
  line-height: 1.3em;
}
body#api #api p.img_center {
  margin: 35px 0;
  text-align: center;
}
body#api #api_main {
  padding: 40px 0 20px;
}
body#api #api_main p.title2 {
  margin-bottom: 45px;
}
body#api #api_main .api_txt_img {
  float: left;
}
body#api #api_main .api_image {
  float: right;
  margin-top: 10px;
}
body#api #api_main .catch {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0 15px 5px;
}
body#api #api_feature {
  background-color: #339900;
  padding: 20px 0 20px 20px;
  margin-bottom: 60px;
}
body#api #api_feature h2 {
  margin-bottom: 20px;
}
body#api #api_feature > div {
  width: 250px;
  height: 330px;
  padding: 20px;
  margin-right: 20px;
  float: left;
  border: 1px #cecece solid;
  background: #fff;
  border-radius: 5px;
  box-sizing: content-box;
}
body#api #api_feature > div h3 {
  text-align: center;
  margin-bottom: 20px;
}
body#api #api_feature > div > img {
  display: block;
  margin: 12px auto;
}
body#api #whats_api {
  margin-top: 25px;
  width: 980px;
  margin-bottom: 20px;
}
body#api #whats_api > div {
  float: left;
  margin-right: 20px;
}
body#api #whats_api > div > div {
  width: 203px;
  height: 240px;
  padding: 20px 10px 10px 10px;
  border: 1px #cecece solid;
  background: #fff;
  border-radius: 5px;
  box-sizing: content-box;
}
body#api #whats_api > div p.yotei {
  color: #ff0000;
  text-align: center;
  margin-top: 5px;
}
body#api #whats_api div h3 {
  text-align: center;
  margin-bottom: 20px;
}
body#api #whats_api div > img {
  display: block;
  margin: 12px auto;
}
body#api .exam_option {
  margin-bottom: 35px;
}
body#api .exam_option > img {
  display: block;
  float: left;
}
body#api .exam_option > div {
  float: left;
  margin: 15px;
  font-size: 16px;
}
body#api .exam_option > div h3 {
  margin-bottom: 10px;
}
body#api header {
  display: none;
}

/* /content/privacy/ */
.privacy-container table th {
    background-color: #f9f9f9;
}

/* /user_data/kiyaku.php */
body#kiyaku .main_frame {
    width: 980px;
    margin: 0 auto;
}
body#kiyaku h2 {
    border-bottom: none;
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
body#kiyaku h3 {
    font-size: 16px;
}
body#kiyaku .kiyaku,
body#dokodemo-std-kiyaku .kiyaku {
    padding-left: 12px;
    text-indent: -15px;
}
body#kiyaku .kiyaku2,
body#dokodemo-std-kiyaku .kiyaku2{
    padding-left: 20px;
    text-indent: -23px;
}
body#kiyaku .list-t,
body#dokodemo-std-kiyaku .list-t {
    margin-left: 12px;
}
body#kiyaku .list-p,
body#dokodemo-std-kiyaku .list-p {
    padding-left: 33px;
    text-indent: -13px;
}

body#dokodemo-std-kiyaku .main_frame {
    width: 980px;
    margin: 0 auto;
}
body#dokodemo-std-kiyaku h2 {
    border-bottom: none;
    text-align: center;
    color: #FFF;
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
body#dokodemo-std-kiyaku h3 {
    font-size: 16px;
}
@media screen and (max-width: 480px) {
    body#kiyaku .main_frame,
    body#dokodemo-std-kiyaku .main_frame {
        width: 95%;
        margin: 0 auto;
    }
}

/* /user_data/tokusyou.php */
body#tokusyou h2.title {
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: none;
}
body#tokusyou .main_frame {
    width: 980px;
    margin: 0 auto;
}
body#tokusyou .main_frame table.kiyaku {
    margin:20px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-collapse: collapse;
    text-align: left;
    color: #333;
    width:90%;
}
body#tokusyou .main_frame table.kiyaku th,
body#tokusyou .main_frame table.kiyaku td {
    padding:10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
body#tokusyou .main_frame table.kiyaku th {
    width:30%;
    background-color: #f0f0f0;
    text-align: center;
}
body#tokusyou .main_frame table.kiyaku td {
    width:70%;
}
body#tokusyou .tokusyou-payment-cell {
    vertical-align: top;
}
body#tokusyou .tokusyou-fee-cell {
    vertical-align: top;
}
body#tokusyou .tokusyou-fee-cell p {
    margin: 0 0 1em;
    line-height: 1.65;
}
body#tokusyou .tokusyou-fee-cell p:last-child {
    margin-bottom: 0;
}
body#tokusyou .tokusyou-paytiming-cell {
    vertical-align: top;
}
body#tokusyou .tokusyou-paytiming-cell > p:not(.tokusyou-fee-note) {
    margin: 0 0 1em;
    line-height: 1.65;
}
body#tokusyou .tokusyou-paytiming-cell > p:last-child {
    margin-bottom: 0;
}
body#tokusyou .tokusyou-fee-extra {
    margin: 0.35em 0 1em;
}
body#tokusyou .tokusyou-fee-extra-lead {
    margin: 0 0 0.65em;
    line-height: 1.65;
}
body#tokusyou .tokusyou-fee-extra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    border: 1px solid #ccc;
}
body#tokusyou .tokusyou-fee-extra-table td {
    padding: 8px 10px;
    border: 1px solid #ccc;
    vertical-align: top;
    line-height: 1.5;
}
body#tokusyou .tokusyou-fee-extra-label {
    width: 58%;
    background-color: #fafafa;
}
body#tokusyou .tokusyou-fee-extra-amount {
    text-align: right;
    white-space: nowrap;
}
body#tokusyou .tokusyou-fee-note {
    margin: 0.35em 0 0;
    font-size: 0.95em;
}
body#tokusyou a.tokusyou-fee-sim-link {
    color: #333;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
body#tokusyou a.tokusyou-fee-sim-link:hover {
    color: #111;
    text-decoration-thickness: 2px;
}
body#tokusyou a.tokusyou-fee-sim-link:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}
body#tokusyou .tokusyou-fee-paytiming {
    margin: 0.35em 0 0;
    padding-left: 1.25em;
    line-height: 1.65;
}
body#tokusyou .tokusyou-fee-paytiming li {
    margin: 0.4em 0;
}
body#tokusyou .tokusyou-shipping-cell > p {
    margin: 0 0 0.75em;
}
body#tokusyou .tokusyou-shipping-table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-size: 0.95em;
}
body#tokusyou .tokusyou-shipping-table th,
body#tokusyou .tokusyou-shipping-table td {
    padding: 8px 10px;
    border: 1px solid #ccc;
    vertical-align: top;
}
body#tokusyou .tokusyou-shipping-table thead th {
    background-color: #f0f0f0;
    text-align: center;
    font-weight: bold;
}
body#tokusyou .tokusyou-shipping-table tbody td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
}
body#tokusyou .tokusyou-shipping-method {
    margin: 0.75em 0 0.25em;
    font-size: 0.95em;
}
body#tokusyou .tokusyou-shipping-note {
    margin: 0.5em 0 0;
    font-size: 0.95em;
}
body#tokusyou .tokusyou-score-later {
    margin-top: 1em;
    padding-top: 0.75em;
    border-top: 1px solid #ddd;
}
body#tokusyou .tokusyou-score-later-banner {
    margin: 0.75em 0 0.5em;
    line-height: 0;
}
body#tokusyou .tokusyou-score-later-banner a {
    display: inline-block;
    max-width: 100%;
}
body#tokusyou .tokusyou-score-later-banner img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
body#tokusyou .tokusyou-score-later .tokusyou-score-later-mainlist,
body#tokusyou .tokusyou-score-later .tokusyou-score-later-sublist {
    margin: 0.35em 0 0.35em 1.25em;
    padding: 0;
}
body#tokusyou .tokusyou-score-later .tokusyou-score-later-mainlist > li {
    margin: 0.5em 0;
}
body#tokusyou .tokusyou-score-later .tokusyou-score-later-sublist li {
    margin: 0.25em 0;
}
body#tokusyou .tokusyou-score-later .tokusyou-score-later-subhead {
    margin: 0.5em 0 0.15em;
    font-weight: bold;
}
body#tokusyou .tokusyou-score-later .tokusyou-score-later-sublist + .tokusyou-score-later-subhead {
    margin-top: 0.75em;
}
@media screen and (max-width: 480px) {
    body#tokusyou .main_frame {
        width: 95%;
        margin: 0 auto;
    }
}

/* /user_data/kojin.php */
body#kojin .main_frame {
    width: 980px;
    margin: 0 auto;
}
body#kojin h2 {
    border-bottom: none;
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
@media screen and (max-width: 480px) {
    body#kojin .main_frame {
        width: 95%;
        margin: 0 auto;
    }
}

/* /user_data/bill_pay.php */
body#bill-pay .billpay_img {
    margin: 30px;
}
body#bill-pay h2.title {
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: none;
}
body#bill-pay h2 {
    border-bottom: 1px solid #ccc;
    margin: 25px 0 10px 0;
}
body#bill-pay .wrapper a:link {
    color: #39c;
}
body#bill-pay .guide_frame {
    position: relative;
    background-color: #fff;
    margin: 10px auto;
    width: 935px;
}
body#bill-pay .bill_pay-text {
    border: 1px solid #333;
    padding: 10px;
    margin: 20px 0;
    font-size: 13px;
    width: 550px;
}
@media screen and (max-width: 480px) {
    body#bill-pay .billpay_img {
        margin: 10px;
        width: 100%;
    }
    body#bill-pay .guide_frame {
        width: 95%;
    }
    body#bill-pay .bill_pay-text {
        width: 95%;
        margin: 20px auto;
    }
}

/* /user_data/media_send.php */
body#media-send h2.title {
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
body#media-send .step_frame_media_send {
    position: relative;
    background-color: #fff;
    width: 980px;
    left: 0px;
    margin: 0px auto;
}
body#media-send .main_frame {
    position: relative;
    background-color: #fff;
    margin: 10px auto;
    width: 935px;
}
body#media-send .main_frame h2 {
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    margin: 25px 0 10px 0;
}
body#media-send p {
    font-size: 14px;
}
body#media-send .main_frame a:link {
    color: #39c;
}
body#media-send .media_send-text {
    border: 1px dotted #999;
    margin: 13px auto;
    padding: 5px;
    width: 420px;
}
@media screen and (max-width: 480px) {
    body#media-send .step_frame_media_send {
        width: 100%;
    }
    body#media-send .main_frame {
        width: 100%;
    }
    body#media-send .media_send-text {
        width: 95%;
    }
    body#media-send .mediasend_img001 img {
        width: 95%;
    }
}

/* Tablet: kiyaku / tokusyou / media_send (481px–1199px; scoped by body id) */
@media screen and (min-width: 481px) and (max-width: 1199px) {
    body#kiyaku .main_frame {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#tokusyou .main_frame {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    body#tokusyou .main_frame table.kiyaku {
        width: 100%;
    }

    body#media-send .step_frame_media_send,
    body#media-send .main_frame {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    body#media-send .media_send-text {
        width: 100%;
        max-width: 420px;
        box-sizing: border-box;
    }

    body#kiyaku .wrapper,
    body#tokusyou .wrapper,
    body#media-send .wrapper {
        overflow-x: hidden;
    }
}

/* /user_data/dokodemo_kiyaku.php */
body#dokodemo-kiyaku .main_frame {
    width: 980px;
    margin: 0 auto;
}
body#dokodemo-kiyaku h2 {
    border-bottom: none;
    text-align: center;
    color: #FFF;
    /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
@media screen and (max-width: 480px) {
    body#dokodemo-kiyaku .main_frame {
        width: 95%;
        margin: 0 auto;
    }
}


/* /user_data/faq.php */
body#faq #faqmenu_pc {
    display: block;
}
body#faq #faqmenu_sp {
    display: none;
}
body#faq div#faq {
    width: 980px;
    margin: 0 auto;
}
body#faq div#faq h3 {
    padding: 15px 0 15px 20px;
    margin: 0;
    background-color: #9cf;
    border-radius: 7px 7px 0 0;
}
body#faq div#faq ul#faqmenu_pc {
    margin: 15px 0;
}
body#faq div#faq ul#faqmenu_pc li {
    font-size: 18px;
}
body#faq .faq-data-answer {
    display: flex;
    margin-bottom: 20px;
}
body#faq .faq-data-answer img {
    margin-right: 10px;
}
body#faq .pc {
    display: block;
}
body#faq .sp {
    display: none;
}
body#faq img.pc {
    display: block;
}
body#faq img.sp {
    display: none;
}
body#faq .faqmenu-top_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}
body#faq .faqmenu-mid_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}
body#faq .faqmenu-bottom_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: flex-start;
}
body#faq .faqmenu-top_pc a {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 0 3px 3px 3px;
    text-align: center;
    padding: 20px 40px;
}
body#faq .faqmenu-mid_pc a {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 3px 3px 3px;
    text-align: center;
    padding: 20px 40px;
}
body#faq .faqmenu-bottom_pc a {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 3px 3px 3px;
    text-align: center;
    padding: 20px 40px;
}
body#faq .step_frame p {
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 300;
}
body#faq .faq-box {
    border: 3px solid #000;
    border-radius: 10px;
    margin-bottom: 30px;
}
body#faq .faq-box h3 {
    margin-left: 10px;
    border-bottom: 3px solid #000;
}
body#faq .accordion-toggle {
    margin-left: 20px;
    color: #0376b9;
    font-weight: bold;
    font-size: 14px;
}
body#faq .accordion-inner {
    margin: 5px 30px;
    border: 1px solid #9cf;
    padding: 10px;
    font-size: 12px;
    color: #000;
}
body#faq .accordion-inner p {
    margin: 0;
}
body#faq .accordion-inner a {
    color: #0376b9;
}
body#faq #faqList {
    margin-top: 10px;
}
body#faq .table {
    margin: 10px 0 0 0px;
    width: 890px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: left;
}
body#faq table,
body#faq caption,
body#faq th,
body#faq td {
    padding: 0;
    border: 0;
    border-spacing: 0px;
    empty-cells: show;
    font-weight: normal;
}
body#faq table td {
    padding: 8px;
    border: 1px solid #ccc;
}
body#faq table th {
    padding: 8px;
    border: 1px solid #ccc;
    color: #333;
    background-color: #f0f0f0;
    font-weight: normal;
}
body#faq .faq-table {
    width: 500px;
}
body#faq .faq-table-option {
    width: 890px;
}
body#faq h2.title {
    text-align: center;
    color: #FFF;
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}
body#faq .oisogi-1 {
    width: 100px;
}
body#faq .oisogi-2 {
    width: 500px;
}
body#faq .oisogi-3 {
    width: 150px;
}
body#faq .faq_menu_dokodemofaq {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 3px;
    text-align: center;
    padding: 20px 40px;
}
body#faq .faq_menu_bookcoverfaq {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 3px;
    text-align: center;
    padding: 20px 40px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body#faq .wrapper {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#faq div#faq {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#faq #faqmenu_pc {
        display: block;
    }

    body#faq #faqmenu_sp {
        display: none;
    }

    body#faq .pc {
        display: block;
    }

    body#faq .sp {
        display: none;
    }

    body#faq img.pc {
        display: block;
    }

    body#faq img.sp {
        display: none;
    }

    body#faq .faqmenu-top_pc,
    body#faq .faqmenu-mid_pc,
    body#faq .faqmenu-bottom_pc {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    body#faq .faqmenu-top_pc a,
    body#faq .faqmenu-mid_pc a,
    body#faq .faqmenu-bottom_pc a,
    body#faq .faq_menu_dokodemofaq,
    body#faq .faq_menu_bookcoverfaq {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        font-size: clamp(11px, 1.2vw, 14px);
        padding: 12px 8px;
        box-sizing: border-box;
    }

    body#faq .faqmenu-bottom_pc {
        justify-content: center;
    }

    body#faq .table,
    body#faq .faq-table,
    body#faq .faq-table-option {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body#faq .faq-data-answer {
        flex-wrap: wrap;
    }

    body#faq .faq-data-answer img {
        max-width: 100%;
        height: auto;
    }

    body#faq .accordion-inner {
        margin-left: 16px;
        margin-right: 16px;
    }

    body#faq .accordion-inner img,
    body#faq .yokonaga_v2 {
        max-width: 100%;
        height: auto;
    }

    body#faq .accordion-inner .table {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    body#faq #faqmenu_pc,
    body#faq .faqmenu-top_pc,
    body#faq .faqmenu-mid_pc,
    body#faq .faqmenu-bottom_pc,
    body#faq #faqmenu_sp,
    body#faq .faqmenu-top_sp,
    body#faq .faqmenu-center_sp,
    body#faq .faqmenu-bottom_sp {
        display: none;
    }
    body#faq .pc {
        display: none;
    }
    body#faq .sp {
        display: block;
    }
    body#faq img.sp {
        display: block;
    }
    body#faq img.pc {
        display: none;
    }
    body#faq .faq-data-answer-sp {
        text-align: center;
    }
    body#faq .faq-data-answer-sp p {
        text-align: left;
    }
    body#faq div#faq {
        width: 100%;
        margin: 0 auto;
    }
    body#faq div#faq h3 {
        margin-bottom: 15px;
    }
    body#faq ul#faqList {
        margin: 10px auto 0;
        width: 95%;
    }
    body#faq .step_frame p {
        text-align: center;
        margin: 10px 0;
        font-size: 18px;
        font-weight: 300;
    }
    body#faq .faq-table {
        width: 100%;
        max-width: 100%;
        margin: 10px auto;
    }
    body#faq .faq-table-option {
        width: 100%;
        max-width: 100%;
        margin: 10px auto;
    }
    body#faq .table {
        width: 100%;
        max-width: 100%;
    }
    body#faq .accordion-inner img {
        max-width: 100%;
        height: auto;
    }
    body#faq .accordion-toggle {
        margin: 0;
    }
    body#faq .accordion-inner {
        word-wrap: break-word;
        width: 100%;
        margin: 5px auto;
    }
    body#faq .oisogi-1 {
        width: 20%;
    }
    body#faq .oisogi-2 {
        width: 50%;
    }
    body#faq .oisogi-3 {
        width: 30%;
    }
    body#faq .yokonaga_v2 {
        width: 100%;
    }
}
/* /user_data/advice.php - Similar to faq but with some differences */
/* advice: container を全幅にして 100vw タイトルとフッターのズレを防ぐ */
body#advice .container.fixed-margin {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
body#advice .container.fixed-margin > .breadcrumb {
    padding-left: 15px;
    padding-right: 15px;
}
body#advice #faqmenu_pc {
    display: block;
}
body#advice #faqmenu_sp {
    display: none;
}
body#advice div#faq {
    width: 980px;
    margin: 0 auto;
}
body#advice div#faq h3 {
    padding: 15px 0 15px 20px;
    margin: 0;
    background-color: #9cf;
    border-radius: 7px 7px 0 0;
}
body#advice div#faq ul#faqmenu_pc {
    margin: 15px 0;
}
body#advice div#faq ul#faqmenu_pc li {
    font-size: 18px;
}
body#advice .faqmenu-top_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}
body#advice .faqmenu-bottom_pc {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}
body#advice .faqmenu-top_pc a {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 0 3px 3px 3px;
    text-align: center;
    padding: 20px 40px;
}
body#advice .faqmenu-bottom_pc a {
    display: block;
    border: 5px solid #9cf;
    border-radius: 10px;
    width: 320px;
    margin: 3px 3px 6px;
    text-align: center;
    padding: 20px 40px;
}
body#advice .step_frame p {
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 300;
}
body#advice .faq-box {
    border: 3px solid #000;
    border-radius: 10px;
    margin-bottom: 30px;
}
body#advice .faq-box h3 {
    margin-left: 10px;
    border-bottom: 3px solid #000;
}
body#advice .accordion-toggle {
    margin-left: 20px;
    color: #0376b9;
    font-weight: bold;
    font-size: 14px;
}
body#advice .accordion-inner {
    margin: 5px 30px;
    border: 1px solid #9cf;
    padding: 10px;
    font-size: 12px;
    color: #000;
}
body#advice .accordion-inner p {
    margin: 0;
}
body#advice .accordion-inner a {
    color: #0376b9;
}
body#advice #faqList {
    margin-top: 10px;
}
body#advice .table {
    margin: 10px 0 0 0px;
    width: 500px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    text-align: left;
}
body#advice table,
body#advice caption,
body#advice th,
body#advice td {
    padding: 0;
    border: 0;
    border-spacing: 0px;
    empty-cells: show;
    font-weight: normal;
}
body#advice table td {
    padding: 8px;
    border: 1px solid #ccc;
}
body#advice table th {
    padding: 8px;
    border: 1px solid #ccc;
    color: #333;
    background-color: #f0f0f0;
    font-weight: normal;
}
body#advice .faq-table {
    width: 500px;
}
body#advice .faq-table-option {
    width: 750px;
}
/* advice page main content frame (align with other user_data pages) */
body#advice .guide_frame {
    position: relative;
    background-color: #fff;
    width: 980px;
    margin: 0 auto 100px auto;
}
body#advice h2.title {
    text-align: center;
    color: #FFF;
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 20px;
    padding: 20px 0;
    font-size: 20px;
    font-weight: normal;
}
body#advice .oisogi-1 {
    width: 100px;
}
body#advice .oisogi-2 {
    width: 500px;
}
body#advice .oisogi-3 {
    width: 150px;
}
@media screen and (max-width: 480px) {
    body#advice #faqmenu_pc {
        display: none;
    }
    body#advice #faqmenu_sp {
        display: none;
    }
    body#advice div#faq {
        width: 100%;
        margin: 0 auto;
    }
    body#advice div#faq h3 {
        margin-bottom: 15px;
    }
    body#advice div#faq ul#faqmenu_sp {
        margin: 15px 0;
    }
    body#advice div#faq ul#faqmenu_sp li {
        display: inline;
        color: #339900;
    }
    body#advice ul#faqList {
        margin: 10px auto 0;
        width: 95%;
    }
    body#advice .faqmenu-top_sp {
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    body#advice .faqmenu-center_sp {
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    body#advice .faqmenu-bottom_sp {
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    body#advice .faqmenu-top_sp a {
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 170px;
        height: 100px;
        font-size: 16px;
        text-align: center;
        padding: 20px 10px;
    }
    body#advice .faqmenu-center_sp a {
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 170px;
        height: 100px;
        font-size: 16px;
        text-align: center;
        padding: 30px 10px;
        margin: 7px 0;
    }
    body#advice .faqmenu-bottom_sp a {
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 170px;
        height: 100px;
        font-size: 16px;
        text-align: center;
        padding: 20px 10px;
    }
    body#advice .step_frame p {
        text-align: center;
        margin: 10px 0;
        font-size: 18px;
        font-weight: 300;
    }
    body#advice .faq-table {
        width: 270px;
        margin: 10px auto;
    }
    body#advice .faq-table-option {
        width: 275px;
        margin: 10px auto;
    }
    body#advice .accordion-toggle {
        margin: 0;
    }
    body#advice .accordion-inner {
        word-wrap: break-word;
        width: 300px;
        margin: 5px auto;
    }
    body#advice .oisogi-1 {
        width: 20%;
    }
    body#advice .oisogi-2 {
        width: 50%;
    }
    body#advice .oisogi-3 {
        width: 30%;
    }
}

/* /user_data/nyuko_guide.php */
body#nyuko-guide {
    font-family: sans-serif;
}

body#nyuko-guide .pc-only {
    display: inline-block;
}

@media screen and (max-width: 767px) {
    body#nyuko-guide .pc-only {
        display: none;
    }
}

body#nyuko-guide .accordion-guide {
    margin: 3em auto;
    max-width: 100%;
}

body#nyuko-guide .toggle {
    display: none;
}

body#nyuko-guide .option {
    position: relative;
    margin-bottom: 1em;
}

body#nyuko-guide .title,
body#nyuko-guide .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body#nyuko-guide .title {
    text-align: center;
    font-size: 20px;
    border: solid 4px #409900;
    padding: 13px;
    display: block;
    color: #000;
    background-color: #9fcc7f;
    font-weight: bold;
}

body#nyuko-guide .title::after,
body#nyuko-guide .title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #fff;
    transition: all 0.3s;
}

body#nyuko-guide .title::after {
    transform: rotate(90deg);
}

body#nyuko-guide .content {
    max-height: 0;
    overflow: hidden;
}

body#nyuko-guide .content img {
    max-width: 100%;
    margin-bottom: 30px;
}

body#nyuko-guide .content .img-box {
    text-align: center;
}

body#nyuko-guide .content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
}

body#nyuko-guide .toggle:checked + .title + .content {
    max-height: 100%;
    padding: 20px;
    border: solid 4px #409900;
    border-top: none;
    margin-top: -5px;
}

body#nyuko-guide .toggle:checked + .title::before {
    transform: rotate(90deg);
}

body#nyuko-guide .index {
    margin: auto;
}

/* v2互換: /user_data/guide.php と同じ「大見出し」（緑の帯） */
body#nyuko-guide h2.title {
    border: none;
    border-bottom: none;
    text-align: center;
    color: #FFF;
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}

/* nyuko-guide のアコーディオン(.title)が持つ「＋」疑似要素を、大見出し(h2.title)では出さない */
body#nyuko-guide h2.title::before,
body#nyuko-guide h2.title::after {
    content: none;
}

body#nyuko-guide .guide-title {
    display: flex;
    align-items: center;
    color: #419900;
    font-weight: normal;
    margin-top: 20px;
}

body#nyuko-guide .guide-title::before,
body#nyuko-guide .guide-title::after {
    border-top: 1px solid;
    content: "";
    flex-grow: 1;
}

body#nyuko-guide .guide-title::before {
    margin-right: 1rem;
}

body#nyuko-guide .guide-title::after {
    margin-left: 1rem;
}

body#nyuko-guide .guide-subtitle {
    font-size: 25px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 20px;
}

body#nyuko-guide .common-title {
    color: #409900;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
}

body#nyuko-guide .common-title .cap-title {
    color: #fff;
    max-width: 150px;
    border-radius: 10px;
    padding: 2px 6px;
    background-color: #409900;
    margin: auto;
    text-align: center;
    font-size: 18px;
    margin-bottom: 15px;
}

body#nyuko-guide .common-text {
    font-size: 18px;
    font-weight: bold;
}

body#nyuko-guide .small-text {
    font-size: 14px;
}

body#nyuko-guide .cap {
    font-size: 14px;
}

@media screen and (max-width: 767px) {
    body#nyuko-guide .cap {
        font-size: 11px;
    }
}

body#nyuko-guide .red-cap {
    color: #ff0000;
}

body#nyuko-guide .center-text {
    text-align: center;
}

body#nyuko-guide .green-box {
    border: solid #8cc266 6px;
    max-width: 100%;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 40px;
}

body#nyuko-guide .img-box {
    margin: auto;
}

body#nyuko-guide .center-img {
    text-align: center;
}

body#nyuko-guide .center-img img {
    text-align: center;
    margin: auto;
    max-width: 100%;
}

body#nyuko-guide .left-img img {
    max-width: 100%;
}

body#nyuko-guide dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
    max-width: 850px;
    margin: auto;
    margin-bottom: 10px;
}

body#nyuko-guide dt {
    width: 250px;
    font-weight: bold;
}

body#nyuko-guide dd {
    /* default margins on desktop */
}

@media screen and (max-width: 767px) {
    body#nyuko-guide dd {
        margin-left: 0;
    }
}

body#nyuko-guide .span-box {
    border-radius: 4px;
    color: #fff;
    padding: 4px 8px;
    margin-left: 5px;
    margin-right: 5px;
}

body#nyuko-guide .green-label {
    background-color: #409900;
}

body#nyuko-guide .red-label {
    background-color: #ff3333;
}

body#nyuko-guide .orange-label {
    background-color: #ff6633;
}

body#nyuko-guide .dl-space {
    width: 610px;
    margin: 0 auto;
}

body#nyuko-guide .contents-text {
    text-align: center;
}

@media screen and (max-width: 767px) {
    body#nyuko-guide .dl-space {
        width: 100%;
    }

    body#nyuko-guide .contents-text {
        text-align: left;
    }
}


/* /user_data/business_guide.php */


/* /user_data/business_guide.php */
body#business-guide h2{
                  font-size: 20px;
                  margin: 20px 0 20px;
}
body#business-guide h3{
                  font-size: 18px;
                  margin: 20px 0 10px;
}
body#business-guide .riyou_fee ul{
                  font-size: 16px;
                  line-height: 1.6;
                  margin: 0px auto 0;
                  display: inline-block;
}
body#business-guide .riyou_fee ul li{
                  float: left;
}
body#business-guide .riyou_fee_link{
    background-color:#419901;
    border-radius:5px;
    color:#FFF;
    width:20%;
    margin:0 auto;
    padding:5px 180px;
    font-size:18px;
}
body#business-guide .clear{
                clear:both;
}
body#business-guide hr{
                  margin: 40px 0;
}
body#business-guide .guide_frame h2{
                border-bottom: none;
                text-align: center;
                color: #FFF;
                background-image: url("/icons/mypage_icon/top_img_bg_about.png");
                width: 100vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                padding: 20px 0;
                margin-bottom: 20px;
                font-size: 20px;
                font-weight: normal;
}
body#business-guide .guide_flexbox{
                background-image: url(/icons/mypage_icon/top_img_bg_about.png);
                width: 99vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                margin-bottom: 50px;
                padding-bottom: 50px;
                background-position: 0 170px;
                background-repeat: no-repeat;
                background-size: 100% auto;
                height: 500px;
}
body#business-guide .tab-wrap{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                width:980px;
                margin:0 auto;
}
body#business-guide .business_box .tab-label{
                padding: 10px 80px;
}
body#business-guide .tab-label{
              font-size: 20px;
                color: #419901;
                background: #FFF;
                border: 2px solid #419901;
                border-radius: 3px;
                padding: 10px 50px;
                order: -1;
                margin-bottom: 50px;
}
body#business-guide .guide-tab-wrap{
                display: flex;
                flex-wrap: wrap;
                margin: 20px 0;
                width: 90vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
}
body#business-guide .tab-content{
                width: 100%;
                display: none;
}
              /* アクティブなタブ */
body#business-guide .tab-switch:checked+.tab-label{
                background: #419901;
                color: #FFF;
}
body#business-guide .tab-switch:checked+.tab-label+.tab-content{
               display: block;
               opacity: 1;
               transition: .5s opacity;
}
              /* ラジオボタン非表示 */
body#business-guide .tab-switch{
                display: none;
}

              /* アクティブなタブ */
body#business-guide .guide-tab-switch:checked+.guide-tab-label{
                background: #419901;
                color: #FFF;
}
body#business-guide .guide-tab-switch:checked+.guide-tab-label+.guide-tab-content{
                height: auto;
                overflow: auto;
                padding: 15px;
                opacity: 1;
                transition: .5s opacity;
                border: 2px solid #419901;
                margin-top: 0px;
}
              /* ラジオボタン非表示 */
body#business-guide .guide-tab-switch{
                display: none;
}

body#business-guide .riyou_fee{
                  border: 2px solid #419901;
                  border-radius: 5px;
                  height: 140px;
                  width: 700px;
                  margin: 0 auto 50px;
                  text-align: center;
                 background: #fbefe1;
}

body#business-guide .step_frame p.head_title{
                  text-align: center;
                  background-color: #419901;
                  border-radius: 7px;
                  color: #FFF;
                  width: 15%;
                  margin: 0 auto;
                  margin-top: 30px;
                  font-size: 14px;
                  font-weight: 600;
}

body#business-guide .step_frame p{
                  text-align: center;
                  margin: 10px 0;
                  font-size: 17px;
                  font-weight: 300;
}

body#business-guide ol, ul, li{
                  list-style: none;
}

body#business-guide .dokodemo-flexbox{
                  /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
                  margin-top: 130px;
                  background-color: #419901;
                  width: 100vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  margin-bottom: 50px;
                  padding-bottom: 10px;
                  background-position: 0 170px;
                  background-repeat: no-repeat;
                  background-size: 100% auto;
                  /* height: 550px; */
}

body#business-guide ul.dokodemo-flexbox-list{
                  width: 980px;
                  margin: 0 auto;
                  display: flex;
                  flex-direction: row;
                  padding: 0;
}

body#business-guide .dokodemo-flexbox-list li{
                  width: 550px;
}

body#business-guide .dokodemo-flexbox li{
                  text-align: center;
                  border: 2px solid #419901;
                  border-radius: 5px;
                  width: 400px;
                  height: 350px;
                  margin: -80px 20px 0px;
                  background-color: #FFF;
}

body#business-guide a.button_orange, input.button_orange{
                  color: #fff;
                  font-size: 20px;
                  cursor: pointer;
}
body#business-guide a:link, a:visited{
                  /* color: #39c; */
                  text-decoration: none;
}
body#business-guide .button_orange, .button_orange::before, .button_orange::after{
                  box-sizing: border-box;
                  transition: all .3s;
}
body#business-guide .button_orange{
                  display: inline-block;
                  text-align: center;
                  text-decoration: none;
                  line-height: 54px;
                  outline: none;
                  border: 2px solid #ff6600;
                  background-color: #ff6600;
                  padding: 0 40px;
                  border-radius: 5px;
}

body#business-guide .dokodemo-example .head_title_bule{
                  background-color: #FFF;
                  border-radius: 7px;
                  color: #06f;
                  width: 15%;
                  margin: 0 auto;
                  font-size: 14px;
                  font-weight: 600;
}

body#business-guide .dokodemo-example{
                  /* background-image: url(/icons/mypage_icon/top_img_bg_feature.png); */
                  background-color: #9cf;
                  width: 100vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  padding: 50px 0;
}

body#business-guide .dokodemo-example-box-list{
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
}

body#business-guide .dokodemo-example-box{
                  border: 2px solid #9cf;
                  background: #FFF;
                  text-align: center;
                  width: 350px;
                  margin-right: 20px;
                  padding: 10px 30px;
}

body#business-guide .hanbai-example{
                  border: 1px solid #06f;
                  border-radius: 5px;
}

body#business-guide .hanbai-example h4{
                  border-bottom: 1px solid #06f;
                  border-radius: 3px 3px 0 0;
                  background: #06f;
                  color: #FFF;
                  margin: 0;
                  padding: 10px 0;
}

body#business-guide .payment{
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  width: 90vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
}

body#business-guide .step_frame p.head_title_white, p.head_title_white{
                  background-color: #FFF;
                  border-radius: 7px;
                  color: #419901;
                  width: 12%;
                  margin: 0 auto;
                  font-size: 14px;
                  font-weight: 600;
}

body#business-guide .example-job-flex{
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
}

body#business-guide .example-job li{
                  border: 2px solid #419901;
                  border-radius: 3px;
                  margin: 10px;
                  text-align: center;
                  padding: 30px;
                  width: 400px;
                  height: 470px;
                  box-shadow: 0 0 8px lightgrey;
}

body#business-guide .example-job h3{
                  font-size: 18px;
                  color: #FFF;
                  background: #419901;
                  border-radius: 5px;
                  margin: 0 auto;
                  text-align: center;
                  font-weight: 400;
}

body#business-guide .example-job h4{
                  color: #419901;
                  margin: 10px 0;
                  text-align: center;
                  font-size: 16px;
                  font-weight: 500;
}

body#business-guide .example-job p{
                  font-size: 16px;
                  text-align: left;
                  font-weight: 200;
}

body#business-guide .business_frame h2.business_guide{
                  border-bottom: none;
                  text-align: center;
                  color: #FFF;
                  /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
                  background-color: #419901;
                  width: 100vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  padding: 20px 0;
                  margin-bottom: 20px;
                  font-size: 20px;
                  font-weight: normal;
}

body#business-guide .pc{
                  display: block;
}

body#business-guide .sp{
                  display: none;
}

body#business-guide img.pc{
                  display: block;
}

body#business-guide img.sp{
                  display: none;
}

body#business-guide ul.features{
                width: 90vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                padding: 0;
}
body#business-guide .features li{
                border: 2px solid #9cf;
                border-radius: 3px;
                margin: 10px;
                text-align: center;
                padding: 30px;
                width: 400px;
                height: 500px;
                box-shadow: 0 0 8px lightgray;
}
body#business-guide .features span{
                font-size: 18px;
                color: #9cf;
                border: 1px solid #9cf;
                border-radius: 5px;
                padding: 3px 30px;
                text-align: center;
}
body#business-guide .features h3{
                color: #09f;
                margin: 30px 0;
                text-align: center;
                font-size: 16px;
                font-weight: 500;
}
body#business-guide .features-flex{
                display: flex;
                flex-direction: row;
                justify-content: center;
}
body#business-guide .features p{
                font-size: 16px;
                text-align: left;
                font-weight: 200;
}

body#business-guide .case_box{
                width:90%; height:450px; vertical-align:middle; background:#FFF; margin:auto; border-radius:5px; box-shadow:0 0 8px lightgray; margin-top:20px;
}

body#business-guide .head_title{
                  text-align: center;
                  background-color: #419901;
                  border-radius: 7px;
                  color: #FFF;
                  width: 15%;
                  margin: 0 auto;
                  margin-top: 10px;
                  font-size: 14px;
                  font-weight: 600;
}

body#business-guide div#whats_api{
                margin: 10px 0 10px 15px;
}

body#business-guide div#whats_api > div{
                 float: left;
                margin-right:10px;
}

body#business-guide div#whats_api > div div{
                width:230px;
                height:300px;
                border:2px #419901 solid;
                background:#fff;
                border-radius: 5px;
}
body#business-guide div#whats_api > div p.yotei{
                color:#ff0000;
                text-align:center;
                margin-top:5px;
}

body#business-guide div#whats_api div div h3{
                text-align:center;
                margin-bottom:20px;
                background: #419901;
                padding: 10px 0;
                border-radius: 3px 3px 0 0;
                color: #FFF;
                font-weight: 400;
                margin: 0 0 20px 0;
}

body#business-guide div#whats_api div > img{
                display:block;
                margin:12px auto;
}
body#business-guide div#whats_api div > p{
                margin:0 10px;
                padding: 15px 0 15px;
}

body#business-guide .api_example{
               background-color: #9cf;
                width: 99vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                padding: 50px 0;
}

body#business-guide .api_example img{
                left: 50%;
                position: absolute;
                top: 40%;
                transform: translate(-50%,-15%);
}

body#business-guide .api_example_box{
                  width: 90%;
                  height: 300px;
                  background: #FFF;
                  margin: auto;
                  border-radius: 5px;
                  box-shadow: 0 0 8px lightgrey;
                  margin-top: 20px;
}

body#business-guide div#whats_apihelp{
                display: flex;
                height: 280px;
                padding: 20px 0 20px 0;
}

body#business-guide div#whats_apihelp > div{
                margin-right:10px;
                width: 50%;
                height: auto;
}

body#business-guide div#whats_apihelp > div div{
                border:2px #419901 solid;
                background:#fff;
                border-radius: 5px;
                height: 260px;
                text-align: center;
}
body#business-guide div#whats_apihelp > div p.yotei{
                color:#ff0000;
                text-align:center;
                margin-top:5px;
}

body#business-guide div#whats_apihelp div div h3{
                text-align:center;
                margin-bottom:20px;
                background: #419901;
                padding: 10px 0;
                border-radius: 3px 3px 0 0;
                color: #FFF;
                font-weight: 400;
                margin: 0 0 20px 0;
}

body#business-guide div#whats_apihelp div > img{
                display:inline-block;
                margin:12px auto;
}
body#business-guide div#whats_apihelp div > p{
                margin:0 10px;
                padding: 15px 0 0;
}

body#business-guide .apihelp_example{
                /* background-image: url(/icons/mypage_icon/top_img_bg_feature.png); */
                width: 99vw;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                padding: 50px 0;
}

body#business-guide .apihelp_example img{
          position: relative;
          top: 20px;
}

body#business-guide .api-option{
                width: 900px;
                margin: 0 auto;
                margin-top: 30px;
                display: flex;
                flex-direction: row;
                border: 2px solid #b0c4de;
                border-radius: 5px;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%,150%);
}

body#business-guide .api-option h3{
                width: 180px;
                background: #b0c4de;
                color: #FFF;
                border-radius: 3px 0 0 3px;
                line-height: 100px;
                margin: 0;
}

body#business-guide .api-option p{
                margin: auto 10px;
                text-align: left;
}

body#business-guide div.exam_option{
                margin-bottom:35px;
}

body#business-guide div.exam_option > img{
                display:block;
                float:left;
}
body#business-guide div.exam_option div{
                float:left;
                margin:15px;
                font-size:16px;
}
body#business-guide div.exam_option div h3{
                margin-bottom:10px;
}

body#business-guide .api_example p.case{
        background-color: #FFF;
        border-radius: 7px;
        color: #000;
        width: 15%;
        margin: 0 auto 20px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
}

body#business-guide .apihelp_example p.case{
                  background-color: #FFF;
                  border-radius: 7px;
                  color: #000;
                  width: 12%;
                  margin: 0 auto 20px;
                  font-size: 14px;
                  font-weight: 600;
                  text-align: center;
}

body#business-guide .apihelp_example{
                  /* background-image: url(/icons/mypage_icon/top_img_bg_feature.png); */
                  background-color: #9cf;
                  width: 100vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  padding: 50px 0;
}

body#business-guide .payment_main{
                  margin-right: 50px;
                  width: 40%;
                  min-width: 0;
                  box-sizing: border-box;
}

body#business-guide .payment_main img{
                  max-width: 100%;
                  height: auto;
                  display: block;
                  margin-left: auto;
                  margin-right: auto;
}

body#business-guide .step_frame img{
                  max-width: 100%;
                  height: auto;
}

body#business-guide .case_box{
                  width: 90%;
                  height: 450px;
                  vertical-align: middle;
                  background: #FFF;
                  margin: auto;
                  border-radius: 5px;
                  box-shadow: 0 0 8px lightgrey;
                  margin-top: 20px;
}


body#business-guide .apihelp_example_box{
                  width: 100%;
                  height: 230px;
                  background: #FFF;
                  margin: auto;
                  border-radius: 5px;
                  box-shadow: 0 0 8px lightgrey;
                  margin-right: 20px;
}
body#business-guide .example-job-flex img{
                  margin: 20px 0;
}

body#business-guide h3.apihelp_extension{
                font-size: 25px;
                font-weight: normal;
                color: #419901;
                border-bottom: none;
                margin: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
}
body#business-guide h3.apihelp_extension:before, h3.apihelp_extension:after{
                border-top: 1px solid;
                content: "";
                width: 12em;
}

body#business-guide .case_1, .case_3{
                width: 960px;
                text-align: center;
                margin: 0 auto;
}
body#business-guide .case_2{
                width: 960px;
                text-align: center;
                margin: 0 auto;
}
body#business-guide .apihelp_flow{
                padding: 0 0 40px 0;
}
body#business-guide .apihelp_value{
                border: 2px solid #419901;
                border-radius: 5px;
                height: 140px;
                width: 700px;
                margin: 0 auto 50px;
}

body#business-guide .apihelp_value span{
                font-size: 50px;
                color: #419901;
                font-weight: 600;
}
body#business-guide .apihelp_value div{
                text-align:center;
                font-weight:400;
                font-size: 20px;
}
body#business-guide .apihelp_value p{
                background-color: #419901;
                border-radius: 5px;
                color: #FFF;
                margin: 20px auto;
                padding: 7px 10%;
                width: 90%;
                font-size: 18px;
                text-align: center;
}
body#business-guide .apihelp_example h3{
                color: #fff;
}
body#business-guide .apihelp_example p.apihelp_example_box{
                background: #fff;
                padding: 30px;
                text-align: left;
                width: 490px;
}
body#business-guide .apihelp_judge{
                  /* background-image: url(/icons/mypage_icon/top_img_bg_feature.png); */
                  background-color: #419901;
                  width: 100vw;
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                  padding: 50px 0;
}
body#business-guide .apihelp_judge img{
                left: 50%;
                position: absolute;
                top: 40%;
                transform: translate(-50%,-15%);
}
body#business-guide .apihelp_judge_box{
                  width: 38%;
                  padding: 20px 20px 20px 20px; 
                  background: #FFF;
                  margin: auto;
                  border-radius: 5px;
                  box-shadow: 0 0 8px lightgrey;
                  text-align: left;
}
body#business-guide .apihelp_judge_box span{
                font-weight:  bold;
                font-size: 1.4em;
                color: #419901;
}
body#business-guide .apihelp_judge p.case{
                  background-color: #FFF;
                  border-radius: 7px;
                  color: #000;
                  width: 15%;
                  margin: 0 auto 20px;
                  font-size: 14px;
                  font-weight: 600;
                  text-align: center;
}
body#business-guide .apihelp_judge h3{
                color: #fff;
}
body#business-guide img.apihelp_banner{
                  margin: 0 0 30px 0;
                 width: 100%;
}

body#business-guide .api-help-boder .under{
                background: linear-gradient(transparent 70%, #fdd0a7 70%);
}
body#business-guide .api-help-boder .api_help_checkbox:before{
                content:url(/img/seichoku/default/api/api_help_checkbox.png);
                padding: 0 10px 0 0;
                width: 20px;/*画像の幅*/
                height: 20px;/*画像の高さ*/
                background-size: contain;
                vertical-align: middle;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body#business-guide .wrapper {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#business-guide .business_box {
        width: 100%;
        box-sizing: border-box;
    }

    body#business-guide .business_frame h2.business_guide {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }

    body#business-guide .business_frame h2.business_guide div {
        margin-left: 0 !important;
    }

    body#business-guide .tab-wrap {
        width: 100%;
        max-width: 980px;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    body#business-guide .tab-label {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        font-size: clamp(10px, 1.2vw, 12px);
        padding: 8px 4px !important;
        white-space: nowrap;
        line-height: 1.3;
        margin-bottom: 0;
        box-sizing: border-box;
        text-align: center;
        order: -1;
    }

    body#business-guide .business_box .tab-label {
        padding: 8px 4px !important;
    }

    body#business-guide .pc {
        display: block;
    }

    body#business-guide .sp {
        display: none;
    }

    body#business-guide img.pc {
        display: block;
    }

    body#business-guide img.sp {
        display: none;
    }

    body#business-guide .tab-content {
        width: 100%;
        flex-basis: 100%;
        order: 0;
    }

    body#business-guide .dokodemo-flexbox,
    body#business-guide .dokodemo-example,
    body#business-guide .api_example,
    body#business-guide .apihelp_example,
    body#business-guide .apihelp_judge,
    body#business-guide ul.features {
        width: 100%;
        left: 0;
        transform: none;
    }

    body#business-guide ul.dokodemo-flexbox-list {
        width: 100%;
        max-width: 980px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body#business-guide .dokodemo-flexbox-list li {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0;
    }

    body#business-guide .dokodemo-flexbox li {
        width: auto;
        height: auto;
        min-height: 280px;
        margin: -80px 8px 0;
    }

    body#business-guide .dokodemo-flexbox-list img {
        max-width: 100%;
        height: auto;
    }

    body#business-guide .features-flex {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    body#business-guide .features li {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        padding: 20px 10px;
        margin: 10px 5px;
    }

    body#business-guide .example-job-flex {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    body#business-guide .example-job li {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        padding: 20px 10px;
    }

    body#business-guide .dokodemo-example-box-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    body#business-guide .dokodemo-example-box {
        width: auto;
        flex: 1 1 280px;
        max-width: 350px;
    }

    body#business-guide .riyou_fee,
    body#business-guide .apihelp_value {
        width: 100%;
        max-width: 700px;
        height: auto;
    }

    body#business-guide .riyou_fee_link {
        width: auto;
        padding: 5px 20px;
    }

    body#business-guide .case_1,
    body#business-guide .case_2,
    body#business-guide .case_3 {
        width: 100%;
        max-width: 960px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body#business-guide .api-option {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 20px auto 0;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
    }

    body#business-guide .apihelp_judge_box {
        width: 60%;
    }

    body#business-guide .apihelp_example p.apihelp_example_box {
        width: 90%;
        max-width: 490px;
    }

    body#business-guide .api_example_box,
    body#business-guide .case_box {
        position: relative;
        width: 90%;
        height: auto;
        padding: 16px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body#business-guide .api_example_box {
        min-height: 0;
    }

    body#business-guide .api_example img {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: 100%;
        width: auto !important;
        height: auto;
        margin: 0 auto;
    }

    body#business-guide .api_example img.pc {
        display: block;
    }

    body#business-guide .api_example img.sp {
        display: none;
    }

    body#business-guide div#whats_api {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 10px auto;
        width: 100%;
    }

    body#business-guide div#whats_api > div {
        float: none;
        flex: 1 1 200px;
        max-width: 250px;
    }

    body#business-guide div#whats_api > div div {
        width: auto;
        height: auto;
    }

    body#business-guide .payment {
        width: 100%;
        left: 0;
        transform: none;
        flex-wrap: wrap;
    }

    body#business-guide .payment_main {
        width: auto;
        flex: 1 1 40%;
        min-width: 0;
        box-sizing: border-box;
    }

    body#business-guide .tab-content img,
    body#business-guide .step_frame img {
        max-width: 100%;
        height: auto;
    }

    body#business-guide .head_title,
    body#business-guide .step_frame p.head_title,
    body#business-guide .dokodemo-example .head_title_bule {
        width: auto;
        min-width: 120px;
        padding: 0 16px;
    }
}

@media screen and (max-width: 767px) {

    body#business-guide .sp{
                    display: block;
    }
    body#business-guide .pc{
                    display: none;
    }

    body#business-guide img.sp{
                    display: block;
    }
    body#business-guide img.pc{
                    display: none;
    }

    body#business-guide ul.features{
                  width: auto;
                  left: auto;
                  transform: translateX(0%);
    }
    body#business-guide .features-flex{
                  display: block;
    }
    body#business-guide .features li{
                  margin: 10px auto;
                  padding: 30px 0;
                  width: 90%;
                  height: auto;
    }
    body#business-guide .features li p{
                  padding: 10px;
    }

    body#business-guide .business_frame h2.business_guide{
                  left: 50%;
    }
    body#business-guide .title.business_guide div,
    body#business-guide .business_frame h2.business_guide div{
                  margin: 0 !important;
                  margin-left: 0 !important;
    }

    body#business-guide #container img{
                    width: 100%;
                    padding: 10px;
    }

    body#business-guide .api_example{
               background-color: #9cf;
                width: 100%;
                position: relative;
                left: 0%;
                transform: translateX(0%);
                padding: 30px 15px;
    }

    body#business-guide #MainSection{
                padding: 0px 0px;
    }

    body#business-guide .api_example p.case{
                width: 30%;
    }
    body#business-guide .api_example img{
                  left: initial;
                  position: relative;
                  top: initial;
                  transform: initial;
                  max-width: 100%;
                  width: auto !important;
                  height: auto;
                  margin: 0 auto;
    }

    body#business-guide .api_example img.pc{
                  display: none;
    }

    body#business-guide .api_example img.sp{
                  display: block;
    }
    body#business-guide .api_example_box,
    body#business-guide .case_box{
                  width: 90%;
                  height: auto;
                  padding: 16px;
                  box-sizing: border-box;
                  overflow: hidden;
    }
    body#business-guide .api_example_box{
                  background: #FFF;
                  margin: auto;
                  border-radius: 5px;
                  box-shadow: 0 0 8px lightgrey;
                  margin-top: 20px;
    }
    body#business-guide .case_box{
                   padding-bottom: 20px;
    }











    body#business-guide .apihelp_example_box{
                  height: auto;
    }

    body#business-guide .apihelp_example img{
                    left: initial;
                    position: relative;
                    top: initial;
                    transform: initial;
    }
    body#business-guide .apihelp_example p{
                    width: 100%;
    }

    body#business-guide .width960{
                    margin: 0 auto;
    }

    body#business-guide .tab-wrap{
                  width: 100%;
                  flex-wrap: wrap;
                  justify-content: center;
    }

    body#business-guide .tab-label{
                  width: 100% !important;
                  max-width: 100%;
                  font-size: 14px;
                  padding: 10px 8px !important;
                  margin-bottom: 10px;
                  box-sizing: border-box;
    }

    body#business-guide .business_box .tab-label{
                  padding: 10px 8px !important;
    }

    body#business-guide .riyou_fee{
                  width: 94%;
                  height: auto;
                  padding: 0px 0 26px;
                 background: #fbefe1;
    }
    body#business-guide .dokodemo-flexbox{
                  background: none;
                  margin-top: 0;
                  width: 100%;
                  left: 0;
                  transform: none;
    }

    body#business-guide .dokodemo-flexbox-list img,
    body#business-guide #api img{
                    max-width: 100%;
                    width: auto;
                    height: auto;
                    display: block;
                    margin: 20px auto;
    }

    body#business-guide .dokodemo-flexbox-list li{
                  width: 90% !important;
                  max-width: 100%;
                  margin: 0 auto 20px auto;
                  height: auto;
                  box-sizing: border-box;
    }

    body#business-guide .dokodemo-flexbox li{
                  width: 90% !important;
                  max-width: 100%;
                  height: auto;
                  margin: 0 auto 20px auto;
                  box-sizing: border-box;
    }

    body#business-guide ul.dokodemo-flexbox-list{
                  width: 100%;
                  display: block;
    }
    body#business-guide .dokodemo-flexbox-list{
                  display: block;
                  height: auto;
    }

    body#business-guide .step_frame p.head_title{
                  width: 35%;
    }

    body#business-guide .dokodemo-example .head_title_bule{
                    width: 30%;
    }

    body#business-guide .dokodemo-example-box{
                    width: 80%;
                    padding: 10px 5%;
                    margin: 0px auto 20px auto;
    }

    body#business-guide .dokodemo-example-box-list{
                    display: block;
    }

    body#business-guide .payment_main{
                    width: 100%;
    }

    body#business-guide .payment{
                  display: block;
    }

    body#business-guide .step_frame p.head_title_white{
                  width: 30%;
                  margin: 0 auto;
    }

    body#business-guide .example-job-flex{
                    display: block;
    }

    body#business-guide .example-job li{
                    width: auto;
                    padding: 15px;
    }

    body#business-guide #container img{
                    width: 100%;
    }

    body#business-guide .tab-content img,
    body#business-guide .step_frame img,
    body#business-guide .payment_main img{
                    max-width: 100%;
                    height: auto;
    }

    body#business-guide .riyou_fee ul a{
                    padding: 5px 15px;
    }

    body#business-guide .head_title{
                    width: 35%;
    }
    body#business-guide .head_title_example{
                    width: 42%;
    }

    body#business-guide a.button_orange, input.button_orange{
                    font-size: 14px;
    }

    body#business-guide div#whats_api{
                    margin: 0 auto 30px auto;
                    width: 100%;
    }

    body#business-guide div#whats_api > div{
                  float:none;
                  margin-right: 0;
    }

    body#business-guide div#whats_api > div div{
                    width: 90%;
                    height: auto;
                    margin: 0 auto 30px auto;
    }

    body#business-guide div#whats_api div > img{
                    width: 70%;
    }

    body#business-guide p.head_title_white{
                    width: 40%;
    }

    body#business-guide .api-option{
                    width: 97%;
                    left: initial;
                    position: relative;
                    top: initial;
                    transform: initial;
                    display: block;
    }

    body#business-guide .api-option h3{
                    width: initial;
                    line-height: 60px;
    }

    body#business-guide .apihelp_example .api-option p{
                    width: 90%;
    }

    body#business-guide .api-option p strong{
                    font-size: 14px;
    }

    body#business-guide .case_box{
                  height: auto;
    }

    body#business-guide img.apihelp_banner{
                  width: 100%;
                  margin: 0 0 30px 0;
    }
    body#business-guide .apihelp_example .case_1, .apihelp_example .case_3{
                  width: 100%;
    }
    body#business-guide .apihelp_example .case_2{
                  width: 100%;
    }
    body#business-guide .apihelp_value{
                  width: 100%;
                  padding: 0 0 14px 0;
                  height: auto;
    }
    body#business-guide h3.apihelp_extension:before, h3.apihelp_extension:after{
                display: none;
    }
    body#business-guide div#whats_apihelp{
                display: block;
    }
    body#business-guide div#whats_apihelp > div{
                width: 100%;
                padding: 0 0 20px 0;
    }
    body#business-guide .apihelp_judge_box{
                width: 80%;
                height: auto;
                padding: 20px 20px 20px 20px;
    }
    body#business-guide .apihelp_example p.case{
                width: 30%;
    }
    body#business-guide .apihelp_judge p.case{
                width: 52%;
    }
    body#business-guide .apihelp_example_box img{
                width: 90%;
                padding: 5%;
    }
    body#business-guide .apihelp_example_box{
                width: 100%;
                margin: 15px 0;
    }
    body#business-guide .apihelp_example_box_right{
                float: none;
                width: 90%;
    }
    body#business-guide .dokodemo-flexbox{
                margin-bottom: 0;
    }
    body#business-guide .apihelp_example .case_1, .apihelp_example .case_2, .apihelp_example .case_3{
                width: 90%;
    }
    body#business-guide div#whats_apihelp{
                height: initial;
    }
    body#business-guide div#whats_apihelp > div div{
                height: auto;
    }
    body#business-guide div#whats_apihelp div > p{
                padding: 15px 0 15px;
    }
    body#business-guide .apihelp_example{
                display: block;
    }
    body#business-guide .apihelp-page p{
                font-size: 16px;
    }
    body#business-guide .riyou_fee ul li{
                  float: none;
                  border-bottom: 1px solid #999;
    }
    body#business-guide .riyou_fee ul{
                  margin: 0px auto 24px;
                  width:90%;
    }
    body#business-guide .riyou_fee_link{
              width: 100%;
              padding: 15px 3%;
              margin: 14px auto 0;
    }



}


/* /user_data/newuser_guide.php */
body#newuser-guide {
        background-image: url(/img/seichoku/default/newuser/pc/backimg.png);
        min-height: 100vh;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 0 361px 0;
        padding: 0;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

body#newuser-guide h1,h2{
        margin: 0;
        padding: 0;
}

body#newuser-guide ul{
      list-style: none;
}

body#newuser-guide .wrapper p{
        margin: 0;
        padding: 0;
        font-size: 18px;
        /* letter-spacing: 0.5px; */
        line-height: 26px;
}

    /* TOP */

body#newuser-guide #top-view{
        width: 980px;
        margin: 0 auto;
        text-align: center;
}

body#newuser-guide #top-view .top-logo img{
        width: 600px;
        margin: 70px auto 0;
}

body#newuser-guide #top-view .top-text h2{
        font-size: 34px;
        margin: 50px auto;
        color: #379339;
        margin: 50px 0;
}

body#newuser-guide #top-view .top-view p{
        line-height: 30px;
}

body#newuser-guide #top-view .top-img{
        margin-top: 70px;
}

body#newuser-guide #top-view .top-img img{
        width: 30%;
}

body#newuser-guide .btn-new{
        width: 600px;
        padding: 10px 0;
        margin: 70px auto;
        border-radius: 5px;
        background: linear-gradient(#ff6600, #ff3300);
        box-shadow: 0 5px #911d00;

}

body#newuser-guide .btn-new:hover{
        opacity: 0.7;
        transition: 0.5s;
}

body#newuser-guide .btn-new a{
        padding: 20px 150px;
        font-size: 24px;
        color: white;
        letter-spacing: 3px;
        text-decoration: none;
}

    /* function */

body#newuser-guide #function{
        width: 980px;
        margin: 70px auto 0;
        text-align: center;
}

body#newuser-guide #function .title-blue{
        background: #1d5eac;
        color: white;
}

body#newuser-guide #function .title-blue h1{
        color: white;
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #function .function-contents{
        background: #c4dafa;
        height: 820px;
}

body#newuser-guide #function .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

body#newuser-guide #function .function-sub-title{
        background: white;
        border: 3px solid #1d5eac;
        width: 600px;
        margin: 0 auto 70px;
        border-radius: 5px;
}

body#newuser-guide #function .function-sub-title h2{
        font-size: 24px;
        color: #1d5eac;
        padding: 10px 0;
}

body#newuser-guide #function .function-contents-box{
        width: 900px;
        height: 337px;
        background: #98c4ea;
        margin: 0 auto 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
}

body#newuser-guide #function .function-contents-box-img{
        width: 157px;
        height: 305px;
        margin: 15px 0;
        background: white;
        border-radius: 5px;
        padding: 10px;
        display: flex;
        flex-direction: column;
}

body#newuser-guide #function .function-contents-box-img img{
        display: block;
        margin: 0 auto;
}

body#newuser-guide #function .function-contents-box-img h3{
        color: #1d5eac;
        font-size: 16px;
}

body#newuser-guide #function .function-contents-box-img p{
        font-size: 13px;
        margin: 16px 0px;
        letter-spacing: 1px;
        line-height: 19px;
}

body#newuser-guide #function .function-contents-box-img-5{
        width: 157px;
        height: 305px;
        margin: 15px 0;
        background: white;
        border-radius: 5px;
        padding: 10px;
        display: flex;
        flex-direction: column;
}

body#newuser-guide #function .function-contents-box-img-5 img{
        display: block;
        margin: 0 auto;
}

body#newuser-guide #function .function-contents-box-img-5 h3{
        color: #1d5eac;
        font-size: 16px;
}

body#newuser-guide #function .function-contents-box-img-5 p{
        font-size: 13px;
        margin: 16px 0px;
        letter-spacing: 1px;
        line-height: 19px;
}

body#newuser-guide .space{
        margin: 28px 0;
}

body#newuser-guide .space-2{
        margin-bottom: 19px;
}

body#newuser-guide .bl1, .bl2{
        border-right: 1px dotted black;
        padding: 0 10px;
}

body#newuser-guide .bl3{
        padding: 0 10px;
}

body#newuser-guide .tyusyaku{
        margin-left: 40px;
}

body#newuser-guide .tyusyaku p{
        text-align: left;
        font-size: 12px;
}

    /* order-flow */

body#newuser-guide #order-flow{
        width: 980px;
        margin: 0 auto;
        text-align: center;
        margin-top: 140px;
}

body#newuser-guide #order-flow .title-green{
        background: #339902;
        color: white;
}

body#newuser-guide #order-flow .title-green h1{
        color: white;
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #order-flow .order-flow-contents{
        background: #dbffdb;
        padding: 70px 0;
}

body#newuser-guide #order-flow .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

body#newuser-guide #order-flow .order-flow-img{
        width: 900px;
        margin: 0 auto;
}

body#newuser-guide #order-flow .order-flow-img img{
        width: 100%;
        display: block;
}

    /* price */

body#newuser-guide #price{
        width: 980px;
        margin: 140px auto 0;
        text-align: center;
}

body#newuser-guide #price .title-green{
        background: #339902;
        color: white;
}

body#newuser-guide #price .title-green h1{
        color: white;
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #price .price-contents{
        background: #dbffdb;
        height: 1980px;
}

body#newuser-guide #price .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

body#newuser-guide #price .price-contents-box{
        width: 900px;
        margin: 0 auto;
}

body#newuser-guide #price .price-contents-box img{
        margin: 20px 0;
        width: 900px;
        display: block;
}

body#newuser-guide #price .price-sub-title{
        width: 200px;
        margin: 0 auto 30px;
        background: #339902;
        border-radius: 5px;
}

body#newuser-guide #price .price-sub-title h2{
        color: white;
        font-size: 20px;
        letter-spacing: 3px;
        font-weight: normal;
        padding: 3px 0;
}

body#newuser-guide #price .sample-img-top{
        margin-bottom: 30px;
}

body#newuser-guide #price .price-contents-text{
        margin: 40px 0;
}

body#newuser-guide #price .price-contents-text span{
        border: 3px solid #c30d23;
        border-radius: 5px;
        background: white;
        color: #c30d23;
        margin-right: 10px;
        padding: 8px;
        font-weight: bold;
        font-size: 25px;
}

body#newuser-guide #price .btn-price{
        width: 600px;
        padding: 10px 0;
        margin: 70px auto;
        border-radius: 5px;
        background: linear-gradient(#c10c23, #89000c);
        box-shadow: 0 5px #540a16;

}

body#newuser-guide #price .btn-price:hover{
        opacity: 0.7;
        transition: 0.5s;
}

body#newuser-guide #price .btn-price a{
        padding: 20px 80px;
        font-size: 24px;
        color: white;
        letter-spacing: 3px;
        text-decoration: none;
}

    /* service */

body#newuser-guide #service{
        width: 980px;
        margin: 140px auto 0;
        text-align: center;
}

body#newuser-guide #service .title-green{
        background: #339902;
        color: white;
}

body#newuser-guide #service .title-green h1{
        color: white;
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #service .service-contents{
        background: #dbffdb;
        height: 995px;
}

body#newuser-guide #service .service-contents img{
        display: block;
        margin: 0 auto;
}

body#newuser-guide #service .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

    /* voice */

body#newuser-guide #voice{
        width: 980px;
        margin: 140px auto 0;
        text-align: center;
}

body#newuser-guide #voice .voice-contents{
        background: #c4dafa;
        height: 950px;
        width: 980px;
        position: relative;
}

body#newuser-guide #voice .icon-manzoku{
        position: absolute;
        top: -130px;
        left: 160px;
}

body#newuser-guide #voice .icon-manzoku img{
        display: block;
}

body#newuser-guide #voice .title-blue{
        background: #1d5eac;
        color: white;
}

body#newuser-guide #voice .title-blue h1{
        color: white;
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #voice .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

body#newuser-guide #voice .twitter-img.pc{
        width: 900px;
        margin: 0 auto 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
}

body#newuser-guide #voice .twitter-img.sp{
        display: none;
}

body#newuser-guide #voice .twitter-img img{
        width: 220px;
        margin-bottom: 20px;
        display: block;
}

body#newuser-guide #voice .voice-sub-title{
        background: white;
        border: 3px solid #1d5eac;
        width: 600px;
        margin: 0 auto;
        border-radius: 5px;
}

body#newuser-guide #voice .voice-sub-title h2{
        font-size: 24px;
        color: #1d5eac;
        padding: 10px 0;
}

    /* faq */

body#newuser-guide #faq-section{
        width: 100%;
        max-width: none;
        margin: 140px 0 -361px 0;
        text-align: center;
        background: #fff;
        padding-bottom: 401px;
}

body#newuser-guide #faq-section .title-green{
        background: #339902;
        color: white;
        width: 980px;
        margin-left: auto;
        margin-right: auto;
}

body#newuser-guide #faq-section .title-green h1{
        padding: 20px 0;
        font-size: 28px;
        letter-spacing: 3px;
        margin: 0;
}

body#newuser-guide #faq-section .faq-contents{
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        background: transparent;
        text-align: left;
        padding-bottom: 0;
}

body#newuser-guide #faq-section .sub-text{
        padding: 70px 0;
        font-size: 18px;
}

body#newuser-guide #faq-section .link{
        margin: 10px 10px auto 0;
        text-align: right;
}

body#newuser-guide #faq-section .link a{
        color: blue;
}

body#newuser-guide #faqmenu_pc{
        display: block;
}

body#newuser-guide #faqmenu_sp{
        display: none;
}

body#newuser-guide div#faq{
        width:980px;
        margin:0 auto;
}

body#newuser-guide div#faq ul#faqmenu_pc{
        margin:15px 0;
}

body#newuser-guide div#faq ul#faqmenu_pc li{
        font-size: 18px;
}

body#newuser-guide .faqmenu-top_pc{
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
}

body#newuser-guide .faqmenu-bottom_pc{
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
}

body#newuser-guide .faqmenu-top_pc a{
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 320px;
        margin: 0 3px 3px 3px;
        text-align: center;
        padding: 20px 40px;
}

body#newuser-guide .faqmenu-bottom_pc a{
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 320px;
        margin: 3px 3px 3px;
        text-align: center;
        padding: 20px 40px;
}

body#newuser-guide .step_frame p{
        text-align: center;
        margin: 10px 0;
        font-size: 18px;
        font-weight: 300;
}

body#newuser-guide .accordion-toggle{
        margin-left: 20px;
        color: black;
        font-size: 18px;
}

body#newuser-guide .haq-box h2{
        font-size: 22px;
}

body#newuser-guide .accordion-inner{
        margin: 5px 70px;
        background: #dbffdb;
        border-radius: 5px;
        padding: 10px;
        font-size: 12px;
        color: #000;
}

body#newuser-guide .accordion-inner p{
        margin: 0;
}

body#newuser-guide .accordion-inner a{
        color: #0376b9;
}

body#newuser-guide .accordion-group{
        border-bottom: 1px dotted #339902;
        padding: 20px 0;
}

body#newuser-guide .table{
        margin: 10px 0 0 0px;
        width: 500px;
        border: 1px solid #ccc;
        border-collapse: collapse;
        text-align: left;
}

body#newuser-guide table, caption, th, td{
        padding: 0;
        border: 0;
        border-spacing: 0px;
        empty-cells: show;
        font-weight: normal;
}

body#newuser-guide table td{
        padding: 8px;
        border: 1px solid #ccc;
}

body#newuser-guide table th{
        padding: 8px;
        border: 1px solid #ccc;
        color: #333;
        background-color: #f0f0f0;
        font-weight: normal;
}

body#newuser-guide .faq-table{
        width: 500px;
}

body#newuser-guide .faq-table-option{
        width: 750px;
}
body#newuser-guide h2.title{
        text-align: center;
        color: #FFF;
        background-color: #419901;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 20px 0;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: normal;
}


body#newuser-guide .oisogi-1{
        width: 100px;
}

body#newuser-guide .oisogi-2{
        width: 500px;
}

body#newuser-guide .oisogi-3{
        width: 150px;
}

body#newuser-guide .faq_menu_renewal{
        display: block;
        border: 5px solid #9cf;
        border-radius: 10px;
        width: 320px;
        margin: 3px;
        text-align: center;
        padding: 20px 40px;
}

body#newuser-guide .accordion-heading span{
        background: orange;
        color: white;
        padding: 6px 8px;
        border-radius: 70px;
        margin-left: 20px;
}

@media screen and (max-width: 480px) {

    body#newuser-guide #faqmenu_pc{
            display: none;
    }

    body#newuser-guide #faqmenu_sp{
            display: none;
    }

    body#newuser-guide div#faq{
            width:100%;
            margin:0 auto;
    }

    body#newuser-guide div#faq h3{
            margin-bottom: 15px;
    }

    body#newuser-guide div#faq ul#faqmenu_sp{
            margin:15px 0;
    }

    body#newuser-guide div#faq ul#faqmenu_sp li{
            display: inline;
            color: #339900;
    }

    body#newuser-guide ul#faqList{
            margin: 10px auto 0;
            width: 95%;
    }

    body#newuser-guide .faqmenu-top_sp{
            display: flex;
            width: 100%;
            margin: 0 auto;
            justify-content: space-between;
    }

    body#newuser-guide .faqmenu-center_sp{
            display: flex;
            width: 100%;
            margin: 0 auto;
            justify-content: space-between;
    }

    body#newuser-guide .faqmenu-bottom_sp{
            display: flex;
            width: 100%;
            margin: 0 auto;
            justify-content: space-between;
    }

    body#newuser-guide .faqmenu-top_sp a{
            display: block;
            border: 5px solid #9cf;
            border-radius: 10px;
            width: 170px;
            height: 100px;
            font-size: 16px;
            text-align: center;
            padding: 20px 10px;
    }

    body#newuser-guide .faqmenu-center_sp a{
            display: block;
            border: 5px solid #9cf;
            border-radius: 10px;
            width: 170px;
            height: 100px;
            font-size: 16px;
            text-align: center;
            padding: 30px 10px;
            margin: 7px 0;
    }

    body#newuser-guide .faqmenu-bottom_sp a{
            display: block;
            border: 5px solid #9cf;
            border-radius: 10px;
            width: 170px;
            height: 100px;
            font-size: 16px;
            text-align: center;
            padding: 20px 10px;
    }

    body#newuser-guide .step_frame p{
            text-align: center;
            margin: 10px 0;
            font-size: 18px;
            font-weight: 300;
    }

    body#newuser-guide .faq-table{
            width: 270px;
            margin: 10px auto;
    }

    body#newuser-guide .faq-table-option{
            width: 275px;
            margin: 10px auto;
    }

    body#newuser-guide .accordion-toggle{
            margin: 0;
    }

    body#newuser-guide .accordion-inner{
            word-wrap: break-word;
            margin: 5px auto;
    }

    body#newuser-guide .oisogi-1{
            width: 20%;
    }

    body#newuser-guide .oisogi-2{
            width: 50%;
    }

    body#newuser-guide .oisogi-3{
            width: 30%;
    }
    body#newuser-guide .yokonaga_v2{
            width: 100%;
    }
}

    /* トップに戻るボタン */

body#newuser-guide #page-top{
        position: fixed;
        right: 10px;
        bottom: 10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        background: #339902;
        color: white;
        padding: 10px;
}

body#newuser-guide i{
        font-style: normal;
}

body#newuser-guide .pc{
      display: block;
}
body#newuser-guide .sp{
      display: none;
}

@media screen and (max-width: 767px) {
    body#newuser-guide {
        width: 100%;
        margin: 0 auto 127px;
    }
    body#newuser-guide::before {
      background-image: url(/img/seichoku/default/newuser/sp/backimg_sp.png);
      background-size: cover;
      background-position: center;
      content: "";
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100vh;
    }
    body#newuser-guide .wrapper p{
        font-size: 14px;
    }
    body#newuser-guide #top-view{
        width: 100%;
    }
    body#newuser-guide #top-view .top-logo img{
        height: auto;
        width: 100%;
    }
    body#newuser-guide #top-view .top-text p{
        text-align: left;
        width: 95%;
        margin: 0 auto;
    }
    body#newuser-guide .btn-new{
        width: 100%;
    }
    body#newuser-guide #function{
        width: 100%;
    }
    body#newuser-guide #function .function-sub-title{
        width: 100%;
    }
    body#newuser-guide #function .function-contents-box{
        width: 100%;
        flex-wrap: wrap;
    }
    body#newuser-guide #function .function-contents-box-img{
        width: 100%;
    }
    body#newuser-guide #function .function-contents-box-img-5{
        width: 100%;
    }
    body#newuser-guide .pd-r-1{
        padding: 15px 7px 7px 15px;
    }
    body#newuser-guide .pd-l-2{
        padding: 15px 15px 7px 7px;
    }
    body#newuser-guide .pd-r-3{
        padding: 7px 7px 0px 15px;
    }
    body#newuser-guide .pd-l-4{
        padding: 7px 15px 0px 7px;
    }
    body#newuser-guide .tyusyaku{
        width: 330px;
        margin: 0 auto 30px;
    }
    body#newuser-guide .tyusyaku p{
        font-size: 11px;
    }
    body#newuser-guide #order-flow{
        width: 100%;
    }
    body#newuser-guide #order-flow .order-flow-img{
        width: 100%;
    }
    body#newuser-guide #price{
        width: 100%;
        margin: 40px auto 0;
        padding-bottom: 30px;
    }
    body#newuser-guide #price .price-contents-box{
        width: 100%;
        display: inline-block;
        margin: 0 auto 40px;
    }
    body#newuser-guide #price .btn-price{
        width: 100%;
    }
    body#newuser-guide #service{
        width: 100%;
        display: inline-block;
        margin: 40px auto 40px; 
    }
    body#newuser-guide #service img{
        width: 100%;       
    }
    body#newuser-guide #service .service-contents{
        padding-bottom: 30px;
    }
    body#newuser-guide #voice{
        width: 100%;
    }
    body#newuser-guide #voice .twitter-img.pc{
        display: none;
    }
    body#newuser-guide #voice .twitter-img.sp{
        display: block;
        width: 100%;
        margin: 0 auto 30px;
    }
    body#newuser-guide #voice .twitter-img img{
        width: 90%;
        margin: 0 auto 20px;
    }

    body#newuser-guide #faq-section{
        width: 100%;
        margin: 60px 0 -127px 0;
        background: #fff;
        padding-bottom: 147px;
    }
    body#newuser-guide #faq-section .title-green{
        width: 100%;
    }
    body#newuser-guide #faq-section .faq-contents{
        width: 100%;
        padding-bottom: 0;
        height: auto;
    }
    body#newuser-guide #faq-section .link{
        width: 90%;
    }
    body#newuser-guide #faq-section .btn-new{
          text-align: center;
    }
    body#newuser-guide ul#faqList{
        padding: 0;
    }
    body#newuser-guide ul#faqList li{
        width: 100%;
    }
    body#newuser-guide #order-flow .order-flow-img img{
        width: 90%;
        height: auto;
        display: inline-block;
    }
}

@media screen and (max-width: 767px) {
    body#newuser-guide .top-logo{
        width: 94%;
        margin: 0 auto;
    }
    body#newuser-guide #top-view .top-img{
        margin-top: 50px;
    }
    body#newuser-guide #top-view .top-img img{
        width: 96%;
        margin-bottom: 10px;
        height: auto;
    }
    body#newuser-guide .btn-new a{
        display: block;
        padding: 0px;
        font-size: 18px;
        letter-spacing: 1px;
        text-align: center;
    }
    body#newuser-guide .btn-new{
        width: 94%;
        margin: 20px auto;
    }
    body#newuser-guide #function{
        margin: 40px auto 0;
    }
    body#newuser-guide .bl1, .bl2{
        border: none;
        width: 50%;
    }
    body#newuser-guide .bl3{
        padding: 15px 15px;
    }
    body#newuser-guide #function .function-contents-box-img{
        margin: 0;
        padding: 0;
        height: 320px;
    }
    body#newuser-guide #function .function-contents-box-img-5{
        margin: 0;
        padding: 0;
        height: 260px;
    }
    body#newuser-guide #function .function-contents-box{
        width: 90%;
        height: auto;
    }
    body#newuser-guide #function .function-contents{
        height: auto;
        display: inline-block;
        padding: 0 auto 20px 0;
        margin: 0 auto 30px 0;
    }
    body#newuser-guide #function .function-sub-title{
        width: 90%;
        margin-bottom: 30px;
    }
    body#newuser-guide #voice .voice-sub-title{
        width: 90%;
    }
    body#newuser-guide #order-flow{
        margin: 0;
    }
    body#newuser-guide #order-flow .order-flow-contents{
        padding: 30px 0;
    }
    body#newuser-guide #function .function-sub-title h2{
        font-size: 18px;
    }
    body#newuser-guide #function .sub-text{
        padding: 30px 20px;
        text-align: left;
    }
    body#newuser-guide #price .sub-text{
        padding: 30px 20px;
        text-align: left;
    }
    body#newuser-guide #price .price-contents-box img{
        width: 90%;
        height: auto;
        display: inline-block;
    }
    body#newuser-guide #service .service-contents{
        height: auto;
    }
    body#newuser-guide #service .sub-text{
        padding: 30px 20px;
        text-align: left;
    }
    body#newuser-guide #service .service-contents-img{
          width: 90%;
          margin: 0 auto;
    }
    body#newuser-guide #price .price-contents{
        height: auto;
    }
    body#newuser-guide #price .price-contents-text{
        margin: 0px auto 10px;
    }
    body#newuser-guide #price .price-contents-text span{
        margin-bottom: 10px;
        font-size: 20px;
    }
    body#newuser-guide .price-contents-text p{
        line-height: 300%;
        margin-bottom: 0;
    }
    body#newuser-guide #price .btn-price{
        width: 90%;
        margin: 0 auto;
    }
    body#newuser-guide #price .btn-price a{
        font-size: 18px;
        padding: 20px 4px;
    }
    body#newuser-guide #voice .sub-text{
        padding: 30px 20px;
        text-align: left;
    }
    body#newuser-guide #voice{
        margin: 20px auto 0;
    }
    body#newuser-guide #voice .voice-contents{
        width: 100%;
        height: auto;
        padding-bottom: 30px;
    }
    body#newuser-guide #voice .voice-sub-title h2{
        font-size: 17px;
    }
    body#newuser-guide .faq-box{
        padding: 0px 15px;;
    }
    body#newuser-guide .faq-box h2{
          font-size: 22px;
    }
    body#newuser-guide .accordion-heading{
        padding-left: 3em;
        text-indent: -4.5em;
    }
    body#newuser-guide .accordion-heading span{
        margin-right: 10px;
    }
    body#newuser-guide ul{
        list-style: none;
    }
    body#newuser-guide #function  .title-blue h1{
        font-size: 24px;
        padding: 20px ;
    }
    body#newuser-guide #function  .title-green h1{
        font-size: 24px;
        padding: 20px ;
    }
    body#newuser-guide #service .service-contents img{
        width: 100%;
        height: auto;
    }
    body#newuser-guide #function .function-contents-box-img p{
          font-size: 12px;
          margin: 16px 10px ;
    }
    body#newuser-guide #function .function-contents-box-img-5 p{
          font-size: 12px;
          margin: 16px 10px ;
    }
    body#newuser-guide .pc{
        display: none;
    }
    body#newuser-guide .sp{
        display: block;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body#newuser-guide #top-view,
    body#newuser-guide #function,
    body#newuser-guide #order-flow,
    body#newuser-guide #price,
    body#newuser-guide #service,
    body#newuser-guide #voice {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#newuser-guide #top-view .top-logo img {
        width: 100%;
        max-width: 600px;
        height: auto;
    }

    body#newuser-guide .btn-new,
    body#newuser-guide #price .btn-price {
        width: 100%;
        max-width: 600px;
        box-sizing: border-box;
    }

    body#newuser-guide #function .function-contents,
    body#newuser-guide #price .price-contents,
    body#newuser-guide #service .service-contents,
    body#newuser-guide #voice .voice-contents {
        height: auto;
    }

    body#newuser-guide #function .function-sub-title,
    body#newuser-guide #voice .voice-sub-title {
        width: 100%;
        max-width: 600px;
        box-sizing: border-box;
    }

    body#newuser-guide #function .function-contents-box {
        width: 100%;
        max-width: 900px;
        height: auto;
        min-height: 337px;
        padding: 10px;
        box-sizing: border-box;
    }

    body#newuser-guide #function .function-contents-box-img,
    body#newuser-guide #function .function-contents-box-img-5 {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: auto;
        min-height: 305px;
        padding: 8px;
        box-sizing: border-box;
    }

    body#newuser-guide #function .function-contents-box-img p,
    body#newuser-guide #function .function-contents-box-img-5 p {
        font-size: 11px;
        letter-spacing: 0;
    }

    body#newuser-guide .tyusyaku {
        width: 100%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    body#newuser-guide #order-flow .order-flow-img,
    body#newuser-guide #price .price-contents-box,
    body#newuser-guide #service .service-contents-img {
        width: 100%;
        max-width: 900px;
        box-sizing: border-box;
    }

    body#newuser-guide #price .price-contents-box img,
    body#newuser-guide #service .service-contents img {
        width: 100%;
        max-width: 900px;
        height: auto;
    }

    body#newuser-guide #voice .voice-contents {
        width: 100%;
    }

    body#newuser-guide #voice .icon-manzoku {
        left: 50%;
        transform: translateX(-50%);
    }

    body#newuser-guide #voice .twitter-img.pc {
        width: 100%;
        max-width: 900px;
    }

    body#newuser-guide #voice .twitter-img img {
        width: calc(25% - 15px);
        max-width: 220px;
    }

    body#newuser-guide #faq-section .title-green,
    body#newuser-guide #faq-section .faq-contents,
    body#newuser-guide div#faq {
        width: 100%;
        max-width: 980px;
        box-sizing: border-box;
    }
}


/* /user_data/guide.php */
body#guide .wrapper {
    width: 980px;
    margin: 0 auto;
}

body#guide h2.title {
    border-bottom: none;
    text-align: center;
    color: #FFF;
    /* background-image: url("/icons/mypage_icon/top_img_bg_about.png"); */
    background-color: #419901;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
}

      /* ガイドメニュー関連 */
body#guide .guide-menu-item{
        width: 310px;
        text-align: center;
        padding: 10px 0px;
        margin-right: 0;
        box-sizing: border-box;
}

      /* コースボックス関連（ガイド系ページ共通） */
body#guide .course-box-margin,
body#guide-huyou .course-box-margin,
body#guide-jidou .course-box-margin,
body#guide-sakusei .course-box-margin{
        margin: -80px 10px 0;
}

body#guide .course-image,
body#guide-huyou .course-image,
body#guide-jidou .course-image,
body#guide-sakusei .course-image{
        margin: 7px auto;
        width: 50%;
}

body#guide .white-link,
body#guide-huyou .white-link,
body#guide-jidou .white-link,
body#guide-sakusei .white-link{
        color: white;
}

      /* テーブルセル関連 */
body#guide .cell-width-20{ width: 20%; }
body#guide .cell-width-22{ width: 22%; }
body#guide .cell-width-25, body#guide .width-25-percent{ width: 25%; }
body#guide .cell-width-28{ width: 28%; }
body#guide .cell-width-30, body#guide .width-30-percent{ width: 30%; }

      /* コース比較テーブル内でのセル幅指定（より詳細度を上げる） */
body#guide table#course_hikaku td.cell-width-25{ width: 25%; }
body#guide table#course_case th.cell-width-20{ width: 20%; }
body#guide table#course_case th.cell-width-30{ width: 30%; }
body#guide table#course_case td.cell-width-20{ width: 20%; }
body#guide table#course_case td.cell-width-30{ width: 30%; }

      /* タグスタイル関連
       * ガイド系ページ共通（/user_data/guide.php と各コース詳細ページ）
       */
body#guide .tag-style,
body#guide-pdf .tag-style,
body#guide-huyou .tag-style,
body#guide-jidou .tag-style,
body#guide-sakusei .tag-style{
        border-radius: 6px;
        color: #FFF;
        margin: 3px;
}

body#guide .tag-style-black,
body#guide-pdf .tag-style-black,
body#guide-huyou .tag-style-black,
body#guide-jidou .tag-style-black,
body#guide-sakusei .tag-style-black{
        background-color: #333;
        border: 2px solid #333;
}

body#guide .tag-style-orange,
body#guide-pdf .tag-style-orange,
body#guide-huyou .tag-style-orange,
body#guide-jidou .tag-style-orange,
body#guide-sakusei .tag-style-orange{
        background-color: #ff8c00;
        border: 2px solid #ff8c00;
}

body#guide .tag-style-blue,
body#guide-pdf .tag-style-blue,
body#guide-huyou .tag-style-blue,
body#guide-jidou .tag-style-blue,
body#guide-sakusei .tag-style-blue{
        background-color: #00f;
        border: 2px solid #00f;
}

body#guide .tag-style-green,
body#guide-pdf .tag-style-green,
body#guide-huyou .tag-style-green,
body#guide-jidou .tag-style-green,
body#guide-sakusei .tag-style-green{
        background-color: #006700;
        border: 2px solid #006700;
}

body#guide .tag-style-red,
body#guide-pdf .tag-style-red,
body#guide-huyou .tag-style-red,
body#guide-jidou .tag-style-red,
body#guide-sakusei .tag-style-red{
        background-color: #00f;
        border: 2px solid #00f;
}

      /* ステップ表示関連 */
body#guide .step-title{
        font-size: 18px;
        border: 2px solid #419901;
        border-radius: 6px;
        background-color: #419901;
        color: #FFF;
        text-align: center;
        width: 110px;
        margin: 0 auto;
}

body#guide .guide-title{
        font-size: 25px;
        color: #419901;
        text-align: center;
        margin-top: 10px;
}

      /* 画像関連 */
body#guide .guide-image, .guide-image-full, .title-image, .no-border{
        border: none;
        margin: 0 0 20px;
        padding: 0;
}

body#guide .guide-image-full{
        width: 100%;
}

      /* タブ関連 */
body#guide .tab-item{
        padding: 5px 15px;
        font-size: 16px;
}

body#guide .tab-item-left{
        margin-right: 19px;
}

body#guide .tab-icon{
        width: 25%;
        padding-right: 10px;
}

      /* 段落関連 */
body#guide .yokonaga-text{
        font-size: 16px;
}

      /* マージン関連のクラスをまとめて定義 */
body#guide .margin-top-10, .margin-10-0-0{ margin-top: 10px; }
body#guide .margin-top-20{ margin-top: 20px; }

      /* ノート関連 */
body#guide .red-note, .image-note{
        margin: 0 20px 30px;
        border-style: solid;
}
body#guide .red-note{
        border: 1px solid #F22B2B;
        padding: 10px;
}
body#guide .image-note{
        border: 7px solid #ffc107;
        padding: 20px;
}

body#guide .image-note-small{
        margin: 0 20px;
}

body#guide .highlight-bg{
        background: #f9dbdf;
        line-height: 2em;
}

      /* フレックスボックス関連 */
body#guide .guide-flexbox-full{
        background: none;
        width: 100%;
}

body#guide .adobe-box{
        height: 85px;
}

body#guide .note-box{
        border: 1px dotted #333;
        padding: 10px;
        margin: 10px 0 20px 0;
        font-size: 14px;
        background: #fff;
}

body#guide .text-center{
        text-align: center;
}


body#guide .underline{
        text-decoration: underline;
}

body#guide .red-underline-text{
        color: red;
        font-size: 14px;
        text-decoration: underline;
}

body#guide .margin-bottom-10{ margin-bottom: 10px; }

body#guide .margin-top-30, .guide_flexbox{ margin-top: 30px; }
body#guide .margin-top-40{ margin-top: 40px; }
body#guide .margin-top-minus-10{ margin-top: -10px; }
body#guide .margin-top-minus-20{ margin-top: -20px; }
body#guide .margin-left-20{ margin-left: 20px; }
body#guide .margin-20-0-0-20{ margin: 20px 0 0 20px; }
body#guide .margin-10-20-0{ margin: 10px 20px 0; }
body#guide .margin-0-0-20, .margin-0-0-20-red{ margin: 0 0 20px; }

body#guide .clear-margin-top-60{
        clear: both;
        margin-top: 60px;
}

body#guide .margin-bottom-20-font-weight-700{
        margin-bottom: 20px;
        font-weight: 700;
}

      /* ドット枠関連 */
body#guide .dotted-border, .note-box{
        border: 1px dotted;
        padding: 10px;
        margin: 10px 0 20px 0;
}
body#guide .dotted-border{
        border-color: #999;
        margin: 10px 20px;
}
body#guide .note-box{
        border-color: #333;
        font-size: 14px;
        background: #fff;
}

body#guide .max-width-600{
        max-width: 600px;
}

body#guide .pdf-note{
        border: 3px dotted #cccccc;
        padding: 20px;
        background: #fafafa;
}

body#guide .no-padding{ padding: 0; }

body#guide .margin-0-20{ margin: 0 20px; }

      /* フォントサイズ関連のクラスをまとめて定義 */
body#guide .small-font,
body#guide-pdf .small-font,
body#guide-huyou .small-font,
body#guide-jidou .small-font,
body#guide-sakusei .small-font,
.size-box{
        font-size: 13px;
}

body#guide .extra-small-font,
body#guide-pdf .extra-small-font,
body#guide-huyou .extra-small-font,
body#guide-jidou .extra-small-font,
body#guide-sakusei .extra-small-font{
        font-size: 11px;
}
body#guide .super-text{
        vertical-align: super;
        font-size: 12px;
}

body#guide .no-margin-bottom{ margin-bottom: 0; }
body#guide .no-margin, .no-margin-table{ margin: 0; }

body#guide .calculation-note{
        margin: 5px 0 20px;
        font-weight: bold;
        font-size: 14px;
}

body#guide .calculation-form{
        background: #fbfeff;
        padding: 20px 0px;
        margin-top: 0px;
        border: 2px solid #ccc;
}




body#guide .calculation-button{ padding: 5px; }

      /* 幅関連のクラスをまとめて定義 */
body#guide .width-270{ width: 270px; }
body#guide .width-160{ width: 160px; }

body#guide .blue-text, .link{ color: #00a9df; }
body#guide .no-right-border{ border-right: none; }

body#guide .float-left{ float: left; }
body#guide .margin-bottom-140{ margin-bottom: 140px; }
body#guide .clear-both{ clear: both; }

body#guide .size-box{ margin: 10px 0 0 20px; }

body#guide .border-top{ border-top: solid 1px #ccc; }

body#guide .preparation-note{
        background: cornsilk;
        padding: 5px 10px;
        margin-bottom: 20px;
}

body#guide li{
        list-style: none;
}
body#guide ul.guide_menu{
        padding: 20px 0 0 0;
        display: flex;
        margin-bottom: 0px;
        justify-content: space-between;
        width: 980px;
        margin: 0 auto;
        gap: 20px;

}
body#guide .table_wrap{
        margin-top: 50px;
}
body#guide .guide_menu_active{
        background: #419901;
        color: #fff;
}
body#guide .guide_menu a{
        text-decoration: none;
}
body#guide .guide_menu a:hover{
        opacity: 0.7;
}

/* Guide sub pages share the same basic layout as /user_data/guide.php */
body#guide-pdf li,
body#guide-huyou li,
body#guide-jidou li,
body#guide-sakusei li {
    list-style: none;
}

body#guide-pdf ul.guide_menu,
body#guide-huyou ul.guide_menu,
body#guide-jidou ul.guide_menu,
body#guide-sakusei ul.guide_menu {
    padding: 20px 0 0 0;
    display: flex;
    margin-bottom: 0;
    justify-content: space-between;
    width: 980px;
    margin: 0 auto;
    gap: 20px;
}

body#guide-pdf .guide_menu .tab-label,
body#guide-huyou .guide_menu .tab-label,
body#guide-jidou .guide_menu .tab-label,
body#guide-sakusei .guide_menu .tab-label {
    width: 314px;
    text-align: center;
    padding: 10px 0px;
    box-sizing: border-box;
}

body#guide-making .table_wrap,
body#guide-pdf .table_wrap,
body#guide-huyou .table_wrap,
body#guide-jidou .table_wrap,
body#guide-sakusei .table_wrap {
    margin-top: 50px;
}

body#guide-pdf .guide_menu_active,
body#guide-huyou .guide_menu_active,
body#guide-jidou .guide_menu_active,
body#guide-sakusei .guide_menu_active {
    background: #419901;
    color: #fff;
}

body#guide-pdf .guide_menu a,
body#guide-huyou .guide_menu a,
body#guide-jidou .guide_menu a,
body#guide-sakusei .guide_menu a {
    text-decoration: none;
}

body#guide-pdf .guide_menu a:hover,
body#guide-huyou .guide_menu a:hover,
body#guide-jidou .guide_menu a:hover,
body#guide-sakusei .guide_menu a:hover {
    opacity: 0.7;
}

body#guide .marginbottom110{
        margin-bottom: 110px;
}

body#guide .guide_frame h2{
        border-bottom: none;
        text-align: center;
        color: #FFF;
        /* background-image: url("/icons/mypage_icon/top_img_bg_about.png"); */
        background-color: #419901;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 20px 0;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: normal;
}

body#guide-pdf .guide_frame h2,
body#guide-huyou .guide_frame h2,
body#guide-jidou .guide_frame h2,
body#guide-sakusei .guide_frame h2 {
        border-bottom: none;
        text-align: center;
        color: #FFF;
        background-color: #419901;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding: 20px 0;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: normal;
}

      /* フレックスボックス共通スタイル */
body#guide .guide_flexbox, .guide_flexbox_top{
        /* background-image: url(/icons/mypage_icon/top_img_bg_about.png); */
        background-color: #419901;
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100px 100px;
        display: flex;
        justify-content: space-around;
}
body#guide .guide_flexbox{ margin-top: 30px; }
body#guide .guide_flexbox_top{ margin-top: 130px; }

body#guide .tab-wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 980px;
        margin: 0 auto;

}

body#guide .tab-label{
        font-size: 16px;
        color: #419901;
        background: #FFF;
        border: 2px solid #419901;
        border-radius: 3px;
        padding: 10px 0px;
        order: -1;
        /* margin-bottom: 30px; */
        width: 314px;
        text-align: center;
}

body#guide .guide-tab-wrap{
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
        width: 90vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
}
body#guide .tab-content{
        width: 100%;
}
      /* ラジオボタン非表示 */

body#guide .tab-switch{ display: none; }

body#guide .guide_frame{
        position: relative;
        background-color: #fff;
        width: 980px;
        left: 0px;
        margin: 0px auto 100px auto;
}

body#guide-pdf .guide_frame,
body#guide-huyou .guide_frame,
body#guide-jidou .guide_frame,
body#guide-sakusei .guide_frame {
        position: relative;
        background-color: #fff;
        width: 980px;
        left: 0;
        margin: 0 auto 100px auto;
}

body#guide .guide_frame h3{
        font-size: 25px;
        font-weight: normal;
        color: #419901;
        border-bottom: none;
        margin: 20px 0;
        padding: 29px 0;
        display: flex;
        align-items: center;
        /* 垂直中心 */
        justify-content: center;
        /* 水平中心 */
        white-space: nowrap; /* テキストの折り返しを防ぐ */
        flex-wrap: nowrap;
}

body#guide-pdf .guide_frame h3,
body#guide-huyou .guide_frame h3,
body#guide-jidou .guide_frame h3,
body#guide-sakusei .guide_frame h3 {
        font-size: 25px;
        font-weight: normal;
        color: #419901;
        border-bottom: none;
        margin: 20px 0;
        padding: 29px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        flex-wrap: nowrap;
}

      .guide_frame h3:before,
body#guide .guide_frame h3:after{
        border-top: 1px solid;
        content: "";
        width: 16em; /* 線の長さ */
}

body#guide .guide_frame h3:before{
        margin-right: 1em; /* 文字の右隣 */
}

body#guide .guide_frame h3:after{
        margin-left: 1em; /* 文字の左隣 */
}



body#guide .guide_frame p{
        font-size: 16px;
        line-height: 1.6em;
}

body#guide-pdf .guide_frame p,
body#guide-huyou .guide_frame p,
body#guide-jidou .guide_frame p,
body#guide-sakusei .guide_frame p {
        font-size: 16px;
        line-height: 1.6em;
}

body#guide .course-box,
body#guide-huyou .course-box,
body#guide-jidou .course-box,
body#guide-sakusei .course-box{
        border: 1px solid #419901;
        border-radius: 5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        background: #FFF;
}

body#guide .course-box h4,
body#guide-huyou .course-box h4,
body#guide-jidou .course-box h4,
body#guide-sakusei .course-box h4{
        background: #419901;
        padding: 10px 0;
        margin: 0;
        color: #FFF;
        border-radius: 4px 4px 0 0;
        border:2px #fff;
}

body#guide .course-box p,
body#guide-huyou .course-box p,
body#guide-jidou .course-box p,
body#guide-sakusei .course-box p{
        margin: 10px 0;
        color: #419901;
        font-size: 14px;
}

body#guide .course-box img,
body#guide-huyou .course-box img,
body#guide-jidou .course-box img,
body#guide-sakusei .course-box img{
        text-align: center;
}

body#guide .course-box-action a,
body#guide-huyou .course-box-action a,
body#guide-jidou .course-box-action a,
body#guide-sakusei .course-box-action a{
        width: 100px;
        text-align: center;
        margin: 0 10px 0 auto ;
        border: 2px solid #419901;
        border-radius: 5px;
        background: #419901;
        color: #FFF;
        text-decoration-line: none;
}

body#guide .course-box-action a:hover,
body#guide-huyou .course-box-action a:hover,
body#guide-jidou .course-box-action a:hover,
body#guide-sakusei .course-box-action a:hover{
        color: #FFF;
        opacity: 0.7;
}

body#guide .next-step,
body#guide-huyou .next-step,
body#guide-jidou .next-step,
body#guide-sakusei .next-step{
        margin: 20px 7px;
}

body#guide .next-step a,
body#guide-huyou .next-step a,
body#guide-jidou .next-step a,
body#guide-sakusei .next-step a{
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 123px;
        margin: 0;
        border: 2px solid #ff8c00;
        border-radius: 5px;
        background: #ff8c00;
        color: #FFF;
        text-decoration-line: none;
}

body#guide .next-step a:hover,
body#guide-huyou .next-step a:hover,
body#guide-jidou .next-step a:hover,
body#guide-sakusei .next-step a:hover{
        color: #FFF;
        opacity: 0.7;
}
      /* ガイド（大） */

body#guide .guide-tab-wrap{
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
}

body#guide .guide-tab-wrap:after{
        content: '';
        width: 100%;
        height: 1px;
        background: #419901;
        display: block;
        order: -1;
}

body#guide .guide-tab-label{
        background: #FFF;
        margin-bottom: 0;
        font-weight: bold;
        white-space: nowrap;
        text-align: center;
        padding: 10px .5em;
        order: -1;
        position: relative;
        z-index: 1;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
        flex: 1;
        color: #419901;
        border-top: 2px solid #419901;
        border-left: 2px solid #419901;
        border-right: 2px solid #419901;
}

body#guide .guide-tab-label:not(:last-of-type){
        margin-right: 20px;
        margin-bottom: 0;
}

body#guide .guide-tab-content{
        width: 100%;
        height: 0;
        overflow: hidden;
        opacity: 0;
        border: 2px solid #419901;
        margin-top: -4px;
}
      /* アクティブなタブ */

body#guide .guide-tab-switch:checked+.guide-tab-label{
        background: #419901;
        color: #FFF;
        margin-bottom: 0;
}

body#guide .guide-tab-switch:checked+.guide-tab-label+.guide-tab-content{
        height: auto;
        overflow: auto;
        padding: 15px;
        opacity: 1;
        transition: .5s opacity;
        border: 2px solid #419901;
        margin-top: 0px;
}
      /* ラジオボタン非表示 */

      /* ガイド（ソフト選択本文作成・入稿） */

      /* タブラップ共通スタイル */
body#guide .soft-tab-wrap, .hyoushi-soft-tab-wrap{
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
}

      /* タブラベル共通スタイル */
body#guide .soft-tab-label, .hyoushi-soft-tab-label{
        color: #419901;
        background: #FFF;
        font-weight: bold;
        white-space: nowrap;
        text-align: center;
        padding: 10px .5em;
        order: -1;
        position: relative;
        z-index: 1;
        cursor: pointer;
        border: 2px solid #419901;
        border-radius: 5px;
        flex: 1;
}
body#guide .soft-tab-label:not(:last-of-type), .hyoushi-soft-tab-label:not(:last-of-type){
        margin-right: 5px;
}

      /* タブコンテンツ共通スタイル */
body#guide .soft-tab-content, .hyoushi-soft-tab-content{
        width: 100%;
        height: 0;
        overflow: hidden;
        opacity: 0;
}
      /* アクティブなタブ */

      /* アクティブなタブ共通スタイル */
body#guide .soft-tab-switch:checked+.soft-tab-label, .hyoushi-soft-tab-switch:checked+.hyoushi-soft-tab-label{
        background: #419901;
        color: #FFF;
}

body#guide .soft-tab-switch:checked+.soft-tab-label+.soft-tab-content, .hyoushi-soft-tab-switch:checked+.hyoushi-soft-tab-label+.hyoushi-soft-tab-content{
        height: auto;
        overflow: clip;
        padding: 15px;
        opacity: 1;
        transition: .5s opacity;
}
      /* ラジオボタン非表示 */

      /* ガイド（ソフト選択表紙作成） */

      /* アクティブなタブ */

      /* ラジオボタン非表示 */



body#guide .guide_tab{
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
}

body#guide .guide_tab li{
        background: #ccc;
        width: 49%;
        padding: 15px 25px;
        float: left;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        box-sizing: border-box;
}

      .guide_tab li#hasi_yes_tab,
body#guide .guide_tab li#hasi_no_tab{
        font-size: 18px;
}

      .guide_tab li#hasi_yes_tab:hover:not(.select),
body#guide .guide_tab li#hasi_no_tab:hover:not(.select){
        background: #00a9df;
        opacity: 0.5;
        color: #fff;
}

body#guide .guide_tab li.select{
        background: #00a9df;
        color: #fff;
        font-weight: 700;
}

body#guide .selected img{
        border: 2px solid #359903;
        border-radius: 6px;
}

body#guide .link{ cursor: pointer; }

body#guide .guide_tab_content{
        border: 1px dotted #aaa;
}

body#guide .guide_tab_content li{
        background: #fdfdfd;
        padding: 20px;
}

body#guide .guide_tab_hide{
        display: none;
}

body#guide .coverauto_guide_tab{
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
}

body#guide .coverauto_guide_tab li{
        background: #ccc;
        padding: 10px 10px;
        float: left;
        width: 49%;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        box-sizing: border-box;
}

      .coverauto_guide_tab li#coverauto_hasi_yes_tab,
body#guide .coverauto_guide_tab li#coverauto_hasi_no_tab{
        font-size: 18px;
}

      .coverauto_guide_tab li#coverauto_hasi_yes_tab:hover:not(.coverauto_select),
body#guide .coverauto_guide_tab li#coverauto_hasi_no_tab:hover:not(.coverauto_select){
        background: #00a9df;
        opacity: 0.5;
        color: #fff;
}

body#guide .coverauto_guide_tab li.coverauto_select{
        background: #00a9df;
        color: #fff;
        font-weight: 700;
}
body#guide .coverauto_guide_tab_content{
        border: 1px dotted #aaa;
}

body#guide .coverauto_guide_tab_content li{
        background: #fdfdfd;
        padding: 20px;
}

body#guide .coverauto_guide_tab_hide{
        display: none;
}





body#guide .word_guide_tab{
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
}

body#guide .word_guide_tab li{
        background: #ccc;
        padding: 10px 10px;
        float: left;
        width: 49%;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        text-align: center;
        display: flex;
        align-items: center;
        box-sizing: border-box;
}

      .word_guide_tab li#word_hasi_yes_tab,
body#guide .word_guide_tab li#word_hasi_no_tab{
        font-size: 18px;
}

      .word_guide_tab li#word_hasi_yes_tab:hover:not(.word_select),
body#guide .word_guide_tab li#word_hasi_no_tab:hover:not(.word_select){
        background: #00a9df;
        opacity: 0.5;
        color: #fff;
}

body#guide .word_guide_tab li.word_select{
        background: #00a9df;
        color: #fff;
        font-weight: 700;
}


      /*以下つかっていない？*/

body#guide #container .guide_frame img{
        margin: 7px auto;
}


      /* .word_have_abode_yes_cont_coverauto {
        display: none;
}

body#guide .word_have_abode_no_cont_coverauto{
        display: none;
}

body#guide .guide_box_abode{
        padding: 30px 0px;
        border: 2px solid #00a9df;
        border-radius: 5px;
        background: #ffffff;
        text-align: center;
}

body#guide .guide_box_abode:hover:not(.selected){
        background: #00a9df;
        color: #fff;
}

body#guide .guide_flexbox .selected{
        background: #f8feff;
        font-weight: bold;
}


body#guide .guide_page_note{
        border: 1px dotted #999;
        padding: 10px;
        /* margin-left: 20px; */
        margin-bottom: 20px;
        clear: both;
        background: #fff;
}

.musen_note p,
body#guide .nakatoji_note p{
        float: left;
        font-size: 13px;
        padding: 20px 20px 20px 10px;
        line-height: 1.8em;
        padding-left: 10px;
        width: 570px;
}

body#guide .guide_frame img.non{
        padding: 0;
        border: none;
        margin: 0;
}

      .guide_musen_push,
body#guide .guide_nakatoji_push{
        font-weight: bold;
        font-size: 14px;
        line-height: 2em;
        color: #00a9df;
        cursor: pointer;
}

body#guide table.pdf_detail_table{
        table-layout: fixed;
}

body#guide-pdf table.pdf_detail_table{
        table-layout: fixed;
}

body#guide h5.guide_midahi,
body#guide-pdf h5.guide_midahi,
body#guide-huyou h5.guide_midahi,
body#guide-jidou h5.guide_midahi,
body#guide-sakusei h5.guide_midahi{
        color: #419901;
        border-bottom: 1px solid rgba(65, 153, 1, 0.2); /* ←ここが透明な緑 */
        font-size: 18px;
        font-weight: normal;
        padding-bottom: 8px;              /* ←ここが余白 */
}


@media screen and (max-width: 480px) {
    body#guide .last td:last-child{
          border-bottom: solid 1px #ccc;
          width: 100%;
    }
    body#guide .marginbottom110{
          margin-bottom: 0;
    }
    body#guide .marginbottom60{
          margin-bottom: 0;
    }
    body#guide .pdf_detail_table,
    body#guide-pdf .pdf_detail_table{
          width: 80%;
    }
        .pdf_detail_table th,
    body#guide .pdf_detail_table td,
    body#guide-pdf .pdf_detail_table td{
          border-bottom: none;
          display: block;
          /* width: 94%; */
    }
    }
/* ===============================
 * guide-pdf page specific detail layout
 * =============================== */
/* NOTE: guide-pdf specific styles have been moved to guide-pdf.css */
      /*step1のページ改造*/



    body#guide .align-left{
        display: block; /* インラインじゃtext-align効かないので */
        text-align: left;
    }


    body#guide #hikaku_open{
        color: blue;
        cursor: pointer;
    }

    body#guide #hikaku_open_title{
        margin: 30px auto 20px;
        font-size: 18px;
        text-align: center;
    }
      /*用紙比較*/

    body#guide div#papercompare{
        max-width: 1200px;
        margin: 0 auto;
    }

    body#guide div#papercompare td.title{
        width: 200px;
    }
      /*綴じ方の説明図*/

    body#guide a.imghover:hover{
        position: relative;
        text-decoration: none;
    }

    body#guide a.imghover span{
        display: none;
        position: absolute;
        top: 23px;
        left: -250px;
    }

    body#guide a.imghover:hover span{
        border: 7px solid #efefef;
        display: block;
        z-index: 10;
        border-radius: 10px;
    }

    body#guide .yokonaga_push{
        color: #39c;
        cursor: pointer;
    }

      /*Wordのテンプレート配布*/

    body#guide #word_template{
        border: 2px solid #FFC107;
        padding: 20px;
        border-radius: 5px;
        margin: 10px 0 30px;
        background: #fcf8e3;
    }

    body#guide #word_template img{
        margin: 0 5px;
        padding: 0;
        border: none;
    }

    body#guide #word_tpl_title{
        text-align: center;
        margin: 20px auto;
        font-weight: bold;
        font-size: 20px;
    }

    body#guide #dlling{
        text-align: center;
        margin-top: 30px;
    }

    body#guide #tpl_note{
        font-size: 12px;
        color: #666;
        margin-top: 30px;
    }

    body#guide .img_title{
        margin: 0 auto;
        display: inherit;
    }

      /* ディスプレイ関連（ガイド系ページ共通） */
    body#guide .pc,
    body#guide-huyou .pc,
    body#guide-jidou .pc,
    body#guide-sakusei .pc{ display: block; }

    body#guide .sp,
    body#guide-huyou .sp,
    body#guide-jidou .sp,
    body#guide-sakusei .sp,
    .yokonaga_img,
    .popwindow,
    #nocover_select,
    #cover_auto_select,
    #cover_create_select,
    #which_soft_1,
    #which_soft_2,
    .word_have_abode_yes_cont,
    .word_have_abode_no_cont,
    .guide-tab-switch,
    .soft-tab-switch,
    .hyoushi-soft-tab-switch,
    .musen_note,
    .nakatoji_note{
        display: none;
    }

    body#guide .course-box-list,
    body#guide-huyou .course-box-list,
    body#guide-jidou .course-box-list,
    body#guide-sakusei .course-box-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    body#guide .course-box-list .huyou-image,
    body#guide-huyou .course-box-list .huyou-image,
    body#guide-jidou .course-box-list .huyou-image,
    body#guide-sakusei .course-box-list .huyou-image{
        width: 350px;
        height: 225px;
        margin: 7px auto;
        max-width: 100%;
    }
    body#guide .course-box-list img,
    body#guide-huyou .course-box-list img,
    body#guide-jidou .course-box-list img,
    body#guide-sakusei .course-box-list img{
        width: 200px;
        height: 225px;
        margin: 7px auto;
        max-width: 100%;
    }

    body#guide .word_img_note{
        width: 100%;
        max-width: 800px;
        height: auto;
    }

    body#guide .border-glay{
        margin: 0 20px 50px;
    }

    body#guide p.margin0{
        position: relative;
        top: -114px;
        left: 50px;
    }

    body#guide .height40{
        height: 40px;
    }

    body#guide .riyou_fee{
        border: 2px solid #419901;
        border-radius: 5px;
        height: 140px;
        width: 700px;
        margin: 0 auto 50px;
    }

    body#guide .dokodemo-flexbox-list li{
        width: 550px;
    }

    body#guide .features-flex{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    body#guide ul.features{
        width: 90vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    body#guide .features li{
        border: 2px solid #9cf;
        border-radius: 3px;
        margin: 10px;
        text-align: center;
        padding: 30px;
        width: 400px;
        height: 320px;
        box-shadow: 0 0 8px lightgray;
    }

    body#guide .features span{
        font-size: 18px;
        color: #9cf;
        border: 1px solid #9cf;
        border-radius: 5px;
        padding: 3px 30px;
        text-align: center;
    }

    body#guide .features h3{
        color: #09f;
        margin: 30px 0;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
    }

    body#guide .features p{
        font-size: 16px;
        text-align: left;
        font-weight: 200;
    }

    body#guide .payment{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 90vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    body#guide .payment_main{
        margin-right: 50px;
        width: 40%;
    }

    body#guide .head_title{
        text-align: center;
        background-color: #419901;
        border-radius: 7px;
        color: #FFF;
        width: 15%;
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 600;
    }

    body#guide .step_frame p.head_title{
        text-align: center;
        background-color: #419901;
        border-radius: 7px;
        color: #FFF;
        width: 15%;
        margin: 0 auto;
        margin-top: 30px;
        font-size: 14px;
        font-weight: 600;
    }

    body#guide .api_example_box{
        width: 90%;
        height: 300px;
        background: #FFF;
        margin: auto;
        border-radius: 5px;
        box-shadow: 0 0 8px lightgray;
        margin-top: 20px;
    }

    body#guide .api_example p.case{
        background-color: #FFF;
        border-radius: 7px;
        color: #000;
        width: 15%;
        margin: 0 auto 20px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
    }

    body#guide .case_box{
        width: 90%;
        height: 450px;
        vertical-align: middle;
        background: #FFF;
        margin: auto;
        border-radius: 5px;
        box-shadow: 0 0 8px lightgray;
        margin-top: 20px;
    }

    body#guide .api-option p strong{
        font-size: 20px;
        line-height: 40px;
    }

    body#guide .guide_tab_8{
        margin-top: 30px;
    }

    body#guide table:not(#course_hikaku):not(#course_case){
        margin: 0px auto 20px auto;
        /* border-top: 1px solid #ccc; */
        border-left: 1px solid #ccc;
        border-collapse: collapse;
        text-align: left;
    }

    body#guide table:not(#course_hikaku):not(#course_case) th{
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        background-color: #f0f0f0;
        font-weight: normal;
    }

    body#guide table:not(#course_hikaku):not(#course_case) td{
        padding: 8px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
        position: relative;
        text-align: left;
    }

    body#guide .table_td_box{
          width: 40%;
          height: 70px;
    }

    body#guide table td p.simulation{
        margin: 10px 5px;
        font-size: 12px;
        padding: 5px;
        background-color: #fdf6df;
        color: #f82601;
    }

    body#guide table td p.simulation2{
        padding: 5px;
        background-color: #fdf6df;
        color: #f82601;
    }

    body#guide table.left{
        margin: 0px 0 20px 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-collapse: collapse;
        text-align: left;
    }

    body#guide table#youshi{
        border-collapse: separate;
    }

    /* コース比較テーブル専用スタイル（汎用テーブルルールの後に再定義して確実に適用） */
    body#guide table#course_hikaku{
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin: 0px auto 20px auto;
        border: 1px solid #ccc;
    }

    body#guide table#course_hikaku td{
        text-align: center;
        font-size: 13px;
        padding: 8px;
        border: 1px solid #ccc;
        background-color: #ffffff;
    }

    body#guide table#course_hikaku td.cell-width-25{
        width: 25%;
    }

    body#guide table#course_hikaku .course_title{
        background: #99cc33;
        color: #fff;
        font-weight: bold;
        border: 1px solid #fff;
        font-size: 14px;
    }

    body#guide table#course_hikaku .hikaku_title{
        font-weight: bold;
        background: #fafafa;
        font-size: 13px;
        text-align: center;
    }

    body#guide table#course_case{
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin: 0px auto 20px auto;
        border: 1px solid #ccc;
    }

    body#guide table#course_case th,
    body#guide table#course_case td{
        text-align: center;
        padding: 10px 12px;
        font-size: 13px;
        border: 1px solid #ccc;
    }

    body#guide table#course_case th{
        background-color: #99cc33;
        color: #fff;
        font-weight: bold;
        border: 1px solid #fff;
    }

    body#guide table#course_case th.cell-width-30{
        width: 30%;
    }

    body#guide table#course_case th.cell-width-20{
        width: 20%;
    }

    body#guide table#course_case td{
        background-color: #ffffff;
    }

    body#guide table#course_case .course_title{
        background: #99cc33;
        color: #fff;
        font-weight: bold;
        border: 1px solid #fff;
        font-size: 14px;
    }

    body#guide table#course_case .hikaku_title{
        font-weight: bold;
        background: #fafafa;
        font-size: 13px;
        text-align: center;
    }
      /* 見出し
      ----------------------------------------------- */

    body#guide div#undercolumn_shopping table th[scope=col]{
        text-align: center;
    }

    body#guide div#undercolumn_shopping table.delivname th{
        width: 155px;
    }
      /* MYページ */

    body#guide div#mycontents_area table th{
        text-align: left;
    }

    body#guide div#mycontents_area table th.alignR{
        text-align: right;
    }

    body#guide div#mycontents_area table th.alignL{
        text-align: left;
    }

    body#guide div#mycontents_area table th.alignC{
        text-align: center;
    }

    body#guide div#mycontents_area table th.resulttd{
        text-align: right;
    }

    body#guide div#mycontents_area table caption{
        padding: 8px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        color: #000;
        background-color: #f0f0f0;
        text-align: left;
        font-weight: bold;
    }

    body#guide div#ref_order table{
        margin: 20px auto;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-collapse: collapse;
        text-align: left;
        width: 80%;
    }

    body#guide div#ref_order table th{
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        background-color: rgb(245, 245, 245);
        font-weight: normal;
    }

    body#guide div#ref_order table td{
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
    }

      div#ref_order table td.radio_btn,
    body#guide #draft_order table td.radio_btn{
        width: 4%;
    }

      div#ref_order table td.hacchuid,
    body#guide #draft_order table td.hacchuid{
        width: 9%;
    }

      div#ref_order table td.seihoncourse,
    body#guide #draft_order table td.seihoncourse{
        width: 8%;
    }

      div#ref_order table td.seihonprice,
    body#guide #draft_order table td.seihonprice{
        width: 10%;
    }

      div#ref_order table td.syousai,
    body#guide #draft_order table td.syousai{
        width: 20%;
    }

      table.uploadfile2,
      table#uploadfile,
      table#price,
      table#furikomi,
      table#file_order,
    body#guide table#entry{
        margin: 15px auto;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-collapse: collapse;
        text-align: left;
        width: 100%;
        font-size: 14px;
    }

    body#guide table.uploadfile2{
        position: relative;
    }

    body#guide table.uploadfile2 th{
        font-weight: bold;
    }

    body#guide table#uploadfile{
        position: relative;
    }

      table#price,
    body#guide table#entry{
        width: 90%;
    }

      table.uploadfile2 th,
      table#uploadfile th,
      table#price th,
      table#furikomi th,
      table#file_order th,
    body#guide table#entry th{
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        background-color: #f9f9f9;
        width: 25%;
    }

    body#guide table#entry th{
        font-weight: bold;
    }

      table#uploadfile td,
      table#price td,
      table#furikomi td,
      table#file_order td,
    body#guide table#entry td{
        padding: 8px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
        font-size: 14px;
    }

    body#guide table.uploadfile2 td{
        padding: 15px 15px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
        font-size: 14px;
    }

    body#guide table#price input#calc:hover{
        opacity: 0.75;
        filter: alpha(opacity=75);
        -ms-filter: "alpha(opacity=75)";
        -khtml-opacity: 0.75;
        -moz-opacity: 0.75;
    }

    body#guide table.uploadfile2 td p{
        margin: 5px 0;
    }

    body#guide table.uploadfile2 td p span{
        font-size: 12px;
        margin-left: 5px;
    }

    body#guide table#uploadfile td p{
        margin: 5px 0;
    }

    body#guide table#uploadfile td p span{
        font-size: 12px;
        margin-left: 5px;
    }

    body#guide div#paper_variation_parent p a{
        margin: 15px;
    }

      table#paper_variation,
    body#guide table#coverpaper_variation{
        width: 95%;
        margin: 15px auto;
    }

    body#guide table#coverpaper_variation{
        width: 95%;
        margin: 0px auto 15px auto;
    }

      table#paper_variation th,
      table#paper_variation td,
      table#coverpaper_variation th,
      table#coverpaper_variation td,
      table#bookcover_variation th,
    body#guide table#bookcover_variation td{
        font-size: 12px;
    }

    body#guide table#paper_variation.use{
        width: 15%;
    }

      table#paper_variation.variation,
    body#guide table#coverpaper_variation.variation{
        width: 25%;
    }

      table#paper_variation.feature,
    body#guide table#coverpaper_variation.feature{
        width: 60%;
    }
    body#guide .variation{
      width: 40%;
    }
    body#guide #paper2_variation td{
      font-size:12px;
    }

    body#guide table.uploadfile2 td table.seihon_size{
        float: left;
        width: 30%;
        margin-right: 15px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        padding-top: 10px;
        position: relative;
        height: 170px;
    }

    body#guide table.uploadfile2 td table.seihon_size td{
        border: none;
        padding: 10px 5px 5px 5px;
        font-size: 14px;
        font-weight: bold;
    }

    body#guide table.uploadfile2 td table.seihon_size td img.newicon{
        position: absolute;
        top: 63px;
        left: 25px;
    }

    body#guide table.uploadfile2 td table.seihon_size td span{
        font-size: 12px;
    }

    body#guide table.uploadfile2 td table.seihon_size td[colspan]{
        font-size: 12px;
        padding: 5px 5px 5px 10px;
        font-weight: normal;
    }

    body#guide table.uploadfile2 td div input[value="サンプルPDFダウンロード"]{
        position: absolute;
        right: 55px;
    }

    body#guide table.uploadfile2 td div.ura_cover_select{
        float: left;
        width: 300px;
        height: 200px;
        margin-right: 10px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    body#guide table.uploadfile2 td div.ura_cover_select p{
        margin: 10px 0;
    }

    body#guide table select{
        margin-bottom: 7px;
        border: solid 1px #ccc;
    }

    body#guide .guide_frame a{
        color: #9cf;
    }


    body#guide .word_have_abode_no_cont{
        margin-top: 30px;
    }

    body#guide .word_have_abode_yes_cont{
        margin-top: 30px;
    }

    body#guide div.computation{
        background-color: #fafafa;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding: 45px 20px 0 20px;
        margin: 15px 0 40px 0;
        width:90%;
        position: relative;
    }
    body#guide div.computation h4{
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #8D8D8D;
        color: #fff;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
    }
    body#guide div.computation form{
        margin:15px 0;
    }
    body#guide div.computation form select[name="booksize"]{
        width:120px;
    }
    body#guide div.computation form select[name="paper"]{
        width:190px;
    }
    body#guide div.computation form select[name="paper2"]{
        width:190px;
    }
    body#guide div.computation form input[type="text"]{
        width:60px;
    }
    body#guide div.computation form li{
        display: inline;
        /* margin:0 10px 10px 0; */
    }
    body#guide div.computation_inner{
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding: 20px;
        margin: 15px 0;
    }

    body#guide div.computation_inner > div{
        float:left;
        text-align: center;
        width:50%;
        margin-bottom: 15px;
    }
    body#guide div.computation_inner table{
        float:right;
        width:50%;
        margin:20px auto;
        font-size: 16px;
    }

    body#guide div.computation_inner p.sizeattention{
        font-size:12px;
        color:#006c1e;
        clear:both;
    }

    body#guide .bookgenerator-guidetext{
        text-align: center;
        margin-top: 40px;
    }

    body#guide #paper2_variation{
        width: 95%;
        margin: 15px auto;
    }
    body#guide .pc_number{
          width: 30%;
          top: 7px;
          right: 5px;
          position: absolute;
    }
    body#guide .title_td2{
          text-align: left;
          width: 40%;
          height: 70px;
          position: relative;
    }
    body#guide .height70{
        height: 70px;
    }

@media screen and (max-width: 480px) {
    body#guide .guide_frame a{
          color: #9cf;
    }
    body#guide .popwindow{
          display: none;
    }
    body#guide .sp{
          display: block;
    }
    body#guide .pc{
          display: none;
    }

    body#guide .non img{
           width: 25%;
           padding: 0;
           margin: 0;
    }

    body#guide table#course_hikaku td{
          font-size: 10px;
    }

    body#guide #container .guide_frame img{
          width: 96%;
          height: auto;
          max-width: 100%;
    }
    body#guide .tab-wrap{
          width: 100%;
          max-width: 980px;
          margin: 0 auto;
    }
    body#guide .tab-content{
          width: 100%;
    }
    body#guide .course-box{
          width: 90%;
          margin: 0 auto 20px auto;
    }
    body#guide .next-step a{
          padding: 10px 20px;
          width: auto;
          display: block;
    }
    body#guide .guide_frame{
          margin: 0 auto 20px auto;
          width: 96%;
    }
    body#guide .tab-content{
          width: 100%;
    }
    body#guide .tab-label{
          margin-bottom: 14px;
          font-size: 16px;
          float: left;
    }
    body#guide h3.title{
          font-size: 22px;
          display: block;
          text-align: center;
    }
    body#guide .guide_flexbox{
          display: block;
          margin: 14px 0 0;
          background: none;
          height: auto;
    }
    body#guide .guide_flexbox_top{
          margin-top: 40px;
          display: block;
          margin: 14px 0 0;
          background: none;
          height: auto;
    }
    body#guide .course-box-list{
          display: block;
    }
    body#guide div.course-box-list img{
          width: 50%;
          max-width: 100%;
    }
    body#guide .course-box a{
          width: 80%;
          margin: 20px auto 0 ;
          box-sizing: border-box;
          padding: 10px 20px;
    }
    body#guide p.margin0{
          margin: 0;
          position: relative;
          top: 0;
          left: 0;
          font-size: 12px;
          padding: 0 0 40px 0;
    }
    body#guide .guide-tab-content img{
          width: 94%;
    }
        .musen_note p,
    body#guide .nakatoji_note p{
          width: 100%;
          padding: 0;
    }
    body#guide .guide-tab-label:not(:last-of-type){
          margin-right: 5px;
    }
    body#guide .soft-tab-label:not(:last-of-type){
          margin: 0 8px 4px;
    }
    body#guide .soft-tab-switch:checked+.soft-tab-label{
          background: #419901;
          color: #FFF;
          margin: 0 8px 5px;
    }
    body#guide .soft-tab-label{
          margin: 0 8px 5px;
    }
    body#guide .soft-tab-switch:checked+.soft-tab-label+.soft-tab-content{
          padding: 0;
    }
    body#guide .hyoushi-soft-tab-label:not(:last-of-type){
          margin: 0 8px 4px;
    }
    body#guide .hyoushi-soft-tab-label{
          margin: 0 8px 5px;
    }
    body#guide .coverauto_guide_tab li{
          width: 100%;
    }
    body#guide .word_guide_tab li{
          width: 100%;
    }
        /* .word_have_abode_no_cont {
          margin-top: 370px;
    }
    body#guide .word_have_abode_yes_cont{
          margin-top: 370px;
    }
    body#guide .guide_tab li{
          width: 100%;
    }

    body#guide .word_have_abode_no_cont{
          margin-top: 30px;
    }
    body#guide .word_have_abode_yes_cont{
          margin-top: 30px;
    }

        /* .word_have_abode_no_cont_coverauto {
          margin-top: 0px;
    }
    body#guide .word_have_abode_yes_cont_coverauto{
          margin-top: 0px;
    }

    body#guide .guide_tab_8{
          margin-top: 30px;
    }

    body#guide div.computation_inner table{
          float: none;
          width: 100%;
          font-size: 14px;
    }
    body#guide div.computation_inner table td.title_td2{
          width:45%;
          height: 60px;
          font-size: 14px;
          text-align: left;
          position: relative;
    }
    body#guide .sp_number{
          width: 25%;
          right: 3px;
          top: 8px;
          position: absolute;
    }
    body#guide div.computation{
          background-color: #fafafa;
          border: 1px solid #cccccc;
          border-radius: 3px;
          padding: 45px 0px 0;
          width:100%;
          position: relative;
    }

    body#guide .bookgenerator-guidetext{
          text-align: left;
          margin-top: 40px;
          padding: 0 10px;
    }
    body#guide div.computation form select[name="booksize"]{
          width:110px;
    }
    body#guide div.computation form input[type="text"]{
          width:50px;
    }
    body#guide div.computation form select[name="paper"]{
          width:130px;
    }
    body#guide div.computation form select[name="paper2"]{
          width:130px;
    }
    body#guide .computation  table td span{
         -ms-writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
          min-height:20em;
    }
    body#guide .computation table td.use_title{
       text-align: center;

    }
    body#guide .computation table td{
      padding: 5px;
      width: 45%;
      height: 60px;
      font-size: 14px;
      text-align: left;
      position: relative;
    }
    body#guide .computation table th.use{
        width:15%;
    }
    body#guide .computation table th{
      padding: 4px;
    }
    body#guide .hyoushi-soft-tab-switch:checked+.hyoushi-soft-tab-label+.hyoushi-soft-tab-content{
        padding: 15px 0;
    }
    body#guide .guide-tab-switch:checked+.guide-tab-label+.guide-tab-content{
        padding: 15px  0px;
    }
    body#guide #paper2_variation{
          width: 100%;
          margin: 0;
    }
      table#paper_variation,
    body#guide table#coverpaper_variation{
        width: 100%;
        margin: 15px auto;
    }

    }

      /*レスポンシブテーブル*/
@media screen and (max-width: 767px) {
        /*ガイドメニュー*/
    body#guide ul.guide_menu{
          padding: 15px 0 0 0;
          display: block;
          width: 100%;
    }
    body#guide .responsive-table{
          width: 100%;
          border-collapse: collapse;
          border: none;
    }

        /* thead を非表示 */
    body#guide .responsive-table thead{
          display: none;
    }

        /* スマホ時の行のデザイン */
    body#guide .responsive-table tbody tr{
          display: flex;
          flex-direction: column;
          border: 1px solid #ccc;
          margin-bottom: 15px;
    }

        /* 各セルのデザイン */
    body#guide .responsive-table td{
          display: flex;
          flex-direction: row;
          align-items: center;
          min-height: 50px;
          box-sizing: border-box;
          border-left:none ;
          border-right: none;
          border-top: none;
    }

        /* スマホ時にヘッダーを左に配置 */
    body#guide .responsive-table td::before{
          content: attr(data-label);
          font-weight: bold;
          width: 30%;
          min-width: 150px;
          background: #f7f7f7;
          padding: 40px 3px;
          margin-right: 10px;
          text-align: left;
          box-sizing: border-box;
          height: 100%;
          display: flex;
          align-items: center;
    }

        /* 最後の行のボーダーを削除 */
    body#guide .responsive-table td:last-child{
          border-bottom: none;
    }
    body#guide .responsive-table .hikaku_title{
          background: #99cc33;
          color: #fff;
          display: flex;
          justify-content: center; /* 水平方向の中央寄せ */
          align-items: center; /* 垂直方向の中央寄せ */
          height: 100%; /* セルの高さを100%にする */
          padding: 10px;
          font-size: 14px;
    }
    body#guide .responsive-table td.hikaku_title::before{
          content: none;
    }

        /* SPレイアウトでの入稿可能なコースのスタイル調整 */
@media screen and (max-width: 767px) {


          /* 入稿可能なコース内のspanタグのスタイル調整 */
    body#guide .responsive-table td[data-label="入稿可能なコース"] span{
            display: inline-block;
            margin: 3px 5px;
            vertical-align: middle;
    }


    }

        /* すべてのテーブルをレスポンシブ対応 */
    body#guide table:not(.responsive-table){
          width: 100%;
          box-sizing: border-box;
    }

    body#guide table#course_case td, table#course_case th{
          text-align: left;
          padding: 0;
          font-size: 13px;
          box-sizing: border-box;
          border-spacing: 0;
    }
    body#guide table#course_case td.hikaku_title{
          padding: 15px 0;
    }
        /*ガイドメニュー*/
    body#guide ul.guide_menu{
          padding: 15px 0 0 0;
          display: block;
          width: 100%;
    }
    body#guide ul.guide_menu li{
          width: 100%;
          margin-bottom: 14px;
          padding: 10px 5px;
          box-sizing: border-box;
    }
    body#guide h3.title{
          width: 100%;
          font-size: 22px;
    }
    body#guide .tab-label{
          width: 100%;
          margin-right: 0;
          padding: 10px 10px;
          box-sizing: border-box;
    }
    body#guide .guide_frame h3{
          display: flex;
          white-space: nowrap; /* テキストの折り返しを防ぐ */
          flex-wrap: nowrap;
          padding: 20px 0;
          justify-content: center;
          margin: 0 auto;
            height: 100px;
    }
        .guide_frame h3:before,
    body#guide .guide_frame h3:after{
          border-top: 1px solid;
          content: "";
          width: 16em;
          /* 線の長さ */
    }
    }
      /* 追加スタイル - インラインスタイル除去用 */
    body#guide .underline{ text-decoration: underline; }
    body#guide .red-underline-text{
        color: red;
        font-size: 14px;
        text-decoration: underline;
    }

      /* 追加スタイル - 重複しないもののみ残す */
    body#guide .dotted-box{
        border: 1px dotted #999;
        padding: 10px;
        margin: 10px 20px;
    }

    body#guide .no-border-padding-margin{
        border: none;
        padding: 0;
        margin: 0;
    }
    body#guide .margin-0-20-30{ margin: 0 20px 30px; }
    body#guide .margin-0-0-minus-10-20{ margin: 0 0 -10px 20px; }

      /* 追加のレスポンシブ対応 */
@media screen and (max-width: 480px) {
        /* ボタンのレスポンシブ対応 */
    body#guide .next-step{
          margin: 0 0 20px;
    }

        /* 画像のレスポンシブ対応 */
    body#guide img{
          max-width: 100%;
          height: auto;
    }

        /* フォントサイズの調整 */
    body#guide .guide_frame p{
          font-size: 14px;
          line-height: 1.5;
    }

        /* マージンとパディングの調整 */
    body#guide .margin-top-20, .margin-top-30, .margin-top-40{
          margin-top: 15px;
    }

        /* テーブルのレスポンシブ対応 */
    body#guide table{
          width: 100%;
          font-size: 12px;
    }

        /* ガイドタブのレスポンシブ対応 */
    body#guide .guide_tab li, .coverauto_guide_tab li, .word_guide_tab li{
          width: 100%;
          margin-bottom: 5px;
    }
    }

/* ========================================
 * Guide-making page specific styles (from v2 staging - EXACT COPY with #GuideMakingRoot scope)
 * ======================================== */

#GuideMakingRoot li{
      list-style: none;
    }
    #GuideMakingRoot ul.guide_menu{
      padding: 20px 0 0 0;
      display: flex;
    }
    #GuideMakingRoot .guide_menu_active{
      background: #419901;
      color: #fff;
    }
    #GuideMakingRoot .guide_menu a{
      text-decoration: none;
    }
    #GuideMakingRoot .guide_menu a:hover{
      opacity: 0.7;
    }

    #GuideMakingRoot img.making_midashi_icon{
      width: 56px;
      margin-right: 12px;
    }

    #GuideMakingRoot .making_text{
      display: flex;
      justify-content: space-between;
      margin: 50px 0;
    }
    #GuideMakingRoot .making_text img{
      width: 50%;
      margin: 0 auto;
      display: block;
    }
    #GuideMakingRoot .making_text p{
      text-align: center;
      color: #333;
    }
    #GuideMakingRoot .making_text a{
      color: #333;
      text-decoration: none;
    }
    #GuideMakingRoot .making_text a:hover{
      opacity: 0.7;
      text-decoration: underline;
      text-decoration-color: #333;
    }
    #GuideMakingRoot .guide_frame h2{
      border-bottom: none;
      text-align: center;
      color: #FFF;
      background-color: #419901;
      width: 100vw;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      padding: 20px 0;
      margin-bottom: 20px;
      font-size: 20px;
      font-weight: normal;
    }

    #GuideMakingRoot .tab-wrap{
      flex-wrap: wrap;
      justify-content: space-around;
      width: 980px;
      margin: 0 auto;
    }

    #GuideMakingRoot .tab-label{
      font-size: 16px;
      color: #419901;
      background: #FFF;
      border: 2px solid #419901;
      border-radius: 3px;
      padding: 10px 50px;
      order: -1;
      margin-bottom: 30px;
    }

    #GuideMakingRoot .tab-content{
      width: 100%;
    }

    #GuideMakingRoot .guide_frame{
      position: relative;
      background-color: #fff;
      width: 980px;
      left: 0px;
      margin: 0px auto 100px auto;
    }

    #GuideMakingRoot .guide_frame h3{
      font-size: 25px;
      font-weight: normal;
      color: #419901;
      border-bottom: none;
      margin: 20px 0;
      display: flex;
      align-items: center;
      /* 垂直中心 */
      justify-content: center;
      /* 水平中心 */
      white-space: nowrap; /* テキストの折り返しを防ぐ */
      flex-wrap: nowrap;
      height: 96px;
    }

    #GuideMakingRoot .guide_frame h3:before,
    #GuideMakingRoot .guide_frame h3:after{
      border-top: 1px solid;
      content: "";
      width: 16em;
      /* 線の長さ */
    }

    #GuideMakingRoot .guide_frame h3:before{
      margin-right: 1em;
      /* 文字の右隣 */
    }

    #GuideMakingRoot .guide_frame h3:after{
      margin-left: 1em;
      /* 文字の左隣 */
    }

    #GuideMakingRoot .guide_title{
      text-align: center;
      margin: 30px 0;
      font-size: 18px;
      font-weight: 700;
    }

    #GuideMakingRoot .guide_box_top{
      font-size: 30px;
      cursor: pointer;
      text-align: center;
    }

    #GuideMakingRoot .guide_box{
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    #GuideMakingRoot .guide_box_border{
      border: 2px solid #359903;
      border-radius: 5px;
      width: 150px;
      height: 150px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #GuideMakingRoot .guide_frame p{
      font-size: 16px;
      line-height: 1.6em;
    }

    #GuideMakingRoot .course-box{
      border: 1px solid #419901;
      border-radius: 5px;
      text-align: center;
      display: flex;
      flex-direction: column;
      background: #FFF;
    }

    #GuideMakingRoot .course-box h4{
      background: #419901;
      padding: 10px 0;
      margin: 0;
      color: #FFF;
      border-radius: 4px 4px 0 0;
    }

    #GuideMakingRoot .course-box p{
      margin: 10px 0;
      color: #419901;
      font-size: 14px;
    }

    #GuideMakingRoot .course-box img{
      text-align: center;
    }

    #GuideMakingRoot .course-box-action a{
      width: 100px;
      text-align: center;
      margin: 0 10px 0 auto;
      border: 2px solid #419901;
      border-radius: 5px;
      background: #419901;
      color: #FFF;
      text-decoration: none;
    }

    #GuideMakingRoot .course-box-action a:hover{
      color: #FFF;
      opacity: 0.7;
    }

    #GuideMakingRoot .next-step{
      margin: 20px 7px;
    }

    #GuideMakingRoot .next-step a{
      display: block;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      padding: 10px 123px;
      margin: 0;
      border: 2px solid #ff8c00;
      border-radius: 5px;
      background: #ff8c00;
      color: #FFF;
      text-decoration: none;
    }

    #GuideMakingRoot .next-step a:hover{
      color: #FFF;
      opacity: 0.7;
    }

    #GuideMakingRoot .guide_frame img{
      padding: 20px 0;
      display: block;
    }

    #GuideMakingRoot .guide_frame a{
      color: rgb(255, 255, 255);
    }

    #GuideMakingRoot .word_have_abode_no_cont{
      display: none;
      margin-top: 30px;
    }

    #GuideMakingRoot .word_have_abode_yes_cont{
      display: none;
      margin-top: 30px;
    }

    #GuideMakingRoot .yokonaga_push{
      color: #39c;
      cursor: pointer;
    }

    #GuideMakingRoot .yokonaga_img{
      display: none;
    }

    #GuideMakingRoot .word_select{
      /* HTMLで使用されているクラス */
    }

    #GuideMakingRoot .midashi_guidance{
      position: relative;
      display: flex;
      text-align: center;
      justify-content: center;
      background-color: white;
      border: 2px solid #333;
      border-color: #cccccc;
      border-radius: 5px;
      width: fit-content;
      margin: 10vh auto;
    }

    #GuideMakingRoot .midashi_guidance img{
      position: absolute;
      top: -20px;
      left: -5px;
      width: 40px;
      height: 40px;
      z-index: 10;
    }

    #GuideMakingRoot .midashi_guidance p{
      margin: 8px 25px;
      font-size: 14px;
    }

    @media screen and (max-width: 480px) {
      #GuideMakingRoot .guide_frame a{
        color: #9cf;
      }
      #GuideMakingRoot .non img{
        width: 25%;
        padding: 0;
        margin: 0;
      }
      #GuideMakingRoot .tab-wrap{
        width: 100%;
      }
      #GuideMakingRoot .tab-content{
        width: 100%;
      }
      #GuideMakingRoot .guide_frame{
        margin: 0 auto 20px auto;
        width: 96%;
      }
      #GuideMakingRoot .tab-label{
        margin-bottom: 14px;
        font-size: 16px;
        float: none;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin-right: 0;
        display: block;
        padding: 10px 0;
      }
      #GuideMakingRoot h3.title{
        font-size: 22px;
        display: block;
        text-align: center;
      }
      .guide_frame h3:before,
      #GuideMakingRoot .guide_frame h3:after{
        width: 8em;
      }
      #GuideMakingRoot .guide_frame p{
        font-size: 14px;
        line-height: 1.5em;
      }
      #GuideMakingRoot .guide_frame img{
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      #GuideMakingRoot img.making_midashi_icon{
        margin-right: 12px;
        padding: 0;
      }
      #GuideMakingRoot .word_have_abode_no_cont{
        margin-top: 30px;
      }
      #GuideMakingRoot .word_have_abode_yes_cont{
        margin-top: 30px;
      }
    }

    @media screen and (max-width: 600px) {
      #GuideMakingRoot .midashi_guidance{
        margin: 2vh auto;
        width: 90%;
      }
      #GuideMakingRoot .midashi_guidance p{
        font-size: 13px;
        margin: 5px 15px;
      }
    }

    @media screen and (max-width: 767px) {
      #GuideMakingRoot ul.guide_menu{
        padding: 15px 0 0 0;
        display: block;
        width: 100%;
        margin-bottom: 14px;
      }
      #GuideMakingRoot h3.title{
        width: 100%;
      }
      #GuideMakingRoot .tab-label{
        width: 100%;
        margin-right: 0;
        box-sizing: border-box;
        text-align: center;
        display: block;
        padding: 10px 0;
      }
      #GuideMakingRoot .guide_frame h3{
        display: flex;
        white-space: nowrap;
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0 auto;
        height: 100px;
        padding: 20px 0;
      }
      .guide_frame h3:before,
      #GuideMakingRoot .guide_frame h3:after{
        border-top: 1px solid;
        content: "";
        width: 16em;
      }
      #GuideMakingRoot .guide_menu li{
        margin-bottom: 14px;
      }
    }
    @media screen and (max-width: 767px) {
      #GuideMakingRoot .making_text{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 25px 0 0 0 ;
      }

      #GuideMakingRoot .making_text > div{
        width: 48%;
        margin-bottom: 20px;
      }
      
      #GuideMakingRoot .making_text img{
        width: 40%;
        padding: 0;
      }
    }

@media screen and (min-width: 768px) and (max-width: 1023px) {
    body#guide .wrapper {
        width: 100%;
        max-width: 980px;
        box-sizing: border-box;
    }

    body#guide .guide_frame {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    body#guide .guide_flexbox,
    body#guide .guide_flexbox_top {
        width: 100%;
        left: 0;
        transform: none;
    }

    body#guide .guide_flexbox_top {
        margin: 12px 0 24px;
    }

    body#guide .course-box-margin {
        margin: 0;
    }

    body#guide .course-box-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 0 8px;
        box-sizing: border-box;
    }

    body#guide .course-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        border: 2px solid #99cc33;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
    }

    body#guide .course-box h4 {
        margin: 0;
        padding: 12px 14px;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
        background: #419901;
        color: #fff;
    }

    body#guide .course-box p {
        margin: 14px 0 10px;
        font-size: 14px;
        text-align: center;
        color: #419901;
    }

    body#guide .course-box-list .huyou-image,
    body#guide .course-box-list img.course-image,
    body#guide .course-box-list img {
        display: block;
        width: 90%;
        max-width: none;
        height: auto;
        margin: 0 auto 10px;
    }

    body#guide .course-box-action,
    body#guide .next-step {
        padding: 0 12px 14px;
    }

    body#guide .next-step {
        margin-top: auto;
    }

    body#guide .tab-wrap {
        width: 100%;
        max-width: 980px;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    body#guide ul.guide_menu {
        flex-wrap: nowrap;
        gap: 8px;
    }

    body#guide .tab-label {
        width: 100%;
        max-width: none;
        font-size: clamp(10px, 1.2vw, 12px);
        padding: 8px 4px;
        white-space: nowrap;
        line-height: 1.3;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    body#guide-pdf .guide_menu .tab-label,
    body#guide-huyou .guide_menu .tab-label,
    body#guide-jidou .guide_menu .tab-label,
    body#guide-sakusei .guide_menu .tab-label {
        width: 100%;
        max-width: none;
    }

    body#guide .course-box-action a,
    body#guide .next-step a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        line-height: 1.5;
        font-weight: bold;
        border-radius: 4px;
        text-align: center;
        text-decoration: none;
        background: #ff8c00;
        border: 1px solid #ff8c00;
        color: #fff;
        box-sizing: border-box;
        margin: 0;
    }

    body#guide .course-box-action a {
        background: #419901;
        border-color: #419901;
    }

    body#guide .pc {
        display: block;
    }

    body#guide .sp {
        display: none;
    }

    #GuideMakingRoot .guide_frame {
        width: 100%;
        max-width: 980px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    #GuideMakingRoot .guide_frame h2 {
        width: 100%;
        left: 0;
        transform: none;
    }

    #GuideMakingRoot .tab-wrap {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    #GuideMakingRoot ul.guide_menu {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        box-sizing: border-box;
        align-items: stretch;
    }

    #GuideMakingRoot ul.guide_menu li {
        flex: 1 1 0;
        min-width: 0;
    }

    #GuideMakingRoot .guide_menu .tab-label,
    #GuideMakingRoot .tab-label {
        width: 100%;
        font-size: clamp(10px, 1.2vw, 12px);
        padding: 8px 4px;
        white-space: nowrap;
        line-height: 1.3;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #GuideMakingRoot .guide_frame h3:before,
    #GuideMakingRoot .guide_frame h3:after {
        width: 8em;
    }

    #GuideMakingRoot .making_text {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin: 30px 0;
        padding: 0 8px;
        box-sizing: border-box;
    }

    #GuideMakingRoot .making_text > div {
        min-width: 0;
    }

    #GuideMakingRoot .making_text img {
        width: 60%;
        max-width: 80px;
    }

    #GuideMakingRoot .making_text p {
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }

    #GuideMakingRoot .next-step a {
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.4;
    }
}

/* Page title spacing for front header */
body#tokusyou h2.title,
body#bill-pay h2.title,
body#media-send h2.title,
body#faq h2.title,
body#advice h2.title,
body#newuser-guide h2.title,
body#guide h2.title {
    margin-top: 20px;
}

body#nyuko-guide .guide-title,
body#guide .guide-title {
    margin-top: 20px;
}