@charset "utf-8";
/* CSS Document */
/***********************
    header
***********************/
h2.page_title {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
/***********************
    main
***********************/
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
h3.heading_title {
  font-size: 1.25em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}
h4.secondary_title {
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}
/***********************
    footer
***********************/
footer {
  background: #F9DCDC;
  padding-top: 30px;
}
.footer_info_box h3 {
  font-size: 1.125em;
  font-weight: 600;
  margin-bottom: 20px;
}
/* info */
.info_group {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
}
.info_group dt,.info_group dd {
  width: calc(50% - 5px);
  margin-top: 15px;
}
.info_group dt {
  text-align: right;
  margin-right: 10px;
}
.info_group dt::after {
  content: ":";
  display: inline-block;
  padding: 0 5px;
}
.address {
  font-weight: 600;
  line-height: 2;
}
@media screen and (max-width: 480px) { 
/*　画面サイズが480px以下はここを読み込む　*/
  /***********************
      header
  ***********************/
  header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  header h1.logo_main {
    width: calc(100% - 161px);
  }
  #nav_box {
    width: 161px;
  }
  .img_main_container {
    background: #F9DCDC;
    padding-bottom: 60px;
    position: relative;
    width: 100%;
    flex-shrink: 0;
  }
  .img_main_wrap {
    background: #fff;
    text-align: center;
    position: relative;
  }
  .img_main_wrap img {
    width: 90%;
    height: 300px;
    object-fit: contain;
  }
  .curved {
    position: relative;
    background: #fff;
    height: 80px;
    border-bottom-left-radius: 100% 100%;
  } 
  .page_title_wrap {
    background: #FEF8B9;
    width: 150px;
    height: 150px;
    border-radius: 50% 50% 45% 55% / 59% 45% 55% 41%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
}
@media screen and (min-width: 481px) { 
/*　画面サイズが481pxからはここを読み込む　*/
  /***********************
      header
  ***********************/
  header {
    background: #F9DCDC;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 1px;
  }
  #nav_box {
    order: 2
  }
  .img_main_container {
    order: 1;
    width: 100%;
    position: relative;
    height: 30vw;
    max-height: 600px;
    margin-bottom: 30px;
  }
  .img_main_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40vw;
    height: 30vw;
    max-width: 800px;
    max-height: calc(800px - 10vw);
    margin: 0 auto;
  }
  .img_main_wrap::before {
    content: " ";
    display: block;
    width: 100%;
    padding-top: 100%;
    background: #fff;
    position: absolute;
    top: -10vw;
    left: 0;
    border-radius: 50%;
    z-index: 0;
  }
  .img_main_wrap img {
    position: relative;
    z-index: 10;
    max-width: 20vw;
    transform: translate(0 , -4vw);
  }
  .page_title_wrap {
    background: #FEF8B9;
    width: clamp(80px, 10vw , 200px);
    height: clamp(80px, 10vw , 200px);
    border-radius: 50% 50% 45% 55% / 59% 45% 55% 41%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 30vw;
    z-index: 20;
  }
  .page_title_wrap h2 {
    font-size: clamp(0.7em, 1.5vw ,1.5em);
  }
}
@media screen and (min-width: 768px) { 
/*　画面サイズが768pxからはここを読み込む　*/
  /***********************
      footer
  ***********************/
  .footer-navigation ul li:not(:first-child) {
    border-left: #492200 1px solid;
  }
  .footer_info_box {
    display: flex;
    max-width: 960px;
    margin: 0 auto 120px;
  }
  .footer_info_box > div {
    width: 50%;
  }
  .footer_info_box > div.mt60.mb60 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .info_group,.address {
    font-size: 1.25em;
  }
}
@media screen and (min-width: 961px) { 
/*　画面サイズが961pxからはここを読み込む　*/
}
@media screen and (min-width: 1601px) { 
/*　画面サイズが1601pxからはここを読み込む　*/
}