@charset "UTF-8";
/*
Site Name: マイページのご案内（PC版）
Version: 2025.04.02
*/
/*! ==================================================

  このCSSファイルはSassから生成されていますので
  編集しないようご注意ください。

================================================== */
/*
======================================================
  layout
--------------------------------------------------- */
body {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, arial, sans-serif;
}

#mainArea {
  padding-bottom: 100px;
}

#titlewrapper {
  margin: 0 auto;
  width: 990px;
}
#titlewrapper h1#pagetitle {
  margin: 20px 21px 10px;
}
#titlewrapper h1#pagetitle span {
  margin: 0;
  padding: 0;
}

#topicpath_area #topicpath li a {
  background: url(https://www.sompo-japan.co.jp/mypage/common_img/topicpath_arrow.gif) no-repeat right center;
  color: #66a;
  font-size: 12px;
  padding: 0 15px 0 0;
}

/*
======================================================
  サイドバー
--------------------------------------------------- */
.side_content {
  margin-bottom: 15px;
}

.side_faq_ttl {
  background-color: #666;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 10px 0;
  text-align: center;
}

#side_faq {
  border: 1px solid #d6d6d6;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

ul#side_faq_list li {
  background-color: #f2f3f0;
  border-bottom: 1px solid #d6d6d6;
  padding: 0.8em 1em 0.8em 2.4em;
  position: relative;
}
ul#side_faq_list li::before {
  color: #c02;
  content: "Q.";
  font-size: 14px;
  left: 1em;
  line-height: 1.4;
  position: absolute;
}
ul#side_faq_list li a {
  color: #66a;
  font-size: 14px;
  line-height: 1.4;
}

ul#side_faq_ichiran {
  margin: 20px auto;
  width: 164px;
}
ul#side_faq_ichiran li {
  overflow: hidden;
  position: relative;
}

#side_contact {
  border-bottom: 2px solid #00a9cc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 2px solid #00a9cc;
  border-right: 2px solid #00a9cc;
  border-top: 6px solid #00a9cc;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#side_contact h3 {
  color: #00a9cc;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  padding: 15px 0 10px;
  text-align: center;
}
#side_contact p {
  font-size: 12px;
  line-height: 1.5;
  padding-bottom: 15px;
  text-align: center;
}

.side_phone {
  margin-bottom: 15px;
  text-align: center;
}

dl#side_phone_time {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 7px;
  width: 166px;
}
dl#side_phone_time dt {
  background-color: #f0f0f0;
  font-size: 10px;
  font-weight: bold;
  margin-right: 7px;
  padding: 2px 0;
  text-align: center;
  width: 54px;
}
dl#side_phone_time dd {
  font-size: 12px;
  font-weight: bold;
  padding: 3px 0;
  width: 105px;
}

#side_sompopark {
  margin-bottom: 30px;
}
#side_sompopark img {
  height: auto;
  width: 100%;
}
#side_sompopark figcaption {
  font-feature-settings: "palt";
  font-size: 12px;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 5px;
}

/*
======================================================
  common
--------------------------------------------------- */
.main a {
  color: #66a;
}
.main a:hover {
  color: #448;
}
.main sup {
  font-size: 10px;
  margin-left: 4px;
  vertical-align: super;
}
.main p {
  margin: 0;
  padding: 0;
}
.main h2,
.main h3,
.main h4,
.main h5 {
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
.main ul,
.main dl,
.main dt,
.main dd {
  margin: 0;
  padding: 0;
}
.main ul ul,
.main ul li,
.main dl ul,
.main dl li,
.main dt ul,
.main dt li,
.main dd ul,
.main dd li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.atten {
  color: #c02;
}

.main .title_box {
  padding-top: 50px;
}
.main .title_box h3 {
  border-left: 4px solid #777;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 8px 10px 8px 15px;
}
.main .title_box h3.title_red {
  border-left: 4px solid #c02;
}
.main .title_box + p {
  margin-top: 25px;
}

.graybox {
  background-color: #f0f0f0;
  padding: 20px;
  margin-top: 15px;
  padding: 15px 20px;
}
.graybox ul.kome-list li,
.graybox ul.dot-list li {
  font-size: 12px;
}
.graybox ul.dot-list {
  margin-top: 0.5em;
}

ul.btn-down li {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin-bottom: 6px;
}
ul.btn-down li a {
  color: #333;
  display: block;
  font-size: 14px;
  font-weight: normal;
  height: 40px;
  position: relative;
}
ul.btn-down li a span {
  align-items: center;
  display: flex;
  height: 100%;
  padding: 0 15px 0 35px;
}
ul.btn-down li a span::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 12px;
  left: 15px;
  margin-right: 10px;
  position: absolute;
  top: 15px;
  transform: rotate(90deg);
  width: 6px;
}
ul.btn-down li a::after {
  background-color: #000;
  bottom: -1px;
  content: "";
  height: calc(100% + 2px);
  left: -1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: -1px;
  top: -1px;
  transition: all 0.3s ease;
  width: calc(100% + 2px);
}
ul.btn-down li a:hover {
  color: #333;
  text-decoration: none;
}
ul.btn-down li a:hover::after {
  opacity: 0.23;
}
ul.btn-down.covenanter {
  width: 420px;
}
ul.kome-list + ul.btn-down.covenanter {
  margin-top: 20px;
}

