@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;500&display=swap");
.sp {
  display: none; }

@media screen and (max-width: 768px) {
  .pc {
    display: none; }

  .sp {
    display: block; } }
#contents {
  width: 100%; }
  #contents p {
    margin-bottom: auto; }
  @media screen and (max-width: 768px) {
    #contents {
      padding: 0; } }
  #contents .block_inner {
    width: 960px;
    margin: auto; }
    @media screen and (max-width: 768px) {
      #contents .block_inner {
        width: 94%; } }

.block_main {
  max-width: 800px;
  margin: auto; }
  .block_main img {
    width: 100%;
    height: auto; }
  .block_main + h3.categoryName {
    margin-top: -2rem; }

h4.subCopy {
  text-align: center;
  font-weight: normal;
  font-size: 1.4rem;
  margin-bottom: 1rem; }

.pic {
  position: relative; }
  .pic img {
    width: 100%;
    height: auto; }
  .pic span.note {
    position: absolute;
    bottom: 3px;
    right: 3px; }
    .pic span.note.fff {
      text-shadow: 0px 0px 3px #000000,0px 0px 3px #000000; }
  .pic div.note {
    text-align: right; }

.box_inner {
  width: 90%;
  margin: auto; }

/* login
----------------------*/
.loginContents {
  text-align: center; }
  .loginContents h3 {
    font-size: 1.4rem;
    font-weight: normal; }
    .loginContents h3::after {
      content: "";
      display: block;
      margin: 1rem auto;
      width: 100px;
      height: 1px;
      background: #000; }
  .loginContents .intro {
    background: #a08543;
    color: #fff;
    width: 100%;
    padding: 3rem 0; }
    .loginContents .intro .title1 {
      font-size: 1.6rem;
      line-height: 1.4; }
    .loginContents .intro .title2 {
      font-size: 1.2rem; }
  .loginContents .formBox {
    background: #f5f2eb;
    width: 100%;
    padding: 3rem 0; }
  .loginContents .txtBox {
    background: #fff;
    width: 100%;
    padding: 3rem 0; }
    .loginContents .txtBox h3::after {
      content: none; }
  .loginContents .flowBox {
    background: #f5f2eb;
    width: 100%;
    padding: 3rem 0; }
    .loginContents .flowBox ol {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      max-width: 1000px;
      margin: 2rem auto 0; }
      .loginContents .flowBox ol li {
        width: 32%;
        box-sizing: border-box;
        border: 1px solid #a08543;
        background: #fff; }
        .loginContents .flowBox ol li.arrow {
          width: 1%;
          position: relative;
          border: none;
          background: none; }
          .loginContents .flowBox ol li.arrow::before {
            content: "";
            display: block;
            position: absolute;
            top: 45%;
            left: 1px;
            box-sizing: border-box;
            width: 10px;
            height: 10px;
            border: 10px solid transparent;
            border-left: 10px solid #a08543; }
        .loginContents .flowBox ol li > div {
          padding: 1rem;
          text-align: left; }
        .loginContents .flowBox ol li h4 {
          font-size: 1rem;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid #a08543;
          margin-bottom: 0.5rem;
          font-weight: normal;
          color: #000; }
        .loginContents .flowBox ol li p {
          font-size: 0.95rem; }
          @media screen and (max-width: 768px) {
            .loginContents .flowBox ol li p {
              font-size: 0.95rem !important; } }
        @media screen and (max-width: 768px) {
          .loginContents .flowBox ol li {
            width: 100%; }
            .loginContents .flowBox ol li.arrow {
              width: 100%;
              margin: 1rem auto; }
              .loginContents .flowBox ol li.arrow::before {
                border-bottom: 0px solid transparent;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                border-top: 15px solid #a08543;
                width: 30px;
                height: 15px;
                position: static;
                text-align: center;
                margin: auto; } }

.formArea {
  margin-bottom: 40px; }

#loginForm {
  margin: 0 auto 50px;
  max-width: 570px;
  position: relative; }

.loginPassWordBox {
  margin-right: 140px; }

#loginPassWord {
  height: 57px;
  /*margin: 0 10px;*/
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  text-align: center;
  font-size: 18px;
  width: 100%; }
  #loginPassWord::placeholder {
    color: #696969; }

#loginPassSend {
  background: #a08543;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 15px 32px;
  font-size: 16px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  outline: none; }

@media screen and (max-width: 480px) {
  .loginPassWordBox {
    margin-right: 106px; }

  #loginPassWord {
    font-size: 14px;
    height: 43px; }

  #loginPassSend {
    padding: 13px 21px;
    font-size: 14px; } }
