@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

.menu-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-button span::before {
  bottom: 7px;
}
.menu-button span::after {
  top: 7px;
}
.menu-button span,
.menu-button span::before,
.menu-button span::after {
  content: "";
  display: block;
  height: 1px;
  width: 18px;
  border-radius: 1px;
  background-color: #ffffff;
  position: absolute;
}
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  transition: all 0.2s;
}
#menu-button-check {
  display: none;
}
#menu-button-check:checked ~ .menu-content {
  left: 0;
}
#menu-button-check:checked ~ .menu-button span {
  background-color: rgba(255, 255, 255, 0);
}
#menu-button-check:checked ~ .menu-button span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-button-check:checked ~ .menu-button span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ヘッダーとフッターのリンクだけにデフォルトスタイルを適用 */
.header-color a,
.footer-color a {
  color: inherit;
  text-decoration: inherit;
}