/*
* Theme Name: 北海道マツダ労働組合
*/


@charset "utf-8";

html, body, div, ul, li, p, h3 {
margin: 0;
padding: 0;

}

html{
  scroll-behavior: smooth;
}

header{
  background-image: url('img/top.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.top_hokkai img{
  padding: 0 10% ;
  padding-bottom: 10%;
  width: 80%;
}

.news {
  background-color: #ffffff;
  width: 60%;
  margin: 0 auto;
  padding: 30px;
  position: absolute;
  top:80%;
  left: 20%;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.news-archive {
  width: 60%;
  margin: 60px auto 120px;
  padding: 30px;
}
.news_top {
  display: flex;
  justify-content:space-between
}
.news_h{
  font-size: 25px;
}
.news_ran a{
  text-decoration: none;
}
.news_ran a:hover{
  text-decoration: underline;
}
.news_ran p{
  margin-left: 20px;
  color: #666666;
  font-size: 15px;
  position: relative;
  letter-spacing: .3em;
}
.news_ran p::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: solid 2px #666666;
  border-right: solid 2px #666666;
  transform: rotate(45deg);
}
.news_01 ul{
  width: auto;
}
.news_01 li{
  display: flex;
  flex-direction: column;
  padding:15px;
  border-bottom:1px solid #000;
}

.news_01 li .subinfo{
  display: flex;
  align-items: center;
}

.news_01 .day{
  padding-right: 20px;
}
.news_01 .label{
  width: 100px;
  height: 20px;
  text-align: center;
  background-color:#005ebb;
  border-radius:3px;
  color:#fff;
  padding:2px 5px;
  margin:0 5px;
  font-size: 14.4px
}
.news_01 .label2{
  width: 100px;
  height: 20px;
  text-align: center;
  background-color:#39c64a;
  border-radius:3px;
  color:#fff;
  padding:2px 5px;
  margin:0 5px;
  font-size: 14.4px
}
.news_01 .label3{
  width: 100px;
  height: 20px;
  text-align: center;
  background-color:#ed1e79;
  border-radius:3px;
  color:#fff;
  padding:2px 5px;
  margin:0 5px;
  font-size: 14.4px
}
.news_01 .text{
  word-break: break-all;
  margin-top: 10px;
}
.label_02 {
  display: flex;
}
.news_01 .text a{
  color:#000;
  text-decoration: none;
}
.news_01 .text a:hover{
  text-decoration: underline;
}


.kumini {
  background: rgb(51,64,205);
  background: linear-gradient(0deg, rgba(51,64,205,0.30015756302521013) 0%, rgba(87,27,155,0.3029586834733894) 27%, rgba(187,87,146,0.29735644257703087) 100%);
}
.kumini01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding:  20% 0 10%;;
}
.kumini02 {
  padding: 0 20%;
  list-style: none;
  display: flex;
  align-items: center;
}
.kumini03 h2 {
  color: #00478c;
  font-size: 35px;
  position: absolute;
}
.kumini05 img {
  width: 400px;
}
.kumini06 img {
  left: 30px;
  width: 400px;
  padding: 50px 0 10px 140px;
}
.kumini04 {
  padding-right: 60px;
}

.kumini02 ul {
  list-style: none;
}
.btn_w3{
  list-style: none;
  float: left;
  width: 100%;
}
.btn_sa p{

  text-decoration: none;
}
.btn-after3 {
  list-style: none;
  align-items: flex-end;
}
.btn-after3 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  padding: 1em 2em;
  width: 200px;
  color: #00478c;
  font-size: 15px;
  font-weight: 700;
  border: solid 2px #00478c;
}

.btn-after3 a::after {
  list-style: none;
  content: '';
  width: 11px;
  height: 11px;
  margin-top: 0px;
  border-top: solid 2px #00478c;
  border-right: solid 2px #00478c;
  transform: rotate(45deg);
}

.btn-after3 a:hover{
  color:white;
  background-color: #00478c;
  transition: .3s;
}

.btn-after3 a:hover::after{
  border-top: solid 2px white;
  border-right: solid 2px white;
  transition: .3s;
}



.cl_1 {
  text-align: center;
  color: #00478c;
  font-size: 25px;
  position: absolute;
  right: 45%;
}

.cl_2 img{
  display: block;
  margin: 0 auto;
  width: 300px;
  padding-left: 280px;
  padding-top: 60px;
}



.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
  margin: 5% auto;
}

