@charset "UTF-8";
/* global */
#globalHeader {
  margin-bottom: 0;
  position: absolute;
}
.breadcrumbs{
  padding-top: 100px;
  width: 960px;
  margin: 0 auto 10px;
}

/* Content */
#content {
  width: 100%;
  margin: 0 auto;
}

/** sync common **/
/* sync grid */
.grid-w960 {
  width: 960px;
  text-align: left;
  margin: 0 auto;
  box-sizing: border-box;
}

.grid-w1200 {
  width: 1200px;
  text-align: left;
  margin: 0 auto;
  box-sizing: border-box;
}

.tabletUser .grid-w1200 {
  width: 960px;
}

/* sync img */
/* sync z-index */
/* sync layout */
/* sync title */
.headings-lv1 {
  color: #fff;
  font-size: 38px;
  font-weight: normal;
  margin-top: 80px;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.01px;
}

.headings-lv1::before {
  content: '';
  background: url(/ui/utility/common/svg/iconF_sync_green.svg) left top 11px/82px no-repeat;
  height: 82px;
  width: 82px;
  float: left;
  margin-right: 10px;
}

.headings-lv1 span {
  font-size: 17px;
  letter-spacing: 0.14rem;
}

.headings-lv1 span > span {
  color: #ff9300;
}

.headings-lv2, .howto-wrap .howto-headings-lv2 {
  color: #102b46;
  font-size: 26px;
}

.headings-lv2 span, .howto-wrap .howto-headings-lv2 span {
  color: #62a67d;
  font-size: 18px;
  font-weight: normal;
  display: block;
}

.headings-lv3, .example .headings-lv3 {
  color: #102b46;
  font-size: 16px;
}

/* sync-wrap - sending URL - */
.sync-wrap {
  margin-top: 20px;
}

.sync-wrap .sync-yoururl {
  display: table;
}

.sync-wrap .ui-btn-common.copy {
  display: table-cell;
  width: 94px;
  color: #fff;
  background-color: #5fa580;
  border: 1px solid #468765;
  border-bottom: 4px solid #468765;
  padding: 8px 0;
  margin-right: 5px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 14px;
}

.sync-wrap .ui-btn-common.copy::before {
  content: '';
  display: inline-block;
  background: url(/ui/utility/common/svg/iconI_copy_white.svg) left center/22px no-repeat;
  width: 26px;
  height: 22px;
  vertical-align: middle;
}

.sync-wrap textarea {
  font-size: 13px;
  display: table-cell;
  width: 295px;
  max-width: 390px;
  height: 44px;
  padding: 3px 0 0 5px;
  overflow: hidden;
  box-shadow: -6px -2px 4px #c6d2de inset;
  border: 3px solid #ccc;
  box-sizing: border-box;
  line-height: 1.3;
  margin-left: 5px;
}

