@charset "utf-8"; /* CSS Document */
/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, p, span, small, dl, dt, dd, ol, ul, li {
    margin: 0;
    font-size: 100%;
}

ul {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

img {
    vertical-align: top;
}

li {
    list-style-type: none;
    vertical-align: baseline;
}

input, button, textarea, select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*--------------------------------------
　Base
---------------------------------------*/
html {
    font-size: 62.5%;
}

body {
    width: 100%;
    background: #fff;
    min-width: 320px;
    color: #333;
    text-align: left;
    font-size: 14px;
    font-size: 1.4em;
    line-height: 1.7;
    font-family: "ヒラギノ角ゴ StdN", "ヒラギノ角ゴ Pro W3", sans-serif;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul, ol, dl, li, dt, dd {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
}

p {
    margin: 0;
    padding: 0;
    text-align: justify;
    text-justify: inter-ideograph;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #333;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-weight: bold;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.strong {
    font-weight: bold;
}

.f110 {
    font-size: 110%;
}

.f120 {
    font-size: 120%;
}

.f130 {
    font-size: 130%;
}

.f150 {
    font-size: 150%;
}

.f200 {
    font-size: 200%;
}

.f300 {
    font-size: 300%;
}

/* Micro clearfix */
/* For modern browsers */
.cf:before, .cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom: 1; }

.flImg {
    float: left;
}

.frImg {
    float: right;
}

.fontBold {
    font-weight: bold;
}

body {
    background: #fff;
    min-width: 1000px;
    line-height: 1.9;
    box-sizing: border-box;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", osaka, sans-serif;
    overflow-x: hidden;
}

a:link {
    text-decoration: underline;
    color: #333;
}

a:visited {
    text-decoration: underline;
    color: #333;
}

a:hover {
    text-decoration: none;
    color: #333;
}

a:active {
    text-decoration: underline;
    color: #333;
}

a:hover img {
    opacity: 0.7;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6, .low_ttl {
    font-family: "メイリオ", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    line-height: 1.3;
}

/*--------------------------------------
　Header
---------------------------------------*/
#header {
    position: relative;
    z-index: 1;
}

#headTopArea {
    padding: 6px 0 11px;
}

#headTopArea div, #headTopArea h1 {
    width: 1000px;
    margin: 0 auto;
    text-align: right;
    font-size: 12px;
    font-size: 1.2rem;
    text-align: right;
    line-height: 1.2;
    font-weight: normal;
    color: #777;
}

#headTopArea a {
    text-decoration: none;
    color: #777;
}

#headTopArea a:hover {
    text-decoration: underline;
}

#headNoteArea {
}

#headNoteArea .areaInner {
    width: 1000px;
    margin: 0 auto;
    padding: 0px 0 25px;
}

#headNoteArea .logo {
}

/*--------------------------------------
　Global Nav
---------------------------------------*/
#g-nav {
}

#g-nav .areaInner {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

#g-nav .dropmenu {
    width: 100%;
    display: table;
}

#g-nav .areaInner li {
    display: table-cell;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: 0px solid #fff;
    border-left: none;
    cursor: pointer;
    font-feature-settings: "palt" 1;
    text-decoration: none;
    line-height: 1.3;
    font-size: 14px;
    font-size: 1.4rem;
    position: relative;
}

#g-nav .areaInner li a:hover {
    color: #00c8dd;
}

#g-nav .areaInner li a:hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: #00c8dd;
    border-radius: 10px;
    bottom: 0;
    left: 0;
    margin: 0;
}

#g-nav .areaInner li a {
    position: relative;
    text-decoration: none;
    padding: 14px 0 20px;
    display: block;
}

/*--------------------------------------
　Pankuzu
---------------------------------------*/
#pankuzuWrap {
    background: #f6f6f6;
}

#pankuzu {
    width: 968px;
    margin: 0 auto;
    padding: 4px 16px;
    font-size: 12px;
    font-size: 1.2rem;
    color: #777;
}

#pankuzu a {
    color: #777;
}

/*--------------------------------------
　Main Contents
---------------------------------------*/
.category, .page {
    width: 1000px;
    margin: 0 auto 0;
    padding: 0;
}

.mappage {
    overflow: hidden;
    margin-bottom: 8rem;
}

.index {
    width: 1000px;
    margin: 0 auto 80px;
    padding: 0;
}

#contents a {
    text-decoration: none;
}

#contents a:hover {
    text-decoration: underline;
}

/*--------------------------------------
　Side
---------------------------------------*/
/*--------------------------------------
　Footer
---------------------------------------*/
#page-top {
    width: 60px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 10;
}

#page-top img {
    width: 60px;
}

footer {
    background: #f6f6f6;
    margin: 0;
    padding: 3rem 0 0;
}

footer .areaInner {
    width: 940px;
    margin: 0 auto;
    padding: 10px 30px 20px;
}

footer .footBox {
    margin: 0 0 30px;
}

footer .footBox .sttl {
    margin: 0 0 12px;
    padding: 0 0 10px;
    background: url(./img/dotline4.png) 0 100% repeat-x;
    background-size: auto 1px;
}

footer .footBox .sttl a {
    display: block;
    padding: 4px 20px;
    font-size: 16px;
    font-size: 1.6rem;
    text-decoration: none;
    font-weight: bold;
    line-height: 1.3;
    color: #00c8dd;
}

footer .smap .sttl a {
    font-size: 15px;
    font-size: 1.5rem;
}

footer .footBox > ul {
    padding: 0 20px;
}

footer .footBox li {
    display: inline-block;
    color: #555;
}

footer .footBox li ul {
}

footer .footBox li a {
    font-size: 13px;
    font-size: 1.3rem;
    color: #555;
}

footer .footBox li:after {
    content: "　/　";
    color: #555;
}

footer .footBox li:last-child:after {
    content: "";
}

footer .footBox a:hover {
    opacity: 0.7;
}

footer .footBox li.subCat {
}

footer .footBox li.subCat:after {
    content: "";
}

footer .footBox li.subCat > a {
}

footer .footBox li.subCat > a:after {
}

footer .footBox ul.subList {
    display: inline-block;
    margin: 0 20px 0 0;
}

footer .footBox ul.subList > li:first-child::before {
    content: "";
    margin: 0 0 0 15px;
}

footer .footBox ul.subList li:after {
    content: " / ";
    color: #555;
}

footer .footBox ul.subList li:last-child::after {
    content: "";
}

footer .noticeArea {
    padding: 20px 60px 5px;
}

footer .noticeArea p {
    text-align: center;
    color: #666;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6;
}

footer .noticeArea + .noticeArea p {
    color: #00c8dd;
}

footer .botArea {
    background: #7edde7;
}

footer .botArea .botInner {
    width: 1000px;
    margin: 0 auto;
    display: table;
}

footer .botArea p {
    display: table-cell;
    padding: 3px 14px 3px;
    font-family: " ＭＳ Ｐゴシック", MS PGothic, " sans-serif";
    font-weight: normal;
    font-size: 11px;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
}

footer .botArea p a {
    text-decoration: none;
    color: #fff;
}

footer .botArea p a:hover {
    text-decoration: underline;
}

footer .botArea .smap {
    width: 100px;
    background: url(./img/arrow_lb.png) 95% 50% no-repeat;
    background-size: 16px auto;
    text-align: center;
    font-size: 13px;
    font-size: 1rem;
    /* font-weight: bold; */
    text-decoration: none;
    line-height: 1.3;
    display: block;
    margin: 0px 0;
    padding: 5px;
    color: #fff;
}

footer .botArea .smap:hover {
    /* background-color: #f6f6f6; */
    text-decoration: underline;
}

/* ================== */
/*  PC共通パーツ　*/
/* ================== */
.index h2, .category h1, .page h1, .low_ttl {
    position: relative;
    margin: 80px 0 32px;
    padding: 20px 20px 22px;
    font-size: 34px;
    font-size: 3.4rem;
    text-align: center;
    background: #e2e2e2;
    border-radius: 18px;
}

.index h2 a:hover, .category h1 a:hover, .page h1 a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

.index h2::before, .category h1::before, .page h1::before, .low_ttl::before {
    content: "";
    position: absolute;
    background: url(img/icon_h1_1.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 53px;
    height: 40px;
    top: -17px;
    left: 60px;
}

.index h2::after, .category h1::after, .page h1::after, .low_ttl::after {
    content: "";
    position: absolute;
    background: url(img/icon_h1_2.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 53px;
    height: 40px;
    bottom: -17px;
    right: 60px;
}

.category h2, .page h2 {
    position: relative;
    margin: 40px 0 30px;
    padding: 18px 20px 18px 50px;
    background: #f6f6f6;
    font-size: 26px;
    font-size: 2.6rem;
    border-radius: 18px;
}

.index h3 a, .category h2 a, .page h2 a, .index h4 a, .category h3 a, .page h3 a, .index h5 a, .index h6 a, .category h4 a, .category h5 a, .category h6 a, .page h4 a, .page h5 a, .page h6 a {
    text-decoration: none;
    display: block;
    background: url(./img/arrow_lb.png) right no-repeat;
    background-size: 22px auto;
    padding: 0.5rem 0.5rem 0;
    padding-right: 3rem;
}

.index h3 a:hover, .category h2 a:hover, .page h2 a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

.category h2::before, .page h2::before {
    position: absolute;
    content: "";
    top: -3px;
    left: 0;
    background: url(img/icon_h2_1.png) no-repeat 0 0, url(img/icon_h2_3.png) no-repeat left bottom;
    display: block;
    height: calc(100% + 6px);
    width: 20px;
}

.category h2::after, .page h2::after {
    position: absolute;
    content: "";
    top: -3px;
    right: 0;
    background: url(img/icon_h2_2.png) no-repeat 0 0, url(img/icon_h2_4.png) no-repeat left bottom;
    display: block;
    height: calc(100% + 6px);
    width: 20px;
}

.category h3, .page h3 {
    position: relative;
    margin: 40px 0 30px;
    padding: 18px 20px 18px 70px;
    background: url(img/icon_h3.png) no-repeat left 10px center #f6f6f6;
    border-radius: 18px;
    font-size: 22px;
    font-size: 2.2rem;
}

.category h3 a:hover, .page h3 a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

.index h5, .index h6, .category h4, .category h5, .category h6, .page h4, .page h5, .page h6 {
    position: relative;
    margin: 40px 0 30px;
    padding: 12px 20px 14px;
    border-bottom: 3px solid #cbcbcb;
    background-size: auto 1px;
    font-size: 20px;
    font-size: 2rem;
    color: #00c8dd;
}

.index h5 a, .index h6 a, .category h4 a, .category h5 a, .category h6 a, .page h4 a, .page h5 a, .page h6 a {
    color: #00c8dd;
}

.index h5 a:hover, .index h6 a:hover, .category h4 a:hover, .category h5 a:hover, .category h6 a:hover, .page h4 a:hover, .page h5 a:hover, .page h6 a:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

.index h5::before, .index h6::before, .category h4::before, .category h5::before, .category h6::before, .page h4::before, .page h5::before, .page h6::before {
    content: "";
    position: absolute;
    background: #00c8dd;
    width: 50px;
    height: 3px;
    bottom: -3px;
    left: 0;
}

#main ul {
    margin: 20px 0 20px;
    padding: 10px 10px 0;
}

#main ul li {
    position: relative;
    padding: 0 0 3px 18px;
}

#main ul li::before {
    position: absolute;
    content: "";
    background: #ff5f85;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 8px;
    left: 2px;
}

#main ol {
    margin: 20px 0 20px;
    padding: 10px 10px 0;
}

#main ol li {
    padding: 0 0 3px 18px;
    list-style: none;
    position: relative;
    counter-increment: number;
}

#main ol li::before {
    background-color: #d90000;
    width: 14px;
    height: 15px;
    position: absolute;
    top: 5px;
    left: -2px;
    padding: 1px 0 0;
    color: #fff;
    text-align: center;
    letter-spacing: -0.5px;
    line-height: 1.3;
    font-size: 12px;
    font-size: 1.2rem;
    font-family: Arial, Helvetica, " sans-serif";
}

