@charset "utf-8";

/*=========================
 共通
=========================*/
.top-hx {
    background: url(../img/common/icon05.png) no-repeat center bottom;
    background-size: 75px;
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 30px;
}
.top-hx .en {
    display: block;
    text-transform: uppercase;
    line-height: 1.2;
    color: #003156;
    font-size: 65px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 5px;
}
.top-hx .en::first-letter {
  color: #009fd9;
}
.top-hx .ja {
    display: block;
    line-height: 1.4;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
}

/*=========================
 下層 main内
=========================*/
main {
}

/*===== #mv =====*/
#mv {
    width: 100%;
    max-width: 1820px;
    margin: 0 auto;
    line-height: 0;
}
#mv .mv-img {
}
#mv .mv-img .mv-sp {
    display: none;
}

/*===== #front =====*/
#front {
    padding: 60px 0;
}

/*===== #point =====*/
#point {
    padding-bottom: 30px;
}
#point .bg01 {
}
#point .bg02 {
    background: url(../img/common/bg01.png) no-repeat center bottom;
    background-size: 100%;
    padding: 60px 0;
}
#point .bg03 {
    background: url(../img/common/bg02.png) no-repeat center top / 100%,
     url(../img/common/bg03.jpg) no-repeat center center / cover;
    padding: 20% 0 80px;
}
#point .bg04 {
    padding: 60px 0;
}
#point .bg05 {
    background: url(../img/common/bg02.jpg) no-repeat center top;
    background-size: cover;
    background-color: #d7ecf2;
    border: 2px solid #0097d6;
    border-radius: 65px;
}
#point h2 {
}
/*----- .point01 -----*/
#point .point01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: url(../img/index/point-bg01.png) no-repeat left top;
    background-size: 425px;
    padding-top: 55px;
    margin-bottom: 50px;
}
#point .point01 .text-box {
    width: 40%;
}
#point .point01 .text-box h3 {
    line-height: 1.4;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: #003156;
    background: url(../img/index/point-icon01.png) no-repeat left top;
    background-size: 70px;
    padding-top: 75px;
    margin-bottom: 25px;
}
#point .point01 .text-box h3 span {
    color: #009fd9;
}
#point .point01 .text-box .text {
    margin-bottom: 0;
}
#point .point01 .img {
    width: 55%;
}
/*----- .point-slide -----*/
#point .point-slide {
}
#point .point-slide .slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
#point .point-slide .slider .slick-slide {
    margin:0 20px;/*スライド左右の余白調整*/
}
#point .point-slide ul {
}
#point .point-slide ul li {
}
#point .point-slide .slider .slick-slide.n2 {
    margin-top: 1%;
}
/*----- .point02 -----*/
#point .point02 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
#point .point02 .text-box {
    width: 40%;
}
#point .point02 .text-box h3 {
    line-height: 1.4;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: #003156;
    background: url(../img/index/point-icon02.png) no-repeat center top;
    background-size: 250px;
    padding-top: 100px;
    margin-bottom: 25px;
}
#point .point02 .text-box h3 span {
    color: #009fd9;
}
#point .point02 .text-box .text {
    margin-bottom: 0;
}
#point .point02 .text-box .text span {
    color: #ff9900;
    font-size: 16px;
    font-weight: bold;
}
#point .point02 .img {
    width: 55%;
}
/*----- .point03 -----*/
#point .point03 {
}
#point .point03 .text-box {
    margin-bottom: 25px;
}
#point .point03 .text-box h3 {
    line-height: 1.4;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    background: url(../img/index/point-icon03.png) no-repeat center top;
    background-size: 90px;
    padding-top: 75px;
    margin-bottom: 25px;
}
#point .point03 .text-box h3 span {
    color: #fff45c;
}
#point .point03 .text-box .text {
    text-align: center;
    color: #fff;
}
#point .point03 .kensu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#point .point03 .kensu .box {
    width: calc(94% / 3);
    max-width: 250px;
    text-align: center;
    line-height: 1.4;
    font-weight: bold;
    background-color: #fff;
    border-radius: 200px;
    padding: 15px 2% 10px;
    margin: 0 1%;
}
#point .point03 .kensu .box .hx {
    color: #003156;
    font-size: 18px;
}
#point .point03 .kensu .box .txt {
    color: #009fd9;
    font-size: 18px;
}
#point .point03 .kensu .box .txt span {
    font-size: 35px;
}
/*----- .point04 -----*/
#point .point04 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}
#point .point04 .text-box {
    width: 40%;
}
#point .point04 .text-box h3 {
    line-height: 1.4;
    color: #003156;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    background: url(../img/index/point-icon04.png) no-repeat left top;
    background-size: 300px;
    padding-top: 80px;
    margin-bottom: 25px;
}
#point .point04 .text-box h3 span {
    color: #009fd9;
}
#point .point04 .text-box .text {
    margin-bottom: 0;
}
#point .point04 .text-box .text span {
    color: #ff6500;
    font-weight: bold;
}
#point .point04 .img {
    width: 55%;
}
/*----- .point05 -----*/
#point .point05 {
    position: relative;
    padding: 5%;
}
#point .point05 .text-box {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
#point .point05 .text-box h3 {
    line-height: 1.4;
    text-align: center;
    color: #003156;
    font-size: 24px;
    font-weight: 900;
    background: url(../img/index/point-icon05.png) no-repeat center top;
    background-size: 350px;
    padding-top: 82px;
    margin-bottom: 25px;
}
#point .point05 .text-box h3 span {
    color: #009fd9;
}
#point .point05 .text-box .text {
    text-align: center;
    margin-bottom: 0;
    text-shadow: 2px 2px 0 #d7ecf2,
                -2px -2px 0 #d7ecf2,
                -2px 2px 0 #d7ecf2,
                 2px -2px 0 #d7ecf2,
                 0px 2px 0 #d7ecf2,
                 0 -2px 0 #d7ecf2,
                -2px 0 0 #d7ecf2,
                 2px 0 0 #d7ecf2;
}
#point .point05 .text-box .text span {
    color: #ff6500;
    font-size: 16px;
    font-weight: bold;
}
#point .point05 .img01 {
    width: 25%;
    position: absolute;
    left: -7%;
    top: 38%;
    transform: translateY(-50%);
}
#point .point05 .img02 {
    width: 23%;
    position: absolute;
    right: -4%;
    top: -5%;
}
#point .point05 .img03 {
    width: 18%;
    position: absolute;
    right: 2%;
    bottom: -4%;
}

