@charset "utf-8";
@import "/business/css/department.css";

/* maeda-doro.css
------------------------------------------ */
.top-img-area{background-image:url(../../../assets/img/business/insurance/index/pic-top-image.jpg);}

#BODY{
  width:940px;
  margin:0 auto;
  padding-top:30px;
  padding-bottom:50px;
}

/* タイトルエリア */
#BODY .titleArea{
  position:relative;
  margin-bottom:20px;
  height:110px;
}
#BODY .titleArea h1{
  position:absolute;
  display:flex;
  align-items:center;
  gap:20px;
  width:656px;
  left:0;
  top:0;
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:550;
  font-size:52px;
  line-height:71px;
  color:#0073BD;
  margin:0;
}
#BODY .titleArea h1 img{
  width:136px;
  height:110px;
  flex-shrink:0;
}
#BODY .titleArea h1 span{
  color:#0073BD;
}
#BODY .titleArea h1 .nowrap{
  white-space:nowrap;
}

/* リードエリア */
#BODY .leadArea{
  text-align:center;
  margin-bottom:40px;
}
#BODY .leadArea h2{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:24px;
  line-height:33px;
  color:#0073BD;
  margin:0 0 10px 0;
}
#BODY .leadArea .lead{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:16px;
  line-height:150%;
  color:#222222;
  margin:0;
}

/* グループナビゲーション */
#BODY .groupNavigation{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-bottom:40px;
}

#BODY .groupNavButton{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:18px 30px;
  gap:10px;
  width:282px;
  height:64px;
  border:1px solid #0097E0;
  border-radius:15px;
  background:#FFFFFF;
  cursor:pointer;
  transition:background-color 0.3s;
  flex:none;
  flex-grow:1;
}

#BODY .groupNavButton .buttonText{
  font-family:'Noto Sans JP', 'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:500;
  font-size:15px;
  line-height:22.5px;
  letter-spacing:0.15px;
  color:#0097E0;
  white-space:nowrap;
}

#BODY .groupNavButton .buttonArrow{
  width:18px;
  height:10px;
  display:block;
  flex-shrink:0;
  transition:transform 0.3s;
}

#BODY .groupNavButton:hover{
  background-color:#E3F5FF;
}

/* ターゲットグループ */
#BODY .targetGroups{
  margin-bottom:80px;
}

#BODY .targetGroup{
  margin-bottom:60px;
}

/* グループタイトル */
#BODY .groupTitle{
  box-sizing:border-box;
  width:940px;
  height:50px;
  background:#0097E0;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:30px;
  gap:15px;
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:24px;
  line-height:33px;
  color:#FFFFFF;
  margin:0 0 30px 0;
}

#BODY .groupTitle .groupIcon{
  width:40px;
  height:auto;
}

/* 保険カテゴリー */
#BODY .insuranceCategory{
  margin-bottom:30px;
}

#BODY .categoryTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:24px;
  line-height:33px;
  color:#222222;
  margin:0 0 25px 0;
}

#BODY .categoryTitle img{
  width:40px;
  height:auto;
}

#BODY .categoryTitle img.sports-icon{
  width:25px;
}

/* カテゴリー区切り線 */
#BODY .categorySeparator{
  height:1px;
  width:100%;
  background:#0097E0;
  margin:30px 0;
}

/* 保険オプション */
#BODY .insuranceOptions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
}

#BODY .insuranceOption{
  box-sizing:border-box;
  width:300px;
  display:flex;
  flex-direction:column;
  gap:0;
}

#BODY .optionName{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:18px;
  line-height:25px;
  color:#0097E0;
  display:block;
  margin-bottom:20px;
}

#BODY .optionSub{
  font-size:14px;
  color:#0097E0;
}

/* 保険をえらぶボタン */
#BODY .toggleButton{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding:20px 30px;
  width:100%;
  height:54px;
  background:#F5F5F5;
  border:none;
  border-radius:15px;
  font-family:'Noto Sans JP', 'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:16px;
  line-height:24px;
  letter-spacing:0.15px;
  color:#222222;
  cursor:pointer;
  transition:background-color 0.3s;
  white-space:nowrap;
  box-sizing:border-box;
}

#BODY .toggleButton.active{
  border-radius:15px 15px 0 0;
}

#BODY .toggleButton:hover{
  background-color:#e5e5e5;
}