#main ol li:nth-child(-n + 9):before {
    content: counter(number);
}

#main ol li:nth-child(n + 10):before {
    content: counter(number);
}

#main a:hover img {
    opacity: 0.7;
}

#main p {
    margin: 32px 80px 32px;
    padding: 0;
}

/* ================== */
/*  テーブル　　　　　*/
/* ================== */
#main table {
    width: 98%;
    margin: 30px auto 30px;
    word-break: break-all;
}

#main table th {
    width: 26%;
    padding: 7px 16px;
    background: #f6f6f6;
    border: 1px solid #cbcbcb;
    line-height: 1.3;
    text-align: center;
    font-size: 1.8rem;
    /* position: relative; */
}

#main table .btn th {
    background: none !important;
}

#main table .btn th, #main table .btn td {
    /* border: 0px solid #f6f6f6; */
    background: #f6f6f6;
}

#main table td {
    line-height: 1.4;
    padding: 14px 20px;
    border: 1px solid #cbcbcb;
    text-align: center;
    position: relative;
}

#main table td .btn-web, #main table td .btn-internal {
    width: 100%;
    margin: 0 auto;
}

#main table td .btn-web a, #main table td .btn-internal a {
    font-size: 1.3rem;
    padding: 1rem 0rem 3rem;
}

thead {
    background: #7edde7;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    border-bottom: 1px solid #f6f6f6;
}

#main thead th {
    background: #ffffff;
    /* border: 0px solid #cbcbcb; */
}

#main .selections thead th:first-child {
    background: #f6f6f6;
    color: #f6f6f6;
}

table .system_name {
    text-align: center;
    font-size: 2.4rem;
    position: relative;
    margin-bottom: 1.7rem;
}

.system_catch {
    text-align: center;
}

.system_price {
    text-align: center;
    background: #fff;
    color: #333;
    padding: 9px 0 0;
    /* height: 5rem; */
    margin: 1rem 0 0;
    font-size: 1.4rem;
}

.system_agency {
    text-align: center;
}

.selections table tbody td {
    font-size: 2.2rem;
    background: #fff;
}

#main .selections table .btn-internal a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 11px 25px 34px;
    background: url(./img/arrow_wt_down.png) 50% 85% no-repeat #f9515e;
    background-size: 20px auto;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    text-decoration: none;
    font-size: 16px;
    font-size: 1.6rem;
    box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);
    border: none;
}

#main .selections table td.superiority {
    font-weight: bold;
    /* background: #00c8dd; */
    font-size: 2.2rem;

}
#main .selections table tbody td{z-index: 0;}


.selections table tbody td.superiority span {
    color: #f9515e;
}

.selections table tbody td.superiority.maru span {
    color: #333333;
    font-weight: bold;
    font-size: 3rem;
}

.system_price span {
    font-size: 2.8rem;
}

#main p.annotation {
    font-size: 1rem;
    margin: 0 0 50px;
    text-align: right;
}

span.annotation {
    font-size: 1rem;
    color: #7f7f7f;
    margin-left: 0.5rem;
}

/* ================== */
/*  PCカスタマイズ共通　*/
/* ================== */
.caption {
    margin: 8px 0 0;
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.3;
    word-break: break-all;
    color: #999;
    white-space: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
}

.caption::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
}

#main p span {
    font-weight: bold;
    color: #00c8dd;
}

#main .check {
    position: relative;
    box-sizing: border-box;
    margin: 20px 0 20px;
    padding: 24px 20px 24px 70px;
    background: url(./img/dotline4.png) 0 100% repeat-x;
    background-size: auto 1px;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    line-height: 1.3;
    font-size: 20px;
    font-size: 2rem;
}

#main .check::before {
    content: "CHECK";
    position: absolute;
    background: #222;
    border-radius: 50%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, " sans-serif";
    font-size: 10px;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-align: center;
}

#main .check::after {
    content: "";
    display: block;
    position: absolute;
    left: 54px;
    height: 0;
    width: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 8px solid #222;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main .point {
    position: relative;
    box-sizing: border-box;
    margin: 20px 0 20px;
    padding: 24px 20px 24px 70px;
    background: url(./img/dotline4.png) 0 100% repeat-x;
    background-size: auto 1px;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    line-height: 1.3;
    font-size: 20px;
    font-size: 2rem;
}

#main .point::before {
    content: "POINT";
    position: absolute;
    background: #222;
    border-radius: 50%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, " sans-serif";
    font-size: 10px;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-align: center;
}

#main .point::after {
    content: "";
    display: block;
    position: absolute;
    left: 54px;
    height: 0;
    width: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 8px solid #222;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main .recommend {
    position: relative;
    box-sizing: border-box;
    margin: 20px 0 40px;
    padding: 24px 20px 24px 80px;
    background: #f6f6f6;
    line-height: 1.3;
    font-size: 26px;
    font-size: 2.6rem;
    font-weight: bold;
}

#main .recommend::before {
    content: "Q";
    position: absolute;
    background: #00c8dd;
    border-radius: 50%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 10px;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 34px;
    font-size: 3.4rem;
    text-align: center;
}

#main .recommend::after {
    content: "";
    display: block;
    position: absolute;
    left: 61px;
    height: 0;
    width: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 11px solid #00c8dd;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main .recommend a {
    display: block;
    background: url(./img/arrow_lb.png) right no-repeat;
    padding: 0;
}

/* float-wrap */
#main .float-wrap {
    margin: 60px 0;
    padding: 0 20px;
}

#main .agency_video .float-wrap {
    margin: 0 0 60px;
    text-align: center;
}

#main .float-wrap img {
    width: 100%;
}

#main .float-wrap p {
    margin: 0;
    padding: 0;
}

#main .float-wrap .fl {
    width: 460px;
    padding: 0 20px 10px 0;
    text-align: center;
}

#main .float-wrap .fr {
    width: 320px;
    padding: 0 0 10px 20px;
    text-align: center;
}

#main .float-wrap .ct {
    width: 320px;
    margin: 0 auto;
    padding: 0 0 20px;
    text-align: center;
}

/*  btns*/
#main .btn-internal, #main .btn-web {
    width: 500px;
    margin: 60px auto;
    padding: 0;
    box-sizing: border-box;
}

#main .btn-internal a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 18px 40px;
    background: url(./img/arrow_wt.png) 97% 50% no-repeat #00c8dd;
    background-size: 20px auto;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 100px;
    font-size: 18px;
    font-size: 1.8rem;
    box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #00c8dd;
}

#main .btn-internal a:hover {
    color: #00c8dd;
    border: 1px solid;
    background-image: url(./img/arrow_lb2.png);
    background-color: #fff;
}

#main .btn-web {
    background: #f9515e;
    border-radius: 100px;
}

#main .btn-web a {
    position: relative;
    display: block;
    padding: 18px 25px;
    background: url(./img/arrow_wt.png) 97% 50% no-repeat;
    background-size: 20px auto;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    text-decoration: none;
    z-index: 0;
    font-size: 18px;
    font-size: 1.8rem;
    border-radius: 100px;
    box-shadow: 5px 10px 0 rgba(0, 0, 0, 0.05);
}

#main .btn-web a:hover {
    color: #fff;
    background-color: #b0adae;
}

#main .btn-link {
    margin: 32px 0;
    text-align: right;
}

#main .btn-link a {
    position: relative;
    display: inline-block;
    padding: 4px 0 4px 22px;
    line-height: 1.3;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: underline;
}

#main .btn-link a::before {
    position: absolute;
    content: "";
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background: url(./img/arrow_lb.png) left no-repeat;
    background-size: 22px auto;
    top: 2px;
    left: -6px;
}

#main .btn-link a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* box-wrap(2box) */
#main .box-wrap {
    margin: 10px 20px 10px;
}

#main .box {
    position: relative;
    display: block;
    width: 460px;
    margin: 0 0 20px;
    padding: 0 0 0;
    text-decoration: none;
    background: #f6f6f6;
}

#main .box .flame {
    padding: 0 0 0;
}

#main .box .flame img {
    width: 100%;
}

#main .left_box {
    float: left;
}

#main .right_box {
    float: right;
}

#main .box .box-head {
    display: table;
}

#main .box .box-head .sttl {
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    width: 442px;
    margin: 0 10px;
    padding: 30px 24px 30px;
    background-size: 8px auto;
    font-weight: bold;
    font-size: 18px;
    font-size: 2.6rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: center;
}

#main .box .box-head a {
    display: block;
    text-decoration: none;
    background: url(./img/arrow_lb.png) 100% 50% no-repeat;
}

#main .box .box-head a:hover {
    opacity: 0.7;
}

#main .box .box-body {
    margin: 0 10px;
    padding: 28px 0 32px;
    background: url(./img/dotline3.png) 0 0 repeat-x;
    background-size: auto 1px;
}

#main .box .box-body .catch {
    display: table-cell;
    vertical-align: middle;
    margin: 0 0 6px;
    padding: 0 14px;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    color: #00c8dd;
}

#main .box .box-body p {
    margin: 10px 4px 0;
    padding: 0 10px;
    font-size: 13px;
    font-size: 1.3rem;
}

#main .box .box-body .in_link_btn {
    display: table;
    box-sizing: border-box;
    width: 72%;
    margin: 20px auto 0;
    padding: 0;
    border: 2px solid #d90000;
}

#main .box .box-body .in_link_btn a {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    z-index: 1;
    padding: 14px 25px 12px;
    background: url(./img/arrow_rd.png) 97% 50% no-repeat;
    background-size: 7px auto;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    color: #d90000;
    line-height: 1.3;
    text-decoration: none;
    font-size: 15px;
    font-size: 1.5rem;
}

#main .box .box-body .in_link_btn a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: -100%;
    background: #d90000;
}

#main .box .box-body .in_link_btn:hover a::before {
    animation-name: btn-action11;
    animation-duration: 0.6s;
    animation-delay: 0;
    animation-fill-mode: backwards;
}

#main .box .box-body .in_link_btn:hover a {
    animation-name: btn-action2;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-fill-mode: backwards;
}

#main .box-wrap .type_a, #main .type_a .box-head .sttl, #main .type_a .box-head {
    width: auto;
    display: block;
}

#main .type_a .box-head .sttl {
    text-align: left;
    background: none;
}

#main .type_a .box-head h2.sttl::before, #main .type_a .box-head h2.sttl::after {
    display: none;
}

#main .box-wrap .type_b .box-head {
    display: table;
    width: 100%;
}

#main .box-wrap .type_b .box-head .engBox {
    display: table-cell;
    vertical-align: middle;
    width: 20%;
    padding: 10px 0;
    background: #00c8dd;
    color: #fff;
    font-family: Arial, Helvetica, " sans-serif";
    font-size: 11px;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.3;
}

#main .box-wrap .type_b .box-head .engBox span {
    display: block;
    font-size: 34px;
    font-size: 3.4rem;
    line-height: 1.1;
}

#main .box-wrap .type_b .box-head .sttl {
    display: table-cell;
    width: 80%;
    margin: 0;
    padding: 15px 30px 10px 28px;
    text-align: left;
}

#main .box-wrap .type_b .box-body {
    background: none;
}

#main .box-wrap .type_b .box-body .catch {
    margin: 0 0 10px;
    padding: 0 14px 10px;
}

#main .box-wrap .type_b .box-body p {
    background: url(./img/dotline3.png) 0 0 repeat-x;
    background-size: auto 1px;
    padding: 20px 15px 0;
}

/* frame-wrap (3box) */
#main .frame-wrap {
    margin: 0 0 0;
    padding: 0 0 0 8px;
    text-align: center;
}