.calendar {
  position: relative;
  padding-bottom: 100%; /* 縦横比 */
  height: 0;
}
.calendar iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.grad {
  margin-top: -200px;
  height: 200px;
  background: rgb(51,64,205);
  background: linear-gradient(90deg, rgba(51,64,205,0.30015756302521013) 0%, rgba(87,27,155,0.3029586834733894) 27%, rgba(187,87,146,0.29735644257703087) 100%);
}







.contact {
  display: flex;
}
.contact01 {
  padding: 50px;
  width: 70%;
  background-image: url(img/contact.jpg);
    background-size: cover;
  background-position: center;
  position: relative;
}
.contact02 {
  width: 100%;
  padding: 40px 0px;

}
.contact02 iframe{
  display:block;
  padding: 20px;
  text-align: center;
  margin: 0;
  width: 90%;
}
.contact04 {
  text-align: center;
  color: #fff;
  font-size: 25px;
  position: absolute;
  top:5%;
  right: 45%;
}
.contact05 img{
  display: block;
  margin: auto;
  width: 200px;
  padding-right: 20px;
  padding-top: 60px;
}
.contact06 {
  font-size: 20px;
  color: #fff;
  padding-top: 50px;
  width: 80%;
  margin: 0 auto;
}


.link {
  padding-top: 100px;
  width: 100%;
  background-color: #ebe6ff;
}
.link05 {
  text-align: center;
  color: #00478c;
  font-size: 25px;
  position: absolute;
  top:-70%;
  right: 45%;
}
.link06 img{
  display: block;
  margin: auto;
  width: 300px;
  padding-right: 280px;
  padding-bottom: 30px;
}
.link01 {
  padding: 10px 40%;
  display: flex;
  justify-content: center;
}

.link03 {
  margin: 0 auto;
  width: 50%;
  padding-bottom: 80px;
}
.link04 {
  padding: 0px 10px;
  position: relative;
}
.link04 p {
  list-style: none;
}


footer {
  background-color: #fff;
}


.footer01 {
  font-size: 20px;
  text-align: center;
  color: #000;
}
.footer02 {
  font-size: 20px;
  text-align: center;
  color: #000;
}
.footer03 {
  text-align: center;
  color: #70a5d9;
}







.kumini001 {
  background: rgb(51,64,205);
  background: linear-gradient(0deg, rgba(51,64,205,0.10015756302521013) 0%, rgba(87,27,155,0.1029586834733894) 27%, rgba(187,87,146,0.19735644257703087) 100%);
}
.kumini07 h2{
  width: 60%;
  margin: 0 auto;
  margin-top: 0px;
  padding-top: 80px;
  color: #00478c;
  font-size: 25px;
}
.kumini08 {
  font-size: 20px;
  width: 60%;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 60px;
}
.kumini08.pbn{
  padding-bottom:0;
}
.kumini08.ptn{
  padding-top: 0;
}
.kumini08.row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.kumini08.row .image{
  max-width: 300px;
  width: 30%;
}
.kumini08.row .image img{
  width: 100%;
}
.kumini09 {
  font-size: 15px;
  line-height: 180%;
  width: 60%;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 90px;
}
