/*===== #menu =====*/
#menu {
}
#menu .bg {
    background: url(../img/common/bg04.png) no-repeat center top / 100%;
    padding: 60px 0 60px;
}
#menu .main-menu {
    margin-bottom: 25px;
}
#menu .main-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#menu .main-menu ul li {
    width: calc(100% / 4);
    padding: 0 1%;
    margin-bottom: 20px;
}
#menu .main-menu ul li a {
}
#menu .sub-menu {
}
#menu .sub-menu h3 {
    color: #003156;
    line-height: 1.4;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
#menu .sub-menu h3 span {
    display: inline-block;
    width: 420px;
    background: url(../img/common/icon06.png) no-repeat left center / 150px,
     url(../img/common/icon07.png) no-repeat right center / 150px;
    padding: 10px 170px;
}
#menu .sub-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#menu .sub-menu ul li {
    width: calc(100% / 4);
    padding: 0 1%;
    margin-bottom: 20px;
}
#menu .sub-menu ul li a {
}

/*===== #first =====*/
#first {
}
#first .bg {
    background: url(../img/common/bg05.jpg) no-repeat center center;
    background-size: cover;
    padding: 60px 0;
}
#first .first-box {
    background-color: #ffffffc7;
    border-radius: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 5%;
}
#first .first-box .text-box {
    width: 65%;
    background: url(../img/index/first-bg.png) no-repeat left top;
    background-size: 125px;
}
#first .first-box .text-box h2 {
    line-height: 1.4;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 4px dotted #003156;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#first .first-box .text-box .text {
    text-align: center;
}
#first .first-box .text-box ul {
    width: 100%;
    max-width: 500px;
    margin: 35px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#first .first-box .text-box ul li {
    width: 49%;
    margin-bottom: 9px;
}
#first .first-box .text-box ul li a {
    display: block;
    background: #0097d6;
    border-radius: 10px;
    padding: 16px 10px;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
