@charset "utf-8";
@import url("def.css");
* {
  margin: 0;
  padding: 0;
}
/* { outline: 1px solid red; }*/

.toracoblock{
	display: none!important;
}

body {
    color: #000;
    width: 100%;
    position: relative;
    /*min-height: 1000px;*/
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	/*font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"*/
    font-style: normal;
    /*background-image: linear-gradient(90deg, #d2b06f, #f4e8d1 50%, #d2b06f); ---ゴールドグラデ*/
    /*background-image:  url(../images/bg_redcurtain.png);
    background-repeat: repeat;*/
    background-image: linear-gradient(90deg, #390000, #84060a 30% 70%, #390000);
    background-attachment: fixed;
}
a:hover {
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -moz-opacity: .7;
    opacity: .7;
    zoom: 1
}
a,
a:link {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.5s;
}

img {
	max-width: 100%;
	height: auto;
}
#sp_navbtn {
    display: none;
}



/* ==============================
　　　　コンテンツエリア
 ==============================*/
@media (min-width: 769px){
.contentsArea{
    max-width: 1000px;
    margin: auto;
    padding: 30px;
}
}

@media (max-width: 768px) {
.contentsArea{
		padding: 40px 5% 0;
	}

	.contentsArea h2{
	/*max-width: 450px;*/
	width: 80%;
	margin: 0 auto 30px;
}
}
.wrapper {
  position: relative;
}
/* ==============================
  Header（ヘッダーまわり）
  - 位置・高さはブレークポイントで切替
  - PC: 120px / SP: 80px
============================== */
.header {
  position: relative; /* 子要素の絶対配置の基準にする */
  z-index: 200; /* メガメニューより上（オーバーレイz=100） */
  background: #000;
    color: #fff;
}




@media (min-width: 769px) {
  .header {
    height: 120px; /* PC高さ */
   }

}

@media (max-width: 768px) {
  .header {
    height: 80px; /* SP高さ */
  }
}

/* ロゴ：縦中央配置。左右位置・サイズはレスポンシブで調整 */
.headerArea{
    width: 1200px;
    margin: auto;
    position: relative;
}
.header-logo {
  position: absolute;
  top: 5px;
  font-weight: 900;
  line-height: 1;
 /* transform: translateY(-20%);*/
}


@media (min-width: 769px) {
  .header-logo {
    left: 0px;
    font-size: 40px;
    letter-spacing: 2px;
  }
    .header-logo img{
        height:110px;
    }
}

@media (max-width: 768px) {
	.headerArea{
    width: 100%;
}
  .header-logo {
    left: 20px;
    font-size: 25px;
    letter-spacing: 1px;
  }
    .header-logo img{
        height:70px;
    }

}

.header-logo a {
  display: inline-block;
  color: #192753;
  text-decoration: none;
  vertical-align: top;
}

/* ハンバーガー：SPのみ表示。アイコンはspanで描画しopen時に変形 */
.header-hamburger {
  position: absolute;
  right: 8.5px;
  top: 50%;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .header-hamburger {
    display: none;
  }
}

.header-hamburger button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* 3本ライン */
.header-hamburger button > span {
  display: block;
  position: absolute;
  left: 11.5px;
  top: 22px;
  width: 22px;
  height: 1px;
  background: #fff;
}

