@charset "UTF-8";

body	{
  margin: 0;
	font-family: "UD Digi Kyokasho N-R",'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/*グリッド*/
body{
  display: grid;
  grid-template-columns: 
    [left]minmax(20px ,1fr)[main]minmax(auto,1140px)
    [main-end]minmax(20px,1fr)[right];
  grid-template-rows: 
    [head]auto[head]auto[img]auto [catch]auto[msg]auto[pickup]auto[main]auto[topics]auto[banner]auto[sns]auto[foot]auto[bottom];
}
.site{
  margin: 15px 0;
  grid-column-start: main;
  grid-row-start: head;
}
.site img{
  vertical-align: bottom;
}
button{
  display: none;
  grid-column-start: main;
  grid-row-start: head;
  /*ここ重要*/
  justify-self:end;
  align-self: center;
  border:none;
  background-color: transparent;
  padding: 6px;
  font-size: 28px;
  color: #888888;
  cursor: pointer;
}
button:focus{
  outline: none;
}
.headimg{
  width:100%;
  height: auto;
  vertical-align: bottom;
}
.catch{
  margin: 0;
  padding: 20px;
  background-color: rgba(255,255,255,0.7);
  color: #000000;
  font-size:24px;
}
.catch2{
 font-size: 28px; 
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 z-index: 3;
}
.msg img{
  width: 100%;
  vertical-align: bottom;
}
.msg_sp{
 display: none; 
}
.pickup{
  margin-bottom: 20px;
}
.gaiyou a{
  /*ここ重要*/
  display: block;
  text-align: center;
  text-decoration: none;
}
.gaiyou img{
  display: block;
  width: 370px;
  height: auto;
}
.gaiyou h2{
  margin: 0;
  padding: 5px 0;
  font-size: 20px;
   color: #ffffff;
  background-color: #222222;
  font-weight: normal;
}
.gaiyou p{
  margin: 0;
  padding: 15px;
  font-size: 14px;
  color: #000000;
  background-color: #eeeeee;
}
#topics{
  margin: 10px 10px 10px 20px;
  font-size: 24px;
  color: #666666;
  font-weight: normal;
}
.topics {
  margin: 0;
  padding: 0;
  width:35%;
}
.topics h2{
  display: flex;
  margin: 0;
  padding: 0 15px;
  font-size: 16px;
  font-weight: normal;
  align-items: center;
  color: #000000;
  background-color: #bfbd13;
}
.topics p{
  display: block;
  margin: 0;
  padding: 15px;
  font-size: 14px;
  color: #000000;
  background-color: #ffffff;
}
.topics_list a{
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 30px 70px;
  margin-bottom: 20px;
  text-decoration: none;
  background-color: #ffffff;
}
.topics_list a span{
  display: block;
  padding: 0px;
  grid-row-end: span 2;
}
.topics_list a span img{
  width: 100px;
  height: auto;
}
.facebook{
  margin: 0;
  padding: 0;
  width: 25%; 
  justify-self:center; 
}
.banner{
  width:35%;
  justify-self:end; 
}
.banner_img a{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px;
  margin-bottom: 20px;
  text-decoration: none;
  background-color: #ffffff;
  position: relative;
}
.banner_img a span{
  display: block;
  padding: 0px;
}
.banner_img a span img{
  width: 400px;
  height: auto;
}
.banner_img h2{
  margin: 0;
  padding: 0;
  position: absolute;
  left:40px;
  top:38px;
  font-size: 22px;
  color: #000000;
  font-weight:600;
}
.sns ul{
  display: flex;
  /*ここ重要*/
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sns li{
  flex:1;
}
.sns li a{
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}
.sns li a:hover{
  opacity: 0.8;
}
.fa-facebook{
  background-color: #3b5998;
}
.fa-twitter{
  background-color: #55acee;
}
.menu{
  grid-column-start: main;
  grid-row-start: head;
  justify-self:end;
  align-self: center;
}
.menu ul{
  display: flex;
  margin: 0;
  padding: 0px;
  list-style: none; 
}
.menu li a{
  display: block;
  margin: 0;
  padding: 15px;
  color: #000000;
  text-decoration: none;
}
.menu li a:hover{
  background-color: #eeeeee;
}
.headimg{
  grid-column-start: main;
  grid-row-start: img;
}
.headimg2{
  grid-column-start: main;
  grid-row-start: img;
  justify-self:end;
  align-self: center;
  width:380px;
}
.msg{
  grid-column-start: main;
  grid-row-start: msg;
  margin-bottom: 30px;
}
.catch{
  grid-column-start: main;
  grid-row-start:img;
  justify-self:start;
  align-self:center;
  margin-left: 20px;
}
  /*
.catch2{
  grid-column-start: main;
  grid-row-start:msg;
  align-self: center;
  justify-self:center;
  margin-left: 190px;
  margin-bottom: 155px;
}
  */
.pickup{
  grid-column-start: main;
  grid-column-end: main-end;
  grid-row-start: pickup;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  /*ここ重要*/
  grid-column-gap: 15px;
  margin-bottom: 50px;
}
.topics_back{
  grid-column-start: left;
  grid-column-end: right;
  grid-row-start: topics;
  margin-top: -60px;

  background-color:#DFDFDF;
}
#topics{
  grid-column-start: main;
  grid-row-start: main;
  z-index: 2;
}
.topics{
  grid-column-start: main;
  grid-row-start: topics;
}
.facebook{
  grid-column-start: main;
  grid-row-start: topics;
}
.banner{
  grid-column-start: main;
  grid-row-start: topics;
}
.sns{
  grid-column-start: main;
  grid-row-start: main;
  width:28%;
  justify-self:end;
  box-sizing: border-box;
}
.copyright{
  /*
  grid-column-start: main;
  grid-row-start: foot;
  color: #ffffff;
  z-index: 3;
  */
}
.footer_menu{
  grid-column-start: main;
  grid-row-start: foot;
  margin: 0;
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  z-index: 3;
}
.footer_menu img{
  margin: 0px;
  width: 180px;
  height: auto;
}
.footer_menu ul{
  display: block;
  list-style: none;
}
.footer_menu li{
  margin-bottom: 5px;
}
.footer_menu li a{
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
}
 .footer_menu .fa-phone{
   margin-top: 10px;
   margin-left: 0px;
   margin-right: 12px;
   color: #ffffff;
   font-size: 16px;
  }
