@charset "UTF-8";
/*-------------------
--- kyousai.html ---
-------------------*/

/*===========================================================
 スマホ（全てのサイズで読み込む）
==========================================================*/

/* main
-----------------------------------------------------------*/

#kyousai h3 {
   margin-bottom: 30px;
   text-align: left;
   color: #FF870F;
}

.section {
   margin: 40px auto 60px;
}


/*
共済制度一覧
======================================*/

.sec01 {
   margin: 40px auto 35px;
   font-weight: 600;
}

.sec01-1,
.sec01-2 {
   margin-bottom: 30px;
}


/*
ラベルデザイン
------------------*/

.section .label {
   margin-bottom: 25px;
   width: 100%;
   height: 38px;
}

.section .label1 {
   background: url(../img/sp-ac-line01.jpg);
   background-repeat: no-repeat;
   background-position: left bottom;
   background-size: contain;
}

.section .label2 {
   background: url(../img/sp-ac-line02.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left bottom;
}

.section .label3 {
   background: url(../img/sp-ac-line03.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left bottom;
}

.section .label4 {
   background: url(../img/sp-ac-line04.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left bottom;
}

.section .label5 {
   background: url(../img/sp-ac-line05.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left bottom;
}

.section .label6 {
   background: url(../img/sp-ac-line06.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left bottom;
}


.section .label .label-inner p {
   display: flex;
   align-items: center;
   font-size: 1.8rem;
   font-weight: 600;
   line-height: 2;
}

/*矢印アイコン*/

.section .label .label-inner p::before {
   display: block;
   content: "\f0d7";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   color: #F1BC18;
   padding-right: 1rem;
}

/*開いたときの矢印アイコン*/

.section input[type=checkbox]:checked + .accordion-open .label .label-inner p::before {
   transform:rotateX(180deg);
}

/*
コンテンツ
------------------*/

/*共通*/

.comment {
   margin: auto;
   max-width: 420px;
}

.commentary {
   margin: 35px auto 40px;
}

.commentary.align {
   width: 250px;
}

.commentary.align dl {
   justify-content: left;
}

.commentary dl {
   justify-content: center;
   color: #5487C3;
   font-weight: 600;
}

.commentary dl:first-child {
   margin-bottom: 10px;
}

.commentary dl dt {
   margin-right: 10px;
   padding: 10px 0;
   width: 165px;
   border: solid 1px #5487C3;
   border-radius: 5px;
}

/*開いたときの余白*/

#kyousai-check1:checked ~ label[for="kyousai-check1"].accordion-close,
#kyousai-check2:checked ~ label[for="kyousai-check2"].accordion-close,
#kyousai-check3:checked ~ label[for="kyousai-check3"].accordion-close,
#kyousai-check4:checked ~ label[for="kyousai-check4"].accordion-close,
#kyousai-check5:checked ~ label[for="kyousai-check5"].accordion-close {
   padding: 20px 0 60px;
}

#kyousai-check6:checked ~ .accordion-close {
   padding-bottom: 25px;
}

/*資格取得祝金共済*/

.applicable {
   padding: 10px 0 25px;
}

.applicable ul {
   justify-content: space-between;
   align-items: flex-start;
   margin: auto;
   max-width: 300px;
   flex-wrap: wrap;
}

.applicable ul li {
   text-align: left;
   font-size: 1.8rem;
   line-height: 2;
   font-weight: 600;
}

.applicable ul li:nth-child(odd) {
   width: 42%;
}
.applicable ul li:nth-child(even) {
   width: 54%;
}

.second {
   padding: 50px 0 25px;
}

.second ul li:nth-child(odd) {
   width: 100%;
}

.applicable ul li::before {
   content: "●";
   color: #FF870F;
   padding-right: .1rem;
}

/*UAゼンセン共済、UAゼンセンメンバーズカード、マイカー共済*/

.contact-info {
   margin: 40px auto 20px;
}

/*ボタン
---------------------*/

/*btn01の元デザインはcommon.cssに記載*/

.contact-btn {
   background: #5487C3;
   border: #5487C3;
}
.contact-btn p {
   color: #fff;
}

@media screen and (max-width:320px) {
   .sec01 .btn01 p {
      font-size: 1.4rem;
   }
}

.contact-btn p::after {
    padding-left: 0;
    content: none;
}

.contact-btn:hover {
   background: #8DB2DE;
}


.btn02 {
   margin: 30px auto 0;
   width: 100%;
   max-width: 330px;
   background: linear-gradient(to right, #F1BC18 0%, #FF870F 100%);
   border-radius: 5px;
   transition: .5s;
}

.btn02 a {
   padding: 20px;
}

.btn02 p {
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 2.2rem;
   line-height: 1.7;
   font-weight: 600;
}

.btn02 p::before {
   display: inline-block;
   margin-right: 10px;
   content: "";
   width: 20px;
   height: 24px;
   background: url(../img/document-icon.png);
   background-position: top left;
   background-size: contain;
}

.btn02:hover {
   opacity: .6;
   background: linear-gradient(to left, #F1BC18 0%, #FF870F 100%);
}

.btn02:hover a {
   opacity: 1;
}

/*
共済給付の対象条件
======================================*/

.sec02 ul li {
   align-items: flex-start;
}

.sec02 ul li:first-child {
   margin-bottom: 30px;
}

.list-num {
   margin-right: 10px;
  border: 2px solid #5487C3;
  border-radius: 50%;
}

.list-num p {
   width: 46px;
   height: 46px;
   color: #5487C3;
   font-size: 3.2rem;
   font-weight: 600;
   line-height: 1.4;
}

@media screen and (max-width:370px) {

.list-num p {
   width: 35px;
   height: 35px;
   font-size: 2.6rem;
   }
}

.content {
   text-align: left;
}

/*
レジャーご優待
======================================*/

.sec03-1,
.sec03-2 {
   margin-bottom: 50px;
}

/*ボタン
---------------------*/

/*btn01デザインcssはcommon.cssに記載*/

.sec03-0 {
   margin-bottom: 60px;
}

.sec03-0 p {
   text-align: left;
   text-indent: 1rem;
}

.leisure-sum-btn {
   margin-top: 30px;
   background: #fff;
   border: solid 2px #F1BC18;
   border-radius: 8px;
}

.leisure-sum-btn p {
   text-align: center;
   color: #333;
    text-indent: 0;
}

.leisure-sum-btn p::after {
   padding-left: 0;
   content: none;
}

.leisure-sum-btn:hover {
   background: #fff;
   border: solid 2px rgb(117, 117, 117);
   opacity: .6;
}

.leisure-sum-btn:hover p {
   color: #333;
}


.leisure-btn {
   background: #F1BC18;
   border: #F1BC18;
}

.first {
   margin-bottom: 20px;
}
.leisure-btn p {
   justify-content: left;
   color: #fff;
}

.leisure-btn p::before {
   display: block;
   content: "\f144";
   font-family: "Font Awesome 5 Free";
   font-weight: 600;
   color: #fff;
   padding: 0 15px;
}

.leisure-btn p::after {
    padding-left: 0;
    content: none;
}

.leisure-btn:hover {
   background: #f1bb1894;
}


p.annotation {
   margin-top: 60px;
   text-align: left;
   font-weight: 600;
}

/*===========================================================
 タブレット（画面幅450px以上で読み込む）
==========================================================*/
@media screen and (min-width:450px) {

   .section .label1 {
      background: url(../img/ac-line01.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }

   .section .label2 {
      background: url(../img/ac-line02.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }

   .section .label3 {
      background: url(../img/ac-line03.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }

   .section .label4 {
      background: url(../img/ac-line04.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }

   .section .label5 {
      background: url(../img/ac-line05.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }

   .section .label6 {
      background: url(../img/ac-line06.jpg);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: left bottom;
   }
}

/*===========================================================
 タブレット（画面幅800px以上で読み込む）
===========================================================*/
@media screen and (min-width:800px) {

   .section .label {
      height: 45px;
   }

}


/*===========================================================
 タブレット（画面幅900px以上で読み込む）
===========================================================*/
@media screen and (min-width:900px) {

   /* main
   --------------------------------------------------------*/

   #kyousai h3 {
      margin-bottom: 40px;
   }

   .section {
      margin: 60px auto 80px;
   }


   /*
   共済制度一覧
   ======================================*/

   .sec01 {
      margin: 60px auto 55px;
   }

   .sec01-1,
   .sec01-2 {
      margin-bottom: 40px;
   }


 /*
   ラベルデザイン
   ------------------*/

   .section .label {
      margin-bottom: 35px;
   }


   .section .label .label-inner p {
      font-size: 2rem;
   }


   /*開いたときの矢印アイコン*/

   .section input[type=checkbox]:checked + .accordion-open .label .label-inner p::before {
      transform:rotateX(180deg);
   }

   /*
   コンテンツ
   ------------------*/

   /*共通*/

   /*開いたときの余白*/

   #kyousai-check1:checked ~ label[for="kyousai-check1"].accordion-close,
   #kyousai-check2:checked ~ label[for="kyousai-check2"].accordion-close,
   #kyousai-check3:checked ~ label[for="kyousai-check3"].accordion-close,
   #kyousai-check4:checked ~ label[for="kyousai-check4"].accordion-close,
   #kyousai-check5:checked ~ label[for="kyousai-check5"].accordion-close,
   #kyousai-check6:checked ~ label[for="kyousai-check6"].accordion-close {
      width: 420px;
      margin: auto;
   }


   /*UAゼンセン共済、UAゼンセンメンバーズカード、マイカー共済*/

   .contact-info {
      margin: 50px auto 25px;
   }

   /*ボタン
   ---------------------*/

   .btn02 {
      margin: 40px auto 0;
   }

   .btn02 a {
      padding: 25px;
   }

   /*
   共済給付の対象条件
   ======================================*/

   .sec02 ul li:first-child {
      margin-bottom: 35px;
   }

   /*
   レジャーご優待
   ======================================*/

   .sec03-1,
   .sec03-2 {
      margin-bottom: 55px;
   }

   /*ボタン
   ---------------------*/

   .first {
      margin-bottom: 30px;
   }

   .leisure-btn p::before {
      padding: 0 20px;
   }

   p.annotation {
      margin-top: 80px;
      text-align: center;
   }

}