@charset "utf-8";
/* CSS Document */

/* =============================================================================
	共通 
============================================================================= */
/* parts  -------------------- { */
:root {
	/* color */
	--color-supbase1: #005243;
	--color-supbase1-tp10: #0052431A;
	--color-repair-01: #EBEA02;
	--color-repair-01-tp10: #EBEA021A;
	--color-repair-01-tp20: #EBEA0233;
	--color-repair-01-tp30: #EBEA024D;
	--color-repair-02: #EB0602;
	--color-repair-03: #963533;
	--color-repair-03-tp05: #9635330D;
	--color-repair-03-tp10: #9635331A;
	--color-repair-04: #37556B;

	/* chat*/
  --chat-width-max: 100%;/* 吹き出しの横幅最大値 */
  --chat-height-min: 120px;/* 吹き出しの縦幅最大値 */
  --chat-margin: 20px;/* 前後要素との距離 */
  --chat-icon-size: 120px;/* アイコン画像のサイズ */
  --chat-text-padding: 16px;/* テキスト内余白 */
  --chat-text-font-size: 1.5rem;/* テキスト文字大きさ */
  --chat-item-distance: 8px;/* アイコン画像〜吹き出し間の距離 */
  --chat-icon-radius: 50%;/* アイコン円形 */
  --chat-icon-bgcolor: rgb(255,255,255);/* アイコン背景色 */
	--chat-icon-bgcolor-ope: #E5EDEC;
  --chat-icon-bgimage-cus1: url(/support/repair/tenken/images/icon/icon-chat-cus1.svg);/* 左画像1 */
  --chat-icon-bgimage-cus2: url(/support/repair/tenken/images/icon/icon-chat-cus2.svg);/* 左画像2 */
  --chat-icon-bgimage-cus3: url(/support/repair/tenken/images/icon/icon-chat-cus3.svg);/* 左画像3 */
  --chat-icon-bgimage-cus4: url(/support/repair/tenken/images/icon/icon-chat-cus4.svg);/* 左画像4 */
  --chat-icon-bgimage-ope: url(/support/repair/tenken/images/icon/icon-chat-ope.svg);/* 右画像 */
  --chat-text-radius: 8px;/* テキスト角丸 */
  --chat-text-bgcolor: #E5EDEC;/* テキスト背景色 */
  --chat-text-bgcolor-c: rgb(255,255,255);/* テキスト背景色 */
  --chat-text-color: rgb(0,0,0);/* テキスト文字色 */
  --chat-triangle-size: 20px;/* 吹き出し角大きさ */
  --chat-triangle-position-top: 16px;/* 吹き出し角位置(上から) */
	
	/* campaign popup */
	--bggrd-yearend-01:#c0b283;
	--bggrd-yearend-02:#FEE9A0;
	--lblgrd-yearend-01:#757575;
	--lblgrd-yearend-02:#9E9E9E;
	--lblgrd-yearend-03:#E8E8E8;
	--cam-yearend-tit: #005243;
	--bg-yearend-subtit-01: #6C2625;/*リボン奥*/
	--bg-yearend-subtit-02: #963533;/*リボン表面*/
	--bg-yearend-subtit-03: #4A1A19;/*リボン影*/
	--bg-yearend-camtit: #005243;
	--color-yearend-camtit: #FFFFFF;
	--color-yearend-camtxt: #005243;
	--hover-yearend-learnmore: #EBEA02;

	--bggrd-summer-01:#99DDFF;
	--bggrd-summer-02:#55CCFF;
	--lblgrd-summer-01:#FFA8A8;
	--lblgrd-summer-02:#FFD3A8;
	--lblgrd-summer-03:#FFD3D3;
	--cam-summer-tit: #CC1495;
	--bg-summer-subtit-01: #004966;/*リボン奥*/
	--bg-summer-subtit-02: #005B80;/*リボン表面*/
	--bg-summer-subtit-03: #00374D;/*リボン影*/
	--bg-summer-camtit: #00AAEE;
	--color-summer-camtit: #000000;
	--color-summer-camtxt: #CC1495;
	--hover-summer-learnmore: #CC1495;

}

/* font */
.font-udkakugo-lg400 { font-family: fot-udkakugo-large-pr6n, sans-serif; font-weight: 400; font-style: normal; }
.font-udmarugo-lg500 { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 500; font-style: normal; }
.font-udmarugo-lg700 { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal; }

/* color */
.font-color-repair-03 { color: var(--color-repair-03); }

/* re-setteng */
.section.tenkeninfo { background: var(--color-supbase1-tp10); }
h1,h2,h3,h4,h5 { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal;}
.reset_table_hed tbody th, .reset_table_he .th  { width: auto; }