ul.kome-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  text-indent: -1em;
}
ul.kome-list > li::before {
  content: "※";
}
ul.kome-list > li ul.dot-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
ul.kome-list > li ul.dot-list > li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}
ul.kome-list > li ul.dot-list > li {
  padding: 0.1em 0 0.1em 2em;
}

ul.dot-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
ul.dot-list > li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}

.main ul.btn_login {
  display: flex;
  margin: 10px 0 0;
}
.main ul.btn_login li {
  list-style: none;
  margin: 0 10px 0 0;
}
.main .kome-box + ul.btn_login {
  margin: 20px 0 0;
}

.numbox__gray {
  background-color: #f0f0f0;
  margin-top: 10px;
  padding: 30px 0;
  position: relative;
}
.numbox__gray::after {
  background-color: #c02;
  bottom: 0;
  content: "";
  display: block;
  height: auto;
  left: 45px;
  position: absolute;
  top: -10px;
  width: 1px;
  z-index: 1;
}
.numbox__gray.first {
  margin-top: 20px;
}
.numbox__gray.first::after {
  top: 45px;
}
.numbox__gray.last {
  margin-bottom: 45px;
}
.numbox__gray.last::after {
  height: 45px;
}
.numbox__gray.last.inquiry-last {
  margin-bottom: 0;
}

dl.numbox__inner {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
dl.numbox__inner dt {
  height: 100%;
  margin: 0 15px 0 0;
  padding: 0;
  position: relative;
  width: 50px;
}
dl.numbox__inner dt img {
  position: absolute;
  top: 0;
  z-index: 2;
}
dl.numbox__inner dd {
  flex: 1;
}

.numbox__content {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  width: 100%;
}
.numbox__content:first-child {
  margin-top: 0;
}

.main p {
  font-size: 14px;
}
.main .numbox__txt {
  flex: 1;
}
.main .numbox__txt p {
  margin: 0;
  padding: 0;
}
.main .numbox__txt p + p {
  padding-top: 1.4em;
}
.main .numbox__txt h4 {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.main .numbox__txt h4.first {
  padding-top: 0.8em;
}
.main .numbox__txt h4 + p {
  padding-top: 0.65em;
}

.kome-box {
  border: 1px solid #dadcdc;
  margin: 15px 0 0;
  padding: 10px 15px;
}
.kome-box ul.kome-list li {
  font-size: 12px;
}

.numbox__thumb {
  margin-left: 25px;
  width: 257px;
}

.grad-wrap {
  margin-bottom: 95px;
  position: relative;
}

.grad-wrap + .grad-wrap {
  margin-top: 40px;
}

.grad-trigger {
  align-items: center;
  background-color: #f0f0f0;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  bottom: -40px;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  height: 60px;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: all 0.3s ease;
  width: 430px;
  z-index: 4;
}
.grad-trigger::after {
  content: "続きを読む";
}
.grad-trigger::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_down_gray.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 6px;
  margin-right: 10px;
  width: 12px;
}
.grad-trigger:hover {
  background: #b8b8b8;
  border-bottom: 2px solid #9d9d9d;
  border-right: 2px solid #9d9d9d;
}
.grad-trigger.is-show::after {
  content: "閉じる";
}
.grad-trigger.is-show::before {
  margin-right: 10px;
  transform: rotate(180deg);
}

.grad-item {
  overflow: hidden;
  position: relative;
}
.grad-item.is-hide {
  height: 80px;
}
.grad-item::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  bottom: 0;
  content: "";
  display: block;
  height: 150px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
}