#main .frame {
    position: relative;
    display: block;
    margin: 0 0 50px;
    padding: 0 0 0;
    background: #fff;
    border: 1px solid #e2e2e2;
    vertical-align: top;
    box-shadow: 5px 9px 0 0 rgba(0, 0, 0, 0.05);
}

#main .frame a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#main .frame .frame-head {
    box-sizing: border-box;
    margin: 0;
    padding: 20px 0 14px;
    background: none;
    border: none;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", osaka, sans-serif;
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-align: left;
    background: #f6f6f6;
    position: relative;
}

#main .frame .frame-head::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 17px 0 17px;
    border-color: #f6f6f6 transparent transparent transparent;
    position: absolute;
    bottom: -22px;
    left: 75px;
    display: block;
    margin: auto;
}

#main .frame .frame-head p {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.4;
}

#main .frame .frame-head a {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.4;
}

#main .frame .frame-body {
    background: #fff;
    margin: 0 32px;
    padding: 0 0 24px;
}

#main .frame-wrap .frame-body .catch {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px 10px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    line-height: 1.5;
}

#main .frame .frame-body p {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-size: 1.3rem;
}

#main .frame-wrap .type_a {
    border-top: 3px solid #ddd;
}

#main .frame-wrap .type_a .engImg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 4px;
    font-family: Arial, Helvetica, " sans-serif";
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.2);
}

#main .frame-wrap .type_a .frame-head {
    position: relative;
    z-index: 0;
    padding: 20px 32px 14px;
    text-align: center;
    background: #e2e2e2;
    margin: 0 0 0;
    width: 100%;
    position: relative;
}

#main .frame-wrap .type_a .frame-head a {
    /* background: url(./img/arrow.png) 99% 50% no-repeat; */
    background-size: 8px auto;
}

#main .frame-wrap .type_a .frame-body {
    padding: 32px 0 32px;
    background-size: auto 1px;
}

#main .frame-wrap .type_b {
    border: none;
    width: 300px;
    display: block;
    box-shadow: none;
    float: left;
    margin: 0 30px 30px 0;
}

#main .frame-wrap .type_b:nth-of-type(3n) {
    margin-right: 0;
}

#main .frame-wrap .type_b .frame-head {
    position: relative;
    width: 100%;
    margin: 0 0;
    padding: 28px 20px 16px;
    background: #e2e2e2;
    text-align: center;
    box-shadow: 5px 9px 0 0 rgba(0, 0, 0, 0.05);
}

#main .frame-wrap .type_b .frame-head::before {
    content: "";
    position: absolute;
    width: 57px;
    height: 40px;
    background: url(img/icon_type_b.png) no-repeat 0 0;
    top: -21px;
    left: 0;
    right: 0;
    margin: auto;
}

#main .frame-wrap .type_b .frame-head a {
    background: url(./img/arrow_lb.png) right no-repeat;
    padding-right: 2rem;
    display: block;
    width: auto;
    padding-bottom: 0.5rem;
}

#main .frame-wrap .type_b .frame-head p {
    line-height: 1.4;
    text-align: center;
    display: block;
}

#main .frame-wrap .type_b .frame-head::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    border: none;
    border-left: 2px dotted #414141;
    width: 0;
    height: 22px;
}

#main .frame-wrap .type_b .frame-body {
    padding: 10px 0 24px;
    margin: 0;
}

#main .frame-wrap .type_b .miniBox {
    background: #f6f6f6;
    margin: 12px 0 0;
    padding: 16px;
}

#main .frame-wrap .type_b .miniBox .fontBold {
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px 10px;
    text-align: left;
    line-height: 1.5;
    color: #00c8dd;
    font-size: 1.8rem;
}

#main .frame-wrap .type_b .miniBox .fontBold a {
    display: table-cell;
    vertical-align: middle;
    padding: 14px 20px 8px 0;
    background: url(./img/arrow.png) 99% 50% no-repeat;
    background-size: 7px auto;
}

#main .frame-wrap .type_b .frame-body p {
    line-height: 1.7;
}

#main .frame-wrap .type_c .frame-head::before {
    content: "";
    position: absolute;
    width: 49px;
    height: 71px;
    background: url(img/icon_type_c.png) no-repeat 0 0;
    top: -11px;
    left: 20px;
}

#main .frame-wrap .type_c .frame-head {
    padding: 25px 30px 25px 75px;
}

#main .frame-wrap .type_c .frame-head p {
    margin: 0;
    padding: 2px 10px 0 60px;
    background: url(./img/frame_icon.png) 5px 50% no-repeat;
    background-size: 46px auto;
    line-height: 1.4;
}

#main .frame-wrap .type_c .frame-body {
    padding: 28px 0 24px;
}

#main .frame-wrap .type_c .frame-body p {
    padding: 0 50px;
}

#main .frame-wrap .type_c .frame-body p .botCom {
    display: block;
    color: #333;
    font-weight: normal;
    text-align: right;
    font-size: 12px;
    font-size: 1.2rem;
}

/* addParts */
#contents .addParts {
}

#contents .addParts .partTtl {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    line-height: 1.3;
    font-weight: bold;
    color: #333;
}

#contents .addParts .partTtl::before, #contents .addParts .partTtl::after {
    content: "";
    width: 0;
    height: 0;
    background: none;
    border: none;
}

#contents .addParts .partTtl a {
    color: #333;
    background: url(./img/arrow_lb.png) right no-repeat;
    padding: 0 4rem;
    display: block;
}

#contents .addParts03 .partTtl a {
    color: #333;
    background: url(./img/arrow_lb.png) right 75% no-repeat;
    padding: 0 10rem;
}

#contents .addParts .partTtl a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#contents .addParts .boxTtl {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    line-height: 1.3;
}

#contents .addParts .boxTtl::before, #contents .addParts .boxTtl::after {
    content: "";
    width: 0;
    height: 0;
    background: none;
}

#contents .addParts .boxTtl a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#contents .addParts p {
    margin: 0;
    padding: 0;
}

#contents .addParts ul {
    margin: 0;
    padding: 0;
}

#contents .addParts li {
    margin: 0;
    padding: 0;
}

#contents .addParts li::before {
    content: "";
    top: 4px;
    position: absolute;
    content: "";
    background: #ff5f85;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 8px;
    left: 2px;
}

#contents .addParts:not(.addParts03) li::before {
    /* background: none; */
}

#contents .addParts02 .mainArea li::before {
    background: none;
}

#contents .addParts01 .listArea li::before {
    content: "";
    position: absolute;
    background: url(img/icon_quotation_1.png) no-repeat 0 0;
    width: 33px;
    height: 25px;
    top: -17px;
    left: 30px;
    border-radius: 0;
}

#contents .addParts01 .listArea li::after {
    content: "";
    position: absolute;
    background: url(img/icon_quotation_2.png) no-repeat right bottom;
    width: 33px;
    height: 25px;
    bottom: -11px;
    right: 30px;
}

/* simple_selections */
.simple_selections {
    position: relative;
}


.simple_selections.lower_bottom .popup#item01 {
    top: 194px;
}

.simple_selections.lower_bottom .popup#item02 {
    top: 279px;
}

.simple_selections.lower_bottom .popup#item03 {
    top: 340px;
}

.simple_selections.lower_bottom .popup#item04 {
    top: 403px;
}

.simple_selections.lower_bottom .popup#item05 {
    top: 477px;
}

.simple_selections.lower_bottom .popup#item06 {
    top: 545px;
}











#main .simple_selections .btn-internal span {
    color: #fff;
}

.simple_selections::before {
    width: 200vw;
    height: calc(100%);
    background-color: #f6f6f6;
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -100vw;
    content: "";
    z-index: -1;
}

.selections {
    margin: 12rem 0 0;
    position: relative;
}

.selections table {
    table-layout: fixed;
}

#main .selections table th {
    background: #ececec;
    border-color: #f6f6f6;
    font-size: 1.6rem;
    position: relative;
}

#main .selections table th.tag {z-index: 0;}
#main .selections table td {
    border-color: #f6f6f6;
    font-size: 1.8rem;
}

#main .selections table a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* addParts01 */
#contents .addParts01 {
    margin: 0;
    padding: 60px 20px 60px;
}

#contents .addParts01 .engTtl {
    position: relative;
    margin: 0 auto 20px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    display: table;
    font-weight: bold;
    background: #7edde7;
    width: 203px;
    border-radius: 100px;
    text-transform: uppercase;
}

#contents .addParts01 .frame-wrap, #main .addParts01 .box-wrap {
    padding: 0;
    margin: 6rem 0 1rem;
}

#contents .addParts01 .explainer, #contents .addParts01 .agency, #contents .addParts01 .agency_video {
    width: 96%;
    margin: 0 auto;
}

#contents .addParts01 .explainer h4, #contents .addParts01 .agency h4, #contents .addParts01 .agency_video h4 {
    font-size: 2.6rem;
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 1.5rem 3rem 1.5rem 0;
    margin: 0 0 3rem;
}

#contents .addParts01 .explainer h4::before, #contents .addParts01 .agency h4::before, #contents .addParts01 .agency_video h4::before {
    width: calc(100% + 30px);
    height: 100%;
    background: #e2e2e2;
    position: absolute;
    top: 0;
    left: -30px;
    content: "";
    z-index: -1;
    border-radius: 0 180px 180px 0;
}

#contents .addParts01 .agency .frame-head::after {
    display: none;
}

#contents .addParts01 .agency .frame.type_a {
    width: 277px;
    position: relative;
    display: block;
    float: left;
    margin: 0 12px 30px;
    padding: 0 0 0;
    background: #fff;
    border: 1px solid #ddd;
    vertical-align: top;
}

#contents .addParts01 .partTtl {
    margin: 0 0 28px;
    font-size: 34px;
    font-size: 3.4rem;
    text-align: center;
}

#contents .addParts01 .introTxt {
    margin: 0 auto 40px;
    width: 840px;
}

#contents .addParts01 .mainArea {
    position: relative;
    padding: 1px 0 10px;
    z-index: auto;
    background: #f6f6f6;
    margin-bottom: 12rem;
    border-radius: 18px;
}

#contents .addParts01 .mainArea::before {
    position: absolute;
    content: "";
    top: -1px;
    left: -1px;
    background: url(img/icon_box1.png) no-repeat 0 0, url(img/icon_box3.png) no-repeat left bottom;
    display: block;
    height: calc(100% + 6px);
    width: 33px;
    z-index: 1;
}

#contents .addParts01 .mainArea::after {
    position: absolute;
    content: "";
    top: -3px;
    right: 0;
    background: url(img/icon_box2.png) no-repeat 0 0, url(img/icon_box4.png) no-repeat left bottom;
    display: block;
    height: calc(100% + 6px);
    width: 33px;
}

#contents .addParts01 .boxTtl {
    margin: 17px 17px 40px;
    padding: 24px 20px;
    background: #fff;
    background-size: auto 12px;
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    color: #f9515e;
    border-radius: 18px;
    border: 1px solid #00c8dd;
    position: relative;
}

#contents .addParts01 .boxTtl::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 10px 0 10px;
    border-color: #00c7dd transparent transparent transparent;
    position: absolute;
    bottom: -12px;
    right: 0;
    left: 0;
    display: block;
    margin: auto;
}

#contents .addParts01 .cmpArea {
    margin: 0 40px 40px;
}

#contents .addParts01 .cmpArea .frImg {
    width: 320px;
    text-align: center;
}

#contents .addParts01 .cmpArea .frImg img {
    width: 100%;
}

#contents .addParts01 .cmpArea .flImg {
    width: 520px;
}

#contents .addParts01 .cmpArea .sttl {
    display: table;
    width: 100%;
    margin: 0 0 22px;
    border-bottom: 1px solid #00c8dd;
    font-size: 18px;
    font-size: 3.8rem;
}

#contents .addParts01 .cmpArea .sttl .engSttl {
    display: table-cell;
    width: 70px;
    vertical-align: middle;
    background: #00c8dd;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    font-size: 1.1rem;
    border-radius: 18px 0 0 0;
}