/* 上・中・下のバーに変形トランジションを付与 */
.header-hamburger button > span:nth-child(1) {
  transform: translateY(-6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(2) {
  transition: opacity 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(3) {
  transform: translateY(6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* 開いた状態（×アイコン化） */
.header-hamburger button.is-open > span:nth-child(1) {
  transform: rotate(45deg) translateY(0px);
}

.header-hamburger button.is-open > span:nth-child(2) {
  opacity: 0;
}

.header-hamburger button.is-open > span:nth-child(3) {
  transform: rotate(-45deg) translateY(0px);
}

/* グローバルナビ：PCのみ表示。縦中央に配置 */
.header-nav {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(0%);
}

@media (max-width: 768px) {
  .header-nav {
    display: none;
  }
}

.header-nav ul {
  list-style: none;
  display: flex;
}

/* ナビ項目：下線アニメ（:before）でアクティブを演出 */
.header-nav ul li button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 25px;
  border: none;
   /* border: solid 1px #fff;*/
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: color 300ms;
   /* color: #fff;*/
}
.header-nav ul li button a {
    color: #fff;
   text-decoration: none;
}

.header-nav ul li button::before {
  content: '';
  display: block;
  position: absolute;
  left: 25px;
  bottom: 8px;
  width: calc(100% - 50px);
  height: 2px;
  background: #ffe100; /*--元の色#4466ce--*/
  transform: scaleX(0);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-nav ul li button:hover::before,
.header-nav ul li button:active::before,
.header-nav ul li button.is-active::before {
  transform: scaleX(1);
}

/* 右端の「SNS指定」：PCのみ */
.header-sns .insta{
  position: absolute;
  right: 40px;
  top:50%;
  transform: translateY(50%);
}
.header-sns .x{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(50%);
}

@media (max-width: 768px) {
  .header-sns {
    display: none;
  }
}

/* 右端の「お問い合わせ」：PCのみ */
.header-contact a {
  display: block;
  width: 130px;
  padding: 5px 0;
  border-radius: 5px;
  border: solid 1px #888;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms;
}

.header-contact a:hover {
  background: #888888;
}
@media (max-width: 768px) {
  .header-contact {
    display: none;
  }
}
/* ==============================
  Mega Menu（メガメニュー）
  - .mega.is-open でオーバーレイ／本体を表示
  - PC: ヘッダー直下に重ねる
  - SP: パディングを広めに
============================== */

/* 背景オーバーレイ（ぼかし＋半透明）。
   非表示時は visibility/opacity/pointer-events で無効化 */
.mega-overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
}

/* メガメニュー本体コンテナ。高さアニメはJSで付与 */
.mega-container {
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  background: #000;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
    border-top: solid 1px #888;
    border-radius: 0 0 20px 20px;        /* 角丸指定 */
}

/* PCはヘッダー高に合わせる */
@media (min-width: 769px) {
  .mega-container {
    top: 110px;
  }
}

@media (max-width: 768px) {
  .mega-container {
    top: 80px;
    padding: 0 20px 40px;
      border: none;
  }
}

/* セクション（各パネル）
   PCでは重ねて配置し、表示中だけ is-open で見せる */
@media (min-width: 769px) {
  .mega-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0ms 400ms, opacity 400ms linear;
  }
}

/* SPではアコーディオンの見切れ線 */
@media (max-width: 768px) {
  .mega-section {
    border-bottom: 1px solid #e1e1e1;
  }
}

/* 見出し（SPのみ表示、アコーディオンのトリガー） */
.mega-header {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
    color: #fff;
}

@media (min-width: 769px) {
  .mega-header {
    display: none;
  }
}

.mega-header button {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 0 20px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* 見出し右の＋（span疑似要素で線を描画） */
.mega-header button > span {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
}

.mega-header button > span::before,
.mega-header button > span::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  background: #fff;
}

.mega-header button > span::after {
  transform: rotate(90deg);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* 本文領域（PCは常に表示、SPは閉じておく） */
.mega-body {
  position: relative;
}

@media (min-width: 769px) {
  .mega-body {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .mega-body {
    display: none;
    overflow: hidden;
  }
}

/* 内側余白：PCは左右パディング広め、SPは下マージンのみ */
@media (min-width: 769px) {
  .mega-inner {
    width: 1100px;
     margin-left: auto;
      margin-right: auto;
      padding: 20px 0 40px;
  }
  /*.mega-inner {
    padding: 20px 50px 40px;
      border: solid #fff 1px;
  }*/
}

@media (max-width: 768px) {
  .mega-inner {
    padding-bottom: 25px;
  }
}

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

       /*▼ここから追記 ーメガメニューの中身ー▼*/
@media (min-width: 769px) {
  .mega-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
      /*border: solid #fff 1px;*/
  }
}

.mega-thumb {
  position: relative;
  aspect-ratio: 1.4;
  border-radius: 5px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .mega-thumb {
    display: none;
  }
}

.mega-thumb > img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 769px) {
  .mega-text {
    margin-top: 13px;
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1215px) / (1615 - 1215))), 15px);
    font-weight: 400;
    line-height: 1; /*元の数値は1.4*/
    text-align: left; /*元の指定はcenter*/
  }
    .mega-text-title {
    margin-top: 13px;
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1215px) / (1615 - 1215))), 15px);
    font-weight: 700;
        color: #ffe100;
    }
       .mega-text-title2 {
    margin-top: 13px;
    font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1215px) / (1615 - 1215))), 15px);
    font-weight: 700;
     color:#000;
    }

}

