@charset "utf-8";


.safetyservice_upgrade_header{
    display: none;
}
header.l-header.p-header {
    display: block !important;
}
footer.l-footer.p-footer {
    display: block !important;
}
footer{
  padding-bottom:var(--gap-l);
}

/*------------------------------------------
共通
------------------------------------------*/

:root{
  --gap-ss: clamp(5px, 0.17rem + 0.61vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.193rem + 3.41vw, 80px);
  
  --color-base:#484848;
  --color-black:#222;
  --color-gray:#eee;
  --color-orange:#ff6c00;
  --color-pale-light-blue:#f2fafe;
  --color-pale-blue:#e2f5fb;
  --color-light-blue:#00a2e6;
  --color-blue:#004da1;
  --color-d-blue:#001e60;

  /*#000*/
  --filter-black:brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(7491%) hue-rotate(317deg) brightness(98%) contrast(99%);
  /*#fff*/
  --filter-white:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(4deg) brightness(110%) contrast(100%);
  /*#555*/
  --filter-gray:brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(20%) hue-rotate(5deg) brightness(95%) contrast(85%);
  /*#004da1*/
  --filter-blue:brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(2286%) hue-rotate(199deg) brightness(89%) contrast(102%);
}

.--invisible{
  visibility: hidden;
}

/*------------------------------------------
全体共通
------------------------------------------*/
.safety-service{
  width:100%;
  text-align:center;
  font-family: "Noto Sans JP", sans-serif;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  font-weight: 400;
  line-height:1.2;
  padding-bottom:var(--gap-m);
}

.safety-service img{
  width:100%;
  margin:auto;
  object-fit: contain;
}

.safety-service .c-button{
  width:100%;
  padding-right:20px;
}
.safety-service .c-button::after{
  position: absolute;
  content: '';
  top: calc(50% - 0.25em);
  right: 25px;
  width: 0.5em;
  height: 0.5em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.safety-service .c-button.--open{
  padding-right:1.5em;
}
.safety-service .c-button.--open::after{
  border:none;
  top:calc(50% - 0.5em);
  right:20px;
  width:1em;
  height:1em;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  background: transparent url(../images/arrow-open.svg) no-repeat top center / cover;
}

/*--セクション--*/
.safety-service .sec-cont{
  position:relative;
  width:100%;
  padding:var(--gap-l) 0;
}
.safety-service .sec-cont.--sec-top{
  padding-bottom:0
}
.safety-service .sec-cont.--sec-btm{
  padding-top:0;
}
.safety-service .sec-cont.--sec-blue{
  background:var(--color-pale-blue);
}
.safety-service .sec-cont.--sec-pl-blue{
  background:var(--color-pale-light-blue);
}

.safety-service .contents-inner{
  margin:auto;
  width:92vw;
  max-width:1140px;
  text-align:left;
}

/*--ヘッダ--*/
.sec-cont h2{
  margin-bottom:var(--gap-m);
}
.cont-ttl{
  font-size:clamp(18px, 0.784rem + 1.45vw, 30px);
  font-weight:700;
  color:var(--color-black);
}
.cont-ttl strong{
  font-weight:800;
  color:var(--color-blue);
}

/*--本文--*/
.safety-service p{
  line-height:1.6;
}
.safety-service p + p{
  margin-top:var(--gap-s);
}
.safety-service .caution{
  font-size:80%;
}

.cont-lead{
  font-size:clamp(14px, 0.705rem + 0.73vw, 20px);
  margin-bottom:var(--gap-m);
}
.sec-cont:has(.cont-lead) h2{
  margin-bottom:var(--gap-s);
}


/*------------------------------------------
キービジュアル
sec-kv
------------------------------------------*/
.sec-kv{
  width:100%;
  background-color:#d9d9cf;
  background-repeat:no-repeat;
  background-position: bottom center;
  background-size:cover;
  background-image: url(../images/kv-bkg-pc.webp);
  border-top:8px solid #004da1;
}

.kv-wrap{
  width: 100%;
  min-height: 400px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.kv-txt-block{
  flex:1;
  max-width:600px;
}

.kv-txt{
  margin-top:var(--gap-s);
  font-size:clamp(18px, 0.727rem + 1.7vw, 32px);
  font-weight:500;
  line-height:1.2
}

@media screen and (max-width: 767px) {
  .sec-kv{
    background-position: bottom right;
    background-size: cover;
    background-image: url(../images/kv-bkg-sp.webp);
    border-top:4px solid #004da1;
  }
  .kv-wrap {
    width: 100%;
    min-height: 300px;
    display: block;
  }
  .kv-txt-block{
    padding-top:3vw;
  }
  .kv-txt-block .logo{
    width:80%;
  }
  .kv-txt{
    width:60%;
    display:flex;
    flex-direction: column;
    gap:10px;
  }
  .kv-txt .c-button::after{
    right:20px;
  }
}

/*------------------------------------------
セーフティサービス概要
service-about
------------------------------------------*/
.about-lead{
  font-size:clamp(14px, 0.534rem + 1.45vw, 26px);
  font-weight:500;
  margin-bottom:var(--gap-m);
}

.about-list-wrap{
  margin-bottom:var(--gap-m);
}

.about-list{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:var(--gap-m);
  counter-reset: about-list-counter;
}
.about-list li{
  position:relative;
  counter-increment: about-list-counter;
  padding-left:20px;
}
.about-list li::before {
  position:absolute;
  top:calc(var(--gap-m) * -1);
  left:calc(var(--gap-s) * -1);
  content: counter(about-list-counter) ;
  color:var(--color-pale-blue);
  font-weight:700;
  font-size:clamp(80px, 4.545rem + 2.27vw, 100px);
  z-index:-1;
}

.about-list h3{
  font-size:clamp(20px, 1.136rem + 0.48vw, 24px);
  font-weight:700;
  color:var(--color-black);
  margin-bottom:var(--gap-s);
  letter-spacing:0.03em;
}

.btn-apply-block{
  width:100%;
  max-width:570px;
  margin:auto;
}
.safety-service .btn-apply-block .c-button{
  height:60px;
  border-radius: 100vw;
  font-weight:500;
  font-size:16px;
}

#service-about .caution{
  margin-top:var(--gap-s);
  padding-left: 1em;
  text-indent: -1em;
}
#service-about .btn-apply-block-wrap .caution{
  text-align:center;
}

