@charset "utf-8";

  @charset "utf-8";
/****************************************
		1. 基本設定 
*****************************************/

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Reset　ブラウザー固有のスタイルをリセットします↓　*/
body,div,dl,dt,dd,
ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
↓YUI3 CSS Fonts　フォントサイズを相対指定する↓*/


/*---↓リンクに対する共通設定↓---*/
*{
	margin:0;
	padding:0;
	line-height:1.5;
	list-style:none;
}
/*アンダーtopボタン*/
.pagetop {
	position: fixed;
	bottom: -200px;
	right: 20px;
	z-index:9999;
}
.pagetop a {
	display: block;
	width: 86px;
	height: 110px;
}

img{
	border:none;
}
a, a:link,/*未訪問のリンクを指定*/
a:visited,/*訪問済みのリンクを指定*/
a:hover,/*マウスオーバーした時のリンク部分を指定*/
a:active,/*クリック時のリンク部分を指定*/
a{
	text-decoration:none;
}
html{
	overflow-x:hidden;
}
/* clearfix
----------------------------------------------------*/
.clearfix{ /zoom: 1; }
.clearfix:after{ content: ''; display: block; clear: both; }
/* box-sizing
----------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/*送信ボタン*/
input[type="submit"] {
  -webkit-appearance: none;
}
input[type="reset"] {
  -webkit-appearance: none;
}




/* CSS Document */
/* =========================================================
   BODY Background (Responsive)
   PC: bg.jpg
   SP: sp_bg.jpg
   ========================================================= */

/* 調整用（必要なら変更） */
:root{
  --bg-overlay: rgba(0,0,0,0); /* 文字の見やすさ用 */
  --bg-position: center top;
}
body{
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: #f9f6ed;
}
/* --- 修正版 CSS --- */

.fixed-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 100%より100vhの方が安定します */
  height: 100dvh;
  background-color: #f0f0f0; /* 画像が読み込まれるまでの予備色（サイトに合う色に） */
  background-image: url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* スマホ用の設定を追加 */
@media screen and (max-width: 768px) {
  .fixed-background {
    background-image: url('../img/sp_bg.jpg'); /* スマホ用画像に切り替え */
    /* スマホでスクロール時にガタつく場合は以下を試してください */
    height: -webkit-fill-available; 
  }
}
.sp{
  display: none;
}





/*ロケットスクロールOUTボタン*/
@keyframes scrollout-top {
    from {
        bottom: 1em;
    }
    to {
        bottom: 100%;
    }
}

.scrollout {
    position: fixed;
	z-index: 500;
    display: block;
    bottom: -10em;
    right: 2em;
    width: 5em;
    transition: bottom 500ms cubic-bezier(0.105, 0.295, 0.400, 1.275) 0ms;
}

.scrollout-ready {
    bottom: 1em;
}

.scrollout img {
    width: 150%;
}

.scrollout.scrollout-active .scrollout-inactive-content,
.scrollout:not(.scrollout-active):active .scrollout-inactive-content,
.scrollout:not(.scrollout-active):not(:active) .scrollout-active-content {
    display: none;
}
/*　ここまでロケットスクロールOUTボタン*/


/* =============================
   スマホ用 ロケット縮小
============================= */
@media (max-width: 767px){
  .scrollout{
    right: 0.01em;   /* 少し内側に */
    width: 6em;   /* 全体も少し小さく */
  }

  .scrollout img{
    width: 100%;    /* 150% → 100%に */
  }
}
/* =============================
   Header base
============================= */
.site-header{
  width: 100%;
  background: #FFF;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.header-inner{
  height: 95px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 14px;
}
/* =============================
   Header
============================= */

/* PC基準 */
.site-header{
  height: 100px;
}

/* =============================
   スマホ固定ヘッダー
============================= */
@media (max-width: 767px){

  .site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;

    z-index: 9999;
    transition: transform 300ms ease;
  }

  /* 隠すとき */
  .site-header.header-hide{
    transform: translateY(-100%);
  }

  /* 表示状態 */
  .site-header.header-show{
    transform: translateY(0);
  }
  .header-inner{
    height: 70px;
  }
}


/* =============================
   Logo Responsive
============================= */

.site-logo{
  width: 75%;
  margin: 0;
  line-height: 1;
}

/* 共通 */
.site-logo a{
  display: inline-flex;
  align-items: center;
}

/* 画像 */
.site-logo img{
  height: clamp(42px, 5vw, 58px);
  width: auto;
  display: block;
}


/* =============================
   PC（768px以上）
============================= */
@media (min-width: 768px){
  .site-logo a{
    height: 110px;   /* header高さに合わせる */
  }

  .site-logo img{
    height: clamp(50px, 4.5vw, 68px);
  }
}