#BODY .toggleButton .toggleIcon{
  width:18px;
  height:10px;
  flex-shrink:0;
  transition:transform 0.3s;
  transform:rotate(0deg);
}

#BODY .toggleButton.active .toggleIcon{
  transform:rotate(180deg);
}

/* オプションコンテンツ */
#BODY .optionContent{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  margin-top:0;
}

#BODY .optionContent ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
}

#BODY .optionContent ul li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  margin:0;
  background:#F5F5F5;
  border-top:1px dashed #0097E0;
  transition:background-color 0.3s;
}

#BODY .optionContent ul li:first-child{
  border-top:none;
}

#BODY .optionContent ul li:hover{
  background-color:#ebebeb;
}

#BODY .optionContent ul li.special-item{
  background:#ECF7FF;
}

#BODY .optionContent ul li.special-item:hover{
  background-color:#d9f0ff;
}

#BODY .optionContent ul li:last-child{
  border-radius:0 0 15px 15px;
}

#BODY .optionContent ul li a,
#BODY .optionContent ul li span.itemText{
  font-family:'Noto Sans JP', 'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:1.5;
  letter-spacing:0.15px;
  color:#0097E0;
  text-decoration:none;
  flex:1;
}

#BODY .optionContent ul li .itemIcon{
  width:auto;
  height:18px;
  flex-shrink:0;
}

#BODY .optionContent ul li .subText{
  font-size:12px;
  font-weight:500;
  color:#0097E0;
}

#BODY .optionContent p{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:16px;
  line-height:22px;
  color:#666666;
  margin:0;
  padding:20px;
}

/* 関連リンクエリア */
#BODY .linksArea{
  margin-bottom:60px;
  padding:50px 0;
}

#BODY .linksArea h3{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:30px;
  line-height:normal;
  color:#222222;
  margin:0 0 40px 0;
  text-align:center;
}

#BODY .linksGrid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  margin:0 auto;
  width:100%;
  max-width:900px;
}

#BODY .linksRow{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

#BODY .linksRow-services{
  flex-wrap:wrap;
  gap:40px;
}

#BODY .linksRow-companies{
  flex-wrap:nowrap;
}

#BODY .linksRow a{
  display:block;
  transition:opacity 0.3s;
}

#BODY .linksRow a:hover{
  opacity:0.7;
}

#BODY .linksRow img{
  height:auto;
  max-height:60px;
  width:auto;
  vertical-align:middle;
}

#BODY .linksRow img[alt="共栄火災"]{
  max-width:170px;
}

#BODY .linksRow img[alt="損保ジャパン"]{
  max-width:160px;
}

#BODY .linksRow img[alt="三井住友海上"]{
  max-height:80px;
}

#BODY .linksRow img[alt="あいおいニッセイ同和損保"]{
  max-height:80px;
}

/* 引受保険会社エリア */
#BODY .insuranceCompanies{
  margin-bottom:60px;
}

#BODY .insuranceCompanies h3{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:30px;
  line-height:41px;
  color:#222222;
  margin:0 0 30px 0;
  text-align:left;
}

#BODY .companiesGrid{
  display:flex;
  flex-direction:column;
  gap:20px;
}

#BODY .companiesRow{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:20px;
}

#BODY .companyLabel{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:160%;
  color:#222222;
  min-width:60px;
  text-align:left;
}

#BODY .companyList{
  display:flex;
  flex-direction:column;
  gap:5px;
}

#BODY .companyItem{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:160%;
  color:#222222;
  text-align:left;
}

/* 注意事項エリア */
#BODY .annotationArea{
  margin-top:40px;
}

#BODY .annotationArea ul{
  list-style:none;
  padding:0;
  margin:0;
}

#BODY .annotationArea ul li{
  font-family:'Noto Sans', sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:14px;
  line-height:160%;
  color:#222222;
  margin-bottom:10px;
  padding-left:1.2em;
  position:relative;
}

#BODY .annotationArea ul li::before{
  content:'・';
  position:absolute;
  left:0;
}

#BODY .annotationArea ul li.highlight{
  color:#D8588B;
}

#BODY .annotationArea ul li.no-marker{
  padding-left:0;
}

#BODY .annotationArea ul li.no-marker::before{
  content:none;
}

#BODY .annotationArea ul li.space-top{
  margin-top:20px;
}

#BODY .annotationArea ul li:last-child{
  margin-bottom:0;
}