@media (max-width: 768px) {
  .mega-text {
    font-size: 15px;
    line-height: 1.5;
      color: #fff;
  }
     
  .mega-text-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
        color: #ffe100;
  }
}

@media (min-width: 769px) {
  .mega-text > span {
    display: inline-block;
    position: relative;
    padding-right: 15px;
    vertical-align: top;
      color: #fff;
  }
}

@media (min-width: 769px) {
  .mega-text > span::before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -3px;
    box-sizing: border-box;
    border-top: 2px solid #888; /*元の色は#4666ce*/
    border-right: 2px solid #888; /*元の色は#4666ce*/
    transform: rotate(45deg);
  }
}


@media (min-width: 769px) {
  .mega-list > li {
    width: calc((100% - 120px) / 5);
  }
}

.mega-list > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
  transition: color 350ms cubic-bezier(.215, .61, .355, 1);
}

@media (max-width: 768px) {
  .mega-list > li > a {
    padding: 2px 20px;
  }
}

@media (min-width: 769px) {
    .mega-list > li > a:hover{
        opacity: 0.7;
    }
  .mega-list > li > a:active {
    color: #ffe100; /*元の色は#4666ce*/
  }

  .mega-list > li > a:hover .mega-thumb > img,
  .mega-list > li > a:active .mega-thumb > img {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  .mega-list > li:nth-child(n+2) {
    margin-top: 15px;
  }
}
    
    /*▲ここまで▲*/


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

/* SP: 先頭セクションの上線（見切れ調整） */
@media (max-width: 768px) {
  .mega-section:first-child {
    border-top: 1px solid #e1e1e1;
  }
}

/* 表示中のセクション。PCで前面に出し、フェードを有効化 */
.mega-section.is-open {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0ms, opacity 400ms linear;
}

/* アコーディオン展開時は＋を−に変形 */
.mega-section.is-expanded .mega-header button > span::after {
  transform: rotate(0deg);
}

/* メガメニュー表示状態：オーバーレイ／本体の表示をまとめてON */
.mega.is-open .mega-overlay,
.mega.is-open .mega-container {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: visibility 0ms, opacity 400ms linear;
}

/* ==============================
  その他の装飾は本題外のため省略
============================== */
/*スマホコンテンツ追加分*/
@media (max-width: 768px) {
.ichiran{
	color: #fff;
	}
.ichiran a{
	color: #fff;
}
}

/* ------------------------------
 　　　コンテンツ
------------------------------ */

@media (max-width: 768px) {
  .contents {
    width: auto;
    margin: 0 20px;
    padding: 50px 0 100px;
  }
}

details{
    color:#fff;
}






@media screen and (min-width: 769px) {
    .sp {
        display: none!important;
    }
    .pc {
        display: block!important;
    }
}
@media screen and (max-width: 768px) {
    .sp {
        display: block!important;
    }
    .pc {
        display: none!important;
    }
}

/*============================== 

もう一つの階層 CSSのみのアコーディオン（スマホ）

============================== */
@media screen and (max-width: 768px) {

.accordion {
  max-width: 100%;
  margin: 5px auto;
  /*font-family: sans-serif;*/
    font-size: 15px;
}

.accordion-item {
  /*border-bottom: 1px solid #ccc;*/
  /*border-radius: 5px;*/
  margin-bottom: 5px;
  overflow: hidden;
}

.accordion-toggle {
  display: none;
}

.accordion-title {
  display: block;
  padding:10px;
    color: #ffe100;
  font-weight: bold;
  background-color: #333;
  cursor: pointer;
  position: relative;
}

.accordion-title::after {
  content: "＋";
    color: #fff;
  position: absolute;
  right: 1em;
  /*font-size: 1.2em;*/
  transition: transform 0.3s;
}

.accordion-toggle:checked + .accordion-title::after {
  content: "−";
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
    line-height: 2;
  overflow: hidden;
  padding: 0 1em;
    color: #fff;
  background-color: #333;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-content a {
    color: #fff;
}
    
.sankaku {
    font-size: 12px;
    padding-left: 5px;
    color: #888;
  }
.accordion-toggle:checked + .accordion-title + .accordion-content {
  max-height: 100%;
  padding: 0 1em 1em;
}

}



/* ==============================

  Footer（弁当バナー＋フッター）

============================== */
/* -----------------------------
　　　　　バナー
-------------------------------- */

.banerArea{
	padding-bottom: 10px;
}


/*---- SNS ---*/
#sns_area {
    width: 100%;
	text-align: center;
    /*background: #fff;*/
	padding-top: 20px;
	/*padding-bottom: 10px;*/
}