.grad-trigger.is-show + .grad-item::before {
  display: none;
}

ul#btn_kinou {
  padding-top: 20px;
  width: 250px;
}
ul#btn_kinou li {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
ul#btn_kinou li a {
  align-items: center;
  color: #333;
  display: flex;
  height: 58px;
  position: relative;
}
ul#btn_kinou li a span {
  align-items: center;
  display: flex;
  height: 100%;
  padding: 0 15px 0 35px;
}
ul#btn_kinou li a span::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 12px;
  left: 20px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 6px;
}
ul#btn_kinou li a:hover {
  text-decoration: none;
}
ul#btn_kinou li a::after {
  background-color: #000;
  content: "";
  display: block;
  height: calc(100% + 2px);
  left: -1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: -1px;
  transition: all 0.3s ease;
  width: calc(100% + 2px);
}
ul#btn_kinou li a:hover::after {
  opacity: 0.23;
}
ul#btn_kinou li a {
  font-size: 14px;
  font-weight: 700;
}

.accordion-trigger {
  color: #66a;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  margin-top: 30px;
  padding-left: 20px;
  position: relative;
}
.accordion-trigger::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_down_accordion.svg);
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 15px;
  left: 0;
  position: absolute;
  transition: all 0.3s ease;
  width: 15px;
}
.accordion-trigger.active::before {
  transform: rotate(180deg);
}

/* 追加
========================================================= */
a.owr {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/icon_owr.gif);
  background-position: right center;
  background-repeat: no-repeat;
  margin-right: 0.2em;
  padding-right: 16px;
}

.main > ul.kome-list li {
  font-size: 14px;
}
.main .kome-box > ul.kome-list {
  font-size: 12px;
}

.item__ttl {
  font-size: 14px;
  font-weight: 700;
  margin-top: 30px;
}

/*
======================================================
  index
--------------------------------------------------- */
#mv_wrapper {
  background: linear-gradient(to bottom, rgba(252, 200, 0, 0.6) 0%, rgba(255, 240, 177, 0.5) 100%); /* 2020.07.25修正 */
  height: 320px;
  margin-bottom: 15px;
}

#mv_wrapper_area {
  align-items: center;
  display: flex;
  height: 320px;
  justify-content: space-between;
  margin: 0 auto;
  width: 948px;
}

#index_mv_ttl {
  text-align: center;
  width: 696px;
}

#login_box {
  border-top: 4px solid #c02;
  text-align: center;
  width: 222px;
}

#login_top {
  background-color: #fff;
  border-left: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  padding-bottom: 12px;
}
#login_top p {
  font-size: 14px;
  line-height: 1.4;
  padding: 14px 0 8px;
}

#login_bottom {
  align-items: center;
  background-color: #f2f3f0;
  border: 1px solid #d6d6d6;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  height: 100px;
  justify-content: center;
}

ul#mv_login {
  margin: 0 auto;
  width: 171px;
}
ul#mv_login li {
  margin: 0 0 5px;
}

.contract {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  border-left: 4px solid #c02;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 35px 50px;
}

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

.contract__top-left {
  flex: 1;
}
.contract__top-left p {
  line-height: 1.6;
  margin-top: 1em;
}
.contract__top-left ul.dot-list {
  margin-top: 12px;
}
.contract__top-left ul.dot-list li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
.contract__top-left ul.dot-list li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}
.contract__top-left ul.dot-list li {
  font-size: 14px;
}

ul.contract__top-right {
  width: 202px;
}
ul.contract__top-right li {
  margin-top: 8px;
}
ul.contract__top-right li:first-child {
  margin-top: 0;
}

.contract__ttl {
  align-items: center;
  color: #c02;
  display: flex;
  font-size: 19px;
  font-weight: 700;
  height: 33px;
  padding-left: 42px;
  position: relative;
}
.contract__ttl::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/icon_check@2x.png);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 33px;
  left: 0;
  position: absolute;
  top: 0;
  width: 33px;
}