#first .first-box .text-box ul li.clr01 a {
    background: #1bccf1;
}
#first .first-box .text-box ul li a span {
}
#first .first-box .img {
    width: 30%;
}
#first .first-box .link {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
}
#first .first-box .link a {
    background: #0097d6;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#first .first-box .link a img {
    width: 8px;
}

/*===== #aisatu =====*/
#aisatu {
    padding: 60px 0;
}
#aisatu .bg {
    background: url(../img/common/bg08.png) no-repeat right center;
    background-size: 200px;
}
#aisatu .box {
}
#aisatu .box .name-box {
    width: 55%;
    float: right;
    border-bottom: 4px dotted #003156;
    padding-bottom: 15px;
    margin-bottom: 20px;
    margin-top: 30px;
}
#aisatu .box .name-box h2 {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    background: url(../img/common/icon05.png) no-repeat left 287px center;
    background-size: 75px;
    padding: 0;
    margin-bottom: 20px;
}
#aisatu .box .name-box h2 .en {
    font-size: 33px;
    margin: 0 10px 0 0;
}
#aisatu .box .name-box h2 .ja {
    font-size: 15px;
}
#aisatu .box .name-box .name {
}
#aisatu .box .name-box .name .yaku {
    display: inline-block;
    background-color: #fff;
    border: 2px solid #009fd9;
    border-radius: 7px;
    color: #009fd9;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 25px;
    margin-right: 10px;
}
#aisatu .box .name-box .name .ja {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
}
#aisatu .box .img {
    width: 40%;
    float: left;
}
#aisatu .box .text-box {
    width: 55%;
    float: right;
}
#aisatu .box .text-box .text {
}
#aisatu .box .text-box .ryakureki {
    margin-top: 30px;
}
#aisatu .box .text-box .ryakureki h3 {
    background: url(../img/common/icon02.png) no-repeat left 9px;
    background-size: 15px;
    color: #0b65ab;
    line-height: 1.4;
    font-size: 17px;
    font-weight: bold;
    padding-left: 23px;
    margin-bottom: 10px;
}
#aisatu .box .text-box .ryakureki ul {
    line-height: 1.4;
}
#aisatu .box .text-box .ryakureki ul li {
    margin-bottom: 4px;
}

