@charset "UTF-8";
/* Clearfix
=================================*/
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }

/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* icon */
nav.sp_menu .icon { margin: 0 0.5em; }
nav.sp_menu { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: transparent; z-index: 888; display: none; }
.menu_overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--color_a_bg); opacity: 1; z-index: -1; }
.menu_btn { width: 60px; height: 60px; position: fixed; overflow: visible; line-height: 13px; font-size: 1px; cursor: pointer; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; bottom: 0px; right: 0px; z-index: 999; background-color: var(--color_a); }
.menu_btn .line { position: fixed; background-color: var(--color_a_bg); overflow: hidden; z-index: 999; width: 26px; height: 3px; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; bottom: 20px; right: 17px; }
.menu_btn .line:nth-child(1) { bottom: 39px; z-index: 2; }
.menu_btn .line:nth-child(2) { bottom: 30px; z-index: 2; }
.menu_btn .line:nth-child(3) { bottom: 21px; z-index: 2; }
.btn_wrapper { z-index: 999; position: fixed; }
.btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; width: 26px; }
nav.sp_menu .sp_menu__title--papas { position: fixed; width: 5%; top: 0; right: 0; }
nav.sp_menu .sp_menu__title--nonnon { position: fixed; width: 5%; top: 0; left: 0; }
nav.sp_menu .sp_menu__container { position: relative; width: 40%; height: 100dvh; margin: auto; display: flex; flex-direction: column; justify-content: center; }
nav.sp_menu .sp_menu__container .sp_menu__company { width: 100%; margin-bottom: 4em; }
nav.sp_menu .sp_menu__container .sp_menu__copyright { font-family: YakuHanJP, 'Open Sans', "Noto Sans JP", YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 1.2em; line-height: 1em; font-weight: 800; text-align: left; margin-top: 2em; letter-spacing: 0; }
nav.sp_menu .sp_menu__container .sp_menu__inner { position: relative; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }
nav.sp_menu .sp_menu__nav { position: relative; display: flex; flex-direction: column; justify-content: center; width: auto; }
nav.sp_menu .sp_menu__nav li { font-family: YakuHanJP, 'Open Sans', "Noto Sans JP", YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 2.8em; line-height: 1em; font-weight: 800; text-align: left; margin-bottom: 0.5em; letter-spacing: 0; display: block; }
nav.sp_menu .sp_menu__nav li a { color: var(--color_a); }
nav.sp_menu .sp_menu__nav-sub li { font-size: 2.2em; line-height: 1em; }

@media screen and (max-width: 1080px) {
nav.sp_menu .sp_menu__container { position: relative; width: 60%; height: 100dvh; margin: auto; display: flex; flex-direction: column; justify-content: center; }
nav.sp_menu .sp_menu__nav li { font-size: 2.4em; line-height: 1em; font-weight: 800; text-align: left; margin-bottom: 0.5em; letter-spacing: 0; display: block; }
nav.sp_menu .sp_menu__nav-sub li { font-size: 2em; line-height: 1em; }
}

@media screen and (max-width: 600px) {
nav.sp_menu .sp_menu__title--papas { position: fixed; width: 11%; top: 0; right: 0; }
nav.sp_menu .sp_menu__title--nonnon { position: fixed; width: 11%; top: 0; left: 0; }
nav.sp_menu .sp_menu__container { position: relative; width: 55%; height: 100dvh; margin: auto; display: flex; flex-direction: column; justify-content: center; }
nav.sp_menu .sp_menu__container .sp_menu__inner { position: relative; width: 100%; display: flex; flex-direction: column; row-gap: 2em; align-items: flex-start; }
nav.sp_menu .sp_menu__nav { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; }
nav.sp_menu .sp_menu__nav li { font-size: 2em; line-height: 1em; font-weight: 800; text-align: left; margin-bottom: 0.5em; letter-spacing: 0; display: block; }
nav.sp_menu .sp_menu__nav-sub li { font-size: 1.8em; line-height: 1em; }
nav.sp_menu .sp_menu__container .sp_menu__copyright { font-size: 1em; }
}


body.color_a .menu_overlay,
body.color_a .menu_btn .line { background-color: var(--color_a_bg); }
body.color_a .menu_btn { background-color: var(--color_a); }
body.color_a nav.sp_menu .sp_menu__nav li a { color: var(--color_a); }
body.color_b .menu_overlay,
body.color_b .menu_btn .line { background-color: var(--color_b_bg); }
body.color_b .menu_btn { background-color: var(--color_b); }
body.color_b nav.sp_menu .sp_menu__nav li a { color: var(--color_b); }
body.color_c .menu_overlay,
body.color_c .menu_btn .line { background-color: var(--color_c_bg); }
body.color_c .menu_btn { background-color: var(--color_c); }
body.color_c nav.sp_menu .sp_menu__nav li a { color: var(--color_c); }
body.color_d .menu_overlay,
body.color_d .menu_btn .line { background-color: var(--color_d_bg); }
body.color_d .menu_btn { background-color: var(--color_d); }
body.color_d nav.sp_menu .sp_menu__nav li a { color: var(--color_d); }
body.color_e .menu_overlay,
body.color_e .menu_btn .line { background-color: var(--color_e_bg); }
body.color_e .menu_btn { background-color: var(--color_e); }
body.color_e nav.sp_menu .sp_menu__nav li a { color: var(--color_e); }
body.color_collection .menu_overlay,
body.color_collection .menu_btn .line { background-color: var(--color_collection_bg); }
body.color_collection .menu_btn { background-color: var(--color_collection); }
body.color_collection nav.sp_menu .sp_menu__nav li a { color: var(--color_collection); }