.contract__flow {
  margin: 20px auto 0;
  width: 510px;
}

dl.contract__flow-item {
  align-items: center;
  background-color: #fff;
  display: flex;
  margin-top: 5px;
  padding: 4px;
}
dl.contract__flow-item dt {
  background-color: #ed8b00;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 0;
  text-align: center;
  width: 92px;
}
dl.contract__flow-item dd {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  margin-left: 15px;
}

.contract__flow-arrow {
  margin: 5px 0 0 42px;
  width: 12px;
}

.contract__bottom {
  margin-top: 20px;
}
.contract__bottom ul.kome-list li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  text-indent: -1em;
}
.contract__bottom ul.kome-list li::before {
  content: "※";
}
.contract__bottom ul.kome-list li {
  font-size: 14px;
}

.possible {
  background-color: #f0f0f0;
  padding: 20px;
  margin-bottom: 30px;
  margin-top: 40px;
}

h2.possible__ttl {
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
}

.main ul.possible-list > li {
  background-color: #fff;
  border: 1px solid #a0a3aa;
  box-shadow: 2px 2px 0 #dadcdc;
  margin-top: 20px;
}
.main ul.possible-list > li a {
  display: block;
  position: relative;
}
.main ul.possible-list > li a::after {
  background-color: #000;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 0.3s ease;
  width: 100%;
}
.main ul.possible-list > li a:hover {
  text-decoration: none;
}
.main ul.possible-list > li a:hover::after {
  opacity: 0.23;
}

dl.possible-list__item {
  align-items: center;
  display: flex;
  padding: 25px 30px;
}
dl.possible-list__item dt {
  background-color: #f0f0f0;
  border: 2px solid #c02;
  border-radius: 50%;
  height: 72px;
  margin-right: 24px;
  position: relative;
  width: 72px;
}
dl.possible-list__item dt img {
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
#inquiry dl.possible-list__item dt img {
  width: 32px;
}
#payment dl.possible-list__item dt img {
  width: 28px;
}
#service dl.possible-list__item dt img {
  margin-left: 2px;
  width: 37px;
}
#accident dl.possible-list__item dt img {
  padding-bottom: 4px;
  width: 46px;
}
#internet dl.possible-list__item dt img {
  padding-bottom: 2px;
  width: 40px;
}
#estimate dl.possible-list__item dt img {
  width: 30px;
}
dl.possible-list__item dd {
  flex: 1;
}
dl.possible-list__item dd h3 {
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 0 0 0.7em;
}
dl.possible-list__item dd p {
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0.3em;
  padding: 0 0 0 1em;
}
dl.possible-list__item dd ul.dot-list {
  margin: 0.8em 0 0 2em;
}
dl.possible-list__item dd ul.dot-list li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
dl.possible-list__item dd ul.dot-list li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}
dl.possible-list__item dd ul.dot-list li {
  padding: 0 0 0 1em;
}
dl.possible-list__item dd ul.dot-list li::before {
  top: 0.6em;
}

.main a dl.possible-list__item dd h3 {
  position: relative;
}
.main a dl.possible-list__item dd h3::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 6px;
}

.spec {
  border: 1px solid #a0a3aa;
}
.spec a {
  color: #333;
  display: block;
  position: relative;
}
.spec a::after {
  background-color: #000;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 0.3s ease;
  width: 100%;
}
.spec a:hover {
  color: #333;
  text-decoration: none;
}
.spec a:hover::after {
  opacity: 0.23;
}

dl.spec__item {
  align-items: center;
  display: flex;
  padding: 25px 30px;
}
dl.spec__item dt {
  width: 120px;
}
dl.spec__item dt span {
  display: block;
  padding: 0 0 0 1em;
  position: relative;
}
dl.spec__item dt span::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  top: 5px;
  width: 6px;
}
dl.spec__item dd {
  flex: 1;
}

/* 追加（2025.04.02）
========================================================= */
/*
======================================================
  covenanter（登録方法）
--------------------------------------------------- */
.linebox {
  border: 1px solid #ccc;
  margin-bottom: 30px;
}

.linebox__inner {
  display: flex;
  justify-content: space-between;
  padding: 25px 20px;
}