@media screen and (max-width:1200px){
  .news {
    background-color: #ffffff;
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    position:inherit;
    top:80%;
    left: 0%;
  }
  .news-archive {
    width: 80%;
    margin: 0 auto;
    padding: 30px 10px;
  }
  .news_top {
    display: flex;
    justify-content:space-between
  }
  .news_h{
    font-size: 20px;
  }
  .news_ran p{
    margin-left: 0px;
    margin-right: 10px;
    font-size: 15px;
  }
  .news_01 ul{
    width: auto;
  }
  .news_01 li{
    display: block;
    padding:15px;
    border-bottom:1px solid #000;
  }

  .news_01 li .subinfo{
    flex-direction: column;
    align-items: flex-start;
  }

  .news_01 .day{
    padding-right: 40px;
  }
  .news_01 .label_02{
    flex-wrap: wrap;
  }
  .news_01 .label{
    line-height:1.2;
    width: 80px;
    height: 15px;
    text-align: center;
    background-color:#005ebb;
    border-radius:3px;
    color:#fff;
    padding:5px 5px;
    margin:5px 5px 0;
    font-size: 14px;
  }
  .news_01 .label2{
    line-height:1.2;
    width: 80px;
    height: 15px;
    text-align: center;
    background-color:#39c64a;
    border-radius:3px;
    color:#fff;
    padding:5px 5px;
    margin:5px 5px 0;
    font-size: 14px;
  }
  .news_01 .label3{
    line-height:1.2;
    width: 80px;
    height: 15px;
    text-align: center;
    background-color:#ed1e79;
    border-radius:3px;
    color:#fff;
    padding:5px 5px;
    margin:5px 5px 0;
    font-size: 14px;
  }
  .news_01 .text{
    padding-bottom: 10px;
  }
  .news_01 .text a{
    color:#000;
  }
}






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

  .kumini01 {
    display: block;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    padding:  5% 0 10%;;
  }
  .kumini02 {
    padding:  0%;
    list-style: none;
    display: flex;
    align-items: center;
  }
  .kumini03 h2 {
    color: #00478c;
    font-size: 20px;
    position: absolute;
  }
  .kumini05 img {
    margin: 0 auto;
    width: 100%;
  }
  .kumini06 img {
    left: 0px;
    width: 300px;
    padding: 30px 0 10px 40px;
  }
  .kumini04 {
    padding-right: 60px;
    padding-bottom: 20px;
  }
  .kumini02 ul {
    list-style: none;
  }
  .btn_w3{
    list-style: none;
    float: left;
    width: 100%;
  }
  .btn_sa p{

    text-decoration: none;
  }
  .btn-after3 a {

  }
  .btn-after3 a::after {
    list-style: none;
    content: '';
    width: 11px;
    height: 11px;
    margin-top: 0px;
    border-top: solid 2px #00478c;
    border-right: solid 2px #00478c;
    transform: rotate(45deg);
  }





  .cl_1 {
    text-align: center;
    color: #00478c;
    font-size: 25px;
    position: absolute;
    right: 25%;
  }

  .cl_2 img{
    display: block;
    margin: 0 auto;
    width: 300px;
    padding-left: 0px;
    padding-top: 60px;
  }



  .cal_wrapper {
    width: 90%;
  }

  .calendar {
    position: relative;
    padding-bottom: 190%; /* 縦横比 */
    height: 0;
    overflow: hidden;
  }
  .calendar iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  .grad {
    margin-top: -100px;
    height: 100px;
    background: rgb(51,64,205);
    background: linear-gradient(90deg, rgba(51,64,205,0.30015756302521013) 0%, rgba(87,27,155,0.3029586834733894) 27%, rgba(187,87,146,0.29735644257703087) 100%);
  }








  .contact {
    display:block;
  }
  .contact01 {
    padding: 0px;
    width: 100%;
    padding-bottom: 50px;
    background-image: url(img/contact.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .contact02 {
    padding:40px 0px;
    margin: 0 auto;
  }

  .contact02 iframe {
    padding: 0;
    width: 100%;
  }

  .contact04 {
    text-align: center;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top:5%;
    right: 45%;
  }
  .contact05 img{
    display: block;
    margin: auto;
    width: 200px;
    padding-right: 20px;
    padding-top: 60px;
  }
  .contact06 {
    font-size: 20px;
    color: #fff;
    padding-top: 50px;
    width: 80%;
    margin: 0 auto;
  }










  .link {
    position: relative;
    padding-bottom: 100%; /* 縦横比 */
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
  }
  .link05 {
    text-align: center;
    color: #00478c;
    font-size: 25px;
    position: absolute;
    top:-70%;
    right: 25%;
  }
  .link06 img{
    display: block;
    margin: auto;
    width: 300px;
    padding-right: 0px;
    padding-bottom: 30px;
  }
  .link01 {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0px;
    display: block;
    justify-content: center;
  }

  .link03 {
    margin: 0 auto;
    width: 100%;
    padding-bottom: 0px;
  }
  .link04 {
    padding: 0px 0px;
    width: 100% !important;
    height: 100% !important;
  }







  .kumini07 h2{
    width: 90%;
    margin: 0 auto;
    margin-top: 0px;
    padding-top: 80px;
    color: #00478c;
    font-size: 23px;
  }
  .kumini08 {
    font-size: 15px;
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 60px;
  }
  .kumini08.row{
    flex-direction: column;
    align-items: flex-start;
  }
  .kumini08.row .image{
    margin-top: 20px;
    max-width: 400px;
    width: 100%;
  }
  .kumini08.row .image img{
    width: 100%;
  }
  .kumini09 {
    font-size: 15px;
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 90px;
  }









  .footer01 {
    padding-top: 20px;
    margin-bottom: -40px;
    font-size: 14px;
    text-align: center;
    color: #000;
  }
  .footer02 {
    font-size: 15px;
    text-align: center;
    color: #000;
  }
  .footer03 {
    margin-top: -40px;
    text-align: center;
    color: #70a5d9;
    padding-bottom: 20px;
  }
}









/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}