@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");
.pc {
  display: none; }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    .pc {
      display: block; } }
  @media screen and (min-width: 1000px) {
    .pc {
      display: block; } }

.sp {
  display: block; }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    .sp {
      display: none; } }
  @media screen and (min-width: 1000px) {
    .sp {
      display: none; } }

:root {
  --default-color: #858585;
  --primary_color: #fff;
  --secondary_color: #22203c;
  --background_color: #fff;
  --font_all_btn: 17px; }

.contents_ {
  max-width: 100%;
  color: var(--default-color);
  font-family: 'Noto Sans JP', sans-serif; }
  .contents_ li {
    list-style: none; }
  .contents_ .background_ {
    background-color: #fff; }
  .contents_ a:hover {
    opacity: 0.8;
    transition: 0.3s; }

#contents_wrapper {
  margin: 0 auto; }
  @media screen and (min-width: 1000px) {
    #contents_wrapper {
      max-width: 1000px; } }

#first_view .title_img img {
  width: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 1000px) {
    #first_view .title_img img {
      width: 1000px; } }

#main_contents ul.btn_container {
  display: grid;
  grid-template-columns: repeat(4, 235px);
  gap: 20px;
  margin-top: 40px; }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    #main_contents ul.btn_container {
      grid-template-columns: repeat(4, 180px);
      justify-content: center; } }
  @media screen and (max-width: 599px) {
    #main_contents ul.btn_container {
      grid-template-columns: repeat(3, 30vw);
      justify-content: center;
      gap: 10px;
      margin-top: 20px; } }
  #main_contents ul.btn_container li.btn_ img {
    width: 100%;
    vertical-align: top; }
#main_contents .all_btn {
  width: 1000px;
  margin: 20px auto 0;
  background-color: #ffefe9;
  padding: 20px 0;
  text-align: center; }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    #main_contents .all_btn {
      width: 95.2vw;
      padding: 15px 0;
      margin: 20px auto 0; } }
  @media screen and (max-width: 599px) {
    #main_contents .all_btn {
      width: 95vw;
      padding: 10px 0;
      margin: 10px auto 0; } }
  #main_contents .all_btn a {
    color: #706257;
    text-decoration: none;
    font-size: var(--font_all_btn); }
    @media screen and (max-width: 599px) {
      #main_contents .all_btn a {
        font-size: 12px; } }

#footer_ hr {
  height: 2px;
  background-color: var(--default-color);
  border: none;
  color: var(--default-color);
  max-width: 1000px;
  margin: 30px auto 50px; }
  @media screen and (min-width: 600px) and (max-width: 999px) {
    #footer_ hr {
      width: 90vw; } }
  @media screen and (max-width: 599px) {
    #footer_ hr {
      width: 90vw;
      margin: 30px auto 30px; } }
#footer_ .feature_ {
  border: solid 1px var(--default-color);
  padding: 10px 0;
  text-align: center;
  width: 500px;
  margin: 0 auto; }
  @media screen and (max-width: 599px) {
    #footer_ .feature_ {
      width: 90vw; } }
  #footer_ .feature_ a {
    display: block;
    color: var(--default-color);
    text-decoration: none; }
    @media screen and (min-width: 600px) and (max-width: 999px) {
      #footer_ .feature_ a {
        font-size: 16px; } }
#footer_ ul.sns_btn_container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 30px 0 50px; }
  #footer_ ul.sns_btn_container li.sns_btn {
    width: 35px; }
    #footer_ ul.sns_btn_container li.sns_btn a {
      text-decoration: none; }
      #footer_ ul.sns_btn_container li.sns_btn a img {
        width: 100%;
        vertical-align: top; }