.linebox__thumb {
  margin-left: 20px;
  width: 257px;
}

.linebox__txt {
  flex: 1;
  padding: 0 1em;
}
.linebox__txt ul.kome-list li {
  font-size: 12px;
}

/*
======================================================
  inquiry（契約内容の照会）
--------------------------------------------------- */
.main ul.btn__inquiry {
  margin: 0 0 0 auto;
  padding-top: 12px;
  width: 545px;
}
.main ul.btn__inquiry li {
  margin-top: 6px;
}
.main ul.btn__inquiry li a {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 12px 12px 35px;
  position: relative;
}
.main ul.btn__inquiry li a:hover {
  color: #333;
  text-decoration: none;
}
.main ul.btn__inquiry li a span.btn__inquiry-arrow::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 12px;
  left: 18px;
  position: absolute;
  top: 16px;
  transform: rotate(90deg);
  width: 6px;
}
.main ul.btn__inquiry li a span.btn__inquiry-block {
  display: block;
}
.main ul.btn__inquiry li a span.btn__inquiry-block + span.btn__inquiry-block {
  margin-top: 0.5em;
}
.main ul.btn__inquiry li a::after {
  background-color: #000;
  bottom: -1px;
  content: "";
  height: calc(100% + 2px);
  left: -1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: -1px;
  top: -1px;
  transition: all 0.3s ease;
  width: calc(100% + 2px);
}
.main ul.btn__inquiry li a:hover {
  color: #333;
  text-decoration: none;
}
.main ul.btn__inquiry li a:hover::after {
  opacity: 0.23;
}

.pinkbox {
  background-color: #fdf6f9;
  margin-top: 10px;
  padding: 25px 20px 30px;
}
.pinkbox.last {
  margin-bottom: 45px;
}
.pinkbox h4 {
  color: #c02;
  font-size: 16px;
  font-weight: 700;
}
.pinkbox h4 span.h4-block {
  display: block;
}
.pinkbox h4 span.h4-block + span.h4-block {
  margin-top: 0.5em;
}

.pinkbox__inner {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
}

.pinkbox__txt {
  flex: 1;
}

.pinkbox__thumb {
  margin-left: 50px;
  width: 257px;
}
.pinkbox__thumb.wide {
  margin-left: 0;
  width: 310px;
}

.main dl.num__item {
  display: flex;
  margin-top: 15px;
}
.main dl.num__item:first-child {
  margin-top: 0;
}
.main dl.num__item dt,
.main dl.num__item dd {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
}
.main dl.num__item dt {
  width: 1.2em;
}
.main dl.num__item dd {
  flex: 1;
}
.main dl.num__item dd ul.dot-list {
  margin-top: 0.5em;
}
.main dl.num__item dd ul.dot-list li {
  font-size: 12px;
}

.pinkbox-outer {
  padding-top: 10px;
}

ul.accordion-item__list {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 30px;
  width: 565px;
}
ul.accordion-item__list li {
  width: 257px;
}
ul.accordion-item__list li dl dt {
  font-size: 12px;
  font-weight: normal;
}
ul.accordion-item__list li dl dd {
  padding-top: 0.6em;
}

.numbox__atten {
  margin-top: 20px;
}
.numbox__atten h5 {
  color: #c02;
  font-size: 14px;
  font-weight: 700;
}
.numbox__atten ul.dot-list {
  padding-top: 5px;
}
.numbox__atten ul.dot-list li {
  font-size: 12px;
}

/*
======================================================
  payment（保険料のお支払いに関する照会）
--------------------------------------------------- */
.taisyo {
  background-color: #f0f0f0;
  border-bottom: 1px solid #dadcdc;
  border-left: 4px solid #c02;
  border-right: 1px solid #dadcdc;
  border-top: 1px solid #dadcdc;
  margin-top: 20px;
  padding: 25px;
}
.taisyo .dot-list {
  margin-top: 10px;
}
.taisyo .dot-list li {
  font-size: 12px;
}
.taisyo .kome-list {
  margin-bottom: 1em;
}
.taisyo .kome-list li {
  font-size: 12px;
}
.taisyo p.taisyo__txt {
  font-weight: 700;
  line-height: 1.7;
  padding-top: 0.65em;
}