.sync-wrap .ui-btn-common {
  width: 205px;
  margin: 0 auto;
  padding: 16px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.sync-wrap .ui-btn-common.mail {
  padding: 16px 20px 16px 39px;
  background: url(/ui/utility/common/svg/iconI_mail_sync_green.svg) #fff 45px 12px/34px no-repeat;
}

.sync-wrap .ui-btn-common.mail:hover {
  background: url(/ui/utility/common/svg/iconI_mail_sync_green.svg) #F4F4F4 45px 12px/34px no-repeat;
}

.sync-tit {
  font-size: 14px;
  display: block;
  font-weight: bold;
  padding-bottom: 5px;
}

.sync-url {
  margin-bottom: 7px;
  display: inline-block;
}

.sync-note {
  margin-top: 7px;
  display: inline-block;
}

.main {
  background: url(/ui/others/pc/images/sync/bg_pc_sync.png) #102b46 center center/cover no-repeat;
  width: 100%;
  height: 485px;
}

.main-wrap {
  display: flex;
  justify-content: space-between;
}

.main-left {
  width: 410px;
  background: #142f4a;
  color: #fff;
  float: left;
}

.main-left_subtitle {
  font-size: 18px;
}

.main-right img {
  height: 485px;
}

.tabletUser .main-right img {
  width: 560px;
  height: auto;
  padding-top: 144px;
}

/* section -Being able to connect three function- */
.function {
  background: #d4efe1;
  padding: 40px 0;
}

.function-wrap {
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.l-grid {
  font-size: 20px;
}

.l-grid span {
  font-weight: bold;
}

.function-three {
  display: flex;
  display: -webkit-flex;
}

.function-three p {
  border-radius: 8px;
  box-shadow: 0 0 30px 0 #9eccb4;
  margin-right: 10px;
}

.function_fav {
  background: url(/ui/utility/common/svg/iconF_heart_brown.svg) #fff right 21px top 16px/23px no-repeat;
  font-weight: bold;
  padding: 14px 50px 14px 20px;
}

.function_save {
  background: url(/ui/utility/common/svg/iconF_save_brown.svg) #fff right 21px top 16px/23px no-repeat;
  font-weight: bold;
  padding: 14px 50px 14px 20px;
}

.function_history {
  background: url(/ui/utility/common/svg/iconF_history_brown.svg) #fff right 20px top 16px/24px no-repeat;
  font-weight: bold;
  padding: 14px 50px 14px 20px;
}

/* section -Case Example- */
.example {
  padding: 40px 0 70px;
}

.example .headings-lv2, .example .howto-wrap .howto-headings-lv2, .howto-wrap .example .howto-headings-lv2 {
  margin-bottom: 20px;
}

.example .headings-lv3 {
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}

.example .headings-lv3 span {
  background: linear-gradient(to bottom, transparent 70%, #ffce70 40%);
  font-weight: bold;
}

.example-three_box {
  display: flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.example-three_item {
  width: 310px;
  position: relative;
  margin: 0 3px;
}

.example-three_btmtxt {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #468765;
  position: absolute;
  top: 278px;
  left: 46px;
}

/* section - how to send - */
/* section -The way of cancellation with other devise- */
.howto {
  background: #d4efe1;
  padding: 40px 0;
}

.howto .sync-wrap {
  background: #f4f4f4;
  padding: 20px 40px;
  margin-top: 0;
}

.howto .ui-btn-common.copy {
  width: 125px;
}

.howto textarea {
  font-size: 16px;
  width: 690px;
  max-width: 696px;
  resize: none;
  line-height: 2;
  margin-left: 5px;
}

.howto-wrap {
  background: #fff;
  border: solid 5px #c6e2d4;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  position: relative;
}

.howto-wrap .nextStep {
  position: absolute;
  top: -134px;
  left: 268px;
}

.howto-wrap .howto-headings-lv2 {
  text-align: center;
}

.howto-wrap:first-of-type .howto-headings-lv2 {
  background: url(/ui/utility/common/svg/iconF_sync_green.svg) left 289px top -3px/40px no-repeat;
}

.howto-wrap:last-of-type .howto-headings-lv2 {
  background: url(/ui/utility/common/svg/iconF_sync_stop_green.svg) left 328px top -3px/40px no-repeat;
}

.howto-headings-lv3 {
  color: #102b46;
  margin: 20px 0 10px;
  font-size: 20px;
}

.howto-headings-lv3 span {
  font-size: 18px;
  background: #468765;
  border-radius: 4px;
  color: #fff;
  padding: 2px 12px 0px;
  margin-right: 5px;
}

.howto-step {
  display: flex;
  display: -webkit-flex;
  -ms-flex-pack: distribute;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.howto-step_box {
  width: 420px;
  box-sizing: border-box;
}

.howto-step_1 {
  width: 450px;
  letter-spacing: -0.1px;
}

.howto-step_1 p::before {
  content: '1';
  float: left;
  background: #102b46;
  color: #fff;
  border-radius: 25px;
  height: 26px;
  width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding-top: 2px;
  margin-right: 5px;
}

.howto-step_2 p::before {
  content: '2';
  float: left;
  background: #102b46;
  color: #fff;
  border-radius: 25px;
  height: 26px;
  width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding-top: 2px;
  margin-right: 5px;
}

.howto-step img {
  margin-bottom: 10px;
}

/* section -Note- */
.syncnote .note-wrap {
  background: url(/ui/others/pc/images/sync/note_bg.png) right top 20px/275px no-repeat;
  padding: 40px 30px 50px;
}

.syncnote .note-headings-lv2 {
  text-align: left;
  color: #000;
  margin-bottom: 5px;
}

.syncnote ul li {
  line-height: 1.7;
}

/* float popup */
.float-bar {
  font-size: 18px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  transform: translateY(100%);
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: 0.5s;
}

.float-active {
  transform: translateY(0);
  opacity: 1;
}

/* 同期・解除・エラー・リセット */
.tpl_syncStep {
  /*　同期前確認 */
  /*　同期後確認 */
  /* 同期解除 */
}

.tpl_syncStep #content {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}

.tpl_syncStep .heading-lv2 {
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 22px;
  font-weight: normal;
  text-align: left;
  background: url(/ui/utility/common/svg/iconF_sync_green.svg) left -3px/34px no-repeat;
  padding-left: 44px;
}

.tpl_syncStep #syncError {
  width: 100%;
  margin-bottom: 20px;
  padding: 30px 20px 16px;
  border: 3px solid #ff0000;
  box-sizing: border-box;
}

.tpl_syncStep #syncError p span {
  color: #ff0000;
}

.tpl_syncStep #syncAgree {
  width: 100%;
  margin-bottom: 20px;
  padding: 50px 20px 40px;
  border: 5px solid #eee;
  box-sizing: border-box;
}

.tpl_syncStep #syncAgree > p {
  width: 660px;
  margin: 0 auto 50px;
  font-size: 16px;
  text-align: center;
}

.tpl_syncStep #syncAgree .ui-btn-doubleLayout-wrapper {
  width: 360px;
}