/*===== #info =====*/
#info {
}
#info .bg {
    background: url(../img/common/bg04.png) no-repeat center top / 100%,
        url(../img/common/bg09.png) no-repeat 2% bottom / 200px;
    padding: 120px 0 60px;
}
#info .cn-w {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#info .info-box {
    width: 49%;
    background-color: #fff;
    border: 3px solid #c5c5c5;
    border-right: 10px solid #c5c5c5;
    border-bottom: 10px solid #c5c5c5;
    border-radius: 30px;
    padding: 2%;
    margin-bottom: 30px;
}
#info .info-box h2 {
    text-align: center;
    margin-bottom: 25px;
}
#info .info-box h2 .en {
    display: block;
    text-transform: uppercase;
    line-height: 1.2;
    color: #003156;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 5px;
}
#info .info-box h2 .en::first-letter {
  color: #009fd9;
}
#info .info-box .scroll {
    overflow-y: scroll;
    height: 400px;
    padding-right: 10px;
    scrollbar-color: #009fd9 #ededed;
}
#info .info-box ul {
}
#info .info-box ul li {
    margin-bottom: 10px;
}
#info .info-box ul li a {
    display: block;
    background-color: #dff2fe;
    padding: 2%;
    text-decoration: none;
    line-height: 1.4;
}
#info .info-box ul li a .tag01 {
    display: block;
    width: 80px;
    text-align: center;
    background-color: #1bccf1;
    font-size: 13px;
    color: #fff;
    padding: 3px 2%;
    border-radius: 100px;
    margin-bottom: 5px;
}
#info .info-box ul li a dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
#info .info-box ul li a dl dt {
    width: 80px;
}
#info .info-box ul li a dl dd {
    width: calc(98% - 80px);
}
#info .information {
}
#info .information .time {
    margin-bottom: 10px;
}
#info .information .memo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 305px;
    margin: 0 auto 25px;
}
#info .information .memo dt {
    width: 70px;
    background-color: #1bccf1;
    border-radius: 5px;
    line-height: 1.4;
    font-size: 15px;
    color: #fff;
    text-align: center;
    padding: 3px 2%;
}
#info .information .memo dd {
    width: calc(98% - 70px);
    line-height: 1.4;
    font-size: 15px;
    padding: 3px 0;
}
#info .information .gmap {
    width: 100%;
}
#info .information .gmap iframe {
    width: 100%;
    min-height: 220px;
    height: 100%;
}
#info .info-box .link {
    width: 100%;
    max-width: 200px;
    margin: 25px auto 20px;
}
#info .info-box .link a {
    display: block;
    background-color: #0097d6;
    border-radius: 100px;
    color: #fff;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 23px;
}
#info .info-box .link a span {
    display: block;
    background: url(../img/common/icon01.png) no-repeat right center;
    background-size: 8px;
    padding: 0 12px;
}

/*===== #top-blog =====*/
#top-blog {
    padding: 30px 0 60px;
}
#top-blog h2 {
    text-align: center;
    margin-bottom: 25px;
}
#top-blog h2 .en {
    display: block;
    text-transform: uppercase;
    line-height: 1.2;
    color: #003156;
    font-size: 45px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 5px;
}
#top-blog h2 .en::first-letter {
  color: #009fd9;
}
#top-blog .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 35px;
}
#top-blog .list .box {
    width: calc(94% / 3);
    background-color: #dff2fe;
    margin: 0 1%;
}
#top-blog .list .box a {
    display: block;
    padding: 5%;
    text-decoration: none;
}
#top-blog .list .box .img {
    margin-bottom: 15px;
}
#top-blog .list .box .day {
    color: #003156;
    line-height: 1.4;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
#top-blog .list .box .ttl {
    line-height: 1.4;
    color: #003156;
    font-weight: bold;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
#top-blog .list .box .txt {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
#top-blog .link {
    width: 100%;
    max-width: 200px;
    margin: 25px auto 20px;
}
#top-blog .link a {
    display: block;
    background-color: #0097d6;
    border-radius: 100px;
    color: #fff;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 23px;
}
#top-blog .link a span {
    display: block;
    background: url(../img/common/icon01.png) no-repeat right center;
    background-size: 8px;
    padding: 0 12px;
}



/*===============================================
    ■tablet 画面の横幅が800pxまで
===============================================*/
@media screen and (max-width: 800px) {
/*===== #point =====*/
  #point .point01 .text-box {
    width: 100%;
    margin-bottom: 30px;
  }
  #point .point01 .img {
    width: 100%;
  }
  #point .point02 .text-box {
    width: 100%;
    margin-bottom: 30px;
  }
  #point .point02 .img {
    width: 100%;
  }
  #point .bg03 {
  }
  #point .point04 .text-box {
    width: 100%;
    margin-bottom: 30px;
  }
  #point .point04 .img {
    width: 100%;
  }
  #point .point05 .img01 {
    width: 25%;
    left: -2%;
    top: -12px;
    transform: none;
  }
  #point .point05 .img02 {
    width: 21%;
    right: -1%;
    top: -5%;
  }
  #point .point05 .img03 {
        width: 18%;
        right: 1%;
        bottom: -21%;
  }