.taisyo__mds {
  font-size: 14px;
  font-weight: 700;
}

/*
======================================================
  service
--------------------------------------------------- */
.service {
  background-color: #f0f0f0;
  padding: 20px;
  margin-top: 10px;
}
.service:first-child {
  margin-top: 0;
}
.service#other {
  margin-bottom: 45px;
}

.service__header {
  align-items: center;
  display: flex;
}

#contentswrapper .service__header-icon {
  align-items: center;
  background-color: #fff;
  border: 2px solid #c02;
  border-radius: 50%;
  display: flex;
  height: 42px;
  justify-content: center;
  margin-right: 10px;
  width: 42px;
}
#contentswrapper .service__header-icon img {
  display: block;
  vertical-align: middle;
}
#contentswrapper #update .service__header-icon img {
  margin: 0 0 1px 4px;
  width: 28px;
}
#contentswrapper #change .service__header-icon img {
  margin: 0 0 1px 3px;
  width: 25px;
}
#contentswrapper #payment .service__header-icon img {
  margin: 0;
  width: 28px;
}
#contentswrapper #other .service__header-icon img {
  margin: 0;
  width: 26px;
}

.main .service__header-ttl {
  font-size: 20px;
}

.main ul.service__list {
  padding-bottom: 5px;
}
.main ul.service__list > li {
  background-color: #fff;
  border: 1px solid #a0a3aa;
  box-shadow: 2px 2px 0 #dadcdc;
  margin-top: 20px;
}

.main dl.service__item > dt {
  cursor: pointer;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  padding: 20px 25px;
  position: relative;
  transition: all 0.3s ease;
}
.main dl.service__item > dt::after {
  background-color: #000;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: all 0.3s ease;
  width: 100%;
}
.main dl.service__item > dt:hover::after {
  opacity: 0.23;
}
.main dl.service__item > dt span.swich {
  align-items: center;
  color: #a0a3aa;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  line-height: 136%;
}
.main dl.service__item > dt span.swich::before {
  content: "開く";
}
.main dl.service__item > dt span.swich span.icon {
  display: block;
  height: 14px;
  margin-bottom: 2px;
  margin-left: 6px;
  position: relative;
  width: 14px;
}
.main dl.service__item > dt span.swich span.icon::before, .main dl.service__item > dt span.swich span.icon::after {
  background-color: #a0a3aa;
  content: "";
  display: block;
  position: absolute;
}
.main dl.service__item > dt span.swich span.icon::before {
  height: 2px;
  top: calc(50% - 1px);
  width: 14px;
}
.main dl.service__item > dt span.swich span.icon::after {
  height: 14px;
  left: calc(50% - 1px);
  transition: all 0.3s ease;
  width: 2px;
}
.main dl.service__item > dt.active {
  border-bottom: 1px solid #a0a3aa;
}
.main dl.service__item > dt.active span.swich::before {
  content: "閉じる";
}
.main dl.service__item > dt.active span.icon::after {
  opacity: 0;
  transform: rotate(90deg);
}
.main dl.service__item > dd {
  display: none;
  padding: 25px;
}
.main dl.service__item > dd p {
  line-height: 1.5;
}
.main dl.service__item > dd p + p {
  padding-top: 1.5em;
}
.main dl.service__item > dd p + ul.dot-list,
.main dl.service__item > dd p + dl.taisyo-item {
  padding-top: 1em;
}

.main dl.service__item > dd ul.arrow-list {
  margin: 0 0 0 1em;
  padding-top: 0.8em;
}
.main dl.service__item > dd ul.arrow-list.pt-0 {
  padding-top: 0;
}
.main dl.service__item > dd ul.arrow-list li {
  line-height: 1.5;
  padding: 0.2em 0 0.2em 1em;
  position: relative;
}
.main dl.service__item > dd ul.arrow-list li::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 12px;
  left: 0.2em;
  position: absolute;
  top: 6px;
  width: 6px;
}
.main dl.service__item > dd ul.arrow-list li {
  font-size: 14px;
}
.main dl.service__item > dd ul.arrow-list + ul.dot-list {
  padding-top: 1em;
}
.main dl.service__item > dd .dot-list li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
.main dl.service__item > dd .dot-list li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}
.main dl.service__item > dd .dot-list li {
  font-size: 14px;
}

