@charset "UTF-8";
@import url("global.css");
#contents {
  padding-bottom: 0; }

.intro {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px; }
  .intro .text_area {
    flex: 1;
    padding-right: 60px; }
    .intro .text_area .catch {
      margin-bottom: 60px;
      font-size: clamp(22px, 4.1vw, 38px); }
    .intro .text_area .point_area {
      margin-top: 50px;
      border-top: 1px solid #132240;
      border-bottom: 1px solid #132240;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
      .intro .text_area .point_area dt {
        width: 35%;
        line-height: 1.4;
        font-size: clamp(18px, 2.86vw, 24px);
        font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
        .intro .text_area .point_area dt span {
          display: block;
          color: #B4975A;
          font-size: clamp(12px, 1.6vw, 14px); }
      .intro .text_area .point_area dd {
        flex: 1; }
        .intro .text_area .point_area dd ul li {
          position: relative;
          padding-left: 15px;
          margin: 2px 0;
          font-size: 110%;
          font-weight: 600; }
          .intro .text_area .point_area dd ul li::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #132240;
            position: absolute;
            left: 0;
            top: 15px; }
  .intro .img_area {
    width: 50%; }
    .intro .img_area .fig01 {
      width: 75%;
      margin-bottom: 30px; }
    .intro .img_area .fig02 {
      width: 32%;
      margin-left: auto; }

.section {
  margin-bottom: 100px; }
  .section .inner {
    display: flex;
    justify-content: space-between;
    gap: 40px; }

.titlearea {
  min-width: 240px;
  flex-shrink: 0; }
  .titlearea .title {
    position: sticky;
    top: 200px;
    white-space: nowrap;
    font-size: min(26px,2.3vw);
    font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    .titlearea .title span {
      position: relative;
      padding-left: 30px; }
      .titlearea .title span::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #132240;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 16px; }

.mainarea {
  width: 980px; }
  .mainarea .mainarea_item + .mainarea_item {
    margin-top: 80px; }
  .mainarea .h {
    background: #132240;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 30px;
    font-size: 110%;
    font-weight: 600; }
  .mainarea table {
    width: 100%;
    border-collapse: collapse; }
    .mainarea table tr {
      border-bottom: 1px solid #dcdcdc; }
      .mainarea table tr th, .mainarea table tr td {
        padding: 10px;
        box-sizing: border-box; }
      .mainarea table tr th {
        width: 140px; }

#oubo {
  position: relative;
  margin: 150px 0; }
  #oubo::before {
    content: "";
    position: absolute;
    left: -60px;
    top: -60px;
    right: -60px;
    bottom: -60px;
    border: 1px solid #B4975A; }
  #oubo .titlearea .title {
    position: relative;
    top: auto; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .intro .img_area {
    width: 45%; }

  .mainarea {
    font-size: 15px; }

  #oubo::before {
    left: -30px;
    top: -30px;
    right: -30px;
    bottom: -30px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .intro {
    display: block;
    margin-bottom: 0; }
    .intro .text_area {
      padding-right: 0;
      margin-bottom: 40px; }
      .intro .text_area .catch {
        margin-bottom: 40px; }
      .intro .text_area .point_area {
        margin-top: 40px; }
    .intro .img_area {
      width: 100%; }

  .section {
    margin-bottom: 70px; }
    .section .inner {
      display: block; }
    .section + .section {
      padding-top: 60px; }

  .titlearea .title {
    position: static;
    font-size: min(26px,5.5vw);
    margin-bottom: 30px; }

  .mainarea {
    width: auto;
    font-size: inherit; }
    .mainarea .h {
      margin-bottom: 20px; }

  #oubo {
    margin: 100px 0;
    border: 1px solid #B4975A;
    padding: 30px; }
    #oubo::before {
      position: relative;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      border: none; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .intro .text_area {
    margin-bottom: 30px; }
    .intro .text_area .catch {
      margin-bottom: 20px; }
    .intro .text_area .point_area {
      margin-top: 30px;
      padding: 20px 0; }
      .intro .text_area .point_area dt {
        width: 37%; }
      .intro .text_area .point_area dd ul li {
        font-size: 100%; }
  .intro .img_area .fig01 {
    margin-bottom: 20px; }

  .section {
    margin-bottom: 50px; }
    .section + .section {
      padding-top: 40px; }

  .titlearea .title {
    margin-bottom: 20px; }
    .titlearea .title span {
      padding-left: 20px; }
      .titlearea .title span::before {
        top: 12px; }

  .mainarea {
    font-size: 13px; }
    .mainarea .mainarea_item + .mainarea_item {
      margin-top: 40px; }
    .mainarea .h {
      margin-bottom: 10px; }
    .mainarea table tr th {
      width: 100px; }

  #oubo {
    margin: 60px 0;
    padding: 20px 30px; } }