.tpl_syncStep #syncAgree .ui-btn-common,
.tpl_syncStep #syncAgree .ui-btn-inquiry-A {
  width: 160px;
  margin-bottom: 10px;
  padding: 10px 0;
  font-size: 18px;
}

.tpl_syncStep #syncResult {
  width: 100%;
  margin-bottom: 20px;
  padding: 30px 20px 16px;
  background: #edf8ff;
  border: 3px solid #95d0e5;
  box-sizing: border-box;
  overflow: hidden;
}

.tpl_syncStep #syncResult > p {
  width: 660px;
  margin: 0 auto 30px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.tpl_syncStep #syncResult .categoryTitle {
  float: left;
  width: 140px;
  height: 40px;
  margin: 17px 0 0 30px;
  font-size: 16px;
  font-weight: bold;
}

.tpl_syncStep #syncResult ul {
  float: left;
  width: 732px;
  margin: 0 auto 20px;
}

.tpl_syncStep #syncResult li {
  float: left;
  width: 230px;
  margin-left: 20px;
}

.tpl_syncStep #syncResult li:first-child {
  margin-left: 0;
}

.tpl_syncStep #syncResult a {
  display: block;
  width: 100%;
  padding: 16px 0;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

.tpl_syncStep #syncCancel {
  width: 100%;
  margin-bottom: 20px;
  padding: 30px 20px 16px;
  background: #f8f8f8;
  border: 3px solid #ccc;
  box-sizing: border-box;
}

.tpl_syncStep #syncCancel .ui-btn-doubleLayout-wrapper {
  width: 360px;
}

.tpl_syncStep #syncCancel a {
  width: 160px;
  margin: 0 auto;
}

.tpl_syncStep .syncClear {
  margin-bottom: 10px;
  padding: 20px 0 24px;
  background: #f8f8f8;
}