#tel_no{
  margin-left: 10px;
  font-size: 18px;
}
.foot{
  grid-column-start: left;
  grid-column-end: right;
  grid-row-start: foot;
  background-color:#0D0D0D;
}
@media (min-width : 1241px ){
  .headimg{
    grid-column-start: left;
    grid-column-end: right;
  }
  .msg{
    grid-column-start: left;
    /*ここが大事*/
    grid-column-end: right;
  }
  .sns{
    grid-column-start: main-end;
    grid-row-start: img;
    /*ここ重要*/
    width: auto;
    align-self: center;
  } 
}
@media (max-width: 1242px){
  .headimg{
    grid-column-start: left;
    /*ここが大事*/
    grid-column-end: right;
  }
  .headimg2{
    display: none;
  }
  .msg{
    grid-column-start: left;
    /*ここが大事*/
    grid-column-end: right;
  }
  .pickup{
  grid-template-columns: 1fr 1fr 1fr;
  }
  .pickup a img{
    width: 100%;
  }
  .sns{
    grid-column-start: main-end;
    grid-row-start: img;
    /*ここ重要*/
    width: auto;
    align-self: center;
  }
  .gaiyou p{
    font-size: 12px;
  }
}
@media (max-width: 940px){
  
  .topics{
    width: 60%;
  }
  .facebook{
    justify-self:end;
    width: 32%;
  }
  .banner{
    display: none;
  }
  .gaiyou p{
    font-size: 12px;
  }
}
@media (max-width: 767px){
  .headimg{
    grid-column-start: left;
    /*ここが大事*/
    grid-column-end: right;
  }
  button{
    display: block;
  }
  .menu{
    grid-row-start:head 2;
    /*ここ重要 配置先の横幅に合わせてレイアウト*/
    justify-self:stretch;
    /*ロードした時にメニューを閉じた状態にする*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }
  .menu ul{
    /*ここ重要*/
    flex-direction: column;
  }
  .pickup a h2{
    font-size: 14px;
  }
  .pickup a p{
    
    font-size: 10px;
    line-height: 150%;
  }
  /*要確認*/
  .gaiyou p{
    font-size:8px;
  }

  .topics{
    width: 50%;
  }
  .facebook{
    width: 40%
  }
  .banner{
    display: block;
    margin-top: 20px;
    justify-self:start;
    grid-row-start: banner;
  }
  .banner_img a span img{
    width: 330px;
    height: auto;
  }
  .banner_img h2{
    top:30px;
    font-size: 22px;
    color: #000000;
    font-weight:600;
  }
  .sns{
    grid-column-start: main;
    grid-row-start: banner;
    align-self: flex-start;
    margin-top: 20px;
    width: 45%;
  }
  .foot{
    padding: 0px;
  }
   .footer_menu{
  }
   .footer_menu .footer_menu_list{
    display: none;
  }
}
@media (max-width: 599px){
  .catch{
    margin-left: 0;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 4vw;
  }
  .msg{
    display: none;
  }
  .msg_sp{
    display: block;
    grid-column-start: left;
    grid-column-end: right;
    grid-row-start: msg;
    margin-bottom: 20px;
  }
  .msg_sp img{
    width: 100%;
  }
  .pickup{
    grid-template-columns: 
      1fr;
    grid-template-rows: 
      auto auto auto;
     grid-row-gap: 10px;
  }
  .topics{
    width: 100%;
  }
  .banner{
    width: 100%;
    margin-bottom: 10px;
  }
  .banner a{
    margin-bottom: 25px;
  }
  .banner_img a h2{
    left:50px;
    top:30px;
  }
  .banner_img a span img{
    width: 100%;
    height: auto;
  }
  .facebook{
    grid-column-start: main;
    grid-row-start: sns;
    width:100%;
    margin: 0;
    margin-bottom: 30px;
  }
  .fb-page{
    width: 100%;
		max-width: 500px;
  }
  .sns{
    grid-column-start: main;
    grid-row-start: foot;
    width: 35%;
    margin: 0;
    /*ここ重要*/
    box-sizing: border-box;
    /*ここ重要*/
    justify-self:end;
    z-index: 1;
  }
  .sns ul{
    flex-direction: row;
    margin-top: 25px;
  }
  .sns ul li a{
    display:block;
    width: 50%;
  }
}