@charset "utf-8";

body, html {
  margin: 0;
  max-width: 100%;
  font-family: rera, sans-serif;
  font-weight: 100;
  font-style: normal;
}

/*トップ画像*/
header {
  background-image: url("../images/NYAON/top.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  max-width: 100%;
  height: 1000px;
}

/*===========共通===========*/
/*共通見出し*/
h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  font-size: 36px;
  color: #ffbb03;
  font-weight: bold;
  padding-top: 44px;
  padding-bottom: 44px;
  margin: 0 auto;
}

/*AndMoreボタン*/
.button_orange {
  display: block;
  text-align: center;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #ffbb03;
  width: 235px;
  padding: 1em;
  margin: 0 auto;
  border-radius: 45px;
  border: 2px solid #ffbb03;
}

.button_orange:hover {
  background-color: white;
  color: #ffbb03;
}

/*共通効果　透過*/
.link_opacity a {
  transition: all 0.3s ease 0s;
}

.link_opacity a:hover {
  opacity: 0.6;
}

/*背景*/
.about, .news {
  background-color: #f7ebcd;
  padding-bottom: 130px;
}

ul {
  text-decoration: none;
}

/*===========TOP===========*/
.nekojarashi {
  width: 89px;
}

/*===========ABOUT===========*/
/*ABOUT中の箱*/
.about .container {
  text-align: center;
  background-color: white;
  padding-top: 44px;
  padding-bottom: 85px;
}

/*眠る猫*/
.sleep_cat {
  margin-bottom: 27px;
}

/*回転*/
.sleep_cat img {
  transition: all 2s linear 0s;
  cursor: pointer;
}

.sleep_cat img:hover {
  transform: rotateZ(180deg);
}

/*ABOUT本文*/
.about .container p {
  color: #5e3c00;
  font-size: 26px;
  font-weight: bold;
  line-height: 2;
}

/*===========CONTENTS===========*/
.contents {
  padding-bottom: 130px;
}

/*タイトル微調整*/
.contents h2 {
  width: 315px;
}

.contents .container {
  display: flex;
  justify-content: space-between;
}

.contents li {
  width: 300px;
  text-align: center;
  color: #3f2200;
}

/*コンテンツ見出し*/
.contents h3 {
  font-size: 30px;
  font-weight: bold;
  margin-top: 34px;
  margin-bottom: 20px;
}

/*コンテンツ本文*/
.contents_text {
  font-size: 18px;
  margin-bottom: 34px;
}

/*===========NEWS===========*/
.news .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.news_item {
  display: flex;
  align-items: center;
  width: 330px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/*NEWSテキスト部分*/
.news_item dl {
  font-size: 16px;
  line-height: 25px;
  color: #3f2200;
  margin-left: 20px;
}

/*矢印*/
.news_item img:last-child {
  width: 15px;
  margin-left: auto;
}

/*バナー*/
.banner {
  display: flex;
  margin-top: 60px;
}

/*===========フッター===========*/
footer {
  background-color: #ffbb03;
  /*height: 130px;*/
}

.footer_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 55px;
}

/*ロゴ*/
.footer_contents img {
  width: 310px;
  height: 33px;
}

/*リンク*/
.footer_link {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: white;
  width: 60%;
}

/*コピーライト*/
small {
  display: block;
  text-align: center;
  color: white;
  padding-bottom: 20px;
}

/*トップへ戻るボタン*/
.pagetop_btn {
  display: block;
  text-align: end;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  transition: .5s;
  /*  デフォルト非表示*/
  opacity: 0;
  visibility: hidden;
}

/*表示するための記述*/
.pagetop_btn.active {
  opacity: 1;
  visibility: visible;
}

.pagetop_btn img {
  width: 8vw;
}

/*=================PC用CSS=====================*/
@media screen and (min-width: 768px) {

  /*スマホクラス非表示*/
  .sp {
    display: none;
  }

  /*共通コンテンツ幅*/
  .container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /*===========TOP===========*/
  header .pc {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 50px;
  }

  /*ロゴ*/
  h1 {
    text-align: center;
  }

  /*ロゴサイズ*/
  h1 img {
    width: 612px;
  }

  /*=======NEWS========*/
  /*上段の線*/
  .news_item_top {
    border-top: solid 3px #3f2200;
    border-bottom: solid 3px #3f2200;
  }

  /*下段の線*/
  .news_item_bottom {
    border-bottom: solid 3px #3f2200;
  }
}