.service__more {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
}

.main .service__more-txt {
  flex: 1;
}
.main .service__more-txt .service__more-mds {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.main .service__more-txt .service__more-mds + p {
  padding-top: 0.8em;
}
.main .service__more-txt p {
  line-height: 1.5;
}
.main .service__more-txt p.num-txt {
  margin: 0 0 0 1em;
  text-indent: -1em;
}
.main .service__more-txt .dot-list li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  position: relative;
}
.main .service__more-txt .dot-list li::before {
  background-color: #333;
  border-radius: 50%;
  content: "";
  height: 3px;
  left: 0.4em;
  position: absolute;
  top: 0.7em;
  width: 3px;
}
.main .service__more-txt .dot-list li {
  font-size: 14px;
  line-height: 1.5;
}
.main .service__more-txt .dot-list li + li {
  margin-top: 0.5em;
}
.main .service__more-txt .kome-list {
  margin-top: 0.5em;
}
.main .service__more-txt .kome-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  text-indent: -1em;
}
.main .service__more-txt .kome-list > li::before {
  content: "※";
}
.main .service__more-txt .kome-list > li {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.service__more-thumb {
  margin-left: 25px;
  width: 275px;
}
.service__more-thumb span {
  display: block;
  margin-top: 25px;
}
.service__more-thumb span:first-child {
  margin-top: 0;
}

.main dl.taisyo-item {
  display: flex;
}
.main dl.taisyo-item dt,
.main dl.taisyo-item dd {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
}
.main dl.taisyo-item dt {
  width: 5.5em;
}
.main dl.taisyo-item dt.pt-1 {
  padding-top: 0.2em;
}
.main dl.taisyo-item dd {
  flex: 1;
}
.main dl.taisyo-item dd .kome-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  text-indent: -1em;
}
.main dl.taisyo-item dd .kome-list > li::before {
  content: "※";
}
.main dl.taisyo-item dd .kome-list > li {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5em;
  text-align: left;
}
.main dl.taisyo-item + p {
  padding-top: 1.5em;
}

.main table.service__item-table {
  margin: 1em 0 0;
  width: 100%;
}
.main table.service__item-table th,
.main table.service__item-table td {
  font-size: 14px;
  padding: 0.6em 1em;
}
.main table.service__item-table th {
  background-color: #f0f0f0;
  color: #333;
  vertical-align: middle;
}
.main table.service__item-table th:nth-of-type(1) {
  width: 46%;
}
.main table.service__item-table th:nth-of-type(2) {
  width: 29%;
}
.main table.service__item-table th:nth-of-type(3) {
  width: 25%;
}
.main table.service__item-table td {
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.main table.service__item-table td .kome-list {
  margin-top: 0.5em;
}
.main table.service__item-table td .kome-list > li {
  line-height: 1.6;
  padding: 0.1em 0 0.1em 1em;
  text-indent: -1em;
}
.main table.service__item-table td .kome-list > li::before {
  content: "※";
}
.main table.service__item-table td .kome-list > li {
  color: #666;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.36;
  text-align: left;
}
.main table.service__item-table td:nth-of-type(3) {
  font-weight: 400;
}
.main table.service__item-table td a.arrow-gray {
  display: inline-block;
  padding-left: 12px;
  position: relative;
}
.main table.service__item-table td a.arrow-gray::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_right_gray.svg);
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  top: calc(50% - 6px);
  width: 6px;
}

.main .service__info {
  padding-top: 1.2em;
}
.main .service__info p {
  font-size: 14px;
  line-height: 1.5;
}
.main .service__info ul.arrow-list {
  margin: 0 0 0 1em;
  padding-top: 0.5em;
}
.main .service__info ul.arrow-list li {
  line-height: 1.5;
  padding: 0.2em 0 0.2em 1em;
  position: relative;
}
.main .service__info ul.arrow-list li::before {
  background-image: url(https://www.sompo-japan.co.jp/mypage/common_img/arrow_red.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 12px;
  left: 0.2em;
  position: absolute;
  top: 6px;
  width: 6px;
}
.main .service__info ul.arrow-list li {
  font-size: 14px;
}

/*# sourceMappingURL=style.css.map */