@media screen and (max-width: 767px) {
  .about-list{
    grid-template-columns: repeat(1,1fr);
  }
  .about-list li{
    padding-left:30px;
  }
  .about-list li::before {
    left:0;
  }
  .about-list li + li::after {
    position:absolute;
    content:'';
    top:calc(var(--gap-s) * -1);
    left:0;
    width:100%;
    height:1px;
    border-top:1px dotted var(--color-pale-blue);
    z-index:+1;
  }
  #service-about .caution{
    text-align:left;
  }
}

/*------------------------------------------
固定ボタン
------------------------------------------*/
.fade-in {  
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: 
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.is-active {
  opacity: 1;
  transform: translate(0) scale(1);
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-delay {
  transition-delay: 500ms;
}

/*固定後*/
.btn-fix{
  position:fixed;
  width: 100%;
  height:clamp(60px, 3.182rem + 2.42vw, 80px);
  left: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.safety-service .btn-fix .btn-apply-block .c-button{
  height: clamp(40px, 1.932rem + 2.42vw, 60px);
  padding-left: 20px;
  padding-right: 50px;
  border-radius: 100vw;
}

.btn-fix .btn-fix-wrap{
  margin:auto;
  width:fit-content;
  display: flex;
  gap:20px;
  align-items: center;
}

.btn-apply-txt{
  white-space:nowrap;
  font-size:14px;
  text-align:left;
}

.btn-top-back{
  position:absolute;
  right:clamp(10px, 0.341rem + 1.21vw, 20px);
  bottom:10px;
  width: clamp(40px, 1.932rem + 2.42vw, 60px);
  aspect-ratio: 1 / 1;
  z-index: +1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


@media screen and (max-width: 767px) {
  .btn-fix{
    display:flex;
    padding: 10px;
    gap:10px;
  }
  .btn-fix .btn-fix-wrap{
    flex:1;
  }
  .btn-top-back{
    position:relative;
    right:0;
    bottom:0;
  }
}

/*------------------------------------------
トップへ戻るボタン
------------------------------------------*/
.btn-top-back a{
  border-radius: 50%;
  width: 100%;
  height:100%;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .3s;
  opacity: .7;
  pointer-events: all;
}
.btn-top-back a::after {
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}


/*------------------------------------------
セーフティサービスの会員特典
service-benefit
------------------------------------------*/
/*--スクロール--*/
.service-list-wrapper{
  width:100%;
}
@media screen and (max-width: 1139px) {
  .service-list-wrapper{
    padding-bottom:10px;
    overflow-x: scroll;
  }
  .service-list-wrapper::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }
  .service-list-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-blue);
    border-radius: 10px;
  } 
  .mservice-list-wrapper::-webkit-scrollbar-track {
    background-color: var(--color-gray);
    border-radius: 10px;
  }
}

/*--リスト--*/
.service-list{
  width:max-content;
  display:flex;
  gap:20px;
}

.service-list .list-item{
  width:270px;
  border-radius:var(--gap-s);
  overflow: hidden;
  border:2px solid var(--color-blue);
  background:#fff;
  box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-list h3{
  color:var(--color-blue);
  font-size:clamp(16px, 0.955rem + 0.23vw, 18px);
  font-weight:700;
}
.service-list p{
  font-size:14px;
}
.safety-service .service-list p + p {
  margin-top: 0;
}

.service-list .list-top h3{
  padding:var(--gap-s);
}
.service-list .list-top p{
  padding:0 var(--gap-s);
}
.service-list .list-btm{
  padding:var(--gap-s);
}
#service-flow .service-list .list-btm{
  padding:var(--gap-s) 0 0 0;
}


.safety-service .list-btn{
  margin-top:var(--gap-s);
  display: flex;
  justify-content: flex-end;
}
.safety-service .list-btn .c-button{
  width:180px;
  height:auto;
  justify-content: flex-start;
  padding:10px 40px 10px 20px;
  font-weight:600;
  font-size:14px;
  border-radius: 100vw;
}
.safety-service .list-btn .c-button.--open{
  padding-right:40px;
}
.safety-service .list-btn .c-button.--open::after{
  filter:var(--filter-white);
}

/*--ベネフィット内容--*/
.service-list .bene-list{
  width:100%;
  display:flex;
  justify-content: space-between;
}

.service-list .bene-txt{
  display:flex;
  flex-direction: column;
}

.service-list .bene-tag{
  color:var(--color-orange);
  font-size:13px;
  font-weight:700;
}

.service-list .bene-ttl{
  color:var(--color-black);
  font-size:16px;
  font-weight:700;
}

.safety-service .service-list .bene-price{
  display:flex;
  align-items: flex-end;
  color:var(--color-orange);
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.service-list .bene-price strong{
  font-size:30px;
  font-weight:800;
}

/*--ベネフィットボタン--*/
.safety-service .bene-link + .bene-link{
  margin-top:10px;
}

.safety-service .bene-link .c-button{
  justify-content: flex-start;
  border:2px solid var(--color-blue);
  border-radius: 8px;
  padding: 10px;
  height:auto;
}

.safety-service .bene-link .c-button::after{
  border-color:var(--color-blue);
}

.safety-service .bene-link .bene-cont{
  display:flex;
  flex-direction: column;
}

/*------------------------------------------
ご利用の流れ
service-flow
------------------------------------------*/
.list-item h3:has(.num){
  display: flex;
  align-items: center;
  gap:5px;
  margin-top:-5px;
  margin-left:-5px;
}
.list-item .num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  position: relative;
  color: #fff;
  z-index: 2;
}
.list-item .num::before{
  position:absolute;
  top:0;
  left:0;
  content:'';
  background:var(--color-blue);
  width:2em;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  z-index: -1;
}

/*------------------------------------------
サービスメニュー
service-menu
------------------------------------------*/
.menu-list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:var(--gap-s);
}