/*====================スマホ用CSS=======================*/
@media screen and (max-width: 767px) {

  /*=============共通===============*/
  /*PC用クラス非表示*/
  .pc {
    display: none;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /*共通コンテンツ幅*/
  .container {
    margin-left: 15px;
    margin-right: 15px;
  }

  /*見出し*/
  h2 {
    font-size: 30px;
    width: 70%;
  }

  /*ボタン*/
  .button_orange {
    font-size: 5vw;
    width: 65vw;
  }

  .about, .news {
    padding-bottom: 25vw;
  }

  /*==================TOP==================*/
  /*トップ画像*/
  header {
    background-image: url("../images/NYAON/SP_top.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 547px;
  }

  /*ヘッダー上部*/
  .mobile_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 100px;
    padding-left: 15px;
    padding-right: 15px;
  }

  /*ロゴ*/
  .logo {
    width: 70vw;
  }

  /*ハンバーガーメニュー*/
  /*外枠*/
  .mobile_menu {
    display: block;
    position: relative;
    cursor: pointer;
    width: 50px;
    height: 50px;
  }

  /*線*/
  .mobile_menu span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    background: #3f2200;
    width: 45%;
    height: 3px;
  }

  .mobile_menu span:nth-of-type(1) {
    top: 15px;
  }

  .mobile_menu span:nth-of-type(2) {
    top: 23px;
  }

  .mobile_menu span:nth-of-type(3) {
    top: 31px;
  }

  /*クリック時に×に変化（activeクラス付与）*/
  /*上の線*/
  .mobile_menu.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    /*傾き*/
    width: 30%;
  }

  /*真ん中の線*/
  .mobile_menu.active span:nth-of-type(2) {
    opacity: 0;
  }

  /*下の線*/
  .mobile_menu.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    /*傾き*/
    width: 30%;
  }

  /*スマホ用メニュー（バーガーメニューを押したときに表示されるメニュー）*/
  .mobile_link {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 100;
    background-color: white;
    opacity: 0.7;
    font-size: 80%;
    line-height: 180%;
    width: 7em;
    margin-left: auto;
  }

  /*スマホ用メニュー装飾*/
  .mobile_link li {
    margin: 0;
    padding: 0 4% 0 4%;
    transition: all 0.3s ease 0s;
  }

  .mobile_link li:hover {
    background: #ffbb03;
    color: white;
  }

  /*================ABOUT================*/
  /*眠る猫*/
  .sleep_cat img {
    width: 31vw;
  }

  /*テキスト*/
  .about .container p {
    font-size: 4vw;
    line-height: 2;
  }

  /*===============CONTENTS================*/
  .contents {
    padding-bottom: 0px;
  }

  /*位置調整*/
  .contents .container {
    flex-direction: column;
    align-items: center;
  }

  /*	見出し調整*/
  .contents h2 {
    width: 87%;
  }

  /*各項目*/
  .contents .container li {
    width: 100%;
    margin-bottom: 85px;
  }

  /*画像*/
  .contents .container li img {
    width: 50vw;
  }

  /*見出し*/
  .contents h3 {
    font-size: 6vw;
  }

  /*テキスト*/
  .contents .container li p {
    font-size: 4vw;
  }

  /*==============NEWS===============*/
  .news .container {
    flex-direction: column;
    align-items: center;
  }

  .news .container li {
    width: 100%;
    border-top-width: 2px;
  }

  .news .container li:last-child {
    border-bottom-width: 2px;
  }

  /*アイコン*/
  .news_item img:first-child {
    width: 20vw;
  }

  /*テキスト*/
  .news_item dl {
    font-size: 4vw;
  }

  /*矢印*/
  .news_item img:last-child {
    width: 3vw;
    /*margin-left: auto;*/
  }

  /*バナー*/
  .banner a:last-child {
    margin-top: 10vw;
  }

  /*============フッター============*/
  .footer_contents {
    flex-direction: column;
  }

  .footer_contents a {
    margin-bottom: 20px;
  }

  .footer_contents img {
    width: 160px;
    height: 16px;
  }

  .footer_link {
    flex-direction: column;
    align-items: center;
    font-size: 4vw;
  }

  /*コピーライト*/
  small {
    font-size: 60%;
  }

  /*トップへ戻るボタン*/
  .pagetop_btn img {
    width: 10vw;
  }
}