#contents .addParts01 .cmpArea .sttl .system_name {
    padding-left: 2rem;
    font-weight: bold;
    margin: 0;
    font-size: 3.5rem;
    color: #333;
    padding: 5px 20px;
}

#contents .addParts01 .cmpArea .sttl h3::before {
    display: none;
}

#contents .addParts01 .cmpArea .sttl a {
    display: table-cell;
    padding: 14px 20px 14px 12px;
    background: url(./img/arrow.png) 98% 50% no-repeat;
    background-size: 8px auto;
    font-weight: bold;
    line-height: 1.3;
}

#contents .addParts01 .cmpArea .sttl a:hover {
    text-decoration: none;
    opacity: 0.7;
}

#contents .addParts01 .cmpArea ul {
    margin: 0 0 0 4px;
}

#contents .addParts01 .cmpArea li {
    width: 210px;
    display: table;
    /* margin: 0 4px 8px; */
    padding: 7px 18px;
    /* background: #00c8dd; */
    float: left;
    color: #333;
    text-align: left;
    line-height: 1.2;
}

#contents .addParts01 .cmpArea li::before {
    position: absolute;
    content: "";
    background: #ff5f85;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    top: 8px;
    left: 2px;
}

#contents .addParts01 .cmpArea li p {
    display: table-cell;
    /* vertical-align: middle; */
    /* text-align: center; */
    font-weight: bold;
}

#contents .addParts01 .cmpArea li:nth-child(odd) {
    clear: both;
}

#contents .addParts01 .listArea {
    margin: 4rem 0 30px;
    padding: 0 19px 40px;
    position: relative;
    overflow-x: hidden;
    z-index: 0;
}

#contents .addParts01 .listArea::before {
    width: 200vw;
    height: 100%;
    background: #baf0f6;
    position: absolute;
    top: 0;
    left: 7rem;
    content: "";
    z-index: -1;
    border-radius: 18px;
}

#contents .addParts01 .listArea.example ul li {
    width: 890px;
}

#contents .addParts01 .listArea .sttl {
    padding: 24px 20px;
    font-weight: bold;
    text-align: center;
    font-size: 22px;
    font-size: 2.2rem;
    z-index: 0;
}

#contents .addParts01 .listArea .sttl a {
    display: block;
}

#contents .addParts01 .listArea .sttl a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#contents .addParts01 .listArea ul {
    margin: 0 0 0 1px;
}

#contents .addParts01 .listArea li {
    box-sizing: border-box;
    width: 283px;
    margin: 0 0 0 20px;
    padding: 24px 32px;
    float: left;
    background: #fff;
    box-shadow: 5px 9px 0 0 rgba(0, 0, 0, 0.05);
}

#contents .addParts01 .listArea li .iconImg {
    width: 82px;
    margin: 0 auto 14px;
}

#contents .addParts01 .listArea li .iconImg img {
    width: 100%;
}

#contents .addParts01 .listArea li .catch {
    margin: 0 0 12px;
    padding: 0 8px 12px;
    background: url(./img/dotline3.png) 0 100% repeat-x;
    background-size: auto 1px;
    font-weight: bold;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.6;
}

#contents .addParts01 .listArea li p {
    padding: 0 8px;
    font-size: 13px;
    font-size: 1.3rem;
}

#contents .addParts01 .btn-web {
    width: 500px;
    margin: 5rem auto;
}

#contents .addParts01 .btn-web:hover a::before {
    animation-name: btn-action11;
    animation-duration: 0.6s;
    animation-delay: 0;
    animation-fill-mode: backwards;
}

/* addParts02 */
#contents .addParts02 {
    margin: 0 0 6rem;
    padding: 60px 20px;
    position: relative;
}

#contents .addParts02::before {
    width: 2000px;
    height: 100%;
    background: url(./img/add02_vis_pc.png) right top no-repeat #baf0f6;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    right: -105px;
    content: "";
    z-index: -1;
    border-radius: 0 30px 30px 0;
}

#contents .addParts02 .areaInner {
    padding: 155px 0 0;
}

#contents .addParts02 .headBox {
    margin: 0 176px 20px;
    padding: 24px 40px 24px;
    background: rgba(255, 255, 255, 0.8);
}

#contents .addParts02 .partTtl {
    margin: 0 0 8px;
    font-size: 28px;
    font-size: 2.8rem;
    text-align: center;
}

#contents .addParts02 .headBox .engTtl {
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 8px;
    font-family: Arial, Helvetica, " sans-serif";
    text-align: center;
    color: #d90000;
    font-size: 12px;
    font-size: 1.2rem;
}

#contents .addParts02 .headBox .engTtl::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background: #d90000;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -30px;
}

#contents .addParts02 .headBox .engTtl::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background: #222;
    bottom: 0;
    left: 50%;
}

#contents .addParts02 .introTxt {
    margin: 0 20px 50px;
}

#contents .addParts02 .mainArea .boxTtl {
    position: relative;
    margin: 0 0 20px;
    border-top: 3px solid #eee;
    background: url(./img/dotline4.png) 0 100% repeat-x;
    background-size: auto 1px;
    font-size: 22px;
    font-size: 2.2rem;
    text-align: center;
}

#contents .addParts02 .mainArea .boxTtl a {
    display: block;
    padding: 16px 20px 18px;
    background: url(./img/arrow.png) 98% 50% no-repeat;
    background-size: 8px auto;
}

#contents .addParts02 .mainArea .boxTtl::before {
    content: "";
    position: absolute;
    background: #d90000;
    width: 70px;
    height: 3px;
    top: -3px;
    left: 0;
}

#contents .addParts02 .mainArea ul {
    margin: 0 0 0 8px;
}

#contents .addParts02 .mainArea li {
    box-sizing: border-box;
    width: 304px;
    margin: 0 18px 40px 0;
    float: left;
    background: #fff;
    box-shadow: 5px 9px 0 0 rgba(0, 0, 0, 0.05);
}

#contents .addParts02 .mainArea li:nth-of-type(3n) {
    margin-right: 0;
}

#contents .addParts02 .mainArea li .flame {
    width: 302px;
}

#contents .addParts02 .mainArea li .flame img {
    width: 100%;
}

#contents .addParts02 .mainArea li .sttl {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 32px 15px 0;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    display: flex;
}

#contents .addParts02 .mainArea li .sttl a {
    position: relative;
    padding: 0 32px 0 20px;
    background: url(./img/arrow_lb.png) 98% 28% no-repeat;
    font-size: 2rem;
    text-align: center;
    /* 子要素をflexboxにより縦方向に揃える */
    /* 子要素をflexboxにより中央に配置する */
    /* 子要素をflexboxにより中央に配置する */
    display: block;
}

#contents .addParts02 .mainArea li .sttl span {
    background: -webkit-gradient( linear, 0 0, 0 100%, color-stop(0.6, transparent), color-stop(0.6, #ff3) );
    background: -webkit-linear-gradient(transparent 60%, #ff3 60%);
    background: -moz-linear-gradient(transparent 60%, #ff3 60%);
    background: -o-linear-gradient(transparent 60%, #ff3 60%);
    background: linear-gradient(transparent 60%, #ff3 60%);
}

#contents .addParts02 .mainArea li .sttl a:hover {
    opacity: 0.7;
    text-decoration: none;
}

#contents .addParts02 .mainArea li p {
    margin: 0 16px;
    padding: 32px 16px 32px;
    font-size: 13px;
    font-size: 1.3rem;
}

#contents .addParts02 .mainArea li .btn-internal {
    width: 100px;
    border: 1px solid #d90000;
    margin: 18px 0 24px 184px;
}

#contents .addParts02 .mainArea li .btn-internal a {
    background: url(./img/arrow_rd.png) 95% 50% no-repeat;
    background-size: 6px auto;
    padding: 10px 20px 8px;
    font-family: Arial, Helvetica, " sans-serif";
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    font-weight: normal;
}

#contents .addParts02 .mainArea li .btn-internal:hover a::before {
    animation-name: btn-action11;
    animation-duration: 0.5s;
    animation-delay: 0;
    animation-fill-mode: backwards;
}

/* addParts03 */
#contents .addParts03 {
    margin: 0 -200%;
    padding: 0 200%;
    background: url(./img/add03_vis.png) 50% 0 no-repeat #f6f6f6;
    background-size: 1700px auto;
    position: relative;
}

#contents .addParts03::before {
    width: 180vw;
    height: calc(100% - 90px);
    background: #baf0f6;
    position: absolute;
    top: 60px;
    right: 7rem;
    content: "";
    z-index: -1;
    border-radius: 18px;
}

#contents .addParts03 .mainArea {
    box-sizing: border-box;
    width: 560px;
    margin: 0 0 0 440px;
    padding: 140px 20px 50px 40px;
}

#contents .addParts03 .partTtl {
    position: relative;
    margin: 0 0 24px;
    font-size: 34px;
    font-size: 3.4rem;
    text-align: center;
}

#contents .addParts03 .partTtl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/icon_box1.png) no-repeat 0 0;
    display: block;
    height: 33px;
    width: 33px;
}

#contents .addParts03 .partTtl::after {
    content: "";
    position: absolute;
    background: url(img/icon_box4.png) no-repeat right bottom;
    display: block;
    height: 33px;
    width: 33px;
    bottom: -20px;
    right: -30px;
}

#contents .addParts03 .partTtl a {
    display: block;
    padding: 10px 30px;
}

#contents .addParts03 .partTtl a span {
    color: #00c8dd;
}

#contents .addParts03 .partTtl a .marker {
    color: #222;
    background: -webkit-gradient( linear, 0 0, 0 100%, color-stop(0.6, transparent), color-stop(0.6, #ff3) );
    background: -webkit-linear-gradient(transparent 60%, #ff3 60%);
    background: -moz-linear-gradient(transparent 60%, #ff3 60%);
    background: -o-linear-gradient(transparent 60%, #ff3 60%);
    background: linear-gradient(transparent 60%, #ff3 60%);
}

#contents .addParts03 .catch {
    margin: 0 0 8px;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
}

#contents .addParts03 .introTxt {
    margin: 0 0 30px;
}

#contents .addParts03 .listArea {
    position: relative;
    z-index: 1;
    background: #fff;
}

#contents .addParts03 .listArea ul {
    background: #fff;
    padding: 24px 0 6px;
}

#contents .addParts03 li {
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    line-height: 1.4;
    font-size: 13px;
    font-size: 1.3rem;
}

#contents .addParts03 li::before {
    top: 3px;
}

/* ================== */
/*  サイトマップ　　　　　　*/
/* ================== */
.mappage .subList {
    margin: 5px 0 !important;
}

.mappage h2 {
    margin: 30px 0 4px;
}

.mappage li a {
    text-decoration: underline !important;
}

.mappage li a:hover {
    text-decoration: none !important;
}

/*  End_PC*/
/*--------------------------------------
　検索フォーム
---------------------------------------*/
#searchArea {
    width: auto;
    margin: 20px auto 100px;
    padding: 30px 0 0;
    border-top: 1px solid #d9d9d9;
}

#searchArea .boxTtl {
    margin: 0 0 20px;
    line-height: 1.5;
    font-size: 30px;
    text-align: center;
}

#searchform {
    border: none;
    padding: 20px 30px;
    box-shadow: none;
    margin: 0 35px;
    background: #f0f0f1;
}

#searchform .trParts {
    background: #fff;
    margin: 20px 0;
    border-radius: 4px;
    display: table;
    width: 100%;
}

#searchform .thParts {
    display: table-cell;
    vertical-align: middle;
    background: #ddd;
    width: 20%;
    text-align: center;
}

#searchform .tdParts {
    padding: 16px;
    display: table-cell;
    vertical-align: middle;
}

#searchform .tdParts .checkParts {
    display: inline-block;
    padding: 0 20px 0 0;
}

/* checkboxボタン01 */
#searchform .tdParts input[type="checkbox"] {
    display: none;
}