/* cover */
.hero-area-supsrv01.tenken {
    background-image: url("/support/repair/tenken/images/img-cover_tenken.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}
@media only screen and (max-width: 768px) {
	.hero-area-supsrv01.tenken .content-inner { background: #ffffff4D; }
}
/* -------------------- } parts */

/* =============================================================================
	トップページ 
============================================================================= */
/* srv-subject1  -------------------- { 202511-動画追加対応 */
.srv-subject1 { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.srv-subject1 > .item1 { grid-area: 1 / 1 / 2 / 3; }
.srv-subject1 > .item2 { grid-area: 2 / 1 / 3 / 3; }
.srv-subject1 > .embed { grid-area: 1 / 3 / 3 / 4; }
.srv-subject1 > [class^="item"] { border: 2px solid #c6c6c0; padding: 16px;}
.srv-subject1 > [class^="item"] > .item-tit { text-align: center; }
.srv-subject1 > [class^="item"] > .item-tit .item-num { display: flex; justify-content: center; align-items: center; font-size: 3rem; color: var(--color-supbase1);}
.srv-subject1 > [class^="item"] > .item-tit .item-num::before,
.srv-subject1 > [class^="item"] > .item-tit .item-num::after { content: ''; width: 30px; height: 2px; background-color: currentColor; }
.srv-subject1 > [class^="item"] > .item-tit .item-num::before { margin-right: 16px; }
.srv-subject1 > [class^="item"] > .item-tit .item-num::after { margin-left: 16px; }
.srv-subject1 > [class^="item"] > .item-tit h3 { font-size: 2.2rem; margin-top: 8px; margin-bottom: 16px; }
/*.srv-subject1 { display: flex; gap: 32px; justify-content: space-between; align-items: stretch; }*/
/*.srv-subject1 > .item { width: 50%; border: 2px solid #c6c6c0; padding: 16px;}*/
/*.srv-subject1 > .item > .item-tit { text-align: center; }
.srv-subject1 > .item > .item-tit .item-num { display: flex; justify-content: center; align-items: center; font-size: 3rem; color: var(--color-supbase1);}
.srv-subject1 > .item > .item-tit .item-num::before,
.srv-subject1 > .item > .item-tit .item-num::after { content: ''; width: 30px; height: 2px; background-color: currentColor; }
.srv-subject1 > .item > .item-tit .item-num::before { margin-right: 16px; }
.srv-subject1 > .item > .item-tit .item-num::after { margin-left: 16px; }
.srv-subject1 > .item > .item-tit h3 { font-size: 2.2rem; margin-top: 8px; margin-bottom: 16px; }*/
@media only screen and (max-width: 768px) {
	.srv-subject1 { display: block;}
	.srv-subject1 > [class^="item"] { width: 100%; }
	.srv-subject1 > div:not(:first-child) { margin-top: 16px; }
	/*.srv-subject1 > .item { width: 100%; }*/
	/*.srv-subject1 > .item:not(:first-child) { margin-top: 16px; }*/
}
/* -------------------- } srv-subject1 */

/* srv-features  -------------------- { */
.srv-features { border: 2px solid #c6c6c0; border-radius: 8px; background: var(--color-supbase1-tp10); margin-top: 32px;}
.srv-features > h3 { margin: 32px 16px 16px; }
.srv-features-inner { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 32px 16px 16px;}
.srv-features-inner > .item { background: #ffffff; padding: 16px; border-radius: 8px; }
.srv-features-inner > .item > .img-catch { color: var(--color-supbase1); text-align: center; }
.srv-features-inner > .item > .txt-catch { font-weight: 700; color: var(--color-supbase1); font-size: 1.8rem;}
.srv-features-inner > .item > .txt-catch i { margin-right: .8rem; vertical-align: middle; }
@media only screen and (max-width: 768px) {
	.srv-features-inner { grid-template-columns: 1fr;}
}
/* -------------------- } srv-features */

/* srv-example  -------------------- { */
.srv-example { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.srv-example > .item { background: var(--color-repair-01-tp10); padding: 20px 16px 0 16px; border-radius: 8px; }
.srv-example > .item > h4 { position: relative; padding: 8px 4px 8px 50px; background: var(--color-repair-01-tp20); border-radius: 8px; font-size: 2.0rem; }
.srv-example > .item > h4::before { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: inline-block; font-family: 'Font awesome 5 free'; font-size: 2.0rem; text-align: center; line-height: 36px; width: 36px; height: 36px; content: '\3f'; background: var(--color-repair-01); border-radius: 50%; }
.srv-example > .item > h4:after { content: ''; display: block; position: absolute; left: 36px; height: 0; width: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid var(--color-repair-01); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.srv-example > .item > .chat { display: flex; align-items: flex-start; width: 100%; margin: var(--chat-margin) auto; gap: 0 calc(var(--chat-item-distance) + calc(var(--chat-triangle-size) / 1.5)); }
.srv-example > .item > .chat .chat__icon { flex-shrink: 0; width: var(--chat-icon-size); height: var(--chat-icon-size); background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: var(--chat-icon-radius); background-color: var(--chat-icon-bgcolor); }
.srv-example > .item > .chat .chat__text { position: relative; max-width: var(--chat-width-max,  initial); min-height: var(--chat-height-min, initial); padding: var(--chat-text-padding); font-size: var(--chat-text-font-size); border-radius: var(--chat-text-radius); color: var(--chat-text-color); background: var(--chat-text-bgcolor); font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 500; font-style: normal; }
.srv-example > .item > .chat .chat__text::after { content: ""; display: block; position: absolute; top: var(--chat-triangle-position-top); right: calc(100% - 1px); clip-path: polygon(100% 100%, 100% 0, 0 50%); width: calc(var(--chat-triangle-size) / 1.5); height: var(--chat-triangle-size); background: var(--chat-text-bgcolor); }
.srv-example > .item > .chat .chat__text.customer { background: var(--chat-text-bgcolor-c); }
.srv-example > .item > .chat .chat__text.customer::after { background: var(--chat-text-bgcolor-c); }
.srv-example > .item > .chat .chat__icon .img { width: 100px; height: 100px; margin: 10px; background-repeat: no-repeat; }
.srv-example > .item > .chat .chat__icon.operator .img { background-image: var(--chat-icon-bgimage-ope); }
.srv-example > .item > .chat .chat__icon.customer1 .img { background-image: var(--chat-icon-bgimage-cus1); }
.srv-example > .item > .chat .chat__icon.customer2 .img { background-image: var(--chat-icon-bgimage-cus2); }
.srv-example > .item > .chat .chat__icon.customer3 .img { background-image: var(--chat-icon-bgimage-cus3); }
.srv-example > .item > .chat .chat__icon.customer4 .img { background-image: var(--chat-icon-bgimage-cus4); }
.srv-example > .item > .chat.chat__r { justify-content: flex-end; }
.srv-example > .item > .chat.chat__r .chat__icon { order: 1; background-color: var(--chat-icon-bgcolor-ope); }
.srv-example > .item > .chat.chat__r .chat__text::after { right: auto; left: calc(100% - 1px); clip-path: polygon(100% 50%, 0 0, 0 100%); }
@media only screen and (max-width: 768px) {
	.srv-example { grid-template-columns: 1fr;}
}
/* -------------------- } srv-example */

/* =============================================================================
	サービス詳細 
============================================================================= */
/* srv-detail  -------------------- { */
.srv-detail { display: grid; grid-template-columns: 1fr 1fr; gap:32px; }
/*.srv-detail { display: flex; gap: 32px; justify-content: space-between; align-items: stretch; }
*/
.srv-detail > .item { border: 2px solid var(--color-supbase1); padding: 16px;}
.srv-detail > .item > .item-tit { text-align: center; }
.srv-detail > .item > .item-tit .item-num { display: flex; justify-content: center; align-items: center; font-size: 3rem; color: var(--color-supbase1);}
.srv-detail > .item > .item-tit .item-num::before,
.srv-detail > .item > .item-tit .item-num::after { content: ''; width: 30px; height: 2px; background-color: currentColor; }
.srv-detail > .item > .item-tit .item-num::before { margin-right: 16px; }
.srv-detail > .item > .item-tit .item-num::after { margin-left: 16px; }
.srv-detail > .item > .item-tit h3 { font-size: 2.2rem; margin-top: 8px; margin-bottom: 16px; }
.srv-detail > .item.option { grid-column: 1 / 3; }
.srv-detail > .item > .item-cnt { margin-bottom: 1.5rem; font-size: 1.8rem; }
.srv-detail > .item > .item-txt table tbody th, .srv-detail > .item > table .th  { width: auto; }
.srv-detail > .item > .item-txt table th, .srv-detail > .item > .item-txt table td  { padding: 6px 8px; }
.srv-detail > .item > .item-txt { font-size: 1.5rem; }
.srv-detail > .item > .item-txt > table{ font-size: 1.3rem; }
.srv-detail > .item > .item-txt h4 { font-size: 1.8rem; }
.srv-detail > .item > .item-txt h5 { font-size: 1.6rem; margin-top: 20px }
.srv-detail > .item > .item-txt p { margin-top: 1rem!important;}
.srv-detail > .item > .item-txt .list-a li+li { margin-top: .2rem;}
.srv-detail > .item > .item-block-option { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; font-size: 1.5rem; }
.srv-detail > .item > .item-block-option > .item { background: var(--color-supbase1-tp10); padding: 16px; border-radius: 8px; }
.srv-detail > .item > .item-block-option > .item h4 { font-size: 1.8rem;text-align: center; margin: 0 0 18px; padding-bottom: .9rem; }
@media only screen and (max-width: 768px) {
	.srv-detail { grid-template-columns: 1fr; }
	.srv-detail > .item.option { grid-column: initial; }
	.srv-detail > .item > .item-block-option { grid-template-columns: 1fr; }
}
/* -------------------- } srv-detail */

/* softwaremaintenance  -------------------- { */
.hide-area { display: none; }
.ContentsModal { height: 100vh; position: fixed; top: 0; left: 0; width: 100%; /*overflow-y: hidden;*/ z-index: 300; }
.ContentsModal .Modal_bg { background: rgba(0,0,0,0.8); height: 100vh;  position: absolute; width: 100%; }
.ContentsModal .js-modal-close-btn { position: fixed; right: 16px; top: 16px; color: #ffffff; cursor: pointer; opacity: 1; width: 50px; height: 50px; background: rgba(0,0,0,0); border-radius: 100%; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } 
.ContentsModal .js-modal-close-btn:focus,
.ContentsModal .js-modal-close-btn:hover { outline: 0; background: #ffffff; }
.ContentsModal .js-modal-close-btn:focus:after,
.ContentsModal .js-modal-close-btn:focus:before,
.ContentsModal .js-modal-close-btn:hover:after,
.ContentsModal .js-modal-close-btn:hover:before { background: #666666; }
.ContentsModal .js-modal-close-btn span { position: absolute!important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); padding: 0!important; border: 0!important; height: 1px!important; width: 1px!important; overflow: hidden; }
.ContentsModal .js-modal-close-btn:after,
.ContentsModal .js-modal-close-btn:before { display: block; content: " "; position: absolute; top: 14px; left: 23px; width: 4px; height: 22px; border-radius: 4px; background: #ffffff; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.ContentsModal .js-modal-close-btn:before { -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
.ContentsModal .js-modal-close-btn:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.Modal_content { background: #fff; left: 50%; padding: 0 32px 48px 32px; margin: 76px 0 32px; position: absolute; top: 0; transform: translateX(-50%); width: 60%; height: calc(100vh - 108px); overflow-y: scroll; font-size: 1.3rem;}
.Modal_content table th, .Modal_content table td  { padding: 6px 8px; }
@media only screen and (max-width: 768px) {
	.Modal_content { width: 80%; }
}
@media only screen and (max-width: 480px) {
	.Modal_content { padding: 0 16px 48px 16px; }
}
/* -------------------- } softwaremaintenance */

/* =============================================================================
	サービス料金 
============================================================================= */
/* tenken_system  -------------------- { */
.tenken_system { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.tenken_system > div { font-size: 2.0rem; font-weight: bold; }
.tenken_system > .basic,
.tenken_system > .option { padding: 32px 16px; border: 2px solid var(--color-repair-03); border-radius: 8px; background: var(--color-repair-03-tp10);}
.tenken_system > .plus { color: var(--color-repair-03); }
.tenken_system > .option > span { display: inline-block; color: #ffffff; background: var(--color-repair-03); border-radius: 15px; padding: 4px 16px; font-size: 1.8rem; }
@media only screen and (max-width: 480px) {
	.tenken_system > div { font-size: 1.6rem;}
	.tenken_system > .option > span { font-size: 1.4rem; }
}
/* -------------------- } tenken_system */

/* tenken_point  -------------------- { */
.tenken_point { position: relative; margin: 34px 0; padding: 8px 8px 8px 66px; border: 1px solid var(--color-repair-04); border-radius: 8px; }
.tenken_point span { position: absolute; top: 8px; left: 8px; background: var(--color-repair-04); width: 50px; height: 50px; border-radius: 50%;  }
.tenken_point span i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3.0rem; color: #ffffff;}
/* -------------------- } tenken_point */

/* basic_menu  -------------------- { */
.basic_menu { display: table; border-collapse:collapse; margin-bottom: 1.5rem; }
.basic_menu > .cell { display: table-cell; border: 1px solid #b1b1ac; padding: 16px; vertical-align: middle; }
.basic_menu > .cell.tit { background: var(--color-repair-01-tp20); font-weight: 700; white-space: nowrap;}
/* -------------------- } basic_menu */

/* tenken_price  -------------------- { */
.hdg-d.tenken_price { display: inline-block; color: #ffffff; background: var(--color-repair-03); min-width: 280px; text-align: center; padding: 6px 16px; border-radius: 24px; }
/* -------------------- } tenken_price */

/* tax  -------------------- { */
.tax { text-align: right; font-size: 1.4rem; }
/* -------------------- } tax */

/* tbl-tenken-price  -------------------- { */
.tbl-tenken-price {}
.tbl-tenken-price > thead th { white-space: nowrap; }
.tbl-tenken-price > thead .th_price { min-width: 150px; }
.tbl-tenken-price > thead .fmv_premium { background: #000000; color: #ffffff; font-size: 1.4rem;}
.tbl-tenken-price > thead .fmv_premium > a { color: #ffffff; }
.tbl-tenken-price > thead .fmv_premium_discount  { background: var(--color-repair-03-tp10); }
.tbl-tenken-price > tbody .th_os,
.tbl-tenken-price > tbody .th_svname { font-weight: 700;  }
.tbl-tenken-price > tbody .th_svname { font-size: 1.5rem; min-width: 201px; white-space: nowrap;}
.tbl-tenken-price > tbody sup { color: var(--color-repair-03); font-weight: 700; }
.tbl-tenken-price > tbody .td_price { text-align: right; }
.tbl-tenken-price > tbody .td_price.td_premium_price { color: var(--color-repair-02);}
.tbl-tenken-price > tbody td ul { font-size: 1.3rem; }
@media only screen and (max-width: 1000px) {
	.tbl-tenken-price > tbody .th_svname { white-space: inherit; }
}
/* -------------------- } tbl-tenken-price */

/* キャンペーン情報  -------------------- { */
.diff-campaign { background: var(--color-repair-03-tp05); font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 500; font-style: normal; }
.diff-campaign h2 { position: relative; padding: .8rem 2rem 1rem 8rem; background: #ffffff;	font-size: 3.2rem; line-height: 1.4; }
.diff-campaign h2 span { position: absolute; top: -10px; left: 24px; display: inline-block; width: 32px; height: 32px; text-align: center; }
.diff-campaign h2 span:before,
.diff-campaign h2 span:after { position: absolute; content: ''; }
.diff-campaign h2 span:before { right: -10px; width: 0; height: 0; border-right: 10px solid transparent; border-bottom: 10px solid #4A1A19; }
.diff-campaign h2 span:after { top: 0; left: 0; display: block; height: 50%; border: 17px solid #963533; border-bottom-width: 16px; border-bottom-color: transparent; }
.diff-campaign .catch-txt { margin: 24px 0 0; }
.diff-campaign .catch-txt p { font-weight: 700; font-size: 2.4rem; color: var(--color-supbase1); display: flex; justify-content: center; align-items: center; text-align: center; }
.diff-campaign .catch-txt p::before,
.diff-campaign .catch-txt p::after { width: 3px; height: 40px; background-color: var(--color-supbase1); content: ''; }
.diff-campaign .catch-txt p::before { transform: rotate(-35deg); margin-right: 30px; }
.diff-campaign .catch-txt p::after { transform: rotate(35deg); margin-left: 30px; }
.diff-campaign .cam-period { margin: 0 0 1.6rem; font-size: 1.8rem; }
.diff-campaign .cam-period .cam-period__inner { display: flex; justify-content: flex-end; }
.diff-campaign .cam-period .cam-period__inner div:first-child { background: var(--color-supbase1); color: #ffffff; border-radius: 20px 0 0 20px; padding: .5rem 1rem .5rem 2rem; }
.diff-campaign .cam-period .cam-period__inner div:last-child { border: 2px solid var(--color-supbase1);  color: var(--color-supbase1); font-weight: 700; border-radius: 0 20px 20px 0; padding: .5rem 2rem .5rem 1rem; background: #ffffff; }
.diff-campaign .cam-price { margin: 2.4rem auto 0; display: table; justify-content: center; text-align: center; }
.diff-campaign .cam-price > .cam-price-tit { background: var(--color-repair-04); color: #ffffff; font-weight: 600; font-size: 2.2rem; padding: .8rem 1.6rem;}
.diff-campaign .cam-price > .cam-price-comparison { border: 2px solid var(--color-repair-04); padding: .8rem 1.6rem; background: #ffffff; }
.diff-campaign .cam-price > .cam-price-comparison .basic-price { /*text-decoration: line-through;*/ margin-right: 1.6rem; margin-left: 1.6rem; }
.diff-campaign .cam-price > .cam-price-comparison .arrow_r-d::before { content: '\f30b'; font: var(--fa-font-solid); font-size: 3.2rem; color: #333333; }
.diff-campaign .cam-price > .cam-price-comparison .campaign-price { margin-left: 1.6rem; font-weight: 700; font-size: 1.8rem; color: var(--color-repair-02)}
.diff-campaign .cam-price > .cam-price-comparison .campaign-price > span { font-family: fot-udkakugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal; font-size: 4.0rem; margin-right: .6rem; }
.diff-campaign .cam-password { display: flex; align-items: flex-start; justify-content: center; width: 100%; margin: var(--chat-margin) auto; gap: 0 calc(var(--chat-item-distance) + calc(var(--chat-triangle-size) / 1.5)); }
.diff-campaign .cam-password > .cam-password-txt > strong { color: var(--color-repair-02)}
.diff-campaign .cam-password > .cam-password-txt { position: relative; max-width: var(--chat-width-max, initial); min-height: var(--chat-height-min, initial); padding: var(--chat-text-padding); font-size: 1.8rem; border-radius: var(--chat-text-radius); color: var(--chat-text-color); background: var(--color-repair-01-tp20); }
.diff-campaign .cam-password > .cam-password-txt::after { clip-path: polygon(100% 50%, 0 0, 0 100%); content: ""; display: block; position: absolute; top: var(--chat-triangle-position-top); right: auto; left: calc(100% - 1px); width: calc(var(--chat-triangle-size) / 1.5); height: var(--chat-triangle-size); background: var(--color-repair-01-tp20); }
.diff-campaign .cam-password > .cam-password-img { background-image: var(--chat-icon-bgimage-ope); flex-shrink: 0; width: var(--chat-icon-size); height: var(--chat-icon-size); background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: var(--chat-icon-radius); background-color: var(--color-repair-01-tp20); } 
.tbl-tenken-price .campaign_in_progress { display: inline-block; padding: 0.2rem .8rem; background: var(--color-repair-02); color: #ffffff; font-size: 1.4rem; }
.tbl-tenken-price .campaign_price { display: block; font-size: 1.3rem; }
.tbl-tenken-price .campaign_price span { font-weight: bolder; font-size: 2.4rem; margin-left: .8rem;}
@media only screen and (max-width: 480px) {
	.diff-campaign .cam-period { font-size: 1.8rem; }
	.diff-campaign .cam-period .cam-period__inner div:first-child { border-radius: 4px 0 0 4px; padding: .4rem .8rem .4rem .8rem; }
	.diff-campaign .cam-period .cam-period__inner div:last-child { border-radius: 0 4px 4px 0; padding: .4rem .8rem .4rem .8rem; }
	.diff-campaign h2 { font-size: 2.8rem; padding-left: 6.4rem;}
	.diff-campaign h2 span { left: 16px; }
	.diff-campaign .catch-txt p { font-size: 1.8rem; }
	.diff-campaign .cam-price > .cam-price-comparison .basic-price,.diff-campaign .cam-price > .cam-price-comparison .campaign-price { display: block; }
	.diff-campaign .cam-price > .cam-price-comparison .arrow_r-d::before { display: block; content: '\f309'; font-size: 2.4rem; margin-top: .8rem; }
	.tbl-tenken-price .campaign_price span { font-size: 1.8rem; }
}
/* -------------------- } キャンペーン情報 */

/* =============================================================================
	ご利用の流れ 
============================================================================= */
.list-step-a.tenken_step > li > .step-content dd { margin-top: 2.0rem; }
#tenken-report .Modal_content,
#tenken-checklist .Modal_content { padding: 48px 32px 48px 32px; }
/* tenken_step  -------------------- { */
@media only screen and (max-width: 768px) {
	.list-step-a.tenken_step .lyt-item-a > .img > .img-inner { width: 120px; text-align: center; margin: 0 auto; }
	.list-step-a.tenken_step > li > .step-content dt { text-align: center; }
	.list-step-a.tenken_step > li > .step-content dt span { display: inline-block; font-weight: 400; font-size: 1.6rem; }
	.list-step-a.tenken_step > li > .step-content dd { margin-top: inherit; }
	#tenken-report .Modal_content,
	#tenken-checklist .Modal_content { padding: 32px 16px; }
}
/* -------------------- } tenken_step */

/* =============================================================================
	ポップアップバナー （キャンペーン）
============================================================================= */
/* 基本設定  -------------------- { */
.popupBnrBox { position: fixed; z-index: 1000; min-width: 280px; }
.popupBnrBox.position__bottom-left { bottom: 32px; left: 32px; }/* 左下 */
.popupBnrBox.position__bottom-right { bottom: 32px; right: 70px; }/* 右下 */
.popupBnrBox > .popupBnr__content { position: relative; padding: 16px 8px 8px; box-shadow: 0 2px 5px rgba(0,0,0,.50); border-radius: 8px; background: rgba(255, 255, 255, 0.95); }
.popupBnrBox > .popupBnr__content .closeBtn { position: absolute; right: -12px; top: -16px; color: #ffffff; cursor: pointer; opacity: 1; width: 30px; height: 30px; background: rgba(255,255,255,1); border-radius: 100%; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; box-shadow: 0 0 3px rgba(0,0,0,.5);} 
.popupBnrBox > .popupBnr__content .closeBtn:focus,
.popupBnrBox > .popupBnr__content .closeBtn:hover { outline: 0; background: rgba(170,170,170,1.00) }
.popupBnrBox > .popupBnr__content .closeBtn:focus:after,
.popupBnrBox > .popupBnr__content .closeBtn:focus:before,
.popupBnrBox > .popupBnr__content .closeBtn:hover:after,
.popupBnrBox > .popupBnr__content .closeBtn:hover:before { background: #ffffff; }
.popupBnrBox > .popupBnr__content .closeBtn:after,
.popupBnrBox > .popupBnr__content .closeBtn:before { display: block; content: " "; position: absolute; top: 6px; left: 14px; width: 2px; height: 18px; background: #333333; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }
.popupBnrBox > .popupBnr__content .closeBtn:before { -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
.popupBnrBox > .popupBnr__content .closeBtn:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
@media only screen and (max-width: 480px) {
	.popupBnrBox.position__bottom-left,
	.popupBnrBox.position__bottom-right { bottom: 10px; right: 80px; left: 10px; width: calc(100vw - 90px); }
}
/* -------------------- } 基本設定 */

/* デザイン - 年末  -------------------- { */
.popupBnrBox.yearend { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 500; font-style: normal; }
/*.popupBnrBox.yearend .popupBnr__content {  background: linear-gradient(45deg, #c0b283 0%, #c0b283 45%, #FEE9A0 70%, #c0b283 85%, #c0b283 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;}*/
.popupBnrBox.yearend .popupBnr__content {  background: linear-gradient(45deg, var(--bggrd-yearend-01) 0%, var(--bggrd-yearend-01) 45%, var(--bggrd-yearend-02) 70%, var(--bggrd-yearend-01) 85%, var(--bggrd-yearend-01) 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;}
.popupBnrBox.yearend .popupBnr__content > .subtit { font-size: 1.5rem; position: relative; margin: 0 24px 16px; text-align: center; }
.popupBnrBox.yearend .popupBnr__content > .subtit:before,
/*.popupBnrBox.yearend .popupBnr__content > .subtit:after {	position: absolute; z-index: 0; bottom: -10px; display: block; content: ''; border: 1.6rem solid #6C2625; }*/
.popupBnrBox.yearend .popupBnr__content > .subtit:after {	position: absolute; z-index: 0; bottom: -10px; display: block; content: ''; border: 1.6rem solid var(--bg-yearend-subtit-01); }
.popupBnrBox.yearend .popupBnr__content  > .subtit:before { left: -18px; border-left-width: 12px; border-left-color: transparent; }
.popupBnrBox.yearend .popupBnr__content > .subtit:after { right: -18px; border-right-width: 12px; border-right-color: transparent; }
/*.popupBnrBox.yearend .popupBnr__content > .subtit span { position: relative; z-index: 1; display: block; padding: .5rem 1rem; color: #ffffff; background: #963533; }*/
.popupBnrBox.yearend .popupBnr__content > .subtit span { position: relative; z-index: 1; display: block; padding: .5rem 1rem; color: #ffffff; background: var(--bg-yearend-subtit-02); }
.popupBnrBox.yearend .popupBnr__content > .subtit span:before,
/*.popupBnrBox.yearend .popupBnr__content > .subtit span:after { position: absolute; bottom: -11px; display: block; width: 1px; height: 1px; content: ''; border-style: solid; border-color: #4A1A19 transparent transparent transparent; }*/
.popupBnrBox.yearend .popupBnr__content > .subtit span:after { position: absolute; bottom: -11px; display: block; width: 1px; height: 1px; content: ''; border-style: solid; border-color: var(--bg-yearend-subtit-03) transparent transparent transparent; }
.popupBnrBox.yearend .popupBnr__content > .subtit span:before { left: 0; border-width: 10px 0 0 10px; }
.popupBnrBox.yearend .popupBnr__content > .subtit span:after { right: 0; border-width: 10px 10px 0 0; }
/*.popupBnrBox.yearend .popupBnr__content > .tit { font-weight: 700; font-size: 2.4rem; text-align: center; color: var(--color-supbase1); text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; }*/
.popupBnrBox.yearend .popupBnr__content > .tit { font-weight: 700; font-size: 2.4rem; text-align: center; color: var(--cam-yearend-tit); text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; }
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner { position: relative; margin: 24px 8px 8px; padding: 16px; background: rgba(255,255,255,1.00); text-align: center; }
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner:last-child { margin-top: 16px;}
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner.end span { font-size: 1.3rem; }
/*.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_tit { background: var(--color-supbase1); color: #ffffff; border-radius: 20px; padding: 6px; margin: 0 16px 8px; }*/
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_tit { background: var(--bg-yearend-camtit); color: var(--color-yearend-camtit); font-weight: 700; border-radius: 20px; padding: 6px; margin: 0 16px 8px; }
/*.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_txt { color: var(--color-supbase1); font-weight: 700;}*/
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_txt { color: var(--color-yearend-camtxt); font-weight: 700;}
/*.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner i { color: var(--color-supbase1); }*/
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner i { color: var(--bg-yearend-camtit); }
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_price { margin:
8px; font-size: 1.5rem; } 
.popupBnrBox.yearend .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_price strong { font-size: 1.8rem; }
/*.popupBnrBox.yearend .popupBnr__content .Notice { position: absolute; left: -6px; top: -16px; width: 72px; height: 72px; border-radius: 50px; padding: 18px; font-weight: 700; font-size: 1.8rem; text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both; }*/
.popupBnrBox.yearend .popupBnr__content .Notice { position: absolute; left: -6px; top: -16px; width: 72px; height: 72px; border-radius: 50px; padding: 18px; font-weight: 700; font-size: 1.8rem; text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; background: linear-gradient(45deg, var(--lblgrd-yearend-01) 0%, var(--lblgrd-yearend-02) 45%, var(--lblgrd-yearend-03) 70%, var(--lblgrd-yearend-02) 85%, var(--lblgrd-yearend-01) 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both; }

.popupBnrBox.yearend .popupBnr__content .learn_more { margin-bottom: 8px; text-align: center; }
.popupBnrBox.yearend .popupBnr__content .learn_more > a { display: inline-block; background: #000; color: #ffffff; font-weight: 700; text-decoration: none; padding: .8rem 3.2rem; font-size: 1.8rem; margin: 0 8px; border-radius: 4px }
.popupBnrBox.yearend .popupBnr__content .learn_more > a::after { content: '\f138';
    font: var(--fa-font-solid);
margin-left: 8px; }
.popupBnrBox.yearend .popupBnr__content .learn_more > a:hover { background: var(--hover-yearend-learnmore); color: #000000;}
/* -------------------- } デザイン - 年末 */

/* デザイン - 夏  -------------------- { */
.popupBnrBox.summer { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 500; font-style: normal; }
.popupBnrBox.summer .popupBnr__content {  background: linear-gradient(45deg, var(--bggrd-summer-01) 0%, var(--bggrd-summer-01) 45%, var(--bggrd-summer-02) 70%, var(--bggrd-summer-01) 85%, var(--bggrd-summer-01) 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;}
.popupBnrBox.summer .popupBnr__content > .subtit { font-size: 1.5rem; position: relative; margin: 0 24px 16px; text-align: center; }
.popupBnrBox.summer .popupBnr__content > .subtit:before,
.popupBnrBox.summer .popupBnr__content > .subtit:after {	position: absolute; z-index: 0; bottom: -10px; display: block; content: ''; border: 1.6rem solid var(--bg-summer-subtit-01); }
.popupBnrBox.summer .popupBnr__content  > .subtit:before { left: -18px; border-left-width: 12px; border-left-color: transparent; }
.popupBnrBox.summer .popupBnr__content > .subtit:after { right: -18px; border-right-width: 12px; border-right-color: transparent; }
.popupBnrBox.summer .popupBnr__content > .subtit span { position: relative; z-index: 1; display: block; padding: .5rem 1rem; color: #ffffff; background: var(--bg-summer-subtit-02); }
.popupBnrBox.summer .popupBnr__content > .subtit span:before,
.popupBnrBox.summer .popupBnr__content > .subtit span:after { position: absolute; bottom: -11px; display: block; width: 1px; height: 1px; content: ''; border-style: solid; border-color: var(--bg-summer-subtit-03) transparent transparent transparent; }
.popupBnrBox.summer .popupBnr__content > .subtit span:before { left: 0; border-width: 10px 0 0 10px; }
.popupBnrBox.summer .popupBnr__content > .subtit span:after { right: 0; border-width: 10px 10px 0 0; }
.popupBnrBox.summer .popupBnr__content > .tit { font-weight: 700; font-size: 2.4rem; text-align: center; color: var(--cam-summer-tit); text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; }
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner { position: relative; margin: 24px 8px 8px; padding: 16px; background: rgba(255,255,255,1.00); text-align: center; }
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner:last-child { margin-top: 16px;}
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner.end span { font-size: 1.3rem; }
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_tit { background: var(--bg-summer-camtit); color: var(--color-summer-camtit); font-weight: 700; border-radius: 20px; padding: 6px; margin: 0 16px 8px; }
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_txt { color: var(--color-summer-camtxt); font-weight: 700;}
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner i { color: var(--bg-summer-camtit); }
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_price { margin:
8px; font-size: 1.5rem; } 
.popupBnrBox.summer .popupBnr__content .popupBnr__content__inner > .cam_inner > .cam_price strong { font-size: 1.8rem; }
.popupBnrBox.summer .popupBnr__content .Notice { position: absolute; left: -6px; top: -16px; width: 72px; height: 72px; border-radius: 50px; padding: 18px; font-weight: 700; font-size: 1.8rem; text-shadow:0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff,0 0 3px #ffffff; background: linear-gradient(45deg, var(--lblgrd-summer-01) 0%, var(--lblgrd-summer-02) 45%, var(--lblgrd-summer-03) 70%, var(--lblgrd-summer-02) 85%, var(--lblgrd-summer-01) 90% 100%); background-size: 800% 400%; animation: bg-gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both; }

.popupBnrBox.summer .popupBnr__content .learn_more { margin-bottom: 8px; text-align: center; }
.popupBnrBox.summer .popupBnr__content .learn_more > a { display: inline-block; background: #000; color: #ffffff; font-weight: 700; text-decoration: none; padding: .8rem 3.2rem; font-size: 1.8rem; margin: 0 8px; border-radius: 4px }
.popupBnrBox.summer .popupBnr__content .learn_more > a::after { content: '\f138';
    font: var(--fa-font-solid);
margin-left: 8px; }
.popupBnrBox.summer .popupBnr__content .learn_more > a:hover { background: var(--hover-summer-learnmore); color: #ffffff;}
/* -------------------- } デザイン - 夏 */

/* デザイン - 共通  -------------------- { */
@keyframes bg-gradient { 
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media only screen and (max-width: 480px) {
	.popupBnrBox.yearend .popupBnr__content > .tit,
	.popupBnrBox.summer .popupBnr__content > .tit{ font-size: 2.2rem; }
	.popupBnrBox.yearend .popupBnr__content,
	.popupBnrBox.summer .popupBnr__content{ font-size: 90%; }
}
/* -------------------- } デザイン - 共通 */
