@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&text=0123456789&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@900&text=区民交通傷害保険&display=swap');

/* ----- common ----- */
:root{
  --blue:#1167ae;
  --red:#cc0022;
  --black:#000000;
  --radius_pc:6px;
}
*{
  box-sizing:border-box;
}
html{
  font:normal 500 16px/1.7 'Oswald','Noto Sans JP',sans-serif;
  color:var(--black);
  scroll-behavior:smooth;
}
.content{
  width:92%;
  max-width:64rem;
  margin:0 auto;
}
p:first-of-type{
  margin-top:0;
}
p:last-of-type{
  margin-bottom:0;
}
p.notes{
  font-size:0.75rem;
  font-weight:400;
}
.p_largeTxt{
  font-size:1.75rem;
  font-weight:700;
}
a{
  color:var(--blue);
}
a>svg{
  width:1em;
  height:1em;
  fill:var(--blue);
  margin-inline:.25em 0;
}
br.br_sp{
  display:none;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
iframe{
  max-width:100%;
  border:0;
}
iframe[src*=youtube]{
  width:100%;
  aspect-ratio:16/9;
}
.marker{
  background: linear-gradient(transparent 65%, #FAdd34 65%);
}
.atTokyo{
  display:inline-block;
  padding:0 12px 2px;
  border-radius:var(--radius_pc);
  background:var(--blue);
  color:#fff;
  font-weight:500;
  font-size:1rem;
  position:absolute;
  top:0;
  left:-1.5rem;;
}
.atTokyo::after{
  content:"";
  width:.75rem;
  height:.75rem;
  background:var(--blue);
  transform:rotate(45deg);
  position:absolute;
  top:1.25rem;
  left:1rem;
}
h2{
  position:relative;
  width:fit-content;
  margin:0 auto 2rem;
  padding-top:1.75rem;
  font-size:1.5rem;
}
.h2_smallTxt_red{
  color:var(--red);
}
.h2_largeTxt_bk{
  font-size:2rem;
}
.h2_largeTxt_red{
  font-size:2rem;
  color:var(--red);
}
h3{
  font-size:1.5rem;
}
.h3_smallTxt_red{
  color:var(--red);
}
.h3_largeTxt_red{
  color:var(--red);
  font-size:2.25rem;
}
.cautionRed{
  color:var(--red);
  border-bottom:1px solid var(--red);
}
/* ----- MV ----- */
.mv{
  position:relative;
  aspect-ratio: 1440/613;
  background: url(../img/mv_pc.jpg) no-repeat center /cover;
}
.mvBicycle_pc{
  position:absolute;
  width:30.2vw;
  height:auto;
  animation:mvBicycle_pc 1s ease-out forwards;
}
.mvBicycle_sp{
  display:none;
}
.mv_inner{
  width: fit-content;
  margin: 0 11% 0 auto;
  padding: 8.7% 0 0 0;
}
.mv_place{
  display:inline-block;
  font-weight:500;
  padding:0 8px 2px;
  border-radius:var(--radius_pc);
  font-size:1.2vw;
  background:var(--blue);
  color:#fff;
}
.mv_ttl{
  font-family: "Zen Maru Gothic","Noto Sans JP",sans-serif;
  font-weight: 900;
  font-size: 6.4vw;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 3.8vw;
  position: relative;
}
.mv_badge{
  display: grid;
  width: 9vw;
  height: 9vw;
  place-content: center;
  font-size: 1.29vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  transform: rotate(12deg);
  background: url(../img/mv_badge.png) no-repeat center/cover;
  position: absolute;
  top: 13%;
  right: 5.4%;
}
.mv_txt{
  font-size: 3.9vw;
  font-weight: 700;
  line-height: 1.16;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}
.mv_txt .marker{
  color: var(--red);
}
.mv_num{
  font-size: 5vw;
  letter-spacing: -.02em;
}
.mv_note{
  display: block;
  text-align: right;
  font-size: .75vw;
  font-weight: 400;
}

/* ----- mandatory ----- */
.mandatory{
  padding:4rem 0;
  text-align:center;
  font-size:1.25rem;
}
.mandatory>.content{
  background:url("../img/caution.png") no-repeat left bottom/25.75rem auto;
}
.mandatory_leadTxt{
  font-size:1.5rem;
}
.mandatory2row{
  display:grid;
  margin:2rem 0 0;
  grid-template-columns:1fr 480px;
  gap:4rem;
  align-items:center;
}
.mandatory2row_left{
  text-align:left;
}

/* ----- accident ----- */
.accident{
  background:#fafafa;
  padding:4rem 0;
  font-size:1.25rem;
}
.accident p.notes{
  padding:0 0 0 3em;
  text-indent:-3em;
}
.accident2row{
  display:grid;
  grid-template-columns:480px 1fr;
  gap:2.5rem;
  align-items:center;
}
.accident2row_right{
  text-align:center;
}

/*　-----　accidentCase ----- */
.accidentCase{
  background:#fffcdB;
  padding:4rem 0;
}
.accidentCase_2row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
}
.case{
  background:#fff;
  border-radius:var(--radius_pc);
  padding:2rem;
  text-align:center;
}
.case .case_title{
  padding:0 0 1rem;
  border-bottom:1px solid var(--black);
  position:relative;
}
.case_title::after{
  content:"";
  width:1rem;
  height:1rem;
  background:#fff;
  border:1px solid #000;
  border-left:none;
  border-top:none;
  position:absolute;
  bottom:calc(-1rem + 1px);
  left:50%;
  transform:rotate(45deg) translate3d(-50%,0,0);
}
.case .case_titleNumber{
  display:block;
  margin:0 0 1rem;
  border-radius:var(--radius_pc);
  background:#f1f1ef;
  font-size:1.25rem;
  line-height:1.4;
}
.case .case_titleNumber>span{
  font-size:1.75rem;
}
.case img{
  margin:1.5rem auto 1rem;
}
.case .case_result{
  font-size:2rem;
  font-weight:700;
}
.case .case_result .p_colorRed{
  color:var(--red);
}
.case .case_result .p_largeTxt{
  font-size:3rem;
}

/* ----- aboutInsurance -----*/
.aboutInsurance{
  background:#f0faff;
  padding:4rem 0 134px;
  position:relative;
  overflow: hidden;
}
.aboutInsurance h2{
  padding: 0;
}
.aboutInsurance h2 span:not(.h2_largeTxt_red){
  font-family: "Zen Maru Gothic","Noto Sans JP",sans-serif;
  font-size: 2.8125rem;
  font-weight: 900;
  color: var(--red);
  letter-spacing: -.04em;
}
.point{
  position:relative;
  background:#fff;
  border-radius:6px;
  padding:2rem 2rem 2rem 6rem;
  margin:0 0 2rem;
  min-height:125px;
}
.point_accordion_title{
  position:relative;
  list-style:none;
}
.point_accordion_title::-webkit-details-marker {
  display:none;
}
.point_accordion_title::before{
  content:"";
  width:2.5rem;
  height:2.5rem;
  display:block;
  background:url("../img/btn_open.png") no-repeat center center/cover;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  transition:.3s;
}
.point_accordion[open] .point_accordion_title::before{
  transform:translateY(-50%) rotate(-180deg);
}
.point_accordion[open] {
  animation: accordion_open .5s forwards;
}
.point_accordion[open] .accordion_content{
  animation: accordion_open_content .5s forwards;
}
.point .pointNumber{
  display:grid;
  place-content:center;
  font-size:3rem;
  width:4rem;
  height:100%;
  background:var(--blue);
  border-radius:6px 0 0 6px;
  color:#fff;
  position:absolute;
  top:0;
  left:0;
}
.point h3{
  display:inline;
  padding:0 0 0 3rem;
}
.point_tableWrap{
  position: relative;
}
.table_badge.sp{
  display: none;
}
.table_badge{
  display: grid;
  place-content: center;
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 6%;
  right: -5.2%;
  transform: rotate(12deg);
  z-index: 2;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  background: url(../img/table_badge.png) no-repeat center/cover;
}
.point table{
  width:100%;
  text-align:center;
  border-spacing:0;
  border:1px solid #bdc0c3;
  border-radius:var(--radius_pc);
  font-weight:400;
  margin: 1rem 0 0;
}
.point table .table_c1{
  width:16%;
}
.point table .table_c2,
.point table .table_c3{
  width:28%;
}
.point table .table_corner1{
  border-radius:4px 0 0 0;
}
.point table .table_corner2{
  border-radius:0 4px 0 0;
  position:relative;
}
.point table .table_corner3{
  border-radius:0 0 4px 0;
}
.point table .table_corner4{
  border-radius:0 0 0 4px;
}
.point table th{
  background:var(--blue);
  color:#fff;
  padding:8px 0;
}
.point table th>span.notes{
  font-size:.75rem !important;
}
.point table th,.point table td{
  border:.5px solid #bdc0c3;
}
.point table td{
  padding:6px 0;
}
.point table td .c2_arrange,.point table td .c3_arrange{
  display: block;
  width: 53px;
  margin: 0 auto;
  text-align: right;
  white-space: nowrap;
}
.point table td .c3_arrange{
  width: 57px;
}
.point table .table_bgYellow{
  background:#FFFEF4;
}
.point table .table_bgYellow>.table_borderYellow_top{
  border-top:2px solid #fadd34;
}
.point table .table_bgYellow>.table_borderYellow_right{
  border-right:2px solid #fadd34;
}
.point table .table_bgYellow>.table_borderYellow_bottom{
  border-bottom:2px solid #fadd34;
}
.point table .table_bgYellow>.table_borderYellow_left{
  border-left:2px solid #fadd34;
}
.point table .table_bgYellow>td{
  padding:10px 0;
}
.point table .table_bgYellow>.table_txtRed{
  color:var(--red);
  font-weight:700;
}
.point_accordion_title{
  display:block;
  cursor:pointer;
  list-style:none;
}
.point_accordion_title::after{
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}
.point_accordion_title1row{
  margin:.5rem 0 0;
}
.accordion_content ul{
  list-style:none;
  padding:0;
  margin:0;
}
.accordion_content ul>li::before{
  content:"・";
}
.accordion_content p{
  margin:1rem 0;
}
.accordion_content p:last-of-type{
  margin-bottom:0;
}
.point1{
  background:url("../img/point1_icon.png") no-repeat 6rem 1rem/72px auto,#fff;
}
.point2{
  background:url("../img/point2_icon.png") no-repeat 6rem 1rem/8rem auto,#fff;
}
.point3{
  background:url("../img/point3_icon.png") no-repeat 6rem 1rem/8rem auto,#fff;
}
.point4{
  background:url("../img/point4_icon.png") no-repeat 6rem 1rem/8rem auto,#fff;
}
.point5{
  background:url("../img/point5_icon.png") no-repeat 6rem 1rem/8rem auto,#fff;
}
.point6{
  background:url("../img/point6_icon.png") no-repeat 6rem 1rem/8rem auto,#fff;
}
.point2_2row{
  display:flex;
  gap:40px;
}
.point3_icons{
  display:inline;
  position:relative;
  top:3px;
}
.point3_icons>img{
  margin:0 0 0 1rem;
}
.point5_2row{
  display:flex;
  justify-content:space-around;
}

.btn_leaflet{
  display:flex;
  max-width:480px;
  margin:3rem auto 4rem;
  justify-content:center;
  align-items:center;
  height:53px;
  border:1px solid var(--red);
  box-shadow: 0px 3px 0px 0px #911813;
  border-radius:6px;
  background:#fff;
  color:var(--red);
  text-decoration:none;
}
.btn_leaflet>svg{
  width:1rem;
  height:1rem;
  fill:var(--red);
  margin:0 0 0 .5rem;
}
.btn_leaflet:hover{
  transform:translateY(3px);
  box-shadow:none;
  transition:.3s;
}
.animateBox{
  position:relative;
  width:100%;
  max-width:480px;
  height:360px;
  margin:4rem auto 2rem;
}
.animateBox>.animateBox_bicycle{
  width:70%;
  height:auto;
  position:absolute;
  top:5%;
  right:0;
  z-index:3;
  opacity:0;
}
.animateBox>.animateBox_bicycle.animate-active{
  animation:animateBox_bicycle 1.2s ease-out forwards;
}
.animateBox>.animateBox_woman{
  width:39%;
  height:auto;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  opacity:0;
}

.animateBox>.animateBox_woman.animate-active{
  animation:animateBox_woman .3s linear 1s forwards;
}
.animateBox>.animateBox_effect{
  width:53%;
  height:auto;
  position:absolute;
  bottom:0;
  left:0;
  opacity:0;
}
.animateBox>.animateBox_effect.animate-active{
  animation:animateBox_effect .7s linear 1.3s forwards;
}
.animateBox>.animateBox_bicycle_badge{
  display: grid;
  place-content: center;
  width:32%;
  aspect-ratio: 1/1;
  position:absolute;
  top:0;
  right:0;
  z-index:4;
  transform: rotate(12deg);
  opacity:0;
  color: #fff;
  font-weight: 700;
  font-size: 1.375rem;
  text-align: center;
  line-height: 1.4;
}
.animateBox>.animateBox_bicycle_badge.animate-active{
  animation:animateBox_bicycle_badge .5s linear 2.2s forwards;
}
.footNote{
  font-weight:400;
  padding:0 0 0 1em;
  text-indent:-1em;
}
.contactBox{
  background:#fffff2;
  padding:1.5rem 1.5rem 1.5rem 2.5rem;
  margin:2rem 0 1rem;
  font-family:"Noto Sans JP",sans-serif;
  text-indent:-1rem;
  border-radius:6px;
  font-weight:400;
}
.managementNumber{
  text-align:right;
  font-family:"Noto Sans JP",sans-serif;
  font-weight:normal;
  margin:1rem 0 174px;
}
#toTop{
  position:absolute;
  right:0;
  bottom:5.375rem;
}
#toTop:hover{
  padding:0 0 1rem 0;
  transition:.3s;
}
#toTop.active{
  animation:toTop .5s ease-out;
}
.fixed_footMenu{
  width:100%;
  height:70px;
  background:rgba(255,255,255,.8);
  border-top:1px solid #cbcbcb;
  display:flex;
  gap:32px;
  justify-content:center;
  align-items:center;
  position:fixed;
  bottom:0;
  left:0;
  z-index:5;
}
.fixed_footMenu>a{
  display:flex;
  width:50%;
  max-width:400px;
  height:3rem;
  justify-content:center;
  align-items:center;
  color:var(--red);
  text-decoration:none;
  border:1px solid var(--red);
  background:#fff;
  border-radius:6px;
  box-shadow:0 3px 0 0 #911813;
}
.fixed_footMenu .btn_application{
  background:var(--red);
  color:#fff;
}
.fixed_footMenu>a:hover{
  transform:translateY(3px);
  box-shadow:none;
  transition:.3s;
}
.fixed_footMenu>a>svg{
  width:1rem;
  height:1rem;
  margin:0 0 0 .5rem;
  fill:var(--red);
}

