@charset "UTF-8";



/*--------------------------------------------------
ABOUTページ
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  #page_about {
    padding: 40px 0 150px;
  }
}
@media screen and (max-width: 767px) {
  #page_about {
    padding: 0 0 80px;
  }
}



/*--------------------------------------------------
ファーストビュー・メインビジュアル
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  #about_fv {
    width: 100%;
    background-color: #0097E0;
    margin: 0 0 55px;
    padding: 50px 0;
  }
  #about_fv h1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 0 30px;
  }
  #about_fv h1 img {
    width: 340px;
    height: auto;
  }
  #about_fv h1 span {
    color: #ffffff;
    font-weight: 900;
    font-size: 240%;
    line-height: 1;
    margin: 0 0 0 10px;
  }
  .about_fv_txt {
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 110%;
    line-height: 2;
    margin: 0 0 40px;
  }
  #about_fv_panel_ul {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .about_fv_panel {
    width: 48.5%;
    max-width: 620px;
    background-color: #BFE3F5;
    border-radius: 40px;
    padding: 40px 0;
  }
  .about_fv_panel p {
    text-align: center;
    font-weight: 700;
    font-size: 150%;
    line-height: 1.5;
  }
  .about_fv_panel div {
    line-height: 0;
  }
  .about_fv_panel div img {
    width: 100%;
    height: auto;
  }
  #about_fv_img01 {
    width: 78%;
    max-width: 482px;
    margin: 20px auto 0;
  }
  #about_fv_img02 {
    width: 66%;
    max-width: 408px;
    margin: 30px auto 0;
  }
}
@media screen and (max-width: 819px) and (min-width: 768px) {
  .about_fv_panel p {
    font-size: 140%;
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px) {
  #about_fv {
    width: 100%;
    background-color: #0097E0;
    margin: 0 0 45px;
    padding: 35px 0 40px;
  }
  #about_fv h1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 0 20px;
  }
  #about_fv h1 img {
    width: 220px;
    height: auto;
  }
  #about_fv h1 span {
    color: #ffffff;
    font-weight: 900;
    font-size: 150%;
    line-height: 1;
    margin: 0 0 0 8px;
  }
  .about_fv_txt {
    width: 92%;
    text-align: left;
    color: #ffffff;
    font-weight: 500;
    font-size: 90%;
    line-height: 1.9;
    margin: 0 auto 18px;
  }
  #about_fv_panel_ul {
    width: 92%;
    margin: 0 auto;
  }
  .about_fv_panel {
    width: 100%;
    background-color: #BFE3F5;
    border-radius: 40px;
    margin: 0 0 20px;
    padding: 15px 0;
  }
  .about_fv_panel:last-child {
    margin: 0;
  }
  .about_fv_panel p {
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    line-height: 1.5;
    margin: 0 0 10px;
  }
  .about_fv_panel div {
    line-height: 0;
  }
  .about_fv_panel div img {
    width: 100%;
    height: auto;
  }
  #about_fv_img01 {
    width: 60%;
    max-width: 482px;
    margin: 10px auto 0;
  }
  #about_fv_img02 {
    width: 45%;
    max-width: 408px;
    margin: 15px auto 0;
  }
}



/*--------------------------------------------------
ボタン
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  .about_btn_wrap {
    width: 100%;
  }
  .about_btn_wrap dl {
    margin: 0 0 55px;
  }
  .about_btn_wrap dl:last-child {
    margin: 0;
  }
  .about_btn_wrap dl dt {
    text-align: center;
    font-weight: 700;
    font-size: 120%;
    line-height: 1.4;
    margin: 0 0 25px;
  }
  .about_btn_wrap dl dd {
    display: flex;
    justify-content: center;
  }
  .about_btn_blue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 100px;
    background-color: #0097E0;
    border-radius: 16px;
    box-sizing: border-box;
    border: none;
    color: #ffffff;
    font-family: "M PLUS 1", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: 145%;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: .3s;
  }
  .about_btn_blue:hover {
    background-color: #000000;
    transition: .3s;
  }
  .about_btn_white {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 16px;
    box-sizing: border-box;
    border: 2px #0097E0 solid;
    color: #0097E0;
    font-family: "M PLUS 1", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: 145%;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: .3s;
  }
  .about_btn_white:hover {
    background-color: #000000;
    color: #ffffff;
    border: 2px #000000 solid;
    transition: .3s;
  }
}
@media screen and (max-width: 767px) {
  .about_btn_wrap {
    width: 92%;
    margin: 0 auto;
  }
  .about_btn_wrap dl {
    margin: 0 0 30px;
  }
  .about_btn_wrap dl:last-child {
    margin: 0;
  }
  .about_btn_wrap dl dt {
    text-align: center;
    font-weight: 700;
    font-size: 95%;
    line-height: 1.4;
    margin: 0 0 8px;
  }
  .about_btn_wrap dl dd {
    display: flex;
    justify-content: center;
  }
  .about_btn_blue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 60px;
    background-color: #0097E0;
    border-radius: 16px;
    box-sizing: border-box;
    border: none;
    color: #ffffff;
    font-family: "M PLUS 1", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: 100%;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: .3s;
  }
  .about_btn_blue:hover {
    background-color: #000000;
    transition: .3s;
  }
  .about_btn_white {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 16px;
    box-sizing: border-box;
    border: 2px #0097E0 solid;
    color: #0097E0;
    font-family: "M PLUS 1", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    font-size: 100%;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: .3s;
  }
  .about_btn_white:hover {
    background-color: #000000;
    color: #ffffff;
    border: 2px #000000 solid;
    transition: .3s;
  }
}



/*--------------------------------------------------
提供メニュー
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  #about_menu {
    padding: 130px 0 0;
  }
  #about_menu_ttl {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #about_menu_ttl_inner {
    display: inline-block;
    position: relative;
  }
  #about_menu_ttl h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 30px;
  }
  #about_menu_ttl h2 img {
    width: 320px;
    height: auto;
  }
  #about_menu_ttl h2 span {
    font-weight: 700;
    font-size: 240%;
    line-height: 1;
    margin: 0 0 0 20px;
  }
  #about_menu_ttl h3 {
    text-align: center;
    font-weight: 500;
    font-size: 125%;
    line-height: 1.5;
    margin: 0 0 35px;
  }
  #about_balloon {
    width: 160px;
    height: 160px;
    background: url("../images/balloon.svg") no-repeat center center;
    background-size: contain;
    position: absolute;
    top: -80px;
    right: -200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about_balloon dl {
    width: 80%;
    color: #ffffff;
    padding: 0 0 18px;
  }
  #about_balloon dl dt {
    text-align: center;
    font-weight: 700;
    font-size: 250%;
    line-height: 1;
    margin: 0 0 5px;
  }
  #about_balloon dl dd {
    font-weight: 400;
    font-size: 80%;
    line-height: 1.3;
  }
  #about_menu_list {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #about_menu_list li {
    width: 48%;
    max-width: 610px;
    margin: 0 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  #about_menu_list li div {
    width: 49%;
    max-width: 295px;
    height: 168px;
    border: 5px #eeeeee solid;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px 0 0;
  }
  #about_menu_list li div img {
    width: 32%;
    min-width: 80px;
    height: auto;
    margin: 0 0 2px;
  }
  #about_menu_list li div h4 {
    width: 90%;
    text-align: center;
    font-weight: 400;
    font-size: 110%;
    line-height: 1.4;
  }
  #about_menu_list li p {
    color: #333333;
    font-size: 100%;
    line-height: 1.65;
    padding: 15px 0 0;
    flex-grow: 2;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
  #about_menu_ttl h2 {
    flex-direction: column;
  }
  #about_menu_ttl h2 span {
    margin: 15px 0 0;
  }
  #about_balloon {
    width: 150px;
    height: 150px;
    right: -40px;
  }
  #about_balloon dl {
    width: 74%;
  }
  #about_balloon dl dt {
    font-size: 220%;
    margin: 0 0 8px;
  }
  #about_balloon dl dd {
    font-size: 75%;
  }
  #about_menu_list li div {
    margin: 0 15px 0 0;
  }
  #about_menu_list li div h4 {
    font-size: 100%;
  }
}
@media screen and (max-width: 767px) {
  #about_menu {
    padding: 90px 0 0;
  }
  #about_menu_ttl {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #about_menu_ttl_inner {
    display: inline-block;
    position: relative;
  }
  #about_menu_ttl h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 0 20px;
  }
  #about_menu_ttl h2 img {
    width: 160px;
    height: auto;
  }
  #about_menu_ttl h2 span {
    font-weight: 700;
    font-size: 120%;
    line-height: 1;
    margin: 10px 0 0;
  }
  #about_menu_ttl h3 {
    text-align: center;
    font-weight: 500;
    font-size: 95%;
    line-height: 1.7;
    margin: 0 0 20px;
  }
  #about_balloon {
    width: 100px;
    height: 100px;
    background: url("../images/balloon.svg") no-repeat center center;
    background-size: contain;
    position: absolute;
    top: -50px;
    right: -47px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about_balloon dl {
    width: 90%;
    color: #ffffff;
    padding: 0 0 8px;
  }
  #about_balloon dl dt {
    text-align: center;
    font-weight: 700;
    font-size: 125%;
    line-height: 1;
    margin: 0 0 2px;
  }
  #about_balloon dl dd {
    font-weight: 400;
    font-size: 10px;
    transform: scale(0.8);
    line-height: 1.4;
  }
  #about_menu_list {
    width: 92%;
    margin: 0 auto;
  }
  #about_menu_list li {
    width: 100%;
    margin: 0 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  #about_menu_list li div {
    width: 45%;
    border: 5px #eeeeee solid;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 10px 0 0;
    padding: 12px 0 10px;
  }
  #about_menu_list li div img {
    width: 32%;
    min-width: 80px;
    height: auto;
    margin: 0 0 2px;
  }
  #about_menu_list li div h4 {
    width: 90%;
    text-align: center;
    font-weight: 400;
    font-size: 90%;
    line-height: 1.4;
  }
  #about_menu_list li p {
    color: #333333;
    font-size: 90%;
    line-height: 1.6;
    padding: 10px 0 0;
    flex-grow: 2;
  }
}
@media screen and (max-width: 375px) {
  #about_balloon {
    top: -50px;
    right: -42px;
  }
}



/*--------------------------------------------------
その他のメニュー
--------------------------------------------------*/
@media screen and (min-width: 768px) {
  #about_othermenu {
    width: 96%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 110px 0 95px;
  }
  #about_othermenu h3 {
    text-align: center;
    font-weight: 700;
    font-size: 240%;
    line-height: 1.5;
    margin: 0 0 55px;
  }
  .about_othermenu_sec h4 {
    text-align: center;
    color: #0097E0;
    font-weight: 500;
    font-size: 240%;
    line-height: 1.5;
    margin: 0 0 30px;
  }
  .about_othermenu_sec h4 span {
    border-bottom: 6px #0097E0 solid;
    padding: 0 10px 3px;
  }
  .about_othermenu_sec > p {
    text-align: center;
    font-weight: 500;
    font-size: 110%;
    line-height: 2;
    margin: 0 0 40px;
  }
  .about_othermenu_cnt {
    width: 100%;
    margin: 0 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .about_othermenu_sec:last-child .about_othermenu_cnt {
    margin: 0;
  }
  .about_othermenu_tmb {
    width: 48.5%;
    max-width: 615px;
    border: 1px #cccccc solid;
    line-height: 0;
  }
  .about_othermenu_tmb img {
    width: 100%;
    height: auto;
  }
  .about_othermenu_cnt ul {
    width: 48.5%;
    max-width: 615px;
  }
  .about_othermenu_cnt ul li {
    width: 100%;
    margin: 0 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .about_othermenu_cnt ul li div {
    width: 46%;
    max-width: 280px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about_othermenu_frame {
    min-height: 160px;
    background-color: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
  }
  .about_othermenu_pddgtop {
    padding: 30px 0 0;
  }
  .about_othermenu_cnt ul li div img {
    width: 100%;
    height: auto;
  }
  .about_othermenu_cnt ul li p {
    width: 50%;
    max-width: 305px;
    color: #666666;
    font-weight: 400;
    font-size: 110%;
    line-height: 1.8;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .about_othermenu_frame {
    min-height: auto;
    padding: 20px 0;
  }
}
@media screen and (max-width: 767px) {
  #about_othermenu {
    width: 92%;
    margin: 0 auto;
    padding: 50px 0 45px;
  }
  #about_othermenu h3 {
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    line-height: 1.5;
    margin: 0 0 30px;
  }
  .about_othermenu_sec h4 {
    text-align: center;
    color: #0097E0;
    font-weight: 500;
    font-size: 115%;
    line-height: 1.5;
    margin: 0 0 20px;
  }
  .about_othermenu_sec h4 span {
    border-bottom: 4px #0097E0 solid;
    padding: 0 8px 3px;
  }
  .about_othermenu_sec > p {
    font-weight: 500;
    font-size: 90%;
    line-height: 1.8;
    margin: 0 0 15px;
  }
  .about_othermenu_cnt {
    width: 100%;
    margin: 0 0 50px;
  }
  .about_othermenu_sec:last-child .about_othermenu_cnt {
    margin: 0;
  }
  .about_othermenu_tmb {
    width: 100%;
    border: 1px #cccccc solid;
    margin: 0 0 18px;
    line-height: 0;
  }
  .about_othermenu_tmb img {
    width: 100%;
    height: auto;
  }
  .about_othermenu_cnt ul {
    width: 100%;
  }
  .about_othermenu_cnt ul li {
    width: 100%;
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .about_othermenu_cnt ul li div {
    width: 32%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .about_othermenu_frame {
    padding: 10px 0;
    background-color: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.25);
  }
  .about_othermenu_cnt ul li div img {
    width: 100%;
    height: auto;
  }
  .about_othermenu_cnt ul li p {
    width: 64%;
    color: #666666;
    font-weight: 400;
    font-size: 90%;
    line-height: 1.65;
  }
}