#searchform .tdParts label.checkbox01 {
    position: relative;
    display: inline-block;
    padding: 3px 3px 3px 22px;
    cursor: pointer;
}

#searchform .tdParts label.checkbox01::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -8px;
    background: #fff;
    border: 1px solid #ccc;
}

#searchform .tdParts input[type="checkbox"]:checked + label.checkbox01::after {
    position: absolute;
    content: "";
    top: 8px;
    left: 3px;
    width: 13px;
    height: 5px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* radioボタン01 */
label.radio01 {
    position: relative;
    display: inline-block;
    padding: 3px 3px 3px 20px;
    cursor: pointer;
}

label.radio01::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
}

#searchform .tdParts input[type="radio"] {
    display: none;
}

#searchform .tdParts input[type="radio"]:checked + label.radio01::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #333;
    border-radius: 100%;
}

#searchform input[type="submit"] {
    display: block;
    width: 200px;
    margin: 0 auto;
    background: 97% 50% no-repeat #333;
    background-size: 8px auto;
    border-radius: 4px;
    border: none;
    padding: 10px 26px 10px;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}

#searchform input[type="submit"]:hover {
    opacity: 0.7;
}

/*--------------------------------------
　検索結果
---------------------------------------*/
#resultArea {
}

#resultArea .exBox {
    margin: 0 0 30px;
    padding: 30px;
    display: block;
    background-color: #eee;
}

#resultArea a.exBox {
    color: #444;
    text-decoration: none;
}

#resultArea .exBox .leftArea {
    float: left;
    width: 500px;
}

#resultArea .exBox .leftArea .boxTtl {
    margin: 0 0 15px;
    padding: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px dashed#333;
}

#resultArea .exBox .rightArea {
    float: right;
    width: 220px;
}

#resultArea .exBox .rightArea img {
    width: 220px;
    height: 120px;
    margin: 0 0 10px;
    object-fit: cover;
}

#resultArea .exBox .rightArea .btnParts {
    display: block;
    width: auto;
    margin: 0 auto;
    background: 97% 50% no-repeat #333;
    background-size: 8px auto;
    border-radius: 4px;
    border: none;
    padding: 10px 26px 10px;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
}

/* popup */
.selections table th .ques {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 22px;
    height: 22px;
}

.selections .popup {
    display: none;
    background: #fff;
    border-radius: 30px;
    padding: 1.5rem 2rem;
    position: absolute;
    top: 250px;
    left: 75px;
    width: 410px;
    z-index: 1;
    font-size: 15px;
    height: 90px;
    border: 5px solid #00c8dd;
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.05);
}

.selections .popup::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 62px;
    margin-left: -15px;
    border: 13px solid transparent;
    border-bottom: 18px solid #fff;
    z-index: 2;
}

.selections .popup::after {
    content: "";
    position: absolute;
    top: -42px;
    left: 60px;
    margin-left: -17px;
    border: 17px solid transparent;
    border-bottom: 24px solid #00c8dd;
    z-index: 1;
}

.selections .popup#item01 {
    top: 194px;
}

.selections .popup#item02 {
    top: 296px;
}

.selections .popup#item03 {
    top: 383px;
}

.selections .popup#item04 {
    top: 462px;
}

.selections .popup#item05 {
    top: 534px;
}

.selections .popup#item06 {
    top: 604px;
}

