@charset "UTF-8";
/* ------------------------------------
// structure override
----------------------------------- */
#header {
  padding-bottom: 35px; }

#footer {
  margin-top: 0; }

@media screen and (max-width: 767px) {
  #header {
    padding-bottom: 0; } }
/* ------------------------------------
//　lead
----------------------------------- */
#top_lead img {
  width: 100%; }

/* ------------------------------------
//news
----------------------------------- */
#news {
  background: url(img/top/bg_grass.png) repeat-y center center/100% auto;
  padding: 0 20px 40px;
  color: #4b3614; }
  #news .news {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    background: #fff url(img/top/news_bg.png) repeat-x;
    padding: 15px 0 30px; }
    #news .news h2 {
      text-align: center;
      margin-bottom: 30px; }
    #news .news ul {
      margin: 0 20px 0 55px; }
      #news .news ul li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px; }
        #news .news ul li .date {
          margin-right: 40px; }
        #news .news ul li .title {
          flex: 1;
          color: #4b3614; }
  @media screen and (max-width: 1023px) {
    #news .news ul {
      margin: 0 30px; } }
  @media screen and (max-width: 767px) {
    #news {
      padding: 0 2rem 4rem; }
      #news .news {
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 1rem;
        background-size: 30% auto;
        padding: 1.5rem 0 2.5rem; }
        #news .news h2 {
          margin-bottom: 2.5rem; }
        #news .news ul {
          margin: 0 2rem; }
          #news .news ul li {
            display: block;
            margin-bottom: 1.5rem; }
            #news .news ul li .date {
              margin-right: 0;
              display: block; }
        #news .news .btn01 {
          margin: 2.5rem 2rem 0; } }

/* ------------------------------------
// greeting
----------------------------------- */
#greeting {
  position: relative;
  padding: 10px 20px 150px;
  background: url(img/top/greeting_bg.png) no-repeat center bottom/100% auto;
  color: #4b3614; }
  #greeting::before {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    height: 6vw;
    background: url(img/top/bg_wave_01.png) no-repeat 0 0/100% auto;
    top: 0; }
  #greeting h2 {
    text-align: center;
    margin-bottom: 60px; }
  #greeting .greeting {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    margin: 0 auto; }
    #greeting .greeting .image {
      margin-left: 90px; }
      #greeting .greeting .image img {
        border-radius: 10px; }
      #greeting .greeting .image p {
        text-align: center;
        font-size: 1.8rem;
        margin-top: 15px; }
      #greeting .greeting .image .bnr {
        margin-top: 1rem;
        max-width: 368px; }
        #greeting .greeting .image .bnr img {
          border-radius: 0; }
    #greeting .greeting .detail {
      flex: 1;
      line-height: 1.7; }
  #greeting ul.bnr {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px; }
    #greeting ul.bnr li {
      max-width: 368px; }
  @media screen and (max-width: 1023px) {
    #greeting .greeting {
      display: block; }
      #greeting .greeting .image {
        margin: 0 0 20px 0;
        text-align: center; }
        #greeting .greeting .image .bnr {
          max-width: 100%; } }
  @media screen and (max-width: 767px) {
    #greeting {
      position: relative;
      padding: 0.8rem 2rem 8rem; }
      #greeting h2 {
        text-align: center;
        margin: -0.5rem -2rem 3rem; }
      #greeting .greeting .image {
        margin: 0 0 2rem 0; }
        #greeting .greeting .image img {
          border-radius: 1rem;
          width: 80vw; }
        #greeting .greeting .image p {
          font-size: 1.4rem;
          margin-top: 1rem; } }

/* ------------------------------------
// medical
----------------------------------- */
#medical {
  background: url(img/top/bg_grass.png) repeat-y center center/100% auto;
  text-align: center; }
  #medical h2 {
    text-align: center;
    margin: -25px 0 40px 0;
    position: relative; }
  #medical .lead {
    font-size: 3.2rem;
    margin-bottom: 30px;
    color: #4b3614; }
  #medical .medical {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    #medical .medical > * {
      width: 180px;
      height: 180px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 10px;
      color: #2d2622;
      margin-bottom: 20px; }
      #medical .medical > * .image {
        margin-bottom: 5px; }
  @media screen and (max-width: 1023px) {
    #medical h2 {
      margin-top: 0; } }
  @media screen and (max-width: 767px) {
    #medical {
      margin-top: -2px;
      padding: 0 2rem 3rem; }
      #medical h2 {
        margin: 0 0 2rem 0;
        padding-top: 1rem; }
        #medical h2 img {
          width: 80vw; }
      #medical .lead {
        font-size: 1.6rem;
        margin-bottom: 2rem; }
      #medical .medical {
        justify-content: space-between; }
        #medical .medical > * {
          width: 40vw;
          height: 40vw;
          margin: 0 0 2rem;
          font-size: 1.3rem; }
          #medical .medical > * .image {
            margin-bottom: 0.5rem; } }

/* ------------------------------------
// yobou
----------------------------------- */
#yobou {
  position: relative;
  padding: 20px 0 150px 0;
  background: url(img/top/yobou_bg.png) no-repeat center bottom/100% auto;
  color: #2d2622; }
  #yobou::before {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    height: 6vw;
    background: url(img/top/bg_wave_01.png) no-repeat 0 0/100% auto;
    top: 0; }
  #yobou h2 {
    text-align: center;
    margin-bottom: 60px; }
  #yobou .yobou {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 870px; }
    #yobou .yobou > * {
      width: 33.3%;
      text-align: center;
      margin-bottom: 40px; }
      #yobou .yobou > * .image {
        margin-bottom: 10px; }
      #yobou .yobou > * p {
        text-align: center;
        line-height: 1.8; }
  @media screen and (max-width: 1023px) {
    #yobou {
      padding-top: 10px; } }
  @media screen and (max-width: 767px) {
    #yobou {
      padding: 0 0 5rem 0; }
      #yobou h2 {
        margin-bottom: 2rem; }
      #yobou .yobou {
        padding: 0 2rem;
        justify-content: space-between; }
        #yobou .yobou > * {
          width: 46%;
          margin-bottom: 2rem; }
          #yobou .yobou > * .image {
            margin-bottom: 1rem; }
          #yobou .yobou > * p {
            font-size: 1.3rem;
            margin: 0 -1rem; } }

/* ------------------------------------
//ask
----------------------------------- */
#ask {
  background: url(img/top/bg_grass.png) repeat-y center center/100% auto;
  padding: 25px 20px 185px;
  color: #4b3614; }
  #ask .ask {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 10px;
    background: #fff url(img/top/ask_bg.png) repeat-x;
    padding: 15px 0 40px; }
    #ask .ask h2 {
      text-align: center;
      margin-bottom: 30px; }
    #ask .ask p {
      margin: 0 20px 0 60px; }
  @media screen and (max-width: 1023px) {
    #ask {
      padding: 25px 20px 120px; }
      #ask .ask {
        padding: 25px 0 40px; }
        #ask .ask p {
          margin: 0 30px; } }
  @media screen and (max-width: 767px) {
    #ask {
      padding: 2rem 2rem 5rem; }
      #ask .ask {
        border-radius: 1rem;
        background-size: 24% auto;
        padding: 1.5rem 0 1.5rem; }
        #ask .ask h2 {
          margin-bottom: 2.5rem; }
        #ask .ask p {
          margin: 0 1.2rem 0 1.5rem;
          font-size: 1.3rem; } }