/* ==================
    @ 変数
===================== */

:root {
    /*  コンテンツの最大幅 */
    --mw:1100px;
    --mgn:20px;
    --smw:90%;
    --sc:#3d7bae;
}

.bg{
background-image: linear-gradient(22.5deg, rgba(67, 67, 67, 0.02) 0%, rgba(67, 67, 67, 0.02) 29%,rgba(47, 47, 47, 0.02) 29%, rgba(47, 47, 47, 0.02) 37%,rgba(23, 23, 23, 0.02) 37%, rgba(23, 23, 23, 0.02) 55%,rgba(182, 182, 182, 0.02) 55%, rgba(182, 182, 182, 0.02) 69%,rgba(27, 27, 27, 0.02) 69%, rgba(27, 27, 27, 0.02) 71%,rgba(250, 250, 250, 0.02) 71%, rgba(250, 250, 250, 0.02) 100%),linear-gradient(67.5deg, rgba(117, 117, 117, 0.02) 0%, rgba(117, 117, 117, 0.02) 14%,rgba(199, 199, 199, 0.02) 14%, rgba(199, 199, 199, 0.02) 40%,rgba(33, 33, 33, 0.02) 40%, rgba(33, 33, 33, 0.02) 48%,rgba(135, 135, 135, 0.02) 48%, rgba(135, 135, 135, 0.02) 60%,rgba(148, 148, 148, 0.02) 60%, rgba(148, 148, 148, 0.02) 95%,rgba(53, 53, 53, 0.02) 95%, rgba(53, 53, 53, 0.02) 100%),linear-gradient(135deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 6%,rgba(251, 251, 251, 0.02) 6%, rgba(251, 251, 251, 0.02) 18%,rgba(2, 2, 2, 0.02) 18%, rgba(2, 2, 2, 0.02) 27%,rgba(253, 253, 253, 0.02) 27%, rgba(253, 253, 253, 0.02) 49%,rgba(128, 128, 128, 0.02) 49%, rgba(128, 128, 128, 0.02) 76%,rgba(150, 150, 150, 0.02) 76%, rgba(150, 150, 150, 0.02) 100%),linear-gradient(90deg, #ffffff,#ffffff);
}


/* ==================
    @ Header
===================== */

#page{margin-top:0;}

.cpNav {
  padding: 6px 0;
  border-bottom:1px solid #ccc;
  border-top: 4px solid var(--sc);
  position: relative;
}
.cpNav__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: var(--mw);
  margin: 0 auto;
  justify-content: space-between;
}
.cpNav__logo{width:200px;}
.cpNav__menu{width:calc(100% - 220px);}
.cpNav__logo--img{width:80px;}
.cpNav__logo--txt{display:block;font-size:70%;}

.cpNav__ul{display:flex;flex-wrap:wrap;justify-content: end;width:100%;list-style:none;margin:0;}
.cpNav__li{margin:0 10px;}
.cpNav__li a{color:#333;font-size:90%;}

.cpNav__cont {
  display:none;
  width: 100%;
  background: var(--sc);
  position: absolute;
  bottom: -175px;
  left: 0;
}

.cpNav__inr{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: var(--mw);
  margin: 20px auto;
}
.cpNav__inr a{width:160px;margin: 0 10px;display:block;}
.cpNav__inr a:hover{opacity:0.8;text-decoration:none;}
.cpNav__inr a img {
  width: 100%;
  height: 110px;
}
.cpNav__inr span{color: #fff;display: block;font-size: 90%;padding:5px 0 0;}
.cpNav__inr i{margin-left:5px;}

/* おしらせ */
.rinji-box{width:100%;border-bottom:1px solid #ccc;}
.rinji-box > div{width:var(--mw);margin:0 auto;}
#newsTxt a {
  font-size:90%;
  padding: 10px 0;
  display: block;
  color: #333;
}
#newsTxt a i{margin-left:5px;}
#newsTxt a .ico {
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
    background: #ec5858;
    color: #fff;
    font-weight: bold;
    padding: 0 10px;
    border-radius: 20px;
    font-size: 90%;
}
.menuBtn{display:none;}
#_close,#_spMenu{display:none;}

#newsTxt2 a{
  width:var(--mw);
  margin: 0 auto;
  color: #fff;
  display: block;
  padding: 10px;
}

.rinji-box2{
  background: var(--sc);
}

/* TOP */
.top__3col {
  width: var(--mw);
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: content-box;
}
.top__3li {
  width: calc(100% / 3 - 20px);
  background: #fff;
  box-shadow: 0 0 10px 1px #e8e8e8;
}
.top__3li div{padding:2rem;}
.top__3li h3{
  font-weight: bold;
  font-size: 140%;
  margin-bottom: 1rem;
}
.top__3li p{line-height: 1.8;}
.top__3btn {
  background: var(--sc);
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 100%;
  padding: 10px;
  margin-top: 1rem;
}

/* お知らせ  */

.top_news{
  width: var(--mw);
  margin: 2rem auto;
}
.top_news h2 {
  text-align: center;
  font-weight: bold;
  line-height: 1;
}
.top_news h2 span{display:block;}
.top_news h2 span:nth-of-type(1){color:var(--sc);}
.top_news h2 span:nth-of-type(2){
  font-size:200%;
}

/* ==================
    @ SP
===================== */

@media only screen and (max-width: 789px){
.rinji-box > div{width:100%;}
.icoWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 90%;
}
#newsTxt a .ico{width:8rem;text-align:center;}
#newsTxt a .txt {
    width: calc(100% - 9rem);
    display: block;
}
#newsTxt2{padding:10px;}
#newsTxt a{padding:10px;display: flex;align-items: center;justify-content: space-between;}
#newsTxt2 a {
  width: 100%;
  display: flex;
  align-items: center;
  padding:0;
  justify-content: space-between;
}
#newsTxt2 a strong{padding-right: 10px;}
.rinji-box2 {margin-top: 0;font-size: 90%;}
#_spMenu {
  display: block;
  padding: 0 20px;
  font-size: 160%;
}
#_close {
  display: block;
  color: #aaa;
  font-size: 200%;
  padding: 0 10px;
  text-align: right;
}
.cpNav__wrap{width:100%;}
.rinji-box{margin:0;}
.cpNav__logo{padding: 0 10px;}  
.cpNav__logo--img{width:60px;}
.cpNav__logo--txt{font-size:60%;}
.cpNav__menu {
    transition: all 0.5s ease;
    position: fixed;
    background: #333333fc;
    height: 100vh;
    top: 0;
    right: -400px;
    bottom: 0;
    z-index: 99999;
    width: 70%;
}
.cpNav__menu--ray {
  display:none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    content: "";
    width: 100%;
    z-index: 99998;
    height: 100vh;
}
.cpNav__menu.on{right:0;}
.cpNav__ul{width:100%;padding:0;display: block;}
.cpNav__li{
  text-align:right;
  border-bottom:1px solid #aaa;
}
.cpNav__li:nth-of-type(2) {border-top: 1px solid #aaa;}
.cpNav__li a {
  color: #aaa;
  display: block;
  padding: 10px;
}
}