@charset "utf-8";
/******************************************************* 
    BARBER GLOW UP WEBサイト
    作成日：2026.01.03
    作成者：Ayako Tokieda
    修正履歴： 
********************************************************/
/*--------------------- 
 全画面共通 
---------------------*/
body {
    font-family: 'DM Serif Display','Noto Serif JP',serif;
    font-size: 16px;
    line-height: 1.5;
    color: #332219;
    background-color: #f7f7f7;
}
img {
    max-width: 100%;
}
/*--- ヘッダーエリア（固定） ---*/
header {
    background-color: #004225;
    padding-top: 8px;
    padding-bottom: 8px;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
}
header h1 {
    text-align: center;
}
header h1 img {
    width: 230px;
}
/*---------------------
 フッター（全画面共通） 
---------------------*/
footer {
    background-color: #004225;
    color: #f6f3ee;
    text-align: center;
    padding: 10px;
}
/*--- フッター内枠 ---*/
.footerInnerArea {
    padding-top: 20px;
    padding-bottom: 16px;
    border: 1px solid #d0a900;
}
/*--- フッター3エリアのフレックスボックス  ---*/
.footerFlexBox {
    display: flex;
    flex-direction: column;
}
/*--- フッター左（ロゴ部分） ---*/
.footerLeftArea {
    margin-bottom: 10px;
}
.footerLeftArea img {
    width: 200px;
}
/*--- フッター中央（店舗情報） ---*/
.footerCenterArea {
    margin: 10px 0;
}
.footerCenterArea address {
    margin-bottom: 16px;
}
.footerCenterArea p {
    margin-bottom: 16px;
}
.footerCenterArea .tel {
    font-size: 28px;
    letter-spacing: .1em;
}
.footerInfoTable {
    width: 350px;
    margin: 0 auto 20px;
}
.footerInfoTable th {
    text-align: center;
    padding: 0 5px;
    margin: 10px;
}
.footerInfoTable td {
    padding-left: 12px;
    text-align: left;
}
/*--- フッター右側（アイコン） ---*/
.footerRightArea img {
    width: 40px;
    margin: 5px 10px 20px;
}
/*--- フッター下部（All Right Reserved） ---*/
.footerBottomArea small {
    font-size: 12px;
    color: #d0a900;
}
/*--------------------- 
 TOP PAGE 
---------------------*/
/*--- トップ画像 ---*/
.secTopPic {
    background-color: #004225;
    background: url(../images/barbar_top.jpg) no-repeat center center/cover;
    height: 60vh;
    position: relative;
    margin-top: 58px;
}
/*--- トップ画上の文章 ---*/
.secTopPic h2 {
    width: 300px;
    background-color: #f7f7f7c3;
    font-size: 20px;
    padding: 25px 20px;
    position: absolute;
    bottom: 20px;
    right: 30px;
}
/*--- 挨拶文セクション ---*/
.secGreeting {
    text-align: center;
    margin-bottom: 20px;
}
.secGreeting .hige {
    width: 100px;
    margin: 15px auto 0;
}
.secGreeting p {
    line-height: 2.4;
    padding-bottom: 22px;
}
/*--- 各セクションタイトル ---*/
.secTitle {
    width: 260px;
    margin: 10px auto 36px;
    padding: 0px 10px 15px;
    border-bottom: 2px solid #004225;
    text-align: center;
}
.secTitle h3 {
    font-size: 32px;
    letter-spacing: .1em;
}
.secTitle p {
    font-size: 14px;
}
/*--- 特徴セクション ---*/
.secFeature {
    background-color: #004225;
    color: #f6f3ee;
    padding: 10px 0;
    margin-bottom: 40px;
}
.secFeatureInner {
    padding-bottom: 10px;
    border-top: 2px solid #d0a900;
    border-bottom: 2px solid #d0a900;
}
.secFeature .secTitle {
    text-align: center;
    border-bottom: 2px solid #d0a900;
    color: #d0a900;
}
.secFeature ul {
    width: 340px;
    margin: 0 auto;
}
.secFeature ul li {
    background-image: url(../images/btn_Gold.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 15px 10px 15px 35px;
    vertical-align: baseline;
}
/*--- お知らせセクション ---*/
.news {
    width: 90%;
    margin: 10px auto 50px;
}
/*--- ご予約、ご来店セクション ---*/
.secGoldBorder {
    border: 1px solid #d0a900;
    width: 90%;
    padding: 20px 10px;
    margin: 0 auto 40px;
}
.InnerDetail {
    width: 325px;
    margin: 0 auto;
    font-size: 12px;
}
.goldBorderInner p {
    line-height: 1.6;
    margin-bottom: 18px;
    margin-left: 8px;
}
.goldBorderInner a {
    display: block;
    width: 160px;
    background-color: #004225;
    color: #f6f3ee;
    padding: 10px 20px;
    margin: 10px auto 20px;
    text-align: center;
}
.greenBack {
    display: inline-block;
    background-color: #004225;
    color: #f6f3ee;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 6px;
    padding: 6px 14px;
}
/*--- ご来店セクション ---*/
 .goldBorderInner h4 {
    font-size: 18px;
    font-weight: bold;
    background-image: url(../images/btn_Gold.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 8px 10px 8px 35px;
    border-bottom: 2px solid #004225;
    margin-bottom: 20px;
    margin-right: 15px;
}
.topShopInfo {
    margin: 0 0 30px 16px;
}
.topShopInfo ul li {
    display: inline-block;
    background-color: #004225;
    color: #f6f3ee;
    /* font-size: 14px; */
    font-weight: bold;
    margin-bottom: 10px;
    padding: 6px 14px;
}
/*--- Instagramセクション ---*/
.secInstagram {
    text-align: center;
    margin-bottom: 40px;
}
.secInstagram p {
    font-size: 12px;
}
.instagramContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.instagramItem {
    width: 300px; /* 1枚の幅 */
}
/* Instagram公式iframe対策 */
.instagram-media {
  width: 100% !important;
  min-width: auto !important;
  margin: 0 !important;
}
/*--- メニューリンクセクション ---*/
.secMenuList {
    width: 360px;
    margin: 0 auto 40px;
}
.linkList li {
    margin-bottom: 40px;
}
.linkList li a {
    display: block;
    color: #d0a900;
    font-size: 14px;
    text-align: center;
    letter-spacing: .1em;
}
/* メニューリンク　画像部分 */
.linkList li a img {
    height: 150px;
    width: 100%;
    object-fit: cover;
}
/* メニューリンク　文字部分 */
.linkList li a span {
    display: block;
    color: #d0a900;
    background-color: #004225;
    padding: 14px 15px;
    font-size: 30px;
    text-align: center;
}

/*--------------------- 
 下層ページ共通 
---------------------*/
/*--- ページタイトル ---*/
.subPage .pageTitle{
    margin: 70px auto 30px;
    padding: 15px 10px;
    text-align: center;
}
.subPage .pageTitle h2 {
    font-size: 32px;
    letter-spacing: .1em;
}
.subPage .pageTitle p {
    display: inline;
    border-bottom: 2px solid #004225;
    padding-bottom: 15px;
}
/*--- 下層ページ内記述 ---*/
.secSubCategory {
    width: 90%;
    margin: 0 auto 40px;
    font-size: 14px;
}
/*--- 下層ページ内 中見出し ---*/
.secSubCategory h3 {
    font-size: 18px;
    font-weight: bold;
    background-image: url(../images/btn_Gold.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 8px 10px 8px 35px;
    border-bottom: 2px solid #004225;
    margin-bottom: 20px;
}
.secSubCategory p {
    line-height: 1.6;
    margin-bottom: 18px;
}
/*--- 下層ページ内 サブタイトル ---*/
.secSubCategory h4 {
    display: inline-block;
    background-color: #004225;
    color: #f6f3ee;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 6px 14px;
}
/*--------------------- 
 MENUページ 
---------------------*/
/*--- メニュー表 ---*/
.tblMenu {
    width: 100%;
    margin-left: 8px;
}
.tblMenu tr{
    border-bottom: 1px solid #aeb7a9;
}
.tblMenu tr td{
    padding: 8px 6px; 
}
.price {
    text-align: right;
}
/*--- コースメニュー ---*/
.tblCourse {
    margin-bottom: 25px;
}
/*--- 補足説明（小文字） ---*/
.hosoku {
    font-size: 12px;
    margin-bottom: 15px;
    padding: 8px 20px; 
}
/*--- メニュー詳細説明 ---*/
.menuDetail {
    font-size: 14px;
    width: 90%;
    padding: 10px 8px;
    margin: 0 auto;
    border: 1px solid #d0a900;
}
/*--- コースメニュー詳細用リスト ---*/
.menuDetail ol {
    padding-left: 20px;
}
.menuDetail ol li {
    margin-bottom: 15px;
    list-style-type: decimal;
}
/*--------------------- 
 RESERVATIONページ 
---------------------*/
/*--- 予約方法詳細 ---*/
.secReserveDetail {
    padding: 0 15px;
    margin-bottom: 40px;
}
.secReserveDetail a {
    display: block;
    width: 160px;
    background-color: #004225;
    color: #f6f3ee;
    padding: 10px 20px;
    margin: 10px auto 20px;
    text-align: center;
}
/*--------------------- 
 INFOページ 
---------------------*/
/*--- 店舗写真 ---*/
.shopImage {
    width: 350px;
    margin: 10px auto 30px;
}
/*--- 店舗情報詳細 ---*/
.infoDetailTable {
    width: 100%;
    margin: 0 auto 40px;
    font-size: 14px;
}
.infoDetailTable tr {
    border-top: 1px solid #aeb7a9;
    border-bottom: 1px solid #aeb7a9;
}
.infoDetailTable th {
    width: 120px;
    text-align: center;
    padding: 10px 10px;
}
.infoDetailTable td {
    padding: 10px 10px;
}
/*--- アクセス情報 ---*/
.access {
    width: 95%;
    margin: 10px auto 20px;
}
.shopMap {
    text-align: center;
}
/*--- 駐車場・駐輪場案内 ---*/
.parking {
    width: 95%;
    margin: 10px auto 20px;
}
.parking p {
    margin-left: 10px;
    margin-bottom: 25px;
}
/*--------------------- 
 STAFFページ 
---------------------*/
/*--- 名前セクション ---*/
.staffName {
    width: 260px;
    margin:0 auto 25px;
    text-align: center;
}
/*--- 写真 ---*/
.staffName img {
    width: 180px;
    margin-bottom: 22px;
}
.staffName .position {
    margin-bottom: 8px;
    font-size: 20px;
}
.staffName .name {
    font-size: 26px;
}
/*--- 紹介文セクション ---*/
.staffDetail {
    text-align: center;
    width: 80%;
    border: 1px solid #d0a900;
    padding: 10px 15px;
    margin: 0 auto 40px;
}
.staffDetail p {
    font-size: 14px;
    margin-bottom: 15px;
}
/*--------------------- 
 GALLERYページ 
---------------------*/
.divGallery {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.divGallery img {
    width: 250px;
    margin-bottom: 20px;
    /* box-shadow: 5px 5px #aeb7a9b6; */
}
/*--------------------- 
 ハンバーガーメニュー
---------------------*/
/*--- NEWSお知らせページ ---*/
/* お知らせリンク先切り替え */
.newsLinkSp {
    display: inline; /* スマホ用は表示 */
}
.newsLinkPc {
    display: none;  /* PC用は非表示 */
}

/*--- メニューアイコン ---*/
/* メニューを画面上部に固定表示しています */
.gMenu {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    /* width: 370px; */
    z-index: 99;
}
/* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
    cursor: pointer;
    position: absolute;
    right: 26px;
    top: 12px;
    padding-top: 16px;
    height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
    background: #d0a900; /* 色は自由に変更可能です */
    display: block;
    height: 2px; /* 太さ */
    width: 31px; /* 長さ */
    position: relative;
    transition: background .4s ease-out; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
    background: #d0a900; /* 色は自由に変更可能です */
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .4s ease-out; /* 形が変わる時のアニメーション */
    width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
/*--- 表示されるメニューです ---*/
.gMenu .menu {
    background-color: rgba(255, 255, 255, 0.953);
    overflow: hidden;
    max-height: 0; /* ★最初は高さを0にして非表示状態に */
    transition: max-height .6s; /* 表示されるときのアニメーション */
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
    padding-top: 50px;
}
.gMenu .menu li a {
    display: block;
    /* padding: 10px 20px 10px 200px; */
    padding: 10px 20px 10px 100px;
    text-decoration: none;
    /* text-transform: uppercase; */
    font-size: 16px;
    letter-spacing: .07em;
    color: #332219;
}
.gMenu .menu li a span{
    font-size: 12px;
}
.gMenu .menu li a:hover {
    background-color: #c5ded4;
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
    display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
    max-height: 440px; /* ★チェックボックスがオンの時メニューを表示させます */
    transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}

/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}

/*------------------------------------
 お知らせページ
 トップページ埋め込み、お知らせページ共通
--------------------------------------*/
/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }

/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

ul#newsList{
	margin:0 0 15px;
	padding:0;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
ul#newsList li{
	color:#666;
	font-size:13px;
	margin:0;
	/* padding:5px 0; */
    padding:5px 10px;
	margin-bottom:3px;
	border-bottom:1px dotted #ccc;
	line-height:120%;
	list-style-type:none;
}
a{color:#36F;text-decoration:underline;}
a:hover{color:#039;text-decoration:none;}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:100%;
	margin:0 2px;
}
.newMark{
	display:inline-block;
	border:1px solid #d0a900;
	padding:1px 4px;
	font-size:11px;
	line-height:100%;
	background:#d0a900;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
.comment{
    display:block;
    padding:8px 0;
    float:left;
    overflow:hidden;
    width:70%;/* 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
    }
.thumbNailWrap{
	display:block;
	width:75px;
	float:left;
	overflow:hidden;
}
.linkTag,.title{
	display:block;
	margin:3px 0;
}

/*------------------------ 
 お知らせ一覧ページ
-------------------------*/
.secSubCategory .thumbNailWrap{
    height:80px;
}
.secSubCategory .comment{
    width:100%;/* 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
}
.pager{
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 11px;
    padding: 2px 6px 1px;
    text-decoration: none;
	margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px 1px;
	margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}
.overPagerPattern{
	padding:0 2px ;	
}
/* /Pager style */
/*------------------------ 
 お知らせ詳細ページ
-------------------------*/
.newsDetailPage body{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
}
.newsDetailPage h2{
	font-size:16px;
	color:#369;
	margin:10px 0px 10px 0;
	font-weight:normal;
	border:1px solid #3D79B6;
	border-bottom:3px solid #3D79B6;
	padding:5px 10px;
	text-shadow:1px 1px 0px #fff;
	
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
#up_ymd{
	text-align:right;
	font-size:14px;
	margin:5px 10px;
}
.detailUpfile{
	margin:5px 0 35px;
	text-align:center;
}
.backORcloseBtn{
	text-align:center;
	line-height:100%;
	margin-top:15px;
}
.backORcloseBtn a{
	display:inline-block;
	padding:4px 15px;
	border:1px solid #aaa;
	color:#999;
	border-radius:6px;
	text-decoration:none;
	font-size:12px;
}
.detailUpfile img{
	max-width:100%;
	height:auto;
}
.pNav{
	font-size:11px;	
}

/********************************* メディアクエリPC用 START *********************************/
@media screen and (min-width: 920px) {
    /*--------------------- 
    フッター（全画面共通） 
    ---------------------*/
    .footerFlexBox {
        flex-direction: row;
        align-items: center;
    }
    .footerLeftArea {
        flex-basis: 33%;
    }
    .footerCenterArea {
        flex-basis: 33%;
    }
    .footerRightArea {
        flex-basis: 33%;
    }
    /*--------------------- 
     TOP PAGE 
    ---------------------*/
    /*--- トップ画像 ---*/
    .secTopPic {
        height: 80vh;
    }
    header h1 img {
        width: 320px;
    }
    /*--- トップ画上の文章 ---*/
    .secTopPic h2 {
        width: 420px;
        font-size: 26px;
        padding: 30px 35px;
        bottom: 50px;
        right: 50px;
        line-height: 1.8;
    }
    /*--- 挨拶文セクション ---*/
    .secGreeting {
        font-size: 18px;
    }
    .onlySP {
    display: none;
    }
    /*--- 特徴セクション ---*/
    .secFeature {
        font-size: 20px;
    }
    .secFeature ul {
        width: 410px;
    }
    /*--- お知らせセクション ---*/
    .news {
        width: 60%;
    }
    ul#newsList li{
        padding:5px 30px;/* リストの左右余白を広げる */
    }
    /*--- ご予約セクション ---*/
    .secGoldBorder {
        width: 640px;
    }
    .InnerDetail {
        width: 450px;
        font-size: 16px;
    }
    .goldBorderInner {
        margin: 0 80px;
    }
    .goldBorderInner a {
        width: 200px;
        padding: 14px 20px;
    }
    /*--- instagramセクション ---*/
    .secInstagram p {
        font-size: 16px;
    }
    .instagramContainer {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
    .instagramItem {
        width: 300px; /* 1枚の幅 */
    }

    /*--------------------- 
    下層ページ共通 
    ---------------------*/
    .subPage main {
        max-width: 1280px;
        margin: 0 auto;
    }
    .secSubCategory {
        width: 70%;
    }
    /*------------------------ 
    NEWSページ
    -------------------------*/
    .newsDetailList {
        display: flex; /* サムネイルと本文を横並びに */
        flex-wrap: nowrap;
    }
    /* サムネイル */
    .secSubCategory .thumbNailWrap{
        height:80px;
    }
    /* 本文 */
    .secSubCategory .comment{
        width:90%;/* 本文部分の幅。*/
        padding-left: 20px;
    }
    .thumbNailWrap{
        width:110px;
    }
    /*ページャーボタン*/
    .pager a{
        font-size: 12px;
        padding: 3px 7px 2px;
    }
    /*現在のページのボタン*/
    .pager a.current{
        font-size: 12px;
        padding: 3px 7px 2px;
    }

    /*--------------------- 
     MENUページ
    ---------------------*/
    .secSubCategory h4 {
        font-size: 16px;
    }
    .hosoku {
        font-size: 14px;
    }
    .menuDetail {
        font-size: 16px;
        padding: 18px 14px;
    }
    .tblMenu tr td,.tblPremium tr td{
        font-size: 16px;
        padding: 8px 22px; 
    }
    /*--------------------- 
    RESERVATIONページ 
    ---------------------*/
    .secReserveDetail a {
        width: 200px;
        padding: 14px 20px;
    }
    /*--------------------- 
     INFOページ
    ---------------------*/
    .mobileView {
        display: none;
    }
    /*--------------------- 
    STAFFページ 
    ---------------------*/
    .staffName img {
        width: 260px;
        margin-bottom: 22px;
    }
    .staffDetail {
        width: 500px;
    }
    .staffDetail p {
        font-size: 16px;
    }
    /*--------------------- 
    ハンバーガーメニュー
    ---------------------*/
    /*--- NEWSお知らせページ ---*/
    /* お知らせリンク先切り替え */
    .newsLinkSp {
        display: none;  /* スマホ用は非表示 */
    }
    .newsLinkPc {
        display: inline;  /* PC用は表示 */
    }
    
    /*--- メニューアイコン ---*/
    /* メニューを画面上部に固定表示しています */
    .gMenu {
        /* width: 100%; */
        width: 370px;
    }
}
/********************************* メディアクエリPC用 END *********************************/