@media screen and (min-width: 481px) {
    /*------------
481px--common
------------*/.sp, .sp_br, .sp-only {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    /*------------
common--480px
------------*/html {
    }

    body {
        word-break: break-all;
        min-width: 100%;
    }

    .pc, .pc_br, .pc-only {
        display: none !important;
    }

    .sp, .sp_br, .sp-only {
        display: block;
    }

    img:not([width]) {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    a {
        text-decoration: none;
    }

    /*--------------------------------------
　Header
---------------------------------------*/
    #headTopArea {
    }

    #headTopArea div, #headTopArea h1 {
        padding: 0.4em 1em;
        font-size: 1.1rem;
        line-height: 1.9;
        font-weight: normal;
        color: #777;
        text-align: center;
        width: auto;
    }

    #headTopArea a {
        text-decoration: none;
        color: #777;
    }

    #headNoteArea {
        padding: 0 0.8em 1em;
    }

    #headNoteArea .areaInner {
        width: auto;
        padding: 0;
    }

    #headNoteArea .logo {
        width: 100%;
    }

    /*--------------------------------------
　Global Nav_SP
---------------------------------------*/
    #layer {
        position: fixed !important;
    }

    #sp_nav {
        position: fixed;
        top: 0;
        right: -80%;
        box-sizing: border-box;
        width: 80%;
        height: 100%;
        background: rgba(238, 238, 238, 0.9);
        border-left: 1px solid #fff;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        z-index: 999;
    }

    /* 以下装飾など */
    #sp_nav ul {
        margin: 0;
        padding: 0;
    }

    #sp_nav li + li {
    }

    #sp_nav li {
        font-weight: bold;
        background: url(img/arrow_wt.png) right 10px center no-repeat;
        background-size: 12px auto;
        background-color: #00c8dd;
        border-bottom: solid 1px #fff;
        list-style: none;
    }

    #sp_nav li a {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 12px 26px 12px 16px;
        color: #fff;
        font-weight: bold;
        text-align: left;
        text-decoration: none;
    }

    #menuBtn {
        position: fixed;
        top: 6px;
        right: 12px;
        width: 41px;
        height: 41px;
        outline: none;
        border: none;
        background: #6f5a4b;
        background: url(img/menu_open.png) center no-repeat;
        background-size: 100%;
        cursor: pointer;
        z-index: 999;
        transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
    }

    body.open #menuBtn {
        right: calc(80% + 15px);
        width: 41px;
        height: 41px;
        background: url(img/menu_close.png) center no-repeat;
        background-size: 100%;
    }

    body.open {
        height: inherit !important;
    }

    body.open #layer {
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0);
        position: absolute;
        top: 0;
        z-index: 900;
        overflow: hidden;
    }

    #sp_nav .collapsible {
        background: url(img/arrow_next.png) right 6px center no-repeat;
        background-size: 14px auto;
        background-color: #00c8dd;
    }

    #sp_nav li .selected > a {
        font-weight: normal;
    }

    #sp_nav li .waSlideMenu-back {
        background: url(img/arrow_wt_back.png) 16px center no-repeat;
        background-size: 6px auto;
        padding-left: 18px !important;
        background-color: #5da9b1;
    }

    #sp_nav li .waSlideMenu-back a {
        color: #fff;
    }

    /*--------------------------------------
lower_banner
---------------------------------------*/
    #sp_nav li.lower_banner {
        border: none;
        padding: 0;
        background-color: transparent;
        background-image: none;
    }

    #sp_nav li.lower_banner a {
        box-sizing: border-box;
        border: 1px solid #fff;
        display: block;
        width: 95%;
        margin: 23px auto;
        padding: 16px 10px;
        background: url(img/banner.jpg) 0 0 no-repeat;
        background-size: cover;
        line-height: 1.4;
        text-decoration: none;
        color: #444;
        font-weight: normal;
    }

    #sp_nav li.lower_banner p.bannerTxt {
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold;
        margin: 10px 40% 10px 8px;
        text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 1);
    }

    /* ================== */
    /*  pankuzu_SP　*/
    /* ================== */
    #pankuzuWrap {
        overflow: auto;
        white-space: nowrap;
        background: #efefef;
    }

    #pankuzuWrap::-webkit-scrollbar {
        height: 3px;
    }

    #pankuzuWrap::-webkit-scrollbar-track {
        border-radius: 3px;
        background: #eee;
    }

    #pankuzuWrap::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #666;
    }

    #pankuzu {
        box-sizing: border-box;
        width: 100%;
        padding: 0.6em 1em 0.6em;
        font-size: 1.1rem;
        border-bottom: 1px solid #fff;
    }

    #pankuzu a {
        color: #333;
    }

    /*--------------------------------------
　Main Contents
---------------------------------------*/
    #contents {
        position: relative;
        z-index: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .category, .page {
        padding: 0 1em;
        position: relative;
        width: auto;
    }

    .mappage {
        padding: 0 1em 7em;
        overflow: hidden;
        margin-bottom: 0;
    }

    .index {
        padding: 0 1em 2em;
        width: auto;
    }

    /* ================== */
    /*  footer_SP　*/
    /* ================== */
    /*--------------------------------------
PageTop_SP
---------------------------------------*/
    #page-top {
        width: 40px;
        position: fixed;
        bottom: 40px;
        right: 10px;
        z-index: 2;
    }

    #page-top img {
        width: 100%;
    }

    footer {
        margin: 0 0 0;
        background: #eee;
    }

    footer a {
        line-height: 1.4;
        font-size: 1.3rem;
    }

    footer .footBox .sttl {
        background: none;
        margin: 0;
        padding: 0;
    }

    footer .footBox .sttl a {
        display: block;
        padding: 1em 1.4em 1em 0.8em;
        font-size: 1.6rem;
        background: url(./img/arrow_down.png) 97% 50% no-repeat;
        background-size: auto 6px;
        border-bottom: 1px solid #bcbcbc;
        color: #333;
        font-weight: 400;
    }

    footer .footBox li a {
        display: block;
        padding: 1em 1.5em 1em 1.1em;
        background: url(./img/arrow.png) 97% 50% no-repeat;
        background-size: 6px auto;
        border-bottom: 1px solid #bcbcbc;
        color: #333;
        font-size: 1.4rem;
        text-decoration: none;
    }

    footer .footBox li li a {
        padding: 1em 1.5em 1em 3.3em;
    }

    footer .footBox li a.ssttl {
        display: block;
        padding: 1em 1.5em 1em 0.9em;
        background: url(./img/arrow.png) 97% 50% no-repeat;
        background-size: 6px auto;
        border-bottom: 1px solid #bcbcbc;
    }

    footer .smap .sttl a {
        background: url(./img/arrow.png) 97% 50% no-repeat;
        background-size: 6px auto;
        font-weight: 400;
        font-size: 1.4rem;
    }

    footer .accordion ul.accChild {
        display: none;
        background: #fff;
        background: #dedede;
        padding: 0;
    }

    footer .footBox li {
        display: block;
        background: #fff;
    }

    footer .footBox li:after {
        display: none;
    }

    footer .accordion .open a {
        background: url(./img/arrow_up.png) 97% 50% no-repeat;
        background-size: auto 6px;
    }

    footer .accordion .open a.ssttl {
        background: url(./img/arrow_down.png) 97% 50% no-repeat;
        background-size: auto 6px;
    }

    footer .noticeArea {
        margin: 0 0.5em;
        padding: 1.1em 0.5em 1.1em;
    }

    footer .noticeArea p {
        font-size: 1.1rem;
        color: #666;
        text-align: center;
    }

    footer .botArea .botInner {
        width: auto;
    }

    footer .areaInner {
        width: auto;
        padding: 0;
    }

    footer .footBox {
        margin: 0;
    }

    footer .botArea {
        padding: 0.5em 0;
    }

    footer .botArea p {
        margin: 0 0.5em;
        text-align: center;
        font-size: 1rem;
        color: #fff;
    }

    footer .botArea p a {
        /* display: block; */
        line-height: 1.8;
        font-size: 1rem;
        color: #fff;
    }

    /* ================== */
    /*  SP共通パーツ　*/
    /* ================== */
    .index h2, .category h1, .page h1, .low_ttl {
        position: relative;
        margin: 1em 0;
        padding: 1em 0.7em 0.8em;
        font-size: 2rem;
        text-align: center;
    }

    .index h2::before, .category h1::before, .page h1::before, .low_ttl::before {
        content: "";
        width: 30px;
        left: 20px;
    }

    .index h2::after, .category h1::after, .page h1::after, .low_ttl::after {
        width: 30px;
        right: 20px;
        height: 24px;
    }

    .category h2, .page h2 {
        position: relative;
        margin: 3em 0 1em;
        padding: 0.8em 0.7em 0.8em 1.2em;
        font-size: 1.8rem;
    }

    .page h2 {
        color: #333;
    }

    .index h4, .category h3, .page h3 {
        position: relative;
        margin: 2em 0;
        padding: 0.7em 0.7em 0.7em 4.5rem;
        font-size: 1.6rem;
        background-size: 24px auto;
    }

    .index h5, .category h6, .category h4, .category h5, .category h6, .page h4, .page h5, .page h6 {
        position: relative;
        margin: 2em 0;
        padding: 0.7em 0.7em 0.9em;
        font-size: 1.5rem;
    }

    .index h5::before, .index h6::before, .category h4::before, .category h5::before, .category h6::before, .page h4::before, .page h5::before, .page h6::before {
        content: "";
        position: absolute;
        width: 35px;
        height: 3px;
        left: 0;
    }

    #main ul {
        margin: 1.5em 0 1.5em;
        padding: 0.5em 0.2em 0;
    }

    #main ul li {
        position: relative;
        padding: 0 0 0.2em 1.3em;
    }

    #main ul li::before {
        position: absolute;
        content: "";
        border-radius: 50%;
        width: 10px;
        height: 10px;
        top: 8px;
        left: 2px;
    }

    #main ol {
        margin: 1.5em 0 1.5em;
        padding: 0.5em 0.2em 0;
    }

    #main ol li {
        padding: 0 0 0.2em 1.5em;
        list-style: none;
        position: relative;
        counter-increment: number;
    }

    #main ol li::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        background-color: #d90000;
        position: absolute;
        top: 4px;
        left: 0;
        padding: 0.2em 0 0.3em;
        letter-spacing: -0.5px;
        line-height: 1;
        text-align: center;
        font-size: 1.2rem;
        font-family: Arial, Helvetica, " sans-serif";
        color: #fff;
    }

    #main ol li:nth-child(-n + 9):before {
        content: counter(number);
    }

    #main ol li:nth-child(n + 10):before {
        content: counter(number);
    }

    #main p {
        margin: 1.5em 0 1.5em;
        padding: 0 0.2em;
    }

    /* ================== */
    /*  テーブル　　　　　*/
    /* ================== */
    #main table th {
        box-sizing: border-box;
        border-bottom: none;
        font-size: 1.5rem;
        line-height: 1.3;
        text-align: center;
    }

    #main table td {
        box-sizing: border-box;
        /* display: block; */
        text-align: center;
        padding: 1em 0.5em;
        border: 1px solid #ddd;
        border-bottom: none;
        line-height: 1.4;
        text-align: center;
    }

    #main table {
        margin: 1.5em auto;
        width: 100%;
        border-collapse: collapse;
        border-bottom: 1px solid #ddd;
    }

    /* ================== */
    /*  SPカスタマイズ共通　*/
    /* ================== */
    .caption {
        margin: 0.6em 0 0;
        font-size: 1rem;
        line-height: 1.3;
        word-break: break-all;
        color: #999;
    }

    #main .check {
        position: relative;
        box-sizing: border-box;
        margin: 0.5em 0 0.5em;
        padding: 1.5em 0.5em 1.5em 4em;
        position: relative;
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        line-height: 1.3;
        font-size: 1.5rem;
    }

    #main .check::before {
        content: "CHECK";
        position: absolute;
        background: #222;
        border-radius: 50%;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-family: Arial, Helvetica, " sans-serif";
        font-size: 9px;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    #main .check::after {
        content: "";
        display: block;
        position: absolute;
        left: 45px;
        height: 0;
        width: 0;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 8px solid #222;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #main .point {
        position: relative;
        box-sizing: border-box;
        margin: 0.5em 0 0.5em;
        padding: 1.5em 0.5em 1.5em 4em;
        position: relative;
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        line-height: 1.3;
        font-size: 1.5rem;
    }

    #main .point::before {
        content: "CHECK";
        position: absolute;
        background: #222;
        border-radius: 50%;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-family: Arial, Helvetica, " sans-serif";
        font-size: 9px;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    #main .point::after {
        content: "";
        display: block;
        position: absolute;
        left: 45px;
        height: 0;
        width: 0;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-left: 8px solid #222;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #main .recommend {
        position: relative;
        box-sizing: border-box;
        margin: 0.5em 0 0.5em;
        padding: 1em 0 1em 4em;
        position: relative;
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        line-height: 1.3;
        font-size: 1.5rem;
    }

    #main .recommend::before {
        position: absolute;
        border-radius: 50%;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-family: Arial, Helvetica, " sans-serif";
        font-size: 9px;
        font-size: 2rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    #main .recommend::after {
        content: "";
        display: block;
        position: absolute;
        left: 42px;
        height: 0;
        width: 0;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #main .recommend a {
        background-size: 15px auto;
        padding: 1rem;
    }

    #main .float-wrap {
        margin: 2.5em 0;
        padding: 0 0.2em;
    }

    #main .float-wrap .catch {
        margin: 0 0 0.4em;
        font-weight: bold;
        font-size: 1.5rem;
        line-height: 1.7;
    }

    #main .float-wrap p {
        margin: 0;
        padding: 0;
    }

    #main .float-wrap .fl, #main .float-wrap .fr, #main .float-wrap .ct {
        float: none;
        padding: 0 0 0.5em;
        width: 100%;
    }

    #main .float-wrap .fl.t_small {
        width: 40%;
        float: left;
        padding: 0 1.5em 0 0;
    }

    #main .float-wrap .fr.t_small {
        width: 40%;
        float: right;
        padding: 0 0 0 1.5em;
    }

    /*  btns*/
    #main .btn-internal {
        margin: 1.5em 1em;
        padding: 0;
        box-sizing: border-box;
        width: auto;
    }

    #main .btn-internal a {
        position: relative;
        display: block;
        padding: 0.7em 2em 0.8em;
        font-weight: bold;
        text-align: center;
        line-height: 1.3;
        text-decoration: none;
        font-size: 1.5rem;
        box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.05);
    }

    #main .btn-web {
        margin: 1.5em 1em;
        padding: 0;
        width: auto;
    }

    #main .btn-web a {
        padding: 1em 2em 0.8em;
        margin: 0 0 3rem;
        line-height: 1.3;
        font-size: 1.5rem;
        box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.05);
    }

    #main .btn-tel {
        margin: 1.5em 1em;
        padding: 0;
        box-sizing: border-box;
        background: #32b16c;
        border-radius: 100px;
        box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.05);
    }

    #main .btn-tel a {
        position: relative;
        display: block;
        padding: 0.7em 2em 0.8em;
        font-weight: bold;
        text-align: center;
        color: #fff;
        line-height: 1.3;
        text-decoration: none;
        font-size: 1.5rem;
    }

    #main .btn-tel a::before {
        display: block;
        position: absolute;
        content: "";
        background: url(./img/icon_tel.png) 0 0 no-repeat;
        background-size: auto 25px;
        width: 24px;
        height: 25px;
        margin: -13px 0 0;
        top: 50%;
        left: 12px;
    }

    #main .btn-link {
        margin: 1.5em 1em;
        padding: 0;
        border: 1px solid #00c8dd;
        box-sizing: border-box;
        border-radius: 100px;
        box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.05);
    }

    #main .btn-link a {
        position: relative;
        display: block;
        padding: 0.7em 2em 0.8em;
        background: url(./img/arrow_lb2.png) 97% 50% no-repeat;
        text-align: center;
        line-height: 1.3;
        text-decoration: none;
        font-size: 1.5rem;
    }

    #main .btn-link a::before {
        display: none;
    }

    /* box-wrap(2box) */
    #main .box-wrap {
        margin: 1.5em 0;
    }

    #main .box {
        position: relative;
        display: block;
        margin: 0 0 1.6em;
        padding: 0 0 0;
        text-decoration: none;
        float: none;
        width: auto;
    }

    #main .box .flame {
        padding: 0 0 0;
    }

    #main .box .flame img {
        width: 100%;
    }

    #main .box .box-head .sttl {
        display: block;
        margin: 0 0.6em;
        padding: 1.2em 0.4em;
        background-size: 8px auto;
        font-weight: bold;
        font-size: 1.8rem;
        line-height: 1.3;
    }

    #main .box .box-head a {
        display: block;
        text-decoration: none;
        padding-right: 3rem;
    }

    #main .box .box-body {
        margin: 0 0.6em;
        padding: 1.2em 0 1.5em;
        background: url(./img/dotline4.png) 0 0 repeat-x;
        background-size: auto 1px;
    }

    #main .box .box-body .catch {
        margin: 0 0 0.6em;
        padding: 0 0.4em;
        font-size: 1.5rem;
        font-weight: bold;
    }

    #main .box .box-body p {
        margin: 0 0;
        padding: 0 0.4em;
    }

    #main .box .box-body .in_link_btn {
        margin: 0.7em 2em 0;
        padding: 0;
        border: 2px solid #d90000;
        box-sizing: border-box;
    }

    #main .box .box-body .in_link_btn a {
        position: relative;
        display: block;
        padding: 0.7em 2em 0.8em;
        background: url(./img/arrow_rd.png) 97% 50% no-repeat;
        background-size: 7px auto;
        font-weight: bold;
        text-align: center;
        color: #d90000;
        line-height: 1.3;
        text-decoration: none;
        font-size: 1.5rem;
    }

    #main .box-wrap .type_b .box-head {
        display: table;
        width: 100%;
    }

    #main .box-wrap .type_b .box-head .engBox {
        display: table-cell;
        vertical-align: middle;
        width: 20%;
        color: #fff;
        font-family: Arial, Helvetica, " sans-serif";
        font-size: 1rem;
        text-align: center;
        line-height: 1.3;
    }

    #main .box-wrap .type_b .box-head .engBox span {
        display: block;
        font-size: 2.4rem;
        line-height: 1.1;
    }

    #main .box-wrap .type_b .box-head .sttl {
        display: table-cell;
        width: 80%;
        margin: 0;
        padding: 1.2em 2em 1.2em 0.6em;
        background-size: 8px auto;
        text-align: left;
    }

    #main .box-wrap .type_b .box-body {
        background: none;
    }

    #main .box-wrap .type_b .box-body .catch {
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        margin: 0 0 0.7em;
        padding: 0 0.4em 0.8em;
    }

    /* frame-wrap (3box) */
    #main .frame-wrap {
        margin: 1.5em 0 2em;
        padding: 1.5em 0;
        text-align: center;
    }

    #main .frame {
        position: relative;
        margin: 0 0 1.6em;
        padding: 0 0 0.2em;
        background: #fff;
        border: 1px solid #ddd;
    }

    #main .frame .frame-head {
        margin: 0 0 0.1em;
        padding: 0.8em 0 0.8em;
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 1.4;
    }

    #main .frame .frame-head p {
        margin: 0;
        padding: 0;
    }

    #main .frame .frame-body {
        background: #fff;
        margin: 0 0.6em;
        padding: 0 0 0.6em;
    }

    #main .frame-wrap .frame-body .catch {
        margin: 0 0 0.6em;
        padding: 0 0.4em;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: left;
    }

    #main .frame .frame-body p {
        margin: 0;
        padding: 0 0.4em;
        font-size: 1.3rem;
    }

    #main .frame-wrap .type_a {
        border-top: 3px solid #ddd;
    }

    #main .frame-wrap .type_a .engImg {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 4px;
        font-family: Arial, Helvetica, " sans-serif";
        font-size: 3.8rem;
        line-height: 1;
    }

    #main .frame-wrap .type_a .frame-head {
        position: relative;
        padding: 0.8em 1.2em 0.8em;
        z-index: 1;
        /* background: url(./img/arrow.png) 97% 50% no-repeat; */
        background-size: 8px auto;
        text-align: center;
    }

    #main .frame-wrap .type_a .frame-head a {
        display: block;
    }

    #main .frame-wrap .type_a .frame-body {
        padding: 0.8em 0 1.2em;
    }

    #main .frame-wrap .type_b {
        width: auto;
        margin: 3rem 0 0;
    }

    #main .frame-wrap .type_b .frame-head {
        position: relative;
        margin: 0 0;
        padding: 1em 1.2em 1em;
    }

    #main .frame-wrap .type_b .frame-head::before {
        background-size: 100% auto;
        width: 40px;
    }

    #main .frame-wrap .type_b .frame-head p {
        line-height: 1.4;
        text-align: center;
        display: block;
    }

    #main .frame-wrap .type_b .frame-body {
        padding: 0.5em 0 1.2em;
    }

    #main .frame-wrap .type_b .miniBox {
        margin: 1em 0 0;
        padding: 1.5rem 1rem;
    }

    #main .frame-wrap .type_b .miniBox .fontBold {
        padding: 0 0.6em;
        text-align: left;
        font-size: 1.5rem;
    }

    #main .frame-wrap .type_b .miniBox .fontBold a {
        display: block;
        padding: 1em 1em 0.6em 0;
        background: url(./img/arrow.png) 99% 50% no-repeat;
        background-size: 7px auto;
    }

    #main .frame-wrap .type_b .frame-body p {
        padding: 0 0.6em;
        line-height: 1.7;
    }

    #main .frame-wrap .type_c .frame-head {
        padding: 2.3rem 0.6em 2.3rem 6rem;
    }

    #main .frame .frame-head::after {
        border-width: 13px 9px 0 9px;
        bottom: -12px;
        left: 63px;
    }

    #main .frame-wrap .type_c .frame-head::before {
        width: 35px;
        height: 55px;
        background-size: 100% auto;
        top: 8px;
    }

    #main .frame-wrap .type_c .frame-head p {
        display: table-cell;
        vertical-align: middle;
        margin: 0;
        padding: 0.1em 0.6em 0 3.8em;
        padding: 0.5em 0.6em 0.5em 3.8em;
        background: url(./img/frame_icon.png) 0.8em 50% no-repeat;
        background-size: 44px auto;
        min-height: 44px;
        line-height: 1.3;
    }

    #main .frame-wrap .type_c .frame-body {
        padding: 0.8em 0 1.2em;
    }

    #main .frame-wrap .type_c .frame-body p {
        padding: 1rem 1rem 0;
    }

    #main .frame-wrap .type_c .frame-body p .botCom {
        display: block;
        color: #333;
        font-weight: normal;
        text-align: right;
        font-size: 1.2rem;
    }

    /* addParts_common */
    #contents .addParts {
    }

    #contents .addParts .partTtl {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        text-align: left;
        line-height: 1.3;
        font-weight: bold;
    }

    #contents .addParts .partTtl::before, #contents .addParts .partTtl::after {
        content: "";
        width: 0;
        height: 0;
        background: none;
        top: 0;
        border: none;
    }

    #contents .addParts .partTtl a {
        color: #333;
        padding: 0 30px 0 0;
        text-align: center;
        display: block;
    }

    #contents .addParts .boxTtl {
        margin: 0;
        padding: 0;
        background: none;
        text-align: left;
        line-height: 1.3;
    }

    #contents .addParts .boxTtl::before, #contents .addParts .boxTtl::after {
        content: "";
        width: 0;
        height: 0;
        background: none;
    }

    #contents .addParts p {
        margin: 0;
        padding: 0;
    }

    #contents .addParts ul {
        margin: 0;
        padding: 0;
    }

    #contents .addParts li {
        margin: 0;
        padding: 0;
    }

    #contents .addParts li::before {
        content: "";
    }

    /* addParts01 */
    #contents .addParts01 {
        padding: 5.2em 0 2em;
        margin: 0;
    }

    #contents .addParts01 .engTtl {
        position: relative;
        margin: 0 auto 1.6em;
        padding: 0.5rem 0 0.5rem;
        text-align: center;
        font-size: 1.3rem;
    }

    #contents .addParts01 .partTtl {
        margin: 0 0 0.8em;
        font-size: 2rem;
        text-align: center;
    }

    #contents .addParts01 .introTxt {
        margin: 0 0.2em 1.4em;
        width: auto;
    }

    #contents .addParts01 .mainArea {
        position: relative;
        padding: 0.1em 0 1em;
        z-index: auto;
        margin-bottom: 8rem;
    }

    #contents .addParts01 .mainArea::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 0px;
    }

    #contents .addParts01 .boxTtl {
        margin: 0 0 40px;
        padding: 1.5rem 20px;
        background-size: auto 12px;
        font-size: 2rem;
        text-align: center;
        background: #fff;
    }

    #contents .addParts01 .cmpArea {
        margin: 0 0 1em;
        padding: 0 0.8em;
    }

    #contents .addParts01 .cmpArea .flImg {
        float: none;
        width: auto;
    }

    #contents .addParts01 .cmpArea .flImg img {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    #contents .addParts01 .cmpArea .flImg .caption {
        text-align: center;
        padding: 0.2em 0.2em 1em;
    }

    #contents .addParts01 .cmpArea .sttl {
        margin: 0 0 22px;
        font-size: 1.5rem;
    }

    #contents .addParts01 .cmpArea .sttl .engSttl {
        /* display: none; */
    }

    #contents .addParts01 .cmpArea .sttl .system_name {
        padding-left: 2rem;
        font-weight: bold;
        margin: 0;
        font-size: 2.5rem;
        background: #ffffff;
        color: #333;
        padding: 15px 20px;
    }

    #contents .addParts01 .cmpArea .sttl h3::before {
        display: none;
    }

    #contents .addParts01 .cmpArea .sttl a {
        display: block;
        padding: 0.6em 1.2em 0.6em 0.4em;
        background: url(./img/arrow.png) 98% 50% no-repeat;
        background-size: 8px auto;
        font-weight: bold;
        line-height: 1.3;
    }

    #contents .addParts01 .cmpArea ul {
        margin: 0.8em auto 3rem;
        text-align: center;
    }

    #contents .addParts01 .cmpArea li {
        display: table;
        width: 47%;
        float: left;
        /* margin: 0 0.5em 0.8em 0; */
        padding: 0 1%;
        overflow: hidden;
        color: #333;
        text-align: left;
        font-size: 1.2rem;
        line-height: 1.1;
    }

    #contents .addParts01 .cmpArea li:nth-child(2n) {
        margin: 0;
    }

    #contents .addParts01 .cmpArea li p {
        display: table-cell;
        /* vertical-align: middle; */
        padding: 0.8em 0.5em 0 1em;
        /* border-radius: 1.2em / 50%; */
        /* text-align: center; */
    }

    #contents .addParts01 .cmpArea li:nth-child(odd) {
        clear: both;
    }

    #contents .addParts01 .listArea {
        margin: 0 -1.4rem 1em;
        padding: 0 0 0.8em;
    }

    #contents .addParts01 .listArea::before {
        width: 90%;
        left: 4rem;
        border-radius: 18px 0 0 18px;
    }

    #contents .addParts01 .listArea .sttl {
        padding: 0 0.8em;
        font-weight: bold;
        text-align: center;
        font-size: 2rem;
        margin: 3rem 1rem;
    }

    #contents .addParts01 .explainer, #contents .addParts01 .agency, #contents .addParts01 .agency_video {
        width: 96%;
        margin: auto;
    }

    #contents .addParts01 .explainer h4, #contents .addParts01 .agency h4, #contents .addParts01 .agency_video h4 {
        font-size: 1.8rem;
        margin: 2rem 0 1rem;
    }

    #contents .addParts01 .listArea .sttl a {
        display: block;
    }

    #contents .addParts01 .listArea ul {
    }

    #contents .addParts01 .listArea li {
        box-sizing: border-box;
        margin: 0 1.6em 2.6em;
        padding: 0.8em 0.6em 0.8em;
        background: #fff;
        width: 90%;
    }

    #contents .addParts01 .listArea.example ul li {
        width: 90%;
        padding: 2rem;
    }

    #contents .addParts01 .listArea li .iconImg {
        position: absolute;
        width: 3em;
    }

    #contents .addParts01 .listArea li .iconImg img {
        width: 100%;
    }

    #contents .addParts01 .listArea li .catch {
        margin: 0 0 12px;
        padding: 0 0.4em 0.8em 3.6em;
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        font-weight: bold;
        line-height: 1.6;
    }

    #contents .addParts01 .listArea li p {
        padding: 0 0.4em;
        font-size: 1.3rem;
    }

    #contents .addParts01 .btn-web, #contents .addParts01 .btn-tel {
        margin: 0 2em 1em;
        width: auto;
    }

    #contents .addParts01 .btn-web + .btn-tel {
        margin: -1rem 2em 3em;
    }

    /* addParts02 */
    #contents .addParts02 {
        margin: 0 -2rem;
        padding: 2rem;
        background-size: auto 6px;
    }

    #contents .addParts02::before {
        background-size: 150% auto;
        background-position: center top;
        width: 100%;
        right: 0;
        border-radius: 0;
    }

    #contents .addParts02 .areaInner {
        margin: 0 -200%;
        padding: 6em 200% 0;
    }

    #contents .addParts02 .headBox {
        margin: 0 0 0;
        padding: 1em 1em 1.2em;
        background: none;
    }

    #contents .addParts02 .partTtl {
        margin: 0 0 0.4em;
        font-size: 1.8rem;
        text-align: center;
        line-height: 1.4;
    }

    #contents .addParts .partTtl {
        margin: 0 0 3rem;
        padding: 0;
        background: none;
        border: none;
        line-height: 1.3;
        font-weight: bold;
        color: #333;
        text-align: center;
    }

    #contents .addParts02 .partTtl {
        font-size: 2.4rem;
    }

    #contents .addParts02 .headBox .engTtl {
        position: relative;
        padding: 0 0 0.4em;
        font-family: Arial, Helvetica, " sans-serif";
        text-align: center;
        color: #d90000;
        font-size: 1rem;
    }

    #contents .addParts02 .headBox .engTtl::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 2px;
        background: #d90000;
        bottom: 0;
        left: 50%;
        margin: 0 0 0 -20px;
    }

    #contents .addParts02 .headBox .engTtl::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 2px;
        background: #222;
        bottom: 0;
        left: 50%;
    }

    #contents .addParts02 .introTxt {
        margin: 0 0.2em 2em;
    }

    #contents .addParts02 .mainArea .boxTtl {
        position: relative;
        margin: 0 0 1em;
        border-top: 3px solid #eee;
        background: url(./img/dotline4.png) 0 100% repeat-x;
        background-size: auto 1px;
        font-size: 1.7rem;
    }

    #contents .addParts02 .mainArea .boxTtl a {
        display: block;
        padding: 0.6em 1.6em 0.6em 0.4em;
        background: url(./img/arrow.png) 98% 50% no-repeat;
        background-size: 8px auto;
    }

    #contents .addParts02 .mainArea .boxTtl::before {
        content: "";
        position: absolute;
        background: #d90000;
        width: 45px;
        height: 3px;
        top: -3px;
        left: 0;
    }

    #contents .addParts02 .mainArea ul {
    }

    #contents .addParts02 .mainArea li {
        margin: 0 0 0.8em;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #ddd;
        width: 100%;
        padding: 0;
    }

    #contents .addParts02 .mainArea li .flame {
        width: 100%;
    }

    #contents .addParts02 .mainArea li .flame img {
        width: 100%;
    }

    #contents .addParts02 .mainArea li .sttl {
        display: block;
        vertical-align: middle;
        box-sizing: border-box;
        width: 100%;
        padding: 18px 13px 12px 13px;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.1em;
        margin: 0;
    }

    #contents .addParts02 .mainArea li .sttl a {
        display: block;
        position: relative;
        padding: 0 1.6em 0.3em 0;
    }

    #contents .addParts02 .mainArea li p {
        margin: 0 10px;
        padding: 1.5rem 10px 1rem;
        font-size: 1.3rem;
        background: url(./img/dotline4.png) 0 0 repeat-x;
    }

    #contents .addParts02 .mainArea li .btn-internal {
        border: 2px solid #d90000;
        margin: 1em 5em 1.4em;
    }

    #contents .addParts02 .mainArea li .btn-internal a {
        background: url(./img/arrow_rd.png) 95% 50% no-repeat;
        background-size: 6px auto;
        padding: 0.5em 1.4em 0.5em;
        font-family: Arial, Helvetica, " sans-serif";
        letter-spacing: 0.1em;
        font-weight: normal;
    }

    /* addParts03 */
    #contents .addParts03 {
        margin: 0;
        padding: 1em 1rem 2rem;
        background: #baf0f6;
        background-size: 100px auto;
        border-radius: 2rem;
    }

    #contents .addParts03::before {
        display: none;
    }

    #contents .addParts03 .mainArea {
        box-sizing: border-box;
        padding: 0 0 0;
        margin: 0;
        width: auto;
    }

    #contents .addParts03 .headBox {
        margin: 0 0 2rem;
        display: table;
        width: 100%;
    }

    #contents .addParts03 .cellBox {
        box-sizing: border-box;
        padding: 1em;
        background: url(./img/add03_vis.png) 100% 50% no-repeat;
        background-size: 130%;
        width: 100%;
        border-radius: 2rem;
    }

    #contents .addParts03 .partTtl {
        position: relative;
        background: rgba(246, 246, 246, 0.9);
        font-size: 1.8rem;
        margin: 2rem 0 2rem;
    }

    #contents .addParts03 .partTtl::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 20px;
        border-top: 0px solid #7f7f7f;
        border-left: 0px solid #7f7f7f;
        top: 0;
        left: 0;
    }

    #contents .addParts03 .partTtl::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 20px;
        border-bottom: 0px solid #7f7f7f;
        border-right: 0px solid #7f7f7f;
        top: auto;
        bottom: 0;
        right: 0;
    }

    #contents .addParts03 .partTtl a {
        display: block;
        padding: 1em 1.6em 1em 0.8em;
        background: url(./img/arrow.png) 95% 50% no-repeat;
        background-size: 8px auto;
        font-size: 2.2rem;
    }

    #contents .addParts03 .partTtl a span {
    }

    #contents .addParts03 .catch {
        margin: 0 0 0.6em;
        font-size: 1.6rem;
        font-weight: bold;
    }

    #contents .addParts03 .introTxt {
        margin: 0 0.2em 1em;
    }

    #contents .addParts03 .listArea {
        position: relative;
        z-index: 1;
        background: #fff;
    }

    #contents .addParts03 .listArea ul {
        background: #fff;
        padding: 1em 1.2em 0.2em;
    }

    #contents .addParts03 li {
        margin: 0 0 1em;
        padding: 0 0 0 1.6em;
        background-size: 1em auto;
        line-height: 1.4;
        font-size: 1.3rem;
    }

    /* ================== */
    /*  サイトマップ　　　　　　*/
    /* ================== */
    .mappage .subList {
        margin: 0.2em 0 !important;
    }

    .mappage h2 {
        margin: 2.5em 0 0.2em;
    }

    .selections {
        margin: 20px 0px;
        width: auto;
        padding-bottom: 10px;
        overflow-x: scroll;
        padding: 9rem 0 0;
    }

    .selections::-webkit-scrollbar {
        height: 10px;
    }

    .selections::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .selections::-webkit-scrollbar-thumb {
        background: #bcbcbc;
        border-radius: 5px;
    }

    #main .selections table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        font-size: 14px;
        width: 500px;
        margin: 0;
        border: none;
    }

    .selections table th, .selections table td {
        border: 1px solid #333;
        text-align: center;
        word-break: break-all;
        vertical-align: middle;
        padding: 20px;
    }

    #main .selections table th {
        font-size: 11px;
        font-weight: bold;
        width: 96px;
        background: #ececec;
        padding: 5px 26px 5px 10px;
    }

    #main .selections thead th:first-child {
        color: #7edde7;
    }

    #main .selections table td.superiority {
        width: 100%;
        font-size: 1.8rem;
    }

    .selections table tbody td.superiority.maru span {
        font-size: 2rem;
    }

    #main .selections thead th:first-child {
        background: #f6f6f6;
        padding: 0;
    }

    thead {
        font-size: 1.6rem;
    }

    #main thead th {
        background: #ffffff;
        border: 0px solid #ddd;
    }

    .selections table th .ques {
        top: 38%;
        right: 2px;
    }

    .selections table th .ques img {
        width: 15px;
    }

    #main .selections table tr.btn td, #main .selections table tr.btn th {
        background: #f6f6f6;
    }

    #main .selections table .btn-internal a {
        font-size: 1.1rem;
        padding: 10px 10px 30px;
        margin-top: 1rem;
    }

    table .system_name {
        text-align: center;
        font-size: 2.4rem;
        position: relative;
        margin-bottom: 1.5rem;
    }

    .system_catch {
        text-align: center;
    }

    .system_price {
        text-align: center;
        background: #fff;
        color: #333;
        padding: 4px 5px 0;
        height: 7rem;
        margin: 1rem 0 0;
        font-size: 1.3rem;
        white-space: normal;
    }

    .system_agency {
        text-align: center;
    }

    .selections table tbody td {
        font-size: 1.8rem;
    }

    .system_price span {
        font-size: 2.2rem;
    }

    #main p.annotation {
        font-size: 1rem;
        margin: -25px 0 0;
    }

    span.annotation {
        font-size: 1rem;
        color: #7f7f7f;
        margin-left: 0.5rem;
    }

    #main table .btn th, #main table .btn td {
        border: 0px solid #ddd;
        background: #fff;
        padding: 0 1rem 3rem;
    }

    #main table th, #main table td {
        line-height: 1.4;
        padding: 14px 10px;
        text-align: center;
        font-size: 1.3rem;
    }

    #main table thead th {
        border: 0px solid #ddd;
        color: #333;
    }

    #main .selections table td {
        border-color: #f6f6f6;
        font-size: 1.5rem;
    }
}

