@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    min-height: 100vh;   /* 20250930 */    
    color: rgb(253, 252, 252);
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

a[href^="mailto:"] {
    color: #9bec98; /* 薄い緑色 */
}
/* 大きな背景画像 */
.big-bg {
    background-size: cover;
    background-position: center top;
}
/* ここから追加　*/

/* メインコンテンツの幅と中央揃え */
main {
    margin: 0 auto;
    background-color: #504ea7;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* ここまで追加 */

/* 見出し */
.page-title {
    font-size: 5rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
    color:lavender;
}
.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #0bd solid;
    font-weight: normal;
}

/* ボタン */
.button {
    font-size: 1.375rem;
    background: #0bd;
    color: #fff;
    border-radius: 5px;
    padding: 18px 32px;
}
.button:hover {
    background: #0090aa;
}

/* iframe */
iframe {
    width: 100%;
}

/* ヘッダー移植　*/
@media screen and (min-width: 768px) {
	/* ヘッダー */
	.header-container {
		padding: 30px 20px 10px 20px;
	}
    /*
	.header-logo {
		width: 100px;
		height: 22px;
		background-size: 100px 22px;
	}
    */
}
.header-navbtn {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 30;
	width: 62px;
	height: 62px;
	background-image: url(../image/navbtn.png);
	background-size: 62px 62px;
}
.header-navbtn:hover, .header-navbtn:active {  /*ハンバーガーボタン*/
	background-color: #8bb15a;
}
@media screen and (min-width: 768px) {
	.header-navbtn {
		display: none;
	}
}
/*　　*/

/* HEADER　通常サイズで適用
------------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
}
.logo {
    width: 240px;
    margin-top: 20px;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
}
.main-nav li {
    margin-left: 36px;
}
.main-nav a {
    color: rgb(248, 245, 246);
}
.main-nav a:hover {
    color: rgb(3, 49, 175);
}

/* HOME
------------------------------- */
#home {
    background-image: url(../image/top-bg0.jpg);
    min-height: 90vh;
}
#home .page-title {
    text-transform: none;
}
.home-content {
    max-width: 800px;     /* 560px  */        
    text-align: center;
    margin-top: 5%;
}
.home-content p {
    font-size: 1.125rem;
    margin: 10px 0 42px;
}
.download-btn-container {
    text-align: center;
    margin: 25px 0;
}
.download-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.download-btn:hover {
    background-color: #0056b3;
}
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 20px;
    margin-left:30px;
    margin-right:30px;
}
.catalog-card {
    background-color: #e5f1c1;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.catalog-card:hover {
    transform: translateY(-5px);
}
.catalog-card img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}
.catalog-card h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #0334d396;    
}
.catalog-card p {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 15px;
}
.detail-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s;
}
.detail-btn:hover {
    background-color: #218838;
}
/*
footer {
    text-align: center;
    padding-top: 20px;
    margin-top: 30px;
    border-top: 2px solid #ddd;
    color: #777;
}
*/
/* NEWS
------------------------------- */
#news {
    background-image: url(../image/news-bg0.jpg);
  /*   height: 620px;    height: 270px; */
    min-height: 90vh; 
}
#news .page-title {
    text-align: center;
}
.news-content {
    max-width: 600px;     /* 560px  */
    margin-top: 5%;
}
.news-content .page-title {
    text-align: center;
}
.news-content p {
    font-size: 1.125rem;
    margin: 0 0 0; 
}

/* 記事部分 */
article {
    width: 74%;
}
.post-info {
    position: relative;
    padding-top: 4px;
    margin-bottom: 40px;
}
.post-date {
    background: #0bd;
    border-radius: 50%;
    color: #fff;
    width: 100px;
    height: 100px;
    font-size: 1.625rem;
    text-align: center;
    position: absolute;
    top: 0;
    padding-top: 10px;
}
.post-date span {
    font-size: 1rem;
    border-top: 1px rgba(255,255,255,.5) solid;
    padding-top: 6px;
    display: block;
    width: 60%;
    margin: 0 auto;
}
.post-title {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 2rem;
    font-weight: normal;
}
.post-title,
.post-cat {
    margin-left: 120px;
}
article img {
    margin-bottom: 20px;
}
article p {
    margin-bottom: 1rem;
}

/* サイドバー */
aside {
    width: 22%;
}
.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}
.sub-menu li {
    border-bottom: 1px #ddd solid;
}
.sub-menu a {
    color: #432;
    padding: 10px;
    display: block;
}
.sub-menu a:hover {
    color: #0bd;
}
aside p {
    padding: 12px 10px;
}

/* Business
------------------------------- */
#business {
    background-image: url(../image/business-bg0.jpg);
/*  height: 620px;      min-height: 100vh; 640-->620*/
    min-height: 90vh;  /*  height: 620px;         */  
}
.business-content {
    max-width: 560px;     /* 560px  */
    margin-top: 5%;
}
.business-content .page-title {
    text-align: center;
}
.business-content p {
    font-size: 1.125rem;
    margin: 0 0 0; 

}
.business-item{
    position: relative;
    text-align: center;
}
.business-item h2{
      position: absolute;
      color: #fff;
      font-size: 1.8rem;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: -moz-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
      background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
      background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
}
/*
@media screen and (max-width: 768px){
    .business-item p{
      font-size: 1.5rem;
      width: 100%;
    }
 } SP END*/

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
  text-align: center;        /*　gridの文字をセンタリング　*/
}

/* frontpage
------------------------------- */
#frontpage {
    background-image: url(../image/frontpage-bg0.jpg);
  /*  height: 620px;  height: 270px; */
    min-height: 90vh; 
}
.frontpage-content .page-title {
    text-align: center;
}