.menu-list > li{
  position:relative;
  background:#fff;
  border:2px solid var(--color-blue);
  border-radius:var(--gap-s);
}
.menu-list > li:hover{
  cursor: pointer;
  outline: 1px solid rgba(0, 162, 230, 0.5);
  filter: drop-shadow(0 0 5px rgba(0, 162, 230, 0.5));
}

.menu-list .menu-item{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  padding:clamp(15px, 0.795rem + 0.61vw, 20px);
}

.menu-list h3{
  font-size:clamp(16px, 0.83rem + 0.73vw, 22px);
  color:var(--color-blue);
  font-weight:700;
  margin-bottom:var(--gap-s);
}

.menu-list .menu-wrap{
  width:100%;
  display:flex;
  gap:var(--gap-m);
  align-items: center;
}

.menu-list .menu-img{
  width:35%;
}

.menu-list .menu-txt{
  flex:1;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-list .menu-txt-list li{
  list-style-type: disc;
  margin-bottom:10px;
  margin-left:1.5em;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  line-height:1.2;
}
.menu-list .menu-txt-list li:has(h4){
  list-style-type: none;
  margin-left:0;
}
.menu-list .menu-txt-list h4{
  font-weight:700;
}

@media screen and (max-width: 767px) {
  .menu-list{
    grid-template-columns: repeat(1,1fr);
  }
}

/*------------------------------------------
お客様のお声をご紹介
service-voice
------------------------------------------*/
.voice-block{
  background: #fff url(../images/customer-voice.webp) no-repeat top right / contain;
  border:2px solid var(--color-blue);
  border-radius:var(--gap-s);
  padding:var(--gap-m) 0;
}

.voice-block h3 {
  display: inline-block;
  width: 70%;
  font-size: clamp(16px, 0.858rem + 0.61vw, 21px);
  font-weight: 700;
  letter-spacing: .1em;
  color: #00a2e6;
  background-color: #FFD75A;
  padding: .5em 2em;
  clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
}

.voice-block .voice-wrapper{
  padding:0 var(--gap-m);
}

.voice-block .voice-content{
  width: 85%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid #c1c1c1;
  border-radius: 1rem;
  margin-top:var(--gap-s);
  font-size:14px;
  line-height:1.6;
  padding: var(--gap-s);
  display:flex;
  align-items: center;
  gap:var(--gap-s);
}

.voice-block .voice-content .voice-icon{
  width: 10%;
  max-width:60px;
}

.voice-block .voice-content p{
  flex:1;
}

.voice-block .voice-content + .voice-content{
  margin-left:15%;
  justify-content: flex-end;
}

.voice-block .more-btn{
  margin-top:var(--gap-s);
  width:100%;
  max-width:420px;
}

@media screen and (max-width: 767px) {
  .voice-block .voice-content,
  .voice-block .voice-content + .voice-content{
    flex-direction: column;
    margin-left:0;
    justify-content: flex-start;
  }
  .voice-block .voice-content{
    width: 100%;
  }
  .voice-block .voice-content .voice-icon{
    width: 20%;
    margin:auto;
  }
  .voice-block h3 {
    width: 90%;
  }
}

/*------------------------------------------
セーフティサービス会員限定
service-exclusive
------------------------------------------*/
.exclusive-list{
  display:grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(3,1fr);
}

.exclusive-list li{
  border:2px solid var(--color-blue);
  padding:clamp(15px, 0.795rem + 0.61vw, 20px);
  border-radius:var(--gap-s);
  display:flex;
  flex-direction: column;
  gap:var(--gap-s);
  background:#fff;
}

.exclusive-list .exclusive-img{
  overflow: hidden;
  border-radius:var(--gap-ss);
}

.exclusive-list li h3{
  font-size:clamp(16px, 0.83rem + 0.73vw, 22px);
  font-weight:700;
  color:var(--color-blue);
  line-height:1.2;
}

.exclusive-list li p{
  font-size:clamp(12px, 0.636rem + 0.48vw, 16px);
  line-height:1.6;
}

.more-link{
  max-width:570px;
  margin:var(--gap-m) auto 0 auto;
}

.more-link .c-button{
  font-size:clamp(14px, 0.591rem + 1.21vw, 24px);
  font-weight:700;
  border-radius:100vw;
  height: clamp(40px, 1.932rem + 2.42vw, 60px);
}

@media screen and (max-width: 767px) {
  .exclusive-list{
    grid-template-columns: repeat(1,1fr);
  }
}

/*------------------------------------------
よくあるご質問
service-faq
------------------------------------------*/
.faq-list{
  width:100%;
  counter-reset: faq-counter; 
}

.faq-list > li {
  counter-increment: faq-counter; 
  border-bottom:1px dotted #c8c8c8;
}
.faq-list > li:first-child{
  border-top:1px dotted #c8c8c8;
}

.faq-list > li details[open]{
  padding-bottom:var(--gap-s);
}

.faq-list > li summary {
  list-style: none;
  display: block;
  position:relative;
  padding:var(--gap-s) 3em var(--gap-s) 0;
  font-size:clamp(14px, 0.705rem + 0.73vw, 20px);
  font-weight:700;
  cursor:pointer;
}
.faq-list > li details[open] summary {
  padding-bottom:calc(var(--gap-s) / 2);
}

.faq-list > li summary::-webkit-details-marker {
  display:none;
}
.faq-list > li summary::before{
  position:absolute;
  content:'';
  top:calc(50% - 1px);
  right:0;
  background:var(--color-blue);
  width:1em;
  height:2px;
}
.faq-list > li summary::after{
  position:absolute;
  content:'';
  top:calc(50% - 0.5em);
  right:calc(0.5em - 1px);
  background:var(--color-blue);
  width:2px;
  height:1em;
  transition: all 0.3s;
}
.faq-list > li details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}

