@charset "UTF-8";
@import url(all.css);
/* ###################### */
/* ######## 変数 ######## */
/* ###################### */
/* カラー */
/* パターン */
/* 書式 */
/* ###################### */
/* ######## 関数 ######## */
/* ###################### */
/*===============================================
  切り替え用
===============================================*/
.sp-none {
  display: none !important;
}

/*Custom
=======================================================*/
.sub-contents-fixed {
  display: none;
}

.main-contents-container {
  background: #fff;
  padding-bottom: clamp(60px, 16vw, 120px);
  overflow: hidden;
}

/*===============================================
  header
===============================================*/
#header {
  height: min(180px, 24vw);
}
#header .h-logo {
  width: min(220px, 29.3333333333vw);
}

/*===============================================
  footer
===============================================*/
#footer {
  padding: min(60px, 8vw) 0 min(110px, 14.6666666667vw);
}
#footer .f-logo {
  margin-bottom: min(60px, 8vw);
}
#footer .f-logo img {
  width: min(220px, 29.3333333333vw);
}
#footer .f-info {
  font-size: min(2.8rem, 3.7333333333vw);
}

/*フッターナビ
-----------------------------*/
.fnav {
  font-size: min(2.6rem, 3.4666666667vw);
  padding-top: min(80px, 10.6666666667vw);
}

/*コピーライト
-----------------------------*/
.copy {
  padding-top: min(70px, 9.3333333333vw);
}
.copy p {
  font-size: clamp(1rem, 2.6666666667vw, 2rem);
}

/*===============================================
  fix固定
===============================================*/
/*追従固定
-----------------------------*/
#fix {
  width: 100vw;
}
#fix > * {
  border-right-width: clamp(1px, 0.2666666667vw, 2px);
}
#fix .fix-btn {
  width: max(100% - 132px, 100% - 17.6vw);
  height: clamp(60px, 16vw, 120px);
}
#fix .fix-btn a {
  font-size: min(3rem, 4vw);
}
#fix .fix-btn a::before {
  width: clamp(30px, 8vw, 60px);
  height: clamp(30px, 8vw, 60px);
  margin-right: clamp(15px, 4vw, 30px);
}
#fix .pagetop {
  width: min(132px, 17.6vw);
}

/*===============================================
  visual
===============================================*/
.visual-wrap::before {
  height: max(100% - 264px, 100% - 35.2vw);
}

/*メインビジュアル
-----------------------------*/
.main-visual .mv {
  width: min(736px, 98.1333333333vw);
  height: min(414px, 55.2vw);
}
.main-visual .catch {
  padding: min(48px, 6.4vw) 0 min(84px, 11.2vw);
}

/*サブビジュアル
-----------------------------*/
.sub-visual::before {
  width: min(736px, 98.1333333333vw);
  height: min(414px, 55.2vw);
}
.sub-visual .catch {
  padding: min(54px, 7.2vw) 0 min(76px, 10.1333333333vw);
}

/*===============================================
  main共通
===============================================*/
.contents-wrap {
  font-size: clamp(1.2rem, 3.7333333333vw, 2.8rem);
}

.inbox {
  width: min(670px, 89.3333333333vw);
}

/*電話番号
-----------------------------*/
.com-tels .com-tel {
  font-size: min(6.6rem, 8.8vw);
}
.com-tels .com-replace {
  margin-top: min(30px, 4vw);
}
.com-tels .com-replace img {
  height: min(22px, 2.9333333333vw);
}

/*ボタン
-----------------------------*/
.com-btn {
  width: min(5560px, 741.3333333333vw);
  max-width: 100%;
  height: clamp(50px, 13.3333333333vw, 100px);
  margin: 0 auto;
}
.com-btn a {
  font-size: min(3.2rem, 4.2666666667vw);
  padding: 0 min(40px, 5.3333333333vw);
}
.com-btn a::after {
  width: min(22px, 2.9333333333vw);
  right: min(30px, 4vw);
}
.com-btn.mail a {
  padding-right: min(80px, 10.6666666667vw);
}
.com-btn.mail a::before {
  width: min(40px, 5.3333333333vw);
  height: min(40px, 5.3333333333vw);
  margin-right: min(28px, 3.7333333333vw);
}
.com-btn.mail a::after {
  right: min(20px, 2.6666666667vw);
}

/*チェックリスト
-----------------------------*/
.com-check-list li {
  font-size: min(3.6rem, 4.8vw);
}