.snsSet {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.snsSet .snsText {
	display: flex;
	font-size: 24px;
	font-weight: bold;
	margin-top: 8px;
	margin-right: 15px;
	color: #fff;
}
.snsIcon ul {
	display: flex;
}
.snsIcon li img{
max-width: 50px;
	margin: 0 20;
	padding-right: 10px;
}

.bn {
    width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.bn img {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
} 
.bn p{
	text-align: center;
	color: #fff;
	margin-bottom: 5px;
}

.bn .pc {
	display: block !important;
}
.bn .sp {
	display: none !important;
}

/*--スマホ指定--*/
@media screen and (max-width: 768px) {
	
.bn img {
	margin-bottom: 5px;
}

.bn {
    width: 100%;
	text-align: center;
	margin-bottom: 0px;
}
	
    #sns_area .topSns li img {
		max-width: 50px;
	}
	#sns_area {
		padding-bottom: 10px;		
	}
	/*--SNS書き換え--*/
	.snsSet {
		flex-direction: column;
		align-items: center;
	}
	.snsSet .snsText {
	font-size: 20px;
	font-weight: bold;
		margin-right: 0;
		padding-bottom: 15px;
}
	
	.bn img{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
	}
	.bn .pc {
	display: none !important;
}
.bn .sp {
	display: block !important;
}

}


/* -----------------------------
　　フッター追記　
-----------------------------*/
footer{
	padding:20px 0px;
background-image: linear-gradient(90deg, #8f5123, #f2bc1a 50%, #8f5123);	/*background: #c0a147;*/
	margin-top: 20px;
}

footer .footerArea {
	width: 1200px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto 0;
}

footer .footerNav{
	font-size: 15px;
	color: #fff;
	font-weight: bold;
}
footer .footerNav ul{
		display: flex;
}
footer .footerNav li{
	margin-right: 30px;
	list-style: none;
}
footer .footerNav .point {
	font-size: 10px;
	vertical-align: middle;
	margin:5px;
}
footer .footerNav a{
	color: #fff;
}
footer .footerNav a:hover{
	color: #fff100;
}
footer .copy{
	text-align: right;
	font-size: 10px;
	color: #fff;
	padding-top: 5px;
}




/*-------------------
ここからスマホ指定
---------------------*/
@media screen and (max-width: 768px) {
	footer .footerArea {
		width: 98%;
		flex-direction: column;
		align-items: center;
	}
	footer .footerNav ul{
		flex-direction: column;
		align-items: center;
		padding-bottom: 5px;
}
	footer .footerNav li{
	font-size: 13px;
	margin-right: 0px;
	list-style: none;
	padding-bottom: 2px;
}

}
/* ------フッターここまで -----*/


/* =====================

	全ページ共通トップに戻るボタン

===================== */

.go-btnArea {
    width: 100%;
	padding-top: 30px;
	padding-bottom: 0px;
	margin: 0 auto;
}

.go-btnArea .button-54 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .9em 3em .9em 2em;
    border: 1.5px solid #d0a225;
    border-radius: 5px;
    background-color: #84060a;
    color: #d0a225;
    font-size: 1em;
	text-align: center;
}
.go-btnArea .button-54 a{
	color: #d0a225;
}

.go-btnArea .button-54::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #d0a225;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.go-btnArea .button-54:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}

/*============トラコのみ色違い=================*/

.go-btnArea .toraco_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: .9em 3em .9em 2em;
    border: 1.5px solid #00b0ab;
    border-radius: 5px;
    background-color: #ffff1a;
    color: #00b0ab;
    font-size: 1em;
	text-align: center;
}
.go-btnArea .toraco_btn a{
	color: #00b0ab;
}

.go-btnArea .toraco_btn::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #00b0ab;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}

.go-btnArea .toraco_btn:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}
/*============トラコのみ色違い=================*/

/*-------------------
　　スマホ指定
---------------------*/
@media screen and (max-width: 768px) {
.go-btnArea .button-54 {
	width: 190px;
	padding: .6em 3em .6em 2em;
	}
	
.go-btnArea .toraco_btn {
	width: 190px;
	padding: .6em 3em .6em 2em;
	}	
}
/*===================*/