@charset "utf-8";
/*--------------------------------------------------------------------

ブレイクpoint　1100px
font-size 320-640

--------------------------------------------------------------------*/	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
box-sizing: border-box;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   font-style: normal; list-style: none; font-weight:400;}

.grecaptcha-badge {
    visibility: hidden;
}
   
a{text-decoration: none; color:#cc8a89 ; transition: 0.3s}
a:hover{ color:#e6a6a5; }
img{vertical-align: bottom; height: auto}


body{color: #5d5d5d; background:#fff; letter-spacing: 1px;
  font-family: "Shippori Mincho B1", serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;}
.min{ font-family: "Shippori Mincho B1", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;}
.goshi{  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal; }
.en {font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;}

.imp{font-weight: 700}
.red{color: #e6a6a5}
.bggold{background:#afa68f !important }
.gray{color: #5d5d5d}

.tate { -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      text-orientation: upright; }

.line{display: inline ; background: linear-gradient(transparent 50%, rgba(232, 224, 204, 1) 50%); font-weight: 600}

.movie_blk {
    width: 100%;
    height: 100vh;
    position:fixed;
}
.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left:0;
}


/* ボタン　*/
.sqya{color: #5d5d5d;padding-bottom: 20px;
  background:
    /* 1層目：初期表示される下線（#5d5d5d） */
    linear-gradient(
      to right,
      #5d5d5d,
      #5d5d5d
    ),
    /* 2層目：ホバー時に左から現れる下線（#ccc） */
    linear-gradient(
      to right,
      #ccc,
      #ccc
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

.sqya:hover {color: #ccc;
  background-size: 0 1px, 100% 1px;
}
.sqya img{width: 7px ;vertical-align: middle}

.details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	text-align: center; font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/
.details .b-type1 {
	position: relative;
	border-radius: 8px;
}

.details .image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	vertical-align: middle;
}

.details .text {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 16px 24px;
	border-radius: 8px;
	color: white;
	text-align: left;
	background: rgba(220,102,136,.9);
}
.details .text dt {
	justify-self: flex-start;
	align-self: flex-end; text-align: center;
    font-size: clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem)}/*18-24*/

.details .text dd {
	margin: .5em 0 0;
	line-break: strict;
	overflow-wrap: break-word;
}
.details .text .price {
	justify-self: flex-end;
}

/* :::::: type2 :::::: */
.details .b-type1 img,
.details .b-type1 dl {
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.details .b-type1:hover img {
	transform: rotateX(180deg);
}
.details .b-type1 dl {
	background-color: #bcb282;
}
.details .b-type1:not(:hover) dl {
	transform: rotateX(-180deg);
}

.btn-container {
  text-align: center;
}


.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/* アニメ　*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*--------------------------------------------------------------------

フェードイン
--------------------------------------------------------------------*/
.fade-in {
    animation-name: fadeIn; animation-duration:3s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0,-20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,20%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}
.fadeInUp {
    animation-name: fadeInUp; animation-duration:3s;
}

@keyframes nana {
  0% {
    transform: rotate(0deg);
  }
  40% {
    left: 1%;   /* 右方向へ移動 */
    top: -60px;    /* 上方向へ移動 */
    transform: rotate(-8deg);  /* 8度左へ回転 */
  }
  50% {
    left: 2%;   /* 右方向へ移動 */
    top: -50px;    /* 上方向へ移動 */
    transform: rotate(-2deg);  /* 8度左へ回転 */
  }
  60% {
    left:3%;   /* 右方向へ移動 */
    top: -60px;    /* 上方向へ移動 */
    transform: rotate(-6deg);  /* 8度左へ回転 */
  }
  70% {
    left: 3%;   /* 右方向へ移動 */
    top: -50px;    /* 上方向へ移動 */
    transform: rotate(-0deg);  /* 8度左へ回転 */
  }
  80% {
    left: 4%;   /* 右方向へ移動 */
    top: -55px;    /* 上方向へ移動 */
    transform: rotate(-2deg);  /* 8度左へ回転 */
  }
  100% {
    left: 4%;   /* 右方向へ移動 */
    top: -50px;    /* 上方向へ移動 */
    transform: rotate(0deg);  /* 8度左へ回転 */
  }
}
.nana {
    animation: nana 1s ease-out forwards;
}

/* アニメーションの舞台となる親要素（1/3サイズ） */
.waka {
  position: relative;
  width: 116px;    /* wa.pngの表示幅 */
  height: 116px; /* wa.pngの表示高さ */
  margin: 0 auto;  /* 必要に応じて中央寄せ */
}

/* 子要素のimgを共通で絶対配置に */
.waka img {
  position: absolute;
}

/* 【回転する画像】周りを回る円の画像 (wa.png)（1/3サイズ） */
.waka1 {
  width: 116px;    /* 表示サイズを指定 */
  height: 116px; /* 表示サイズを指定 */
  top: 0;
  left: 0;
  z-index: 1; /* sizu.pngの下に配置 */
  
  /* --- アニメーションの設定 --- */
  animation: rotation_circle 20s linear infinite;
  
  /* 回転の中心を画像の中央に設定 */
  transform-origin: center center;
}

/* 【中心の画像】雫の画像 (sizu.png)（1/3サイズで中央配置） */
.waka2 {
  width: 28px;  /* 表示サイズを指定 */
  height: 34px;  /* 表示サイズを指定 */
  
  /* 計算した中央配置用の位置 */
  top: 41.16px;
  left: 44px;
  z-index: 2; /* wa.pngの上に配置 */
}



a .bsen::after {display:inline-block;
  background-color: #fff; /* 下線の色 */
  bottom: 10px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 1px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
a .bsen:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

/* --- アニメーションの定義 --- */
@keyframes rotation_circle {
  0% {
    transform: rotate(0deg); /* 開始：0度 */
  }
  100% {
    transform: rotate(360deg); /* 終了：360度（1回転） */
  }
}
/*--------------------------------------------------------------------
右から左へスライドイン
--------------------------------------------------------------------*/	
.slide-in-right {
	-webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/*--------------------------------------------------------------------
にじみ
--------------------------------------------------------------------*/	
.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  }

.fuki{  display: flex;
  justify-content: center;
  align-items: flex-end;}
.fuki::before,.fuki::after {
  width: 1px;
  height: 28px;
  content: "";
  background-color: #666;
}

.fuki::before {
  margin-right: 0.5em;
  transform: rotate(-30deg);
}

.fuki::after {
  margin-left: 0.5em;
  transform: rotate(30deg);
}

.fukisya{position: relative}
.fukisya::before,
.fukisya::after {
    position: absolute;
    top: 0;
    height: 1.8rem;
    content: '';
}

.fukisya::before {
    border-left: solid 1px #ccc;
    left: 7%;
    transform: rotate(-30deg);
}

.fukisya::after {
    border-right: solid 1px #ccc;
    right:7%;
    transform: rotate(30deg);
}


body{ line-height:1.8; font-size:clamp(0.875rem, 0.625rem + 1.25vw, 1.125rem)}/*14-18*/
.bgfff{background: #fff}
.globalMenuSp a.w50{width: 47% ; display: inline-block !important}

.contBoxFlaxr{ max-width: 560px; margin: 0px auto 0; position: relative; z-index: 3}

.scroll-container {z-index: -1;
  width: 100%;
  overflow: hidden;   /* はみ出た部分を隠す */
  position: absolute; top: 0
}

.scroll-content {
  display: flex;         /* 画像を横並びに配置 */
  white-space: nowrap;   /* 改行を防止 */
  animation: scroll 60s linear infinite;
}

.scroll-item {
  width: 1240px;  /* 幅を1322pxに固定 */
  height: auto;   /* アスペクト比を保つ */
  flex-shrink: 0; /* 画像サイズが縮まらないように */
  /* もし画像間に余白が不要なら、marginは不要です */
  /* margin-right: 0; */
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.kijiBox { font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}
.kijiBox .hh1{margin-bottom: 20px; position: relative;
 line-height: 1.3;
  padding: 20px 10px 20px;
  min-width: 120px;
  max-width: 100%;
  background:url("/assets/img/bg2.png") repeat;
}

.kijiBox .hh1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0d3d5;
}
.kijiBox .hh2{margin-bottom: 15px; padding: .5em .7em; line-height: 1.3; 
    border: 2px solid #e0d3d5;
    box-shadow: 5px 5px #e0d3d5;
 background: #fff}
    
.kijiBox .well2 {padding:1em 1.5em; line-height:2; border:1px dashed #dfa6a5; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); }
.kijiBox .well3{
	padding:1em 1.5em;
background:url("/assets/img/bg2.png") repeat;
	position:relative;
}
.kijiBox .well3:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #f1eee8 #f1eee8 #e2d6ca;
}
.kijiBox a.q_button{display: block; box-shadow: 0 0 8px #80747d; padding:15px 20px; border-radius:10px; background:#a9a17a; color:#fff !important} 
.kijiBox a.q_button:hover{ box-shadow: none} 

.kijiBox ul li{list-style: disc; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox ol li{list-style-type: decimal; margin-left: 20px; line-height: 1.7; margin-bottom: 10px}
.kijiBox table,.kijiBox td,.kijiBox th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }

.kijiBox strong{font-weight: 800}


.iconlist{display: flex; justify-content: space-between; flex-flow: wrap; text-align: center; padding: 40px 20% 0; font-size:clamp(0.813rem, 0.625rem + 0.94vw, 1rem)}/*13-16*/
.iconlist li:first-child{width: 100%; padding-bottom: 10px}
.iconlist li{width: 20%}
.iconlist li a{color: #5d5d5d; position: relative}
.iconlist li a .bsen::after{background-color: #5d5d5d; bottom: -10px}
.iconlist li img{max-width:45px }

.priv{text-align: center; color: #fff; margin: 40px 0 0}
.priv a{display: block; margin-bottom: 10px; font-size: 13px; color: #5d5d5d}
.priv a:hover{color: #e6a6a5;}
.copy{padding:30px 0 130px; text-align: center; font-size: 11px}

header a h1{ color: #5d5d5d ; transition: .3s}
header a:hover h1{color: #e6a6a5;}

.kasou .kijiTitle h2{padding: 0 5% 50px 8%; font-size: clamp(1.75rem, 0.875rem + 4.38vw, 2.625rem) }/*28-42*/

.asbgfff{background: #fff ; padding-bottom: 70px}
.assoBox{text-align: center; background: url("../img/bg.png") repeat; background-size:25px 25px; border-radius: 560px; padding: 50px 0 ; margin: 0 8% }
.assoBox .nagare{margin:0 -7%}

.assoBox h2 span{display: block; font-size:clamp(1.25rem, 0.813rem + 2.19vw, 1.688rem)}/*20-27*/
.assoBox .text{padding-bottom: 20px; font-size:clamp(1.25rem, 0.813rem + 2.19vw, 1.688rem)}/*20-27*/
.assoBox .booklist{background: #fff; padding: 30px 0}
.assoBox .booklist h3{margin-bottom: 20px; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.assoBox .booklist li {padding: 0 10px; font-size: 12px; text-align: left; letter-spacing: normal}
.assoBox .booklist li img{margin-bottom: 10px}
.assoBox .text01{margin: 20px 5% 70px; text-align: left ; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 0.938rem)}/*14-15*/
.assoBox .text01 a{padding: 20px 30px 20px 0; display: inline-block}
.assoBox .fuki{letter-spacing: -2px; padding-bottom: 20px; font-size:clamp(1.25rem, 0.813rem + 2.19vw, 1.688rem)}/*20-27*/
.assoBox dl{display: flex; justify-content: space-between; margin: 0 5% 50px 0}
.assoBox dt{width: 45%}
.assoBox dt img{border-radius: 0 10px 10px 0px}
.assoBox dd{width: 57%; text-align: left}
.assoBox dd h3{letter-spacing: normal; margin-top: -5px; text-align: center}
.assoBox dd h3 span{display: block; font-size:clamp(1.125rem, 0.75rem + 1.88vw, 1.5rem) }/*18-24*/
.assoBox dd a{margin-left: 20px}
.assoBox dd a img{width:25px }
.assoBox .sizuku{width:42px; margin-bottom: 20px }

.contbb{text-align: center; position: relative; }
.contbb a{box-shadow: 0 0 8px #333333; white-space: nowrap; display: block; padding: 20px 50px; border-radius: 10px; transform: translateX(-50%); left: 50%; z-index: 55; line-height: 1.4; position: absolute; bottom: 20%; background: #a9a17a; color: #fff; font-size: clamp(1.625rem, 1rem + 3.13vw, 2.25rem)}/*26-36*/
.contbb a:hover{box-shadow:none;}


@media screen and (max-width: 639px) {
body{overflow-x: hidden; font-size: 16px}
img{width: 100%; height: auto ; }

.assoBox dd{margin-top: -4px;}
.assoBox dd a{font-size: 13px;}
.assoBox dd a img { width: 15px;}

}



@media screen and (min-width: 640px) {

main{width: 100%;}
img{height: auto ; max-width: 100%}


.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.assoBox dl{display: flex; justify-content: space-between; margin: 0 5% 90px 0}
.assoBox dd h3{padding-bottom: 40px}
.assoBox .sizuku{margin-bottom: 50px;}


}


@media screen and (min-width: 740px) {
.kotei{left: 50%; margin-left: -350px !important}
}

@media screen and (max-width: 1099px) {
.smtno{display: none !important}

.kasou .h1box{position: relative; margin: 0 auto 30px 8%; padding-top: 40px}
.kasou .h1box a {display: block; width: 68%}
.kasou .h1box a img{width:100%; max-width:340px; margin-bottom: 10px ;padding-right: 20px }
.kasou .h1box h1 span{letter-spacing: 2px; display: inline-block; padding-left: 10px}


/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9000;
  right : 3%;
  top   : 15px;
  width : 80px;
  height:101px;
  cursor: pointer;
  text-align: center;
  background: url("../img/shi.png") no-repeat ; background-size: 80px 101px;
}
.hamburger:after{  content: "MENU"; color: #FFF; font-size: 10px; font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300; position: absolute; bottom: 12px; left:26px; letter-spacing: 2px}

.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 3px ;
  right    : 18px;
  background : #fff; border-radius: 2px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 42px;
  width: 40px;
}
.hamburger span:nth-child(2) {
  top: 52px;
  width: 40px;
  animation-delay: 0.33s;
}
.hamburger span:nth-child(3) {
  top: 62px;
  width: 40px;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {width:40px;
 transform: translate(0, 15px) rotate(-45deg); animation: unset;
}

.hamburger.active span:nth-child(2){
animation: unset;opacity: 0; 
}
.hamburger.active span:nth-child(3) {width:40px;
  transform: translate(0, -5px) rotate(45deg);
  animation: unset;
}

.globalMenuSp .logosmt{width: 100px; margin: 30px auto 0;}
/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
  transform: translateY(0);
/*  transform: scale(1,1);*/
}
/* メニュー背景　*/
nav.globalMenuSp {
position: fixed;
  z-index : 1000;
  top  : 0;
  left : 0;
  color: #fff;
  width: 100%;
  background: url("../img/bg3.png") repeat;
  transform: translateY(-100%);
  transition: all 0.6s;
  
  /* 【修正】高さの指定（古いブラウザ対策 ＋ iOS対策） */
  height: 100vh;
  height: 100dvh; 

  /* 【修正】Flexboxを正しく適用し、縦並びにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 画面が小さい時上部が隠れないよう、中央寄せではなく上揃えをベースにする */
  justify-content: flex-start; 
  /* 画面に収まらない場合はスクロールできるようにする */
  overflow-y: auto; 
}


nav.globalMenuSp ul {  
  text-align: center;
  margin: 0;
  padding: 0 2% 40px; /* 下部に余白を設ける */
  width: 100%;
  
  /* 【削除】以下は被る原因かつスクロール不可になるため削除します */
  /* position: absolute; */
  /* height: 750px; */
  /* top: calc((100% - 750px) / 2); */
  
  /* 【追加】要素が少ない場合は上下中央寄せに見えるようにするテクニック */
  margin-top: auto;
  margin-bottom: auto;
}
nav.globalMenuSp ul a{color: #fff ; display: block; line-height: 2.8}

.globalMenuSp .serviceMenu {
  border: 1px solid #fff;
  border-top: none;
  margin: 20px 0;
  padding: 20px 0;
  position: relative;
}

.globalMenuSp .serviceMenu .menuTit {
  position: absolute;
  top: -11px;  /* テキストの高さに合わせて微調整してください */
  left: 0;     /* 左右の端にピッタリ合わせる */
  right: 0;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: clamp(0.688rem, 0.5rem + 0.94vw, 0.875rem);
}

.globalMenuSp .serviceMenu .menuTit span {
  display: inline-block;
  white-space: nowrap; /* 【解決1】テキストの改行を防ぐ */
  padding: 0 15px;     /* テキストと左右の線の間の余白（お好みで調整） */
}

.globalMenuSp .serviceMenu .menuTit::before,
.globalMenuSp .serviceMenu .menuTit::after {
  content: "";
  height: 1px;
  background-color: #fff;
  flex-grow: 1; /* 【解決2】左右の余白をすべて埋めるように線を伸ばす */
}



footer .globalMenuSp .serviceMenu {border: 1px solid #ccc; border-top: none}
footer .globalMenuSp .serviceMenu .menuTit::before,
footer .globalMenuSp .serviceMenu .menuTit::after {
  background-color: #ccc; /* 横線の色 */}
footer .globalMenuSp ul{text-align: center;  margin: 0 auto;
  padding: 80px 0 0;
  width: 90%;}

footer .pcmenuflex{ text-align: center;
  margin: 0;
  padding: 80px 5% 0;
}
footer .globalMenuSp ul a{color:#5d5d5d ; display: block; line-height: 2.8 ; font-size:clamp(0.813rem, 0.625rem + 0.94vw, 1rem)}/*13-16*/
footer .globalMenuSp ul a:hover{color:#e6a6a5; }

.globalMenuSp .serviceMenu .menuTit::before,
.globalMenuSp .serviceMenu .menuTit::after {
  background-color: #fff; /* 横線の色 */}



.kotei{display: flex; justify-content: space-between;  margin: 0 5%;
  position: fixed; line-height: 1;
  bottom: 5px; 
  color: #fff;
  cursor: pointer;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  z-index: 88; text-align: center; width: 90%; max-width: 700px;
    transform: translateY(100%); /* 下に隠す */
  transition: all 0.4s ease-in-out; /* スムーズなアニメーション */
}
.kotei a{color: #fff; display: block ; text-align: center; background: url("../img/bg3.png") repeat; transition: .3s; 
position: relative; border-radius: 5px; box-shadow: 0 0 8px #8e3339; }



.kotei li{width: 20% ;  border-radius: 10px ;line-height: 1.4; font-size: clamp(1rem, 0.75rem + 1.25vw, 1.25rem)}/*16-20*/
.kotei li a{padding: 10px 0; min-height: 50px }
.kotei li:first-child {width:55% }
.kotei li:last-child{width: 20%; font-size: 15px;line-height: 1.4 }
.kotei li:last-child a{padding: 15px 0 5px}
.kotei li:hover a{ box-shadow: none}
.kotei li img{width: 50px}
/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible; transform: translateY(0); /* 元の位置に戻す */
}

}


@media screen and (min-width: 1100px) {

.contBoxFlax{width: calc(100% - 10%); display: flex; justify-content: space-between;}
.contBoxFlaxl{width: calc(100% - 560px); padding:30px 0 0 9%; box-sizing: border-box}
.contBoxFlaxr{width: 560px; position: relative; z-index: 3; border: none }
.cont-right{position: fixed; right: 0; bottom: 0; width: 20%; height: 100vh}

.kasou .firstTitle{padding-top: 50px}

.pcno{display: none !important}

header{position: fixed; height: 100vh; z-index: 1 ; text-align: center ; width: calc(100% - 560px); max-width:350px }
header a{line-height: 2.2; display: block; color: #5d5d5d ; font-size:clamp(0.813rem, 0.01rem + 1.17vw, 1.031rem)}/*13-16.5 1100-1400*/
header a:hover{color:#e8aeb3 }

header h1 img{display: none}
header a span{ font-size: 13px}

.headr{position: absolute; top:0; width: 100%}
.headr .rec img{max-width: 155px; margin-bottom: 30px }

nav.globalMenuSp .serviceMenu {border-bottom: 1px solid #ccc; margin: 10px 0 20px; padding-bottom: 20px}
nav.globalMenuSp .serviceMenu .menuTit {display: flex; justify-content: center; align-items: center; margin-bottom: 10px; font-size:11px;  }
nav.globalMenuSp .serviceMenu .menuTit::before,
nav.globalMenuSp .serviceMenu .menuTit::after {
  background-color: #ccc; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 30%; /* 横線の長さ */
}
nav.globalMenuSp .serviceMenu .menuTit::before {
  margin-right: 10px; /* 文字との余白 */
}
nav.globalMenuSp .serviceMenu .menuTit::after {
  margin-left: 10px; /* 文字との余白 */
}

header .cachi{letter-spacing: 2px; position: absolute;top: 0; left: -10%; font-size: clamp(0.813rem, 0.125rem + 1vw, 1rem)}/*13-16 1100-1400*/
header .jeosLing {border: 1px solid #ccc ; padding: 0 20px; position: absolute; bottom: 10%; left: 0; text-align: left; font-size: clamp(0.688rem, 1vw, 0.875rem)}/*11-14 1100-1400*/

.scroll-container {z-index: -1;
  width: 100%;
  overflow: hidden;   /* はみ出た部分を隠す */
  position: fixed; bottom: 0; top: auto
}


.kotei{margin-left: 1%; margin-left: 0 !important; left: auto; 
  position: fixed; line-height: 1;
  bottom: 10%; right: 1%;
  color: #fff;
  cursor: pointer;
  z-index: 88; text-align: center; }
.kotei a{color: #fff; display: block ; padding: 15px 0 15px; text-align: center; background:#e6a6a5; border-radius: 5px ; transition: .3s; position: relative ; box-shadow: 0 0 5px #a6a6a6; width: 80px ; margin-bottom: 20px}

.kotei li:first-child  { -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      text-orientation: upright; }
.kotei li:first-child a{padding: 20px 17px 20px 0; box-sizing: border-box; letter-spacing: 2px; line-height: 1.4;}
.kotei li:last-child a{font-weight: 400 ; font-size: 14px; letter-spacing: 1px}
.kotei li.snsbox a{ background: none; box-shadow: none; margin: 0; padding: 0; margin-bottom: 20px; color: #212121; font-size: 12px}
.kotei li.snsbox a:nth-child(2) img , .kotei li.snsbox a:nth-child(3) img{width: 36px}
.kotei li.snsbox a:last-child{margin-bottom: 100px}
.kotei li.snsbox a span{display: block; padding-top: 8px}
.kotei li.snsbox a img{width: 40px ; filter: drop-shadow(3px 3px 3px #ccc)}
.kotei li a:hover {box-shadow: none }
.kotei .svgf {
        width: 22px;
        position: relative;
        left: auto; display: block; margin: 0 auto 5px;
        top: 0;
    }

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible; transform: translateY(0); /* 元の位置に戻す */
}

.copy{padding-bottom: 50px}

}

@media screen and (min-width: 1230px){
.contBoxFlaxl{padding-left:10% }
header {width: calc(85% - 560px);
        max-width: 400px;}
}

@media screen and (min-width: 1400px){
.contBoxFlaxl { padding: 30px 0 0 21%; }
header .cachi{left: -25%}
}

@media screen and (min-width: 1560px){
.contBoxFlaxr{margin: 0 ; position: absolute; left: 50%}
}