.frontpage-content {
    /*display: flex;
    justify-content: space-between;
    margin-bottom: 50px;　*/
    max-width: 800px;     /* 560px  */
    margin-top: 5%;
}

.frontpage-content p {
    font-size: 1.125rem;
    margin: 0 0 0; 
}

/* aboutbf
------------------------------- */
#aboutbf {
    background-image: url(../image/aboutbf-bg0.jpg);
  /*  height: 620px;  height: 270px; */
    min-height: 90vh; 
}
.aboutbf-content .page-title {
    text-align: center;
}

.aboutbf-content {
    /*display: flex;
    justify-content: space-between;
    margin-bottom: 50px;　*/
    max-width: 800px;     /* 560px  */
    margin-top: 5%;
}

.aboutbf-content p {
    font-size: 1.125rem;
    margin: 0 0 0; 
}

/* CONTACT
------------------------------- */
#contact {
    background-image: url(../image/contact-bg0.jpg);
    /* height: 620px;      /* min-height: 100vh; 270 -> 620*/
    min-height: 90vh;    
}
.contact-content {
    max-width: 800px;     /* 560px  */
    margin-top: 5%;
}
.contact-content .page-title {
    text-align: center;
}
.contact-content p {
    font-size: 1.125rem;
    margin: 0 0 0; 
}

/* 店舗情報・地図 */
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 30px;
}
.sns-box {
    width: 30%;
}
/* ナビゲーション       移植*/
nav {
	font-size: 0.78rem;
	/* background: #000000; */
}
@media screen and (min-width: 768px) {
	nav {
		font-size: 1rem;
	}
}
.nav-container {   /*ここでモバイルサイズのメニューの表示を設定する*/
	position: absolute;
	top: 62px; /* 上からの位置指定 */
	right: 0%;/* 右からの位置指定 */
	z-index: 20;
	margin: 0;
	padding: 0;/* 余白指定 */
	width: 140px;  /* 幅指定 */
	/*background: #638a30;*/
	/* 	box-shadow: 0px 5px 5px  rgba(0,0,0,0.4); */
}

@media screen and (min-width: 768px) {
	.nav-container {
		position: relative;
		top: 0;
		left: 0;
		padding: 0 20px 0 20px;
		width: 100%;
		background: none;
		box-shadow: none;
	}

}

/*　*/

/* フッター
------------------------------- */
footer {
    background: #996600;
    text-align: center;
    padding: 26px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}

/* モバイル版
------------------------------- */
@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }
    .page-header {
        flex-direction: column;
        align-items: center;
    }
/* スマホ対応（メディアクエリ） */

    body {
        padding: 10px;
    }

    main {
        padding: 20px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.3em;
    }
/* ここまでを追加　　　*/
    /* HEADER */
    .main-nav {
        display:block;
        list-style: none;   /*リストマーカー無し*/
        margin: 0;
        padding: 0;
    }
    .main-nav li a {
        /*display: block;*/
        padding: 5px 5px; /*        padding: 15px 20px;*/
        border-bottom: 1px solid #8bb15a;
        text-decoration: none;
        line-height: 100%; 
        color: #ffffff;
        font-size: 0.75em;       /* 20250930 */        
    }
    .main-nav li a:hover,
    .main-nav li a.current {
        background: #8bb15a;
        color: #ffffff;
    }
    /* HOME */
    .home-content {
        margin-top: 20%;
    }

    /* NEWS */
    .news-content {
        flex-direction: column;
    }
    #news .page-title {
        margin-top: 30px;
    }
    article,
    aside {
        width: 100%;
    }
    aside {
        margin-top: 60px;
    }
    .post-info {
        margin-bottom: 5px; /*    margin-bottom: 30px;*/
    }
    .post-date {
        width: 70px;
        height: 70px;
        font-size: 1rem;
    }
    .post-date span {
        font-size: 0.875rem;
        padding-top: 2px;
    }
    .post-title {
        font-size: 1.375rem;
    }
    .post-cat {
        font-size: 0.875rem;
        margin-top: 10px;
    }
    .post-title,
    .post-cat {
        margin-left: 80px;
    }

    /* business */
    .business-content {
/*        margin-top: 20%; */
    }
    .business-content .page-title {
        text-align: center;
    }
    .business-content p {
        font-size: 1.125rem;
        margin: 0 0 0; 
    
    }
    .business-item{
        position: relative;
        text-align: center;
    }
    .business-item h2{
          position: absolute;
          color: #fff;
          font-size: 1.8rem;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background: -moz-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
          background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
          background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.05));
    }

    /* CONTACT */
    #contact .page-title {
        text-align: center;
    }

    .contact-content p {
        font-size: 1.125rem;
        margin: 0 0 0; 
    
    }

    /* フォーム */
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /* 店舗情報・地図 / SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
}
/* メインコンテンツレイアウト部分 */
.main-content { }
.main-content-container {
	padding: 0 0 40px 0;
	background: #ffffff;
}
.keyvisual {
	font-size: 0;
}
.keyvisual img {
	width: 100%;
}
.maincopy {
	margin: 0;
	padding: 40px 20px 0 20px;
	text-align: center;
	font-size: 1.5rem;	
}

/* ========== Javascript用CSS ========== */
/* ナビゲーションを最初は非表示。 */
#js-slidemenu {
	display: none;
}
/* パソコン向けではナビゲーションを常に表示 */
@media screen and (min-width: 768px) {
	#js-slidemenu {
		display: block !important; 
	}
}
/* ナビゲーションが開いたときに画面を暗くする処理のためのCSS */
.js-slidemenu-effect {
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.4;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}