/* ----- SP ----- */
@media screen and (max-width:750px){

  /* ----- SP common ----- */
  h2{
    font-size:.9375rem;
  }
  .h2_largeTxt_bk{
    font-size:1.5rem;
  }
  .h2_largeTxt_red{
    font-size:1.5rem;
  }
  .atTokyo{
    left:0;
  }
  p{
    font-size:.875rem;
  }
  p.notes{
    font-size:.625rem;
    text-align:left;;
  }
  .p_largeTxt{
    font-size:1.25rem;
  }
  /* ------- SP mv ------- */
  .mv{
    background: url(../img/mv_sp.jpg) no-repeat center/cover;
    aspect-ratio: 750/780;
  }
  .mvBicycle_pc{
    display:none;
  }
  .mvBicycle_sp{
    display:block;
    position:absolute;
    width:44vw;
    height:auto;
    animation:mvBicycle_sp .7s ease-out forwards;
  }
  .mv_inner{
    width: 92%;
    margin: 0 auto;
    padding: 10% 0 0;
  }
  .mv_place{
    font-size:4.5vw;
    margin: 0 0 .5vw;
  }
  .mv_ttl{
    font-size: 11.97vw;
    margin: 0 0 7.6vw;
  }
  .mv_badge{
    width: 20.5vw;
    height: 20.5vw;
    top: 4.1%;
    right: 4%;
    font-size: 3.2vw;
  }
  .mv_txt{
    margin: 0 0 0 auto;
    padding: 0 5.5% 0 0;
    font-size: 7.47vw;
    line-height: 1.1;
  }
  .mv_num{
    font-size: 11.75vw;
  }
  .mv_note{
    font-size: 3vw;
    text-align: center;
    margin: 2vw 0 0;
  }


  /* ----- SP mandatory ----- */
  .mandatory_leadTxt{
    font-size:1.125rem;
  }
  .mandatory2row{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .mandatory2row_left{
    text-align:center;
  }
  .mandatory>.content{
    background:url("../img/caution.png") no-repeat left bottom 56%/17.25rem auto;
  }
  /* ----- SP accident -----*/
  .accident2row{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .accident2row_right{
    order:1;
  }
  .accident2row_left{
    order:2;
  }

  /* ----- SP accidentCase ----- */
  .accidentCase_2row{
    grid-template-columns:1fr;
  }
  .case .case_titleNumber{
    font-size:1rem;
  }
  .case .case_titleNumber>span{
    font-size:1.25rem;
  }
  .case .case_title{
    font-size:1rem;
  }
  .case img{
    width:70%;
    height:auto;
  }
  .case .case_result{
    font-size:1.5rem;
    margin:0;
  }
  .case .case_result .p_largeTxt{
    font-size:2rem;
  }

  /* ----- SP aboutInsuarance ----- */
  .aboutInsurance{
    padding:4rem 0 175px;
  }
  .aboutInsurance h2{
    text-align:center;
    padding: 0;
  }
  .aboutInsurance h2 span:not(.h2_largeTxt_red){
    font-size: 1.875rem;
  }
  .point{
    padding:1rem 1rem 1rem 3.5rem;
    min-height:5.5rem;
  }
  .point_accordion_title1row{
    margin:0;
  }
  .point p, .point ul{
    font-size:.875rem;
  }
  .point .pointNumber{
    font-size:1.5rem;
    width:2rem;
  }
  .point h3{
    padding:0;
    font-size:1rem;
    line-height:.8;
  }
  .point_accordion_title::before{
    width:1.375rem;
    height:1.375rem;
  }
  .h3_largeTxt_red{
    font-size:1.5rem;
  }
  .point1 {
    background: url(../img/point1_icon.png) no-repeat 3.5rem 1rem/3rem auto,#fff;
  }
  .table_badge.pc{
    display: none;
  }
  .table_badge.sp{
    display: grid;
    width: 4.875rem;
    height: 4.875rem;
    top: 16.5%;
    left:0.5rem;
    transform:rotate(-30deg);
    background: url(../img/table_badge.png) no-repeat center/cover;
  }
  .point_tableWrap{
    overflow:scroll;
    position:relative;
  }
  .point table{
    white-space:nowrap;
  }
  .point table th{
    padding:.5rem 1.5rem
  }
  .table_corner2::after{
    display:none;
  }
  .swipeOff.point_tableWrap::after{
    animation:swipe .5s linear 1.5s forwards;
  }
  .point_tableWrap::after{
    content:"";
    width:8rem;
    height:8rem;
    background:url("../img/swipe.png") no-repeat center center/cover;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:var(--radius_pc);
  }
  .point2 {
    background: url(../img/point2_icon.png) no-repeat 3.5rem .5rem/6rem auto,#fff;
  }
  .point2 .point_accordion_title{
    margin:.75rem 0 0;
  }
  .point2_2row{
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
  }
  .point3{
    position:relative;
    background: url(../img/point3_icon.png) no-repeat 3.5rem 1rem/6rem auto,#fff;
  }
  .point3_icons{
    width:3.5rem;
    height:auto;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:1.5rem;
  }
  .point4 {
    background: url(../img/point4_icon.png) no-repeat 3.5rem .75rem/6rem auto,#fff;
  }
  .point5 {
    background: url(../img/point5_icon.png) no-repeat 3.5rem .5rem/6rem auto,#fff;
  }
  .point5 .point_accordion_title{
    margin:.85rem 0 0;
  }
  .point5_2row{
    flex-wrap:wrap;
  }
  .point5_2row img{
    width:80%;
    height:auto;
    margin:0 auto;
  }
  p.imgCaption{
    font-size:.75rem;
    text-align:center;
  }
  .point6 {
    background: url(../img/point6_icon.png) no-repeat 3.5rem .75rem/6rem auto,#fff;
  }
  .point6 .point_accordion_title1row{
    margin:.85rem 0 0;
  }
  
  .animateBox{
    height:261px;
  }
  @media screen and (max-width:450px){
    .animateBox>.animateBox_bicycle_badge{
      font-size: 4.5vw;
    }
  }
  br.br_sp{
    display:block;
  }
  p.footNote{
    font-size:.625rem;
  }
  .contactBox{
    font-size:.875rem;
  }
  .fixed_footMenu{
    gap:1rem;
    height:3.5rem;
  }
  .fixed_footMenu>a{
    font-size:.75rem;
    width:43%;
    height:2.5rem;
  }
  #toTop>img{
    width:2rem;
    height:auto;
  }
}

/* ----- animation ----- */
@keyframes mvBicycle_pc{
  0%{
    top:26%;
    left:-26%;
  }
  70%{
    top:11.7%;
    left:9%;
  }
  100%{
    top:12%;
    left:8.4%;
  }
}
@keyframes mvBicycle_sp{
  0%{
    bottom:5%;
    left:-8%;
  }
  70%{
    bottom:14.6%;
    left:3.2%;
  }
100%{
  bottom:14%;
  left:2%;
}
}
@keyframes swipe{
  0%{opacity:1;}
  100%{
    opacity:0;
    display:none;
  }
}
@keyframes accordion_open{
  0%{
    max-height:125px;
  }
  100%{
    max-height:60rem;
  }
}
@keyframes accordion_open_content{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes animateBox_bicycle{
  0%{
    transform:translateX(100vw);
  }
  100%{
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes animateBox_woman{
  0%{}
  100%{
    opacity:1;
  }
}
@keyframes animateBox_effect{
  0%{}
  33%{
    opacity:1;
  }
  66%{
    opacity:.5;
  }
  100%{
    opacity:1;
  }
}
@keyframes animateBox_bicycle_badge{
  0%{}
  50%{
    transform:scale(1.2);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}
@keyframes toTop {
  0%{
    transform:translate3d(0,0,0);
    opacity:1;
  }
  100%{
    transform:translate3d(0,-200vh,0);
    opacity:0;
  }
}