/* End_SP */
@media screen and (min-width: 480px) {
    /*------------
481px--common
------------*/#contents .addParts03 {
        margin: 6rem -200% 0;
        padding: 0 200%;
        background: url(./img/add03_vis.png) left 36% top 6% no-repeat;
        background-size: 20% auto;
    }
}

/*  End_WidePC*/
/* msie11_+pdtop4 */
@media all and (-ms-high-contrast: none) {
    *::-ms-backdrop, .dropmenu li ul li {
        transition: 0s;
    }

    *::-ms-backdrop, .index h2, .category h1, .page h1 {
        padding: 24px 20px 18px;
    }

    *::-ms-backdrop, .index h3, .category h2, .page h2 {
        padding: 22px 20px 14px;
    }

    *::-ms-backdrop, .index h4, .category h3, .page h3 {
        padding: 22px 20px 14px;
    }

    *::-ms-backdrop, .index h5, .index h6, .category h4, .category h5, .category h6, .page h4, .page h5, .page h6 {
        padding: 16px 20px 10px;
    }

    *::-ms-backdrop, #main .box .box-body .in_link_btn a::before {
        height: 200%;
    }

    *::-ms-backdrop, #g-nav .areaInner .navBox .sttl a::before {
        bottom: -6px;
    }

    *::-ms-backdrop, #contents .addParts01 .partTtl {
        padding: 6px 0 0;
        margin: 0 0 22px;
    }

    *::-ms-backdrop, #contents .addParts01 .cmpArea li {
        padding: 10px 20px 6px;
    }

    *::-ms-backdrop, #contents .addParts01 .listArea .sttl {
        padding: 28px 20px 20px;
    }

    *::-ms-backdrop, #contents .addParts02 .mainArea .boxTtl a {
        padding: 20px 20px 14px;
    }

    *::-ms-backdrop, #contents .addParts03 .partTtl a {
        padding: 24px 50px 16px;
    }
}