/*===== #point =====*/
  #menu .sub-menu h3 span {
    width: 100%;
  }
  #menu .sub-menu ul li {
        width: calc(100% / 3);
        margin-bottom: 10px;
  }
/*===== #aisatu =====*/
  #aisatu .box .name-box {
    width: 100%;
    float: none;
  }
  #aisatu .box .img {
    width: 100%;
    float: none;
    max-width: 400px;
    margin: 0 auto 20px;
  }
  #aisatu .box .text-box {
    width: 100%;
    float: none;
  }
/*===== #info =====*/
  #info .info-box {
    width: 100%;
  }
  #info .information .gmap iframe {
    min-height: auto;
    height: 350px;
  }
}

/*===============================================
    ■tablet 画面の横幅が570pxまで
===============================================*/
@media screen and (max-width: 570px) {
/*===== #mv =====*/
  #mv .mv-img .mv-pc {
    display: none;
  }
  #mv .mv-img .mv-sp {
    display: block;
  }
/*===== #front =====*/
  #front {
    padding: 30px 0;
  }
/*===== #point =====*/
  #point .bg01 {
    padding: 30px 0 0;
  }
  #point .point01 {
    background-size: 100%;
    padding-top: 0;
  }
  #point .point01 .text-box h3 {
    background: url(../img/index/point-icon01.png) no-repeat center top;
    background-size: 70px;
  }
  #point .bg02 {
    padding: 30px 0;
  }
  #point .bg03 {
    padding: 30px 0;
  }
  #point .point03 .kensu .box {
    width: 100%;
    margin: 0 0 15px;
    padding: 8px 2% 4px;
  }
  #point .bg04 {
    background: url(../img/common/bg08.png) no-repeat right 48% / 84% auto;
  }
  #point .point05 .text-box .text {
    text-align: left;
  }
  #point .point05 .img01 {
        width: 30%;
  }
  #point .point05 .img02 {
        width: 34%;
  }
  #point .point05 .img03 {
        width: 25%;
        bottom: -15%;
  }
/*===== #menu =====*/
  #menu .bg {
    padding: 15px 0 30px;
  }
  #menu .main-menu ul li {
    width: calc(100% / 2);
    padding: 0 1%;
    margin-bottom: 10px;
  }
  #menu .sub-menu h3 span {
    background: url(../img/common/icon06.png) no-repeat left center / 60px,
     url(../img/common/icon07.png) no-repeat right center / 60px;
    padding: 10px 80px;
  }
  #menu .sub-menu ul li {
        width: calc(100% / 2);
  }
/*===== #first =====*/
  #first .bg {
    padding: 30px 0;
  }
  #first .first-box {
    padding: 8% 5%;
  }
  #first .first-box .text-box {
    width: 100%;
    margin-bottom: 20px;
  }
  #first .first-box .img {
    width: 90%;
    max-width: 280px;
    margin: 0 auto;
  }
/*===== #aisatu =====*/
  #aisatu {
    padding: 30px 0 15px;
  }
  #aisatu .bg {
    background: url(../img/common/bg11.png) no-repeat right top / 200px auto;
  }
  #aisatu .box {
    position: relative;
    padding-top: 53px;
  }
  #aisatu .box .img {
    width: 100%;
    margin: 0 auto 20px;
  }
  #aisatu .box .text-box {
    width: 100%;
  }
  #aisatu .box .text-box h2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
/*===== #info =====*/
  #info .bg {
    padding: 60px 0 30px;
  }
  #info .info-box {
    padding: 5% 5%;
  }
  #info .information .memo dt,
  #info .information .memo dd {
    font-size: 14px;
  }
/*===== #top-blog =====*/
  #top-blog {
    padding: 30px 0 30px;
  }
  #top-blog .list .box {
    width: 100%;
    margin-top: 15px;
  }
}