/* =============================
   スマホ（767px以下）
============================= */
@media (max-width: 767px){
  .site-logo{
    width: 75%;
  }
  .site-logo a{
    width: 100%;
  }

  .site-logo img{
    width: 100%;
    height: auto;
  }
}


/* =============================
   Pop Nursery Nav (PC + SP)
   - Hover: #f9d3ce
   - Mobile: 2 columns, big tap targets
============================= */

/* ナビ全体 */
.site-nav{ flex: 1 1 auto; min-width: 0; }
.site-nav .nav_btn{
  display: none;
}
/* ul */
.nav-list{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.site-nav input{
  position: absolute;
  bottom: 1000%;
}
/* a（ボタンっぽく） */
.nav-list a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  text-decoration: none;
  color: #5a3a36;            /* やさしい濃いめブラウン */
  background: #fff;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  /* “ステッカー感” */
  border: 2px solid rgba(90,58,54,0.18);
  box-shadow: 0 6px 0 rgba(90,58,54,0.14);
  transform: translateY(0);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.nav-list a::before{
  content: "";
  position: absolute;
  top: -8px;
  right: 14px;
  width: 14px;
  height: 18px;

  background: linear-gradient(
    135deg,
    #b6e26d 0%,
    #7fc242 100%
  );

  border-radius: 0 100% 0 100%;
  transform: rotate(-35deg) scale(0);
  transform-origin: bottom right;

  box-shadow: 0 2px 4px rgba(0,0,0,0.15);

  transition: transform 200ms ease;
}

@media (hover: hover){
  .nav-list a:hover::before{
    transform: rotate(-35deg) scale(1);
  }
}

.nav-list a::before{
  content: "";
  position: absolute;
  top: -8px;
  left: 0px;
  width: 14px;
  height: 18px;
  background: linear-gradient(
    135deg,
    #b6e26d 0%,
    #7fc242 100%
  );
  border-radius: 0 100% 0 100%;
  transform: rotate(-35deg) scale(0);
  transform-origin: bottom right;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 200ms ease;
}

@media (hover: hover){
  .nav-list a:hover::before{
    transform: rotate(-35deg) scale(1);
  }
}



/* ホバー演出（PCのみ） */
@media (hover: hover){
  .nav-list a:hover{
    background: #FB0000;                      /* 指定色 */
    border-color: rgba(153,0,51,0.8);
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 10px 0 rgba(90,58,54,0.12);
  }
  .nav-list a:hover::after{
    transform: scale(1);
  }
}
/* タップ（SPでも効く） */
.nav-list a:active{
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(90,58,54,0.12);
}
/* CTA（任意）：さらに目立つ“ポップボタン” */
.nav-cta{
  background: #111;
  color: #fff !important;
  border-color: rgba(17,17,17,0.12);
  box-shadow: 0 6px 0 rgba(17,17,17,0.18);
}
/* ホバー演出（PCのみ） */
@media (hover: hover){
  .nav-list a:hover{
    background: #FB0000;                      /* 指定色 */
    color: #fff;                           /* ← 追加 */
    border-color: rgba(153,0,51,0.8);
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 10px 0 rgba(90,58,54,0.12);
  }
}


/* タブレット */
@media (min-width: 768px) and (max-width: 1023px){
  .header-inner{
    position: relative;
  }
  .site-nav .nav_btn{
    display: block;
    width: 40px;
    aspect-ratio: 3/2;
    margin: 0 0 0 auto;
    position: relative;
  }
  .site-nav .nav_btn::before{
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #FB0000;
    position: absolute;
    bottom: 0;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn::before{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: rotate(45deg);
  }
  .site-nav .nav_btn::after{
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #7fc242;
    position: absolute;
    top: 0;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn::after{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: rotate(-45deg);
  }
  .site-nav .nav_btn span{
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #FB0000;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn span{
    opacity: 0;
  }

  .site-nav input:checked ~ .nav-list{
    right: 2%;
  }

  .nav-list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    position: absolute;
    top: 120%;
    right: -100%;
    transition: 0.3s all;
  }

  .nav-list li{
    flex: 0 0 calc(50% - 5px); /* 2列 */
  }

  .nav-list a{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;

    /* モバイルは“可愛さ”優先で少し軽く */
    box-shadow: 0 5px 0 rgba(90,58,54,0.12);
  }

  .nav-list a::after{
    right: 8px;
    top: -5px;
  }
	
}





/* =============================
   Mobile (<= 767px)
   - 2列の“押しやすい”丸ボタン
   - ヘッダーが狭い場合に備え、ナビは行折り返しOK
============================= */
@media (max-width: 767px){
  .header-inner{
    position: relative;
  }
  .site-nav .nav_btn{
    display: block;
    width: 40px;
    aspect-ratio: 3/2;
    margin: 0 0 0 auto;
    position: relative;
  }
  .site-nav .nav_btn::before{
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #FB0000;
    position: absolute;
    bottom: 0;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn::before{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: rotate(45deg);
  }
  .site-nav .nav_btn::after{
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #7fc242;
    position: absolute;
    top: 0;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn::after{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: rotate(-45deg);
  }
  .site-nav .nav_btn span{
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #FB0000;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
    transition: 0.3s all;
  }
  .site-nav input:checked ~ .nav_btn span{
    opacity: 0;
  }

  .site-nav input:checked ~ .nav-list{
    right: 2%;
  }

  .nav-list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    position: absolute;
    top: 120%;
    right: -100%;
    transition: 0.3s all;
  }

  .nav-list li{
    flex: 0 0 calc(50% - 5px); /* 2列 */
  }

  .nav-list a{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;

    /* モバイルは“可愛さ”優先で少し軽く */
    box-shadow: 0 5px 0 rgba(90,58,54,0.12);
  }

  .nav-list a::after{
    right: 8px;
    top: -5px;
  }
}

/* さらに小さい端末（<= 360px） */
@media (max-width: 360px){
  .nav-list li{
    flex: 0 0 100%;           /* 1列にして押しやすく */
  }
}



/* =============================
   Footer background stage
============================= */
.footer_bk{
  width: 100%;
  position: relative;
  overflow: hidden;

  background-image: url(../img/footer_bk.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

/* PC */
@media (min-width: 1024px){
  .footer_bk{ height: 293px; }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px){
  .footer_bk{
    height: 220px;
    background-position: center bottom;
  }
}

/* スマホ（背景切替） */
@media (max-width: 767px){
  .footer_bk{
    height: 180px;
    background-image: url(../img/footer_bf_sp.png);
    background-size: cover;
    background-position: center bottom;
  }
}



/* =============================
   羊（共通）
============================= */
.sheep{ 
  position: absolute;
  left: 0;
  bottom: clamp(6px, 2vh, 20px);
  width: clamp(28px, 5vw, 80px);  /* PC基準を少し小さく */
  height: auto;

  pointer-events: none;
  user-select: none;
  z-index: 2;

  transform: translateX(0);
  will-change: left, transform;
  }


/* =============================
   タブレット
============================= */
@media (max-width: 1023px){
  .sheep{
    width: clamp(40px, 10vw, 60px);
  }
}


/* =============================
   スマホ（かなり小さく）
============================= */
@media (max-width: 767px){
  .sheep{
    width: clamp(2px, 5vw, 55px);  /* ← かなり小さめ */
    bottom: clamp(4px, 1.5vh, 12px); /* 地面も少し下げる */
  }
}


/*footer{
	width: 100%;
	height: 600px;
	background: #afd15c;
}

*//* =============================
   Footer Responsive
============================= */
footer{
  background: #afd15c;                 /* フッター背景（青緑系）※好みで変更OK */
  color: #fff;                         /* 文字色は白 */
  text-align: center;
  padding-top: 50px;
}

/* ロゴ */
.footre_logo{
  margin: 0 auto clamp(14px, 3vw, 22px);
}

.footre_logo img{
  width: min(350px, 40vw);             /* 正方形ロゴをコンパクトに */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 住所・TELなど */
.footer_text{
  width: min(92%, 900px);
  margin: 0 auto;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  background: #8bb615;  /* うっすら白で読みやすく */
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 18px;
  padding: clamp(14px, 3vw, 22px);
  box-sizing: border-box;
}

/* コピーライト（濃い緑の帯） */
.copy{
　width: 100%;
  margin: clamp(18px, 4vw, 28px) 0 0;
  padding: 5px 10px;
  background: #9b846e;                 /* 濃い緑 */
  color: #fff;                         /* 白文字 */
  font-size: 77%;
  letter-spacing: 2px;
}

/* =============================
   Tablet
============================= */
@media (max-width: 1023px){
  .footre_logo img{
    width: min(200px, 38vw);
  }
}

/* =============================
   Mobile
============================= */
@media (max-width: 767px){
  footer{
    padding-top: 28px;
  }

  .footre_logo img{
    width: min(200px, 50vw);
  }

  .footer_text{
    font-size: 14px;
    line-height: 1.85;
    border-radius: 16px;
  }

  .copy{
    padding: 12px 10px;
  }
}