.faq-list > li summary p {
  position:relative;
  padding-left:3em;
}

.faq-list > li summary p::before {
  position:absolute;
  left:0;
  top:0;
  color:var(--color-blue);
  font-weight:700;
  content: "Q." counter(faq-counter); 
}

.faq-cont{
  background:#f6f6f6;
  border-radius: var(--gap-s);
  padding:clamp(15px, 0.795rem + 0.61vw, 20px);
  font-size:clamp(12px, 0.58rem + 0.73vw, 18px);
  line-height:1.6;
}

.faq-cont h4{
  font-weight:700;
  color:var(--color-d-blue);
}

.faq-cont strong{
  font-weight:700;
}

.num-list{
  list-style: decimal;
  margin-left:1.5em;
}

.disc-list{
  list-style: disc;
  margin-left:1.5em;
}

.faq-cont .faq-cont-block + .faq-cont-block{
  margin-top:var(--gap-s);
}

.faq-sample-wrap{
  display: flex;
  gap:var(--gap-s);
}
.faq-sample-img{
  width:30%;
  max-width:300px;
}
.faq-sample-txt{
  flex:1;
}
@media screen and (max-width: 767px) {
  .faq-sample-wrap{
    flex-direction: column;
  }
  .faq-sample-img{
    width:80%;
    margin:auto;
  }
}