/*メニューリスト
-----------------------------*/
.com-menu-list li {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
  margin-bottom: min(100px, 13.3333333333vw);
}
.com-menu-list li .box-item {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
}
.com-menu-list li .box-img {
  width: clamp(180px, 53.3333333333vw, 400px);
  margin: min(50px, 6.6666666667vw) auto;
}

/*SB未記入テキスト
-----------------------------*/
.com-no-txt {
  font-size: min(3.6rem, 4.8vw);
}

/*===============================================
  タイトル
===============================================*/
/*大タイトル
-----------------------------*/
.com-ttl01 {
  width: min(600px, 80vw);
  margin: 0 auto min(100px, 13.3333333333vw);
}
.com-ttl01 > span {
  font-size: min(6rem, 8vw);
}
.com-ttl01 > span.mid {
  font-size: min(5.5rem, 7.3333333333vw);
}
.com-ttl01::before {
  font-size: min(16rem, 21.3333333333vw);
}

/*中タイトル
-----------------------------*/
.com-ttl02 {
  margin: 0 min(26px, 3.4666666667vw) min(80px, 10.6666666667vw);
}
.com-ttl02 > span {
  font-size: min(3.8rem, 5.0666666667vw);
  padding: 0 min(16px, 2.1333333333vw);
}
.com-ttl02::after {
  height: min(13px, 1.7333333333vw);
  margin-top: min(30px, 4vw);
}

/*小タイトル
-----------------------------*/
.com-ttl03 {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
  padding-bottom: min(40px, 5.3333333333vw);
  margin-bottom: min(60px, 8vw);
}
.com-ttl03 > span {
  font-size: min(3.6rem, 4.8vw);
}

/*===============================================
  共通セクション
===============================================*/
/*Niji 公式アプリ
-----------------------------*/
.com-app-sec .inbox {
  padding: min(200px, 26.6666666667vw) 0 min(150px, 20vw);
}
.com-app-sec .app-ttl::before {
  font-size: min(11rem, 14.6666666667vw);
}
.com-app-sec .app-box .box-list {
  padding: 0 min(30px, 4vw);
}
.com-app-sec .app-box .box-list li {
  font-size: min(3.4rem, 4.5333333333vw);
}
.com-app-sec .app-list {
  height: min(200px, 26.6666666667vw);
}
.com-app-sec .app-list li {
  margin-right: min(62px, 8.2666666667vw);
}
.com-app-sec .app-list li img {
  height: min(90px, 12vw);
}

/*お問い合わせ
-----------------------------*/
.com-contact-sec {
  padding: min(280px, 37.3333333333vw) 0 min(100px, 13.3333333333vw);
}
.com-contact-sec .contact-ttl {
  margin-bottom: min(80px, 10.6666666667vw);
}
.com-contact-sec .contact-box > * {
  margin-top: min(80px, 10.6666666667vw);
}
.com-contact-sec .contact-box .box-list li {
  width: min(100px, 13.3333333333vw);
  height: min(100px, 13.3333333333vw);
  margin-right: min(80px, 10.6666666667vw);
}
.com-contact-sec .contact-box .box-list li.mail a {
  border-radius: min(20px, 2.6666666667vw);
}