/* topContents
----------------------*/
.topContents {
  text-align: center; }
  .topContents .intro {
    max-width: 1000px;
    margin: auto;
    padding: 3rem 0; }
    .topContents .intro h3 {
      font-size: 1.6rem;
      font-weight: normal;
      margin-bottom: 2rem; }
  .topContents .informationBox .sc1 {
    background: #680000;
    color: #fff;
    font-size: 1.8rem;
    padding: 1rem 0; }
  .topContents .informationBox .sc2 {
    background: #f5f2eb;
    padding: 3rem 0; }
    .topContents .informationBox .sc2 .sizeL {
      font-size: 1.8rem;
      margin-bottom: 1rem; }
      .topContents .informationBox .sc2 .sizeL small {
        display: inline-block; }
    .topContents .informationBox .sc2 .sizeS {
      font-size: 1.2rem; }
      @media screen and (max-width: 480px) {
        .topContents .informationBox .sc2 .sizeS {
          font-size: 1rem; } }
  .topContents .entryContents_Box {
    position: relative;
    background: #f3f7ef;
    padding: 3rem 0; }
    .topContents .entryContents_Box .deco01,
    .topContents .entryContents_Box .deco02,
    .topContents .entryContents_Box .deco03 {
      position: absolute;
      position: absolute;
      left: 50%; }
    .topContents .entryContents_Box .deco01 {
      width: 40px;
      top: -3%;
      margin-left: 8%; }
    .topContents .entryContents_Box .deco02 {
      width: 100px;
      top: 105px;
      margin-left: 20%; }
    .topContents .entryContents_Box .deco03 {
      width: 60px;
      top: 90px;
      margin-left: -22%; }
    .topContents .entryContents_Box h4 {
      border-bottom: 1px solid #ccc;
      font-weight: normal;
      font-size: 1.6rem;
      padding-bottom: 1rem;
      margin: auto;
      margin-bottom: 1rem;
      max-width: 1000px; }
    .topContents .entryContents_Box .planArea {
      background: top -20px right 70px url("../img/entry/top/deco04.png") no-repeat;
      background-size: 640px auto;
      max-width: 1000px;
      margin: auto; }
    .topContents .entryContents_Box ul {
      max-width: 600px;
      width: 90%;
      margin: 2rem auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .topContents .entryContents_Box ul li {
        width: 48%;
        margin-bottom: 1rem; }
        .topContents .entryContents_Box ul li a {
          position: relative;
          display: block;
          width: 100%; }
          .topContents .entryContents_Box ul li a span.on {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: .3s; }
          .topContents .entryContents_Box ul li a:hover span.on {
            opacity: 1; }
    .topContents .entryContents_Box .pamph_btn {
      max-width: 500px;
      width: 90%;
      background: #e7eddd;
      padding: 10px;
      margin: auto; }
      .topContents .entryContents_Box .pamph_btn a {
        display: block;
        width: 100%; }
      .topContents .entryContents_Box .pamph_btn .pamph_btn_inner {
        box-sizing: border-box;
        border: 1px solid #a08543;
        padding: 20px 10px; }
      .topContents .entryContents_Box .pamph_btn .copy1 {
        color: #a08543;
        font-size: 1.4rem; }
      .topContents .entryContents_Box .pamph_btn .copy2 {
        font-size: 1.1rem;
        margin-bottom: 10px; }
      .topContents .entryContents_Box .pamph_btn .copy3 {
        font-size: 1.1rem;
        background: #a08543;
        color: #fff;
        display: block;
        padding: 10px 0;
        max-width: 260px;
        margin: auto; }
    .topContents .entryContents_Box .plan {
      margin: 0 auto;
      padding: 3rem 0 0 0;
      overflow: hidden; }
      .topContents .entryContents_Box .plan .planArea {
        max-width: 960px;
        margin: 3rem auto 0; }
        .topContents .entryContents_Box .plan .planArea .p-ttl {
          text-align: center;
          font-size: 1.2rem;
          line-height: 1;
          border-bottom: solid 1px #222;
          margin: 3rem 0 0 0;
          padding-bottom: .5rem; }
        .topContents .entryContents_Box .plan .planArea .pbtn {
          display: -webkit-box;
          display: flex;
          flex-wrap: wrap;
          -webkit-box-pack: justify;
          justify-content: space-between;
          -webkit-box-align: stretch;
          align-items: stretch;
          width: 100%;
          max-width: inherit; }
          .topContents .entryContents_Box .plan .planArea .pbtn * {
            min-height: 0%; }
          .topContents .entryContents_Box .plan .planArea .pbtn li {
            width: 32%;
            margin-top: 1rem; }
            .topContents .entryContents_Box .plan .planArea .pbtn li a {
              transition: .3s; }
              .topContents .entryContents_Box .plan .planArea .pbtn li a:hover {
                filter: brightness(105%); }
            .topContents .entryContents_Box .plan .planArea .pbtn li img {
              vertical-align: top; }
      @media (max-width: 768px) {
        .topContents .entryContents_Box .plan .planArea {
          padding: 0 10px; } }
      @media (max-width: 480px) {
        .topContents .entryContents_Box .plan .planArea .pbtn li {
          width: 48.5%; } }
    @media screen and (max-width: 786px) {
      .topContents .entryContents_Box .deco01,
      .topContents .entryContents_Box .deco02,
      .topContents .entryContents_Box .deco03 {
        position: absolute;
        left: auto; }
      .topContents .entryContents_Box .deco01 {
        max-width: 40px;
        width: 10%;
        left: 50%;
        top: -3%;
        margin-left: 13%; }
      .topContents .entryContents_Box .deco02 {
        max-width: 100px;
        width: 18%;
        right: 5px;
        margin-left: auto;
        top: 15%; }
      .topContents .entryContents_Box .deco03 {
        max-width: 100px;
        width: 15%;
        margin-left: auto;
        left: 4%; } }
    @media screen and (max-width: 640px) {
      .topContents .entryContents_Box .planArea {
        background-position: top center;
        background-size: 100% auto; } }
  .topContents .lifeinfomap {
    margin: 0 auto 30px;
    font-feature-settings: "palt";
    letter-spacing: 0.1em; }
    .topContents .lifeinfomap .ttl {
      margin-bottom: 30px;
      padding: 15px;
      background: #081238; }
      .topContents .lifeinfomap .ttl span.new {
        position: absolute;
        top: 5%;
        left: -40%;
        /*transform: translateY(-50%);*/
        margin-right: 0.2rem;
        padding: 4px 6px;
        color: #fff;
        font-size: 14px;
        -webkit-transform: scale(0.8);
        -webkit-transform-origin: 0 0;
        text-align: center;
        background: #9e2b21; }
      .topContents .lifeinfomap .ttl .txt {
        position: relative;
        text-align: center;
        font-size: 1.15rem;
        line-height: 1;
        color: #fff; }
    .topContents .lifeinfomap .lifeinfomap-inner {
      min-height: 0;
      width: 90%;
      max-width: 600px;
      margin: auto; }
      .topContents .lifeinfomap .lifeinfomap-inner .bg {
        position: relative; }
      .topContents .lifeinfomap .lifeinfomap-inner .txtbox {
        width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .topContents .lifeinfomap .lifeinfomap-inner .txtbox .lifeinfomap-ttl {
          text-align: center;
          font-size: 1.5rem;
          line-height: 1.4; }
          .topContents .lifeinfomap .lifeinfomap-inner .txtbox .lifeinfomap-ttl::after {
            content: "";
            display: block;
            background: #fff;
            width: 80px;
            height: 2px;
            margin: 10px auto 0; }
        .topContents .lifeinfomap .lifeinfomap-inner .txtbox a {
          display: block;
          width: 100%;
          max-width: 270px;
          border-radius: 2px;
          text-align: center;
          background: #988249;
          color: #fff;
          padding: 10px;
          margin: 20px auto 0;
          transition: .3s; }
          .topContents .lifeinfomap .lifeinfomap-inner .txtbox a:hover {
            opacity: .6; }
    @media (max-width: 768px) {
      .topContents .lifeinfomap .lifeinfomap-inner .txtbox .lifeinfomap-ttl {
        font-size: 1.25rem; }
      .topContents .lifeinfomap .lifeinfomap-inner .txtbox a {
        font-size: 0.88rem; } }

/******* SHIKICHI *****************************/
.shiki-caption {
  text-align: center;
  color: #fff;
  display: block;
  background: #893a47;
  padding: 1rem;
  line-height: 1.5;
  font-size: 1rem;
  margin-bottom: 1.5rem; }

.shiki-base img {
  width: 100%;
  height: auto; }

.pbtn a {
  transition: .3s; }
  .pbtn a.bright {
    filter: brightness(120%) !important; }