/*------------------------
画像拡大モーダル
-------------------------*/

.zoomable {
  cursor: zoom-in;
}

.image-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  cursor: zoom-out;
}

.image-modal__inner {
  width: 90vw;
  max-width: 500px;
  max-height: 90vh;
}

.image-modal__image {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/*------------------------------------------
ボトムリンク
service-btm
------------------------------------------*/
.safety-service .sec-cont#service-btm{
  padding-top:0;
}

.link-list{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:var(--gap-s);
}
.link-list span{
  line-height:1.2;
  font-size:14px;
}

@media screen and (max-width: 1024px) {
  .link-list{
    grid-template-columns: repeat(2,1fr);
  }
}
@media screen and (max-width: 767px) {
  .link-list{
    grid-template-columns: repeat(1,1fr);
  }
}

/*-------------------------------------
ポップアップ調整
---------------------------------------*/

@media screen and (max-width: 767px) {
  input.popup_flg ~ .popup_content_wrapper {
    width: 90vw;
  }
  #safetyservice_upgrade_popup,
  #safetyservice_upgrade_popup_02,
  #safetyservice_upgrade_popup_03,
  #safetyservice_upgrade_popup_04,
  #safetyservice_upgrade_popup_05,
  #safetyservice_upgrade_popup_06,
  #safetyservice_upgrade_popup_07{
    margin: 10px auto !important;
  }

}