/*===============================================
  トップページ
===============================================*/
/*お知らせ
-----------------------------*/
.top-news {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.top-news::before {
  bottom: max(-60px, -8vw);
}
.top-news .news-ttl {
  margin-bottom: min(76px, 10.1333333333vw);
}
.top-news .news-list {
  width: min(560px, 74.6666666667vw);
  margin: 0 auto;
}
.top-news .news-list .list-item {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
  padding-bottom: min(40px, 5.3333333333vw);
  margin-bottom: min(60px, 8vw);
}
.top-news .news-list .list-item .date {
  font-size: min(2.6rem, 3.4666666667vw);
}
.top-news .news-list .list-item .tag {
  padding-top: min(8px, 1.0666666667vw);
}
.top-news .news-list .list-item .tag li {
  font-size: clamp(1rem, 2.6666666667vw, 2rem);
  box-shadow: 0 0 0 clamp(1px, 0.2666666667vw, 2px) #666 inset;
  margin-top: clamp(2px, 0.5333333333vw, 4px);
}
.top-news .news-list .list-item .item-ttl {
  margin-top: min(16px, 2.1333333333vw);
}
.top-news .news-btn {
  margin-top: min(80px, 10.6666666667vw);
}
.top-news + .top-about,
.top-news + .top-feature,
.top-news + .top-menu {
  margin-top: max(-200px, -26.6666666667vw);
}

/*relaxation＆hair Nijiについて
-----------------------------*/
.top-about {
  padding: min(200px, 26.6666666667vw) 0;
}
.top-about::before {
  box-sizing: content-box;
  padding-top: min(232px, 30.9333333333vw);
  top: max(-374px, -49.8666666667vw);
}
.top-about .about-img {
  width: min(680px, 90.6666666667vw);
  margin-left: max(-40px, -5.3333333333vw);
}
.top-about .about-ttl {
  padding-top: min(10px, 1.3333333333vw);
  margin-bottom: min(190px, 25.3333333333vw);
}
.top-about .about-ttl::after {
  width: min(670px, 89.3333333333vw);
  height: min(220px, 29.3333333333vw);
  bottom: max(-116px, -15.4666666667vw);
}
.top-about .about-btn {
  margin-top: min(100px, 13.3333333333vw);
}
.top-about + .top-feature,
.top-about + .top-menu {
  margin-top: max(-200px, -26.6666666667vw);
}

/*極上のヘアケアで
いつまでも美しく健やかな髪へ
-----------------------------*/
.top-feature {
  padding: min(200px, 26.6666666667vw) 0;
}
.top-feature::before {
  box-sizing: content-box;
  padding-top: min(534px, 71.2vw);
  top: max(-454px, -60.5333333333vw);
}
.top-feature .feature-img {
  width: min(680px, 90.6666666667vw);
  margin-left: auto;
  margin-right: max(-40px, -5.3333333333vw);
}
.top-feature .feature-ttl {
  padding-top: min(8px, 1.0666666667vw);
  margin-bottom: min(190px, 25.3333333333vw);
}
.top-feature .feature-ttl::after {
  width: min(570px, 76vw);
  height: min(134px, 17.8666666667vw);
  bottom: max(-130px, -17.3333333333vw);
}
.top-feature .feature-btn {
  margin-top: min(100px, 13.3333333333vw);
}
.top-feature + .top-menu {
  margin-top: max(-200px, -26.6666666667vw);
}

/*メニュー
-----------------------------*/
.top-menu {
  padding: min(200px, 26.6666666667vw) 0 min(284px, 37.8666666667vw);
}
.top-menu::before {
  top: min(30px, 4vw);
}
.top-menu .menu-link {
  padding: min(10px, 1.3333333333vw);
}
.top-menu .menu-link a {
  box-shadow: 0 min(10px, 1.3333333333vw) #4c4c4c;
}
.top-menu .menu-link a:hover {
  box-shadow: none;
  transform: translateY(min(10px, 1.3333333333vw));
}

/*スタイル
-----------------------------*/
.top-style {
  padding: min(120px, 16vw) 0 min(220px, 29.3333333333vw);
}
.top-style .style-list {
  margin-top: max(-80px, -10.6666666667vw);
}
.top-style .style-list .list-item {
  padding-bottom: min(30px, 4vw);
  margin-top: min(80px, 10.6666666667vw);
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
}
.top-style .style-list .list-item .item-img {
  margin-bottom: min(30px, 4vw);
}
.top-style .style-btn {
  margin-top: min(80px, 10.6666666667vw);
}

/*グーグルマップ
-----------------------------*/
.top-map {
  height: min(600px, 80vw);
}

/*===============================================
  relaxation＆hair Nijiについて
===============================================*/
/*コンセプト
-----------------------------*/
.about-concept {
  padding: min(330px, 44vw) 0 min(220px, 29.3333333333vw);
}
.about-concept .concept-list {
  padding-top: min(10px, 1.3333333333vw);
}
.about-concept .concept-list-box {
  margin-bottom: min(150px, 20vw);
}
.about-concept .concept-list-box .box-ttl::before {
  font-size: min(12rem, 16vw);
}
.about-concept .concept-list-box .box-img {
  width: min(680px, 90.6666666667vw);
  margin-bottom: min(80px, 10.6666666667vw);
}
.about-concept .concept-list-box:nth-of-type(2n + 1) .box-img {
  margin-left: max(-40px, -5.3333333333vw);
}
.about-concept .concept-list-box:nth-of-type(2n) .box-ttl > span {
  padding-left: min(164px, 21.8666666667vw);
}
.about-concept .concept-list-box:nth-of-type(2n) .box-img {
  margin-left: auto;
  margin-right: max(-40px, -5.3333333333vw);
}

/*スタイリスト紹介
-----------------------------*/
.about-stylist {
  padding: min(220px, 29.3333333333vw) 0 min(196px, 26.1333333333vw);
}
.about-stylist::before {
  box-sizing: content-box;
  padding-top: min(316px, 42.1333333333vw);
  top: max(-114px, -15.2vw);
}
.about-stylist .stylist-img {
  width: min(520px, 69.3333333333vw);
  margin-bottom: min(100px, 13.3333333333vw);
}
.about-stylist .stylist-img figcaption {
  font-size: min(3.4rem, 4.5333333333vw);
}

/*サロン情報
-----------------------------*/
.about-info .inbox {
  padding: min(200px, 26.6666666667vw) 0;
}
.about-info .info-table td .replace {
  padding: min(11px, 1.4666666667vw) 0;
}
.about-info .info-table td .replace img {
  height: min(28px, 3.7333333333vw);
}
.about-info .info-map {
  height: min(600px, 80vw);
  margin-top: max(-100px, -13.3333333333vw);
}

/*アクセス情報
-----------------------------*/
.about-access {
  padding: min(450px, 60vw) 0 min(200px, 26.6666666667vw);
}
.about-access .access-text {
  margin-bottom: min(60px, 8vw);
}
.about-access .access-text::before {
  width: min(140px, 18.6666666667vw);
  height: min(140px, 18.6666666667vw);
  margin-right: min(40px, 5.3333333333vw);
}
.about-access .access-text p {
  max-width: max(100% - 180px, 100% - 24vw);
}
.about-access .access-list {
  margin-top: max(-80px, -10.6666666667vw);
}
.about-access .access-list-item {
  margin-top: min(80px, 10.6666666667vw);
}
.about-access .access-list-item .item-img {
  margin-bottom: min(60px, 8vw);
}
.about-access .access-list-item .item-img::before {
  font-size: min(3.6rem, 4.8vw);
}

/*===============================================
  髪質改善・頭皮洗浄
===============================================*/
/*こんなお悩みありませんか？
-----------------------------*/
.feature-trouble {
  padding: min(328px, 43.7333333333vw) 0 min(90px, 12vw);
}
.feature-trouble::after {
  height: min(101, 13.33334vw + 1px);
}
.feature-trouble .trouble-img {
  width: min(640px, 85.3333333333vw);
  margin-left: max(-40px, -5.3333333333vw);
}
.feature-trouble .trouble-list {
  width: min(630px, 84vw);
  padding: min(60px, 8vw) 0 0 min(60px, 8vw);
  margin-top: max(-100px, -13.3333333333vw);
}

/*Nijiのビーワンヘッドスパを
お試しください！
-----------------------------*/
.feature-headspa {
  padding: min(332px, 44.2666666667vw) 0 min(176px, 23.4666666667vw);
}
.feature-headspa .headspa-ttl::after {
  height: min(120px, 16vw);
  top: max(-124px, -16.5333333333vw);
}
.feature-headspa .headspa-comic {
  width: min(580px, 77.3333333333vw);
  min-width: 256px;
  box-shadow: 0 0 0 clamp(1px, 0.2666666667vw, 2px) #e5e5e5;
}

/*ビーワンヘッドスパについて
-----------------------------*/
.feature-about {
  padding: min(176px, 23.4666666667vw) 0 min(200px, 26.6666666667vw);
}
.feature-about::before {
  box-sizing: content-box;
  padding-top: min(176px, 23.4666666667vw);
}
.feature-about .about-img {
  width: min(680px, 90.6666666667vw);
  margin-left: max(-40px, -5.3333333333vw);
  margin-bottom: min(100px, 13.3333333333vw);
}
.feature-about .about-box {
  padding-top: min(130px, 17.3333333333vw);
}
.feature-about .about-box .box-list {
  padding: 0 min(30px, 4vw);
}

/*ビーワンメニュー
-----------------------------*/
.feature-menu {
  padding: min(248px, 33.0666666667vw) 0 min(200px, 26.6666666667vw);
}
.feature-menu .menu-ttl::after {
  height: min(120px, 16vw);
  top: max(-124px, -16.5333333333vw);
}

/*===============================================
  メニュー
===============================================*/
/*人気メニュー
-----------------------------*/
.menu-recommended {
  padding: min(328px, 43.7333333333vw) 0 min(300px, 40vw);
}

/*メニュー
-----------------------------*/
.menu-other {
  padding: min(84px, 11.2vw) 0 min(200px, 26.6666666667vw);
}

/*===============================================
  スタイル
===============================================*/
.style-section {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.style-section::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.style-section .style-list {
  margin-top: max(-80px, -10.6666666667vw);
}
.style-section .style-list .list-item {
  padding-bottom: min(30px, 4vw);
  margin-top: min(80px, 10.6666666667vw);
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
}
.style-section .style-list .list-item .item-img {
  margin-bottom: min(30px, 4vw);
}

/*==================================================
 ニュース一覧
================================================== */
.news-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.news-contents::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.news-contents .news-list .list-item {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
  padding-bottom: min(40px, 5.3333333333vw);
  margin-bottom: min(60px, 8vw);
}
.news-contents .news-list .list-item .date {
  font-size: min(2.6rem, 3.4666666667vw);
}
.news-contents .news-list .list-item .tag {
  padding-top: min(16px, 2.1333333333vw);
}
.news-contents .news-list .list-item .tag li {
  font-size: clamp(1rem, 2.6666666667vw, 2rem);
  box-shadow: 0 0 0 clamp(1px, 0.2666666667vw, 2px) #666 inset;
  margin-top: clamp(2px, 0.5333333333vw, 4px);
}
.news-contents .news-list .list-item .item-ttl {
  margin-top: min(16px, 2.1333333333vw);
}

/*タグリスト
-----------------------------*/
.tag-select-box-wrap .tag-select-box {
  min-width: clamp(160px, 42.6667vw, 320px);
  margin-bottom: min(80px, 10.6667vw);
}
.tag-select-box-wrap .tag-select-box::after {
  border-width: clamp(5px, 1.3334vw, 10px);
  right: min(24px, 3.2vw);
}
.tag-select-box-wrap .tag-select-box select {
  font-size: clamp(1.2rem, 3.2vw, 2.4rem);
  line-height: 1.33334;
  padding: clamp(12px, 3.2vw, 24px) clamp(32px, 8.5334vw, 64px) clamp(12px, 3.2vw, 24px) clamp(12px, 3.2vw, 24px);
}

/*==================================================
 ニュース詳細
================================================== */
.news-detail {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.news-detail::before {
  height: max(100% - 200px, 100% - 26.66667vw);
}
.news-detail .post-data {
  font-size: clamp(1rem, 3.2vw, 2.4rem);
  margin-bottom: 5.3334vw;
}
/*==================================================
 お問い合わせ
================================================== */
.contact-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.contact-contents::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.contact-contents .contact-table {
  margin-bottom: min(60px, 8vw);
}
.contact-contents .contact-table th .optional-mark,
.contact-contents .contact-table th .required-mark {
  font-size: min(2.4rem, 3.2vw);
}
.contact-contents .contact-submits-wrap > * {
  width: min(560px, 74.6666666667vw);
  height: clamp(50px, 13.3333333333vw, 100px);
  font-size: clamp(1.4rem, 4.2666666667vw, 3.2rem);
  margin-bottom: min(60px, 8vw);
}

/*==================================================
 お問い合わせ完了
================================================== */
.complete-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.complete-contents::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.complete-contents .complete-box .link {
  margin-top: min(30px, 4vw);
}

/*===============================================
  プライバシーポリシー
===============================================*/
.privacy-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.privacy-contents::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.privacy-contents .privacy-ttl::before {
  font-size: min(12rem, 16vw);
}
.privacy-contents .item-box {
  margin-bottom: min(80px, 10.6666666667vw);
}

/*==================================================
 サイトマップ
================================================== */
.site-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.site-contents::before {
  height: max(100% - 254px, 100% - 33.867vw);
}
.site-contents .site-list li {
  border-bottom-width: clamp(1px, 0.2666666667vw, 2px);
}
.site-contents .site-list li a {
  font-size: min(3.2rem, 4.2666666667vw);
}

/*===============================================
  404エラー
===============================================*/
.error-contents {
  padding: min(328px, 43.7333333333vw) 0 min(200px, 26.6666666667vw);
}
.error-contents::before {
  height: max(100% - 200px, 100% - 26.66667vw);
}

/*===============================================
  パンくずリスト
===============================================*/
.bread {
  height: min(80px, 10.6666666667vw);
}
.bread .breadcrumbs {
  width: min(670px, 89.3333333333vw);
}
.bread .breadcrumbs li {
  font-size: clamp(1rem, 3.2vw, 2.4rem);
}

/*===============================================
  ページネーション
===============================================*/
.pagenation {
  padding-top: min(60px, 8vw);
}
.pagenation li {
  width: min(60px, 8vw);
  font-size: min(3rem, 4vw);
  line-height: min(60px, 8vw);
  margin: min(12px, 1.6vw) min(8px, 1.0666666667vw) 0;
}

/*===============================================
  詳細ページ前後
===============================================*/
.paginated-link {
  padding-top: min(40px, 5.3333333333vw);
  margin-top: min(80px, 10.6666666667vw);
  border-top-width: clamp(1px, 0.2666666667vw, 2px);
}
.paginated-link li {
  width: min(176px, 23.4666666667vw);
}