/* animation */
@keyframes btn-action1 {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes btn-action2 {
    0% {
        color: #fff;
    }

    100% {
        color: #fff;
    }
}

@keyframes btn-action11 {
    0% {
        left: -100%;
    }

    30% {
        left: -20%;
    }

    50% {
        left: 0%;
    }

    70% {
        left: 20%;
    }

    100% {
        left: 100%;
    }
}

/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/
/*/////////////PC用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
#visArea .mainArea {
    height: 324px;
}

.system_price {
    height: auto;
}

.sp-only {
    display: none;
}

span.mv-strong {
    font-weight: bold;
    color: #ff0;
}

table .system_name {
    line-height: 1.5rem;
}

.system_name > span {
    font-size: 2.4rem;
    padding: 1rem 0 0;
    display: block;
}

.system_catch {
    padding-top: 1rem;
    color: #f9515e;
    font-size: 1.8rem;
    position: absolute;
    top: -81px;
    background: #fff;
    display: block;
    left: 0;
    right: 0;
    border-radius: 18px;
    border: 1px solid #00c8dd;
    padding: 2rem 0.5rem;
    margin: 0 0.5rem;
    letter-spacing: -1px;
}

.system_catch::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 10px 0 10px;
    border-color: #00c7dd transparent transparent transparent;
    position: absolute;
    bottom: -12px;
    right: 0;
    left: 0;
    display: block;
    margin: auto;
}

#contents .addParts01 .agency .frame {
    width: 900px;
}

#contents .addParts01 .agency ul {
    padding-left: 2rem;
    margin: 0;
}

#contents .addParts01 .agency ul li {
    padding-left: 2rem;
}

#main .frame-wrap .type_a .frame-head {
    text-align: left;
    line-height: 1.4;
}

#contents .addParts ul {
    margin: 2rem;
    padding: 0;
    border: 0;
}

#contents .addParts ul li {
}

#main .frame-wrap .type_c .frame-body p .botCom {
    word-break: break-all;
    font-size: 1rem;
}

.t-movie {
    width: 456px;
    height: 300px;
}

.t-movie-b {
    text-align: center;
    padding-bottom: 0;
}

#contents .addParts p.top-p {
    margin: 0 0.8em 1em !important;
    padding: 0 0 0.8em !important;
}

/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 480px) {
    /*/////////////SP用のCSSをここに作成してください。/////////////*/ /*/////////////必ず中括弧の中に作成してください。/////////////*/ span.mv-strong {
        font-weight: bold;
        color: #ff0;
    }

    table .system_name {
        line-height: 1.5rem;
    }

    table .system_name::before {
        margin: -1rem auto;
    }

    .system_name > span {
        font-size: 1.4rem;
    }

    .system_catch {
        padding-top: 1rem;
        font-size: 1.2rem;
        padding: 1rem;
        min-height: 3.2rem;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    #main .frame-wrap .type_a .frame-head {
        text-align: left;
    }

    #contents .addParts ul {
        margin: 2rem;
        padding: 0;
        border: 0;
    }

    #contents .addParts ul li {
        padding: 0 0 0 25px;
        list-style-position: outside;
    }

    #main .frame-wrap .type_c .frame-body p .botCom {
        word-break: break-all;
        font-size: 1rem;
    }

    #contents .addParts ul {
        margin: 0.5rem;
    }

    #contents .addParts01 .listArea li .catch {
        padding: 0 0.4em 0.8em;
    }

    #contents .addParts01 .agency .frame.type_a {
        width: auto;
    }

    .t-movie-b {
        text-align: center;
        padding-bottom: 4rem;
    }

    .t-movie {
        width: 100%;
        height: 60vw;
    }

    #contents .addParts p.top-p {
        margin: 0 0.8em 1em !important;
        padding: 0 0 0.8em !important;
    }

    .lower_bottom {
        margin: 6rem 0 0;
    }

    .simple_selections::before {
        height: calc(100% - 60px);
    }

    .lower_bottom .selections {
        margin: 0;
        padding-bottom: 1rem;
    }
}