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

ブレイクpoint　640
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 {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   font-style: normal; list-style: none;}
a{text-decoration: none; color:#fe988d ; transition: 0.3s}
a:hover{ color:#c6a961; }
img{vertical-align: bottom; height: auto}

h1, h2, h3, h4, h5, h6{font-weight: 500; }

body{color: #674330;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal; background: #f9f3ed;
font-feature-settings: "pwid"; letter-spacing: 1px;
}
 body * { box-sizing : border-box; }

.goshi{  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal; }
.min{  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;}
.en {  font-family: "Aboreto", serif;
  font-weight: 400;
  font-style: normal;}

.imp{font-weight: 800}
.red{color: #dc0032}
.pink{color:#fe988d }
.green{color: #8bd4d4}
.gold{color: #a89469}
.yellow{color: #ffd648}

.tate { writing-mode: vertical-rl;  text-align: left;}

.line{display: inline ; background: linear-gradient(transparent 50%, rgba(252, 211, 117, 1) 50%); font-weight: 600}


/* ボタン　*/
.morebtn a {
  justify-content: center;
  color: #ffffff;
  border-radius: 20px;
  transition: 0.3s;
  box-shadow: 0px 0px 3px 2px rgba(219, 219, 219, 0.8);
  background-image: linear-gradient(90deg, rgba(74, 190, 212, 1), rgba(252, 211, 117, 1) 50%, rgba(244, 171, 170, 1));
  background-size: 200% 100%;
  background-position: 0% 0%;
  display: inline-block;
  padding: 0 20px;
  font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem); /*14-16*/
  transition: background-position 0.5s ease; /* 追加: 背景位置のアニメーション */
}

.morebtn a:hover {
  background-position: 100% 0%; /* マウスオーバー時に背景を右へ移動 */
  box-shadow: none;
}


.lrbox{ position: relative; text-align: left; font-size: 14px ; margin-left: 80px; margin-top: 10px}
.lrlr{  animation-timing-function: ease-in-out; display: inline-block;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  animation-name: anim_h; 
}

@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}


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

フェードイン
--------------------------------------------------------------------*/
.fade-in {
  animation: fadeIn 4s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 背景色が消えてから表示されるテキスト */
.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #4abed4 0%,#fcd375 50%,#f4abaa 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}

.mask-bg.is-animated {
  color: #674330
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}

/*--------------------------------------------------------------------

回転

--------------------------------------------------------------------*/
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}


.rotation2 {
  -webkit-animation: rotation2 5s ease-in-out forwards, fadeIn 3s ease-in-out forwards; /* Safari対応 */
  animation: rotation2 5s ease-in-out forwards, fadeIn 3s ease-in-out forwards;
  
}

@-webkit-keyframes rotation2 { /* Safari対応 */
  0% {
    -webkit-transform: rotateY(0deg); /* Safari対応 */
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg); /* Safari対応 */
    transform: rotateY(360deg);
  }
}

@keyframes rotation2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes fadeIn { /* Safari対応 */
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*--------------------------------------------------------------------

.kira

--------------------------------------------------------------------*/
.mokuflex{font-family: "Noto Sans JP", sans-serif; font-weight: 600}

.kiral{width:41px }
.kiras{width:26px }
.kiral{position: absolute; left: 10%; top: -40px}
.kiras{position: absolute; right: 30px; bottom: -20px}
/* 点滅 */
.onfn1 {animation: blinking 1.5s ease-in-out infinite alternate;}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.onfn2 {animation: blinking 1s ease-in-out infinite alternate;}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.maku{position: relative}
.maku .cl01{width:84px; position: absolute; left: 0; z-index: 2}
.maku .cl02{width:84px; position: absolute; right: 0; z-index: 2}

.sclo{position: relative}
.sclo .cl01{width:89px; position: absolute; top: 0; left: 0; z-index: 2}
.sclo .cl02{width:89px; position: absolute; top: 0; right: 0; z-index: 2}

.fadeInLeftBig  {
animation-name: fadeInLeftBig ; animation-fill-mode: forwards; animation-duration:3s;
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(230%);
-ms-transform: translateX(230%);
transform: translateX(230%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig2  {
animation-name: fadeInLeftBig2 ; animation-fill-mode: forwards; animation-duration:3s;
}
@keyframes fadeInLeftBig2 {
0% {
opacity: 0;
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.curved {background: url( "../img/maru.png") no-repeat top center; background-size: 100%}
.curved2 {background: url( "../img/maru2.png") no-repeat top center #fff; background-size: 100%}
/*--------------------------------------------------------------------

括弧

--------------------------------------------------------------------*/
.kattko{position: relative ;text-align: center; display: inline-block; padding: 5px 20px 8px}
.kattko::before,
.kattko::after {
    position: absolute;
    width: 95%;
    height: 20px;
    content: '';
}

.kattko::before {
    border-left: solid 1px;
    border-top: solid 1px;
    top: 0;
    left: 0;
}

.kattko::after {
    border-right: solid 1px;
    border-bottom: solid 1px;
    bottom: 0;
    right: 0;
}

.fukiwa{position: relative ; border-bottom: 1px solid #674330; padding: 10px 0; margin-bottom: 30px }
.fukiwa:before {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    height: 30px;
    width: 30px;
    border-radius: 180px;
    background-color:#fff;
    border:solid 1px #674330;
    content: "";
}
.fukiwa:after {
    position: absolute;
    top: 77%;
    left: 50%;
    transform: translateX(-50%);
    height: 18px;
    width: 32px;
    background-color:#fff;
    content: "";
}
.h2first .fukiwa:before{background-color:#f9f3ed;}
.h2first .fukiwa:after{background-color:#f9f3ed;}

.fukibo{ border-radius: 5px; display: inline-block; padding: 10px 20px;margin-bottom: 30px;
    border: 1px solid #674330;position: relative; font-size: clamp(1.625rem, 1.375rem + 1.25vw, 1.875rem)}/*26-30*/
.fukibo:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 20px;
    background-color: #f9f3ed;
    content: "";
}

.fukibo:after {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 1px;
    background-color: #674330;
    content: "";
}

.qabana{padding: 80px 8% 0 }
.qabana a{display: block}
.qabana a img{  filter: drop-shadow(3px 3px 3px #ccc);}
.qabana .morebtn{
top: -20px; z-index: 2; position: relative;
  justify-content: center;
  color: #ffffff;
  border-radius: 180px;
  transition: 0.3s;
  box-shadow: 0px 0px 3px 2px rgba(219, 219, 219, 0.8);
  background-image: linear-gradient(90deg, rgba(74, 190, 212, 1), rgba(252, 211, 117, 1) 50%, rgba(244, 171, 170, 1));
  background-size: 200% 100%;
  background-position: 0% 0%;
  display: inline-block;
  padding: 5px 50px;
  font-size:18px; 
  transition: background-position 0.5s ease; /* 追加: 背景位置のアニメーション */
}

.qabana a:hover .morebtn {
  background-position: 100% 0%; /* マウスオーバー時に背景を右へ移動 */
  box-shadow: none;
}



body{ line-height:2; font-size:clamp(0.875rem, 0.5rem + 1.88vw, 1.25rem)}/*13-20*/


.kijiBox .hh1{ border-left: solid 5px #fbc2bc; padding:0 0 10px 10px; border-bottom: solid 1px #fbc2bc;}
.kijiBox .hh2{padding:10px 15px;/*内側余白*/
	background-image: linear-gradient(0deg, transparent 19px, #f2f2f2 20px),linear-gradient(90deg,  transparent 19px, #f2f2f2 20px);
	background-size: 20px 20px;}
.kijiBox .hh2:before{ content:none}

.kijiBox .style3b { padding:1.1em .9em 1em; border-top:2px solid #fbc2bc; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; }

.kijiBox .style4a { padding:.3em 0 .3em .8em; border-bottom:none; border-left:2px solid #fbc2bc;}

.kijiBox .balloon { position:relative; display:block; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left;  background:#fbc2bc; z-index:0; border-bottom:0; }
.kijiBox .balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#fbc2bc transparent transparent transparent; }

.kijiBox .style5a { padding:.5em .8em .3em 1em; background:#fff; box-shadow:0px 2px 0px 0px #f2f2f2; }
.kijiBox .style5b { padding:.5em .8em .4em 1em; font-weight:400; color:#fff; background:#fbc2bc; border-radius:4px; box-shadow:0px 2px 0px 0px #f2f2f2; }

.kijiBox .well { min-height:20px; padding:19px; background-color:#fff; border-radius:4px; }
.kijiBox .well2 { padding:1em 1.5em; line-height:2; border:1px solid #cdcdcd;}
.kijiBox .wel3{
	padding:1em 1.5em;
	background-color:#fff;/*背景色*/
	position:relative;
}

.kijiBox .wel3:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: #e2d6ca #f9f3ed #e2d6ca;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.kijiBox a.q_button{box-shadow: 0 0 8px #e4b9b9; padding:15px 40px; border-radius:30px; background:#d4b870; color:#fff !important} 
.kijiBox a.q_button:hover{ box-shadow: none} 

.kijiBox .youtube{position: relative;
height: 0;
margin: 40px 0 10px;
padding: 30px 0 56.25%;
overflow: hidden;
}

.kijiBox .youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.kijiBox ul li{list-style: disc; margin-left: 20px; line-height: 1.4; margin-bottom: 10px}
.kijiBox ol li{list-style-type: decimal; margin-left: 20px; line-height: 1.4; margin-bottom: 10px}


.kijiBox table,.kijiBox td,.kijiBox th {
    border-collapse: collapse;
    border:1px solid #eae4e4;
    padding: 10px 
    }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInUp {
    animation-name: fadeInUp
}


.contbox{padding: 0 8% 50px; background: #fff; text-align: center}
.contbox .smtfl{background:#f5afa7; color: #fff; padding: 20px 2% 10px ; border-radius: 10px }
.contbox .text01{font-size: clamp(1rem, 0.625rem + 1.88vw, 1.375rem)}/*16-22*/
.contbox .tgoshi{font-size:14px }
.contbox .wakaba{width:15px; vertical-align: middle}
.contbox ul{display: flex; justify-content: space-between; padding-top: 20px}

.contbox li{width: 22% ;display: flex;
  align-items: stretch; /* 子要素の高さを揃える */}
.contbox li:last-child{width: 54%}
.contbox li a{color: #fff; background:#f6c3bd; padding: 20px 0; border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;flex-grow: 1; /* 高さを全体に広げる */}
.contbox li a:hover{background:#f5afa7 }
.contbox li img{width: 35px; margin: 0 auto}
.contbox li:last-child img{width: 20px; vertical-align: middle; margin: 0}
.contbox li span{display: block;font-weight: bold}

/*--------------------------------------------------------------------

column

--------------------------------------------------------------------*/
.column{text-align: center; padding: 50px 0 ;background: #fff}
.column ul a{ color: #674330}
.column li{position: relative; padding: 0 8% ; text-align: left}
.column li span{font-size: 12px}
.column .slick-prev,.sem .slick-next {
  z-index: 1;
}
.column .slick-prev:before, .column .slick-next:before {
  color: #674330;
}

.column .slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.column .slick-active {
  opacity: 1;
}
.column .slick-current {
  opacity: 1;
}

/*--------------------------------------------------------------------

voice

--------------------------------------------------------------------*/
.voice {text-align: center;padding: 50px 0}
.voice .hoshi{width: 142px}
.voice .text01{ font-size: clamp(1.25rem, 0.875rem + 1.88vw, 1.625rem);}/*20-26*/

footer{ padding: 50px 8% ; position: relative}
footer .dag{width:64px; position: absolute; right: 8%; top: -20px}
footer .fmenu li a{
  display: block;
  color: #674330;
  padding: 10px 0;
  text-decoration :none;
  font-size:clamp(1rem, 0.875rem + 0.63vw, 1.125rem)}/*16-18*/
footer .fmenu li a{padding: 5px 0; border-bottom: dashed 1px #674330;}
footer .fmenu li:first-child a{border: none ; margin-bottom: 30px}

footer .fmenu li a:hover{background:#fff }
footer .fmenu li:nth-child(2) a{border-top: dashed 1px #674330;}

footer .fmenu li span{font-size: 11px}
footer .fmenu li:first-child span{font-size: 12px; display: block}
footer .fmenu li .goshi{font-size: 12px}
footer .text01{padding: 20px 0 10px; text-align: center ; font-size:clamp(1rem, 0.875rem + 0.63vw, 1.125rem)}/*16-18*/
footer .textflex{display: flex; justify-content:space-between ; font-size: 13px ; padding-bottom: 30px}
footer .textflex li{list-style: disc; margin-left: 20px}
footer .textflex a{display: block; padding-bottom: 8px; color: #674330;}
footer .textflex a:hover{background:#fff }
footer .textl{width: 48%}
footer .textr{width: 46%}
footer .stname{font-weight: 700}
footer .stadd{font-size: 13px}

footer .copy{font-size: 10px; letter-spacing: normal; text-align: center; padding: 30px 0}





@media (min-width: 640px) and (max-width: 979px) {
body{font-size: 15px}
.slinecontbg{border-left: 5px solid #fff; border-right: 5px solid #fff;}
}



@media screen and (max-width: 979px) {
body{overflow-x: hidden;}
.pcleft , .cpp{display: none}
.smtno{display: none !important}
img{width: 100%; height: auto ; }


.logoimg{ text-align: center; max-width: 243px; width: 40%; margin: 20px 0 0 4% ; font-size: clamp(0.75rem, 0.688rem + 0.31vw, 0.813rem)}/*12-13*/


/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 9000;
  right : 5%;
  top   : 15px;
  width : 80px;
  height: 80px;
  cursor: pointer;
  text-align: center;
  background: #fbc2bc; border-radius:50%;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 3px ;
  right    : 0px;
  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: 22px;
  width: 40px;
  animation: equalizer01 7000ms infinite;
}
.hamburger span:nth-child(2) {
  top: 32px;
  width: 30px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}
.hamburger span:nth-child(3) {
  top: 42px;
  width: 20px;
  animation: equalizer02 5000ms infinite;
}
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 100%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }
}
@keyframes equalizer02 {
  0% {
    width: 30%;
  }
  10% {
    width: 20%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 40%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 30%;
  }
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {width:50px;
 transform: translate(0, 10px) rotate(-45deg); animation: unset;
}

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

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 1000;
  top  : 0;
  left : 0;
  color: #fff;
  height:90vh;
  background: #8bd4d4;
  text-align: center;
  width: 100%;
/*  transform: scale(0,0);*/
transform: translateY(-100%);
  transition: all 0.6s;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 20px 0 0;
  width: 100%;
}

nav.globalMenuSp ul li,
.kotei ul li{ letter-spacing: normal;
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all; text-align: left; padding-left: 5%
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li a:hover{
  background :#ddd;
}
nav.globalMenuSp a{display: block; width: 100%; text-align: center}
nav.globalMenuSp a h1{text-align: left; color: #fff; display: block; margin: 30px 0 0 5%; font-size: 15px; width: 240px;}

nav.globalMenuSp ul li a,
.kotei li a{
  display: block;
  color: #fff;
  padding: 10px 0;
  text-decoration :none;
  font-size:clamp(1rem, 0.875rem + 0.63vw, 1.125rem)}/*16-18*/
.kotei li a{padding: 5px 0}
nav.globalMenuSp ul li a{padding: 7px 0}
nav.globalMenuSp ul li span{font-size: 10px}

nav.globalMenuSp ul li img{width:50px }
.kotei li img,
.kotei .smtfflex .smtfr img{width:30px }
.kotei .smtfflex .smtfr img{margin-top: 3px}
nav.globalMenuSp ul li ul,
.kotei ul{display: flex; justify-content: space-between; padding: 0 ; }
nav.globalMenuSp ul li ul li,
.kotei ul li{text-align: center; padding-left: 0 ; }
nav.globalMenuSp ul li.pl0{padding-left: 0 ;  padding-top: 10px;}
nav.globalMenuSp ul li.pl0 span{line-height: 1.5; padding-bottom: 8px !important}

nav.globalMenuSp ul li .smtfflex ,
.kotei .smtfflex{display: flex; justify-content: space-between; border-top: 1px solid #fff ;
border-bottom: 1px solid #fff}
nav.globalMenuSp ul li .smtfflex .smtfl ,
.kotei .smtfflex .smtfl{width: 74%; text-align: center; padding-top: 10px}
nav.globalMenuSp ul li .smtfflex .smtfl img.wakaba{width: 12px}
.kotei .smtfflex .smtfl img.wakaba{width: 12px ;vertical-align: middle}
nav.globalMenuSp ul li .smtfflex .smtfr,
.kotei .smtfflex .smtfr{width: 25%; text-align: center; padding: 10px 0; border-left:1px solid #fff;}
.kotei .smtfflex .smtfr:hover{background:#f6c3bd;}
nav.globalMenuSp ul li .smtfflex .smtfr span,
.kotei .smtfflex .smtfr span{display: block; padding-bottom: 3px ;color: #fff;}
nav.globalMenuSp ul li .smtfflex strong,
.kotei .smtfflex strong{display: block ; letter-spacing: 2px}
.kotei .smtfflex strong{ padding-top: 5px}
nav.globalMenuSp ul li .smtfflex span,
.kotei .smtfflex span{font-size:clamp(0.938rem, 0.75rem + 0.94vw, 1.125rem)}/*16-18*/
.kotei .smtfflex .smtfr span{line-height: 1.2 ; font-size:clamp(0.875rem, 0.75rem + 0.63vw, 1rem)}/*14-16*/
nav.globalMenuSp ul li .smtfflex span strong,
.kotei .smtfflex span strong{font-size: 11px}
nav.globalMenuSp ul li ul a,
.kotei ul a{display: block ; }
.kotei ul a{ background:#f6c3bd; margin-left: 3px}
.kotei ul a:hover{background:#f5afa7 }
.kotei ul li:first-child a{margin-left: 5px}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
  transform: translateY(0);
/*  transform: scale(1,1);*/
}

.slinecontbg{ position: relative; max-width: 700px; margin: 0 auto;}

.kotei{
  position: fixed; background: #f5afa7; line-height: 1;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  transition: .3s;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  z-index: 88; text-align: center; width: 100%; max-width: 700px
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


}



@media screen and (min-width: 980px) {
body{font-size: 15px ; }
img{height: auto ; max-width: 100%}
.pcno , .ftbtn{display: none !important}
.cpp{position: fixed; right: 0; bottom: 20px; font-size: 10px; letter-spacing: normal}

.kotei {max-width: 480px}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


.head{display: none}
#main{position: relative; }

.pcleft{width: 100%; display: flex; z-index: 10; position: absolute}
.pcleft header{justify-content: space-between; margin: 0 auto;width: 100%; max-width: 1600px; display: flex ; padding-right: 3%}
.pcleft header .logoflex{width: 15%; margin-left: 3%}
.pcleft header .logoflex a .h1{margin: 20px 0 0 0 ; color:#674330; display: block; text-align: center ; transition: transform 0.3s ease;}
.pcleft header .logoflex a:hover .h1{transform: translateY(-5px);}


.pcleft header .pcmenu{width: 80% ; font-weight: 700}
.pcleft header .pcmenu .gnavi__lists{display:flex; justify-content: space-between ; font-weight: 700}
.pcleft header .pcmenu .gnavi__lists a{display: block}

.pcleft header h1{color: #674330}
.pcleft header a{color: #fff; display: block; border: none}

.pcleft header .contm{background:#fbc2bc ; display: flex ; justify-content: space-between; color: #fff; text-align: center ;font-size: 13px; width: 70%; margin: 0 0 10px auto ; line-height: 1.3; max-width: 650px}
.pcleft header .contm img{width: 40px}
.pcleft header .contm li{padding: 10px}
.pcleft header .contm li:first-child {border-right: 1px solid #fff ; background:#fbc2bc}
.pcleft header .contm li:first-child:hover{background:#fcd375}
.pcleft header .contm li:first-child img{width:15px }
.pcleft header .contm li.tmenu{display: flex; justify-content: space-between ; width: 45%}
.pcleft header .contm li.tmenu .text01{width: 70%}
.pcleft header .contm li.tmenu a{width: 20%}
.pcleft header .contm li:last-child{width: 25%}
.pcleft header .contm li:last-child a:hover{transform: translateY(-5px);}

.pcleft header .contm strong{font-weight: bold}
.pcleft header .contm li .text01{font-size: 14px}

.pcleft header a.houp img{transition: transform 0.3s ease;}
.pcleft header a.houp:hover img{transform: translateY(-5px);}


a.houp img{transition: transform 0.3s ease;}
a.houp:hover img{transform: translateY(-5px);}

.dropdown__lists {
/*    display: none;*/visibility: hidden; /* デフォルトでは非表示 */
    width: 420px;
    position: absolute;
    top: 110px;
    left: 50%; letter-spacing: normal; 
     transition: opacity .3s ease, transform .3s ease; 
    opacity: 0;
    transform: translateY(-10px); /* 少し上にずらしておく */
    
}
.menup02{    width: 240px;
    position: absolute;
    top: 110px;
    
    
    left: 74%; letter-spacing: normal}

.dropdown__lists li a{border-bottom: 1px dashed #fff}

.gnavi__lists li a{ color: #674330; padding: 10px 0 10px 20px; }
.gnavi__lists li a:hover{color:#fbc2bc }
.gnavi__lists li span{font-size: 11px}
.gnavi__lists li span.en{font-weight: bold; letter-spacing: 2px}
.gnavi__lists li span.en i{font-size: 18px}

.gnavi__list:hover .dropdown__lists {
    /*display: block;Gナビメニューにホバーしたら表示*/    visibility: visible; /* ホバーしたら表示 */
    opacity: 1;
    transform: translateY(0); /* 元の位置に移動 */
}
.dropdown__list {
    background-color: #fbc2bc;
    height: 60px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fbc2bc;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #fedc62;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top:120px;
}



/* スライダー全体 */
.full div {
 background-repeat: no-repeat;
   background-position: left center;
   background-size: 40% ;
  height: 100vh;
  margin: 0; width:calc( 100% - 535px );;
  position: fixed;
}
.full img{width: 100%}
.full div.img01 {
  background-image: url( "../img/pc01.jpg");
}
.full div.img02 {
  background-image: url( "../img/pc02.jpg");
}
.full div.img03 {
  background-image: url( "../img/pc03.jpg");
}



.slinecontbg{width: 480px; box-sizing: content-box; position: absolute; top: 110px;  z-index:5  ; right: 3%; background:#f9f3ed }


.kotei{max-width: 480px; font-size: 4vw; font-weight: bold;
  position: fixed;
  top: 5%;
  bottom: auto;
  right: 10px;
  color: #fff;
  transition: .3s; 
  z-index: 88; text-align: center;
}

.kotei a{display: none}

.kotei li:first-child{writing-mode: vertical-rl;  text-align: left; margin-bottom: 20px}
.kotei p{font-size: 10px; letter-spacing: normal}
footer .copy{padding-bottom: 40px}
}
@media screen and (min-width: 1200px) {
.pcleft header .pcmenu .gnavi__lists{font-size: 16px}
}

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

}