@charset "utf-8";
/* CSS Document */
/*===========
wrapper
===========*/
.wrapper {
  background-image: url("images/back.png");
	background-position: center;
	background-repeat: repeat;
	background-size: contain;
}
/*===========
margin
===========*/
.mg-top-80 {
  margin-top: 80px !important;
}
.mg-top-120 {
  margin-top: 120px !important;
}
.mg-bottom-120 {
  margin-bottom: 120px !important;
}
.pad-top-120 {
  padding-top: 120px;
}
.pad-bottom-120 {
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mg-bottom-120 {
    margin-bottom: 60px !important;
  }
}
@media only screen and (max-width: 767px) {
  .mg-bottom-120 {
    margin-bottom: 60px !important;
  }
  .pad-top-120 {
    padding-top: 60px;
  }
  .pad-bottom-120 {
    padding-bottom: 60px;
  }
  .full_sp {
    padding: 0 !important;
  }
  .full_sp .more-btn {
    padding: 0 15px;
  }
}
/*===========
header
===========*/
#header_fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.header_side{
	background-color: #fff;
	box-shadow: 3px 0px 13px -6px rgba(241,241,241,1.0);
	width: 290px;
	height: 100vh;
	overflow-y: scroll;
	padding: 36px;
}
.header_side .header_logo{
	margin-bottom: 36px;
}
.header_side .header_logo img{
	width: 198px;
	height: auto;
}

.header_menu_list{
	margin-bottom: 36px;
}
.header_menu_list  li{
	margin-bottom: 24px;
}

.header_menu_list li a{
	display: block;
	font-size: 16px;
	font-weight: 600;
}
.header_open{
	margin-bottom: 20px;
}
.header_tel{
	display: flex;
	margin-bottom: 36px;
}
.btn_insta a{
	display: block;
	width: 218px;
	height: 63px;
	padding-top: 10px;
	text-align: center;
	background: transparent linear-gradient(112deg, #E25359 0%, #F16E36 100%) 0% 0% no-repeat padding-box;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
.btn_insta a{
	width: 100%;
}
}
@media only screen and (max-width: 767px) {
.btn_insta a{
	width: 100%;
}
}


/*===========
main
===========*/
#main{
	margin-left: 290px;
}

.main{
	width: 100%;
	height: 768px;
	padding-top: 64px;
	padding-bottom: 64px;
}
.kv_wrap{
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 1;
}
.kv_wrap::before{
	content: "";
	display: inline-block;
	background-image: url("images/kv_img06.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 653px;
	height: 542px;
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}
.kv_wrap .kv_img01{
	margin-bottom: 20px;
}
.kv_wrap .kv_img01 img{
	width: 600px;
	height: auto;
}
.kv_wrap .kv_img02 img{
	width: 583px;
	height: auto;
}

.kv_tondon{
	width: 1040px;
	margin: 0 auto;
	position: relative;
}
.kv_tondon .kv_img03{
	position: absolute;
	left: 28%;
    top: 18%;
	width: 386px;
	z-index: 1;
	transform: translate(-50%,-50%);
}
.kv_tondon .kv_img03 img{
	width: 262px;
	height: auto;
}
.kv_tondon .kv_img04 img{
	width: 386px;
	height: auto;
}
.kv_tondon .kv_img05{
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	
}
.kv_tondon .kv_img05 img{
	width: 745px;
	height: auto;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
#main{
	margin-top: 80px;
	margin-left: 0;
}
	.kv_tondon{
	width: 100%;
}
	.kv_tondon .kv_img03 {
    position: absolute;
    left: 29%;
		top: 21%;
	}
}
@media only screen and (max-width: 767px) {
#main{
	margin-top: 80px;
	margin-left: 0;
}
	
.main{
	width: 100%;
	height: 100%;
}
		.kv_tondon{
	width: 100%;
}
	.kv_wrap::before{
	width: 360px;
    height: 100%;
    position: absolute;
    top: 25%;
	left: 50%;
}
	.kv_wrap .kv_img01 img{
	width: 330px;
	height: auto;
}
	.kv_wrap .kv_img02 img{
	width: 328px;
	height: auto;
}
	.kv_tondon .kv_img03{
	position: absolute;
	    left: 35%;
    top: 12%;
	width: 100%;
	z-index: 1;
}
.kv_tondon .kv_img03 img{
	width: 206px;
	height: auto;
}
	.kv_tondon .kv_img04 img{
	width: 248px;
	height: auto;
}
	.kv_tondon .kv_img05{
		width: 100%;
	
}
.kv_tondon .kv_img05 img{
	width: 312px;
	height: auto;
}
}
/*===========
top-head
===========*/
.top_head{
	margin-bottom: 48px;
}
.top_head h2{
	font-size: 26px;
}

.section{
	padding-top: 64px;
	padding-bottom: 64px;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {

}
@media only screen and (max-width: 767px) {
.section{
	padding-top: 36px;
	padding-bottom: 36px;
}

}

/*===========
top_news
===========*/
.top_news{
	padding-top: 64px;
}
.news_wrap{
	padding: 36px;
}
.news_wrap .news_area ul{
	display: grid;
	  grid-template-columns: repeat(3, 1fr);
	 gap:15px;
	 grid-row-gap: 36px;
}
.news_wrap .news_area .img_area{
	width: 300px;
	height: 240px;
	margin-bottom: 15px;
}
.news_wrap .news_area .img_area img{
	width: 100%;
	height: 240px;
	object-fit: cover;
	border: 1px solid #C5C5C5;
	vertical-align: middle;
}
.news_wrap .news_area .ttl{
	font-size: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	.news_wrap .news_area .img_area{
	width: 100%;
	height: 240px;
}
		.news_wrap .news_area .img_area{
	width: 100%;
	height: 240px;
}
	.news_wrap .news_area .img_area img{
	width: 100%;
	height: 240px;
}
		.news_wrap .news_area .ttl{
	font-size: 16px;
}

}
@media only screen and (max-width: 767px) {
	.news_wrap{
	padding: 20px;
}
.news_wrap .news_area ul{
	display: grid;
	  grid-template-columns: repeat(2, 1fr);
}
	.news_wrap .news_area .img_area{
	width: 100%;
	height: 114px;
}
	.news_wrap .news_area .img_area img{
	width: 100%;
	height: 114px;
}
	.news_wrap .news_area .ttl{
	font-size: 16px;
}
}




/*===========
top_about
===========*/
.about_content{
	width: 1080px;
	margin-left: auto;
}
.about_content ul{
	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.about_content .about_img01{
	margin-left: 30px;
}
.about_content .about_img01 img{
	width: 538px;
	height: auto;
}
.about_content .about_img02 img{
	width: 480px;
	height: auto;
}


@media only screen and (min-width: 768px) and (max-width: 1200px) {
.about_content{
	width: 100%;
	margin-left: inherit;
	padding-left: 30px;
	padding-right: 30px;
}
}
@media only screen and (max-width: 767px) {
.about_content{
	width: 100%;
	margin-left: inherit;
	padding-left: 30px;
	padding-right: 30px;
	text-align: center;
}
	.about_content ul{
	display: block;
}
	.about_content .about_img01{
	margin-left: 0;
}
	.about_content .about_img01 {
	margin-bottom: 36px;
}
}

/*===========
top-menu
===========*/
.menu_tab{
	background-color: #fff;
}
.menu_tab ul{
	display: grid;
	grid-template-columns: repeat(6,1fr);

}

.menu_tab .tab li a{
	display: block;
	background-color: #C6C6C6;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	height: 67px;
	line-height: 67px;
	border-radius: 6px 6px 0 0;
	text-align: center;
	border: 1px solid #fff;
	transition: .3s;
}
.menu_tab .tab .active a{
	background-color: #C8161D;
}
.menu_tab .tab li a:hover{
	opacity: 0.6;
}

.menu_area{
	padding: 40px 60px;
}
.menu_area .menu_inner_list{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:42px;
	 grid-row-gap: 36px;
}

.menu_inner_list .img_area{
	margin-bottom: 20px;
	text-align: center;
}
.menu_inner_list .img_area img{
	width: 285px;
	height: auto;
}
.menu_inner_list .price_area{
	padding-bottom: 20px;
	border-bottom: 1px solid #C5C5C5;
	margin-bottom: 20px;
}
.menu_inner_list .price_area02{
	padding-bottom: 0;
	border-bottom: none;
	margin-bottom: 0;
}
.menu_inner_list .price_area li{
	display: flex;
	align-items: center;
	margin-bottom: 5px;
}
.menu_inner_list .price_area li .size{
	width: 68px;
	padding: 2px;
	background-color: #F1F1F1;
	border-radius: 50px;
	text-align: center;
	margin-right: 14px;
}


/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  background: #fff;
	height: 650px;
	overflow-y: scroll;
  padding:50px 20px;
}
/*areaにis-activeというクラスがついた時の形状*/
.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media only screen and (min-width: 768px) and (max-width: 1200px) {
	.menu_tab{
	background-color: transparent;
}
.menu_area .menu_inner_list{
	display: grid;
	grid-template-columns: repeat(2,1fr);
}
.menu_tab .tab li a:hover{
	opacity: 1;
}
}
@media only screen and (max-width: 767px) {
	.menu_tab{
		background-color: transparent;
		margin-bottom: 26px;
	}
	.menu_tab ul{
	display: grid;
	grid-template-columns: repeat(2,1fr);
		gap:10px;
}
	.menu_tab .tab li a{
	font-size: 16px;
	height:60px;
	line-height: 60px;
	border-radius: 12px;
}
	.menu_inner_list h3{
		text-align: center;
	}
.menu_area .menu_inner_list{
	display: grid;
	grid-template-columns: repeat(1,1fr);
}
	.area {
	height: 450px;
}
	.menu_tab .tab li a:hover{
	opacity: 1;
}
}

/*===========
top-access
===========*/
.access_map{
	width: 100%;
	height: 100%;
	display: flex;
	box-shadow: 0px 0px 13px -6px rgba(241,241,241,1.0);
}
.access_map .access_area{
	width: 40%;
	padding: 36px 48px;
}
.access_map .access_area dl {
	margin-bottom: 20px;
}
.access_map .access_area dl dt{
	padding-left: 12px;
	border-left: 3px solid #C8161D;
	line-height: 1;
	margin-bottom: 8px;
}
.access_map .access_area dl dd{
	padding-left: 12px;
}
.map_area{
	width: 60%;
}
.access_map iframe{
	width: 100%;
	height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {

}
@media only screen and (max-width: 767px) {
.access_map{
	display: block;
}
	.access_map .access_area{
	width: 100%;
	padding: 36px;
}
	.map_area{
	width: 100%;
		height: 304px;
}
	.access_map iframe{
	width: 100%;
	height: 304px;
}
}


/*===========
top-contact
===========*/
.contact_area{
	display: flex;
	justify-content: space-around;
	margin-top: 36px;
}
.contact_btn a{
	display: block;
	background-color: #DB4A4F;
	width: 440px;
	height: 104px;
	line-height: 104px;
	color: #fff;
	text-align: center;
	position: relative;
	z-index: 1;
	transition: .3s ease;
}
.contact_btn a::after{
	content: "";
	display: block;
	width: 440px;
	height: 104px;
		border: 1px solid #DB4A4F;
	position: absolute;
	top: 10px;
    right: -10px;
	z-index: 0;
	transition: .3s ease;
}
.contact_btn a:hover{
	transform: translate(10px,10px);
}
.contact_btn a:hover::after{
top: 0;
    right: 0;
}

.contact_tel a{
	font-size: 26px;
}
.contact_mail a{
	font-size: 22px;
}


@media only screen and (min-width: 768px) and (max-width: 1200px) {
.contact_area{
	display: block;
}
	.contact_btn a{
	height: 84px;
		margin: 0 auto;
	line-height: 84px;
}
	.contact_btn a::after{
	height: 84px;
}
	.contact_tel {
		margin-bottom: 42px;
}
}
@media only screen and (max-width: 767px) {
.contact_area{
	display: block;
}
	.contact_btn a{
		width: 100%;
	height: 84px;
	line-height: 84px;
}
	.contact_btn a::after{
		width: 100%;
	height: 84px;
}
	.contact_tel {
		margin-bottom: 42px;
}
	.contact_tel a{
	font-size: 22px;
}
	.contact_tel img{
		width: 28px;
		height: auto;
	}
.contact_mail a{
	font-size: 16px;
}
	.contact_mail img{
		width: 30px;
		height: auto;
	}
}


/*=====================
下層お知らせここから
=====================*/
/*===========
お知らせ
===========*/
.under_logo_area{
		padding-top: 15px;
}
.under_logo_area h2{
	width: 434px;
	margin: 0 auto;
}
.under_logo_area img{
	width: 100%;
}

.u_news_wrap{
	padding: 36px;
	margin-bottom: 36px;
}

.news_article_area{
	border-top: 1px solid #C5C5C5;
}

.news_article_area .head{
	margin-top: 30px;
	margin-bottom: 30px;
}
.news_article_area .head .ttl{
	font-size: 26px;
}
.news_article_area .content{
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
}

.back_btn{
	width: 264px;
	margin: 0 auto;
}
.back_btn a{
	display: block;
	width: 264px;
	height: 60px;
	line-height: 60px;
	background-color: #000;
	color: #fff;
	font-size: 16px;
	border-radius: 10px;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.under_logo_area h2{
	width: 80%;
}
	.u_news_wrap{
	padding: 36px 20px;
}
	.u_news_wrap .top_head{
	margin-bottom: 26px;
}
	.news_article_area .head .ttl{
	font-size: 22px;
}
}


/*===========
footer
===========*/
footer{
	margin-left: 290px;
}
.footer_logo{
	margin-bottom: 26px;
}
.footer_logo img{
	width:  356px;
	height: auto;
}

.footer_banner_area a{
	display: block;
}
.footer_banner_area img{
	width: 255px;
	height: auto;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
footer{
	margin-left: 0;
}
}
@media only screen and (max-width: 767px) {
footer{
	margin-left: 0;
}
	.footer_logo img{
	width:  235px;
	height: auto;
}
}


/*===========
コピーライト
===========*/
.copy {
  padding-top: 56px;
  padding-bottom: 36px;
}
.copy .copy_sns {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.copy_sns li {
  margin-right: 26px;
}
.copy_sns li:last-child {
  margin-right: 0;
}
.footer_btn {
  position: fixed;
  right: 15px;
  bottom: 30px;
  z-index: 998;
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {
  .footer_btn {
    width: 42px;
  }
 .copy {
  padding-top: 36px;
}
}


/*==================================
アコーディオン
===================================*/
/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #B9B9B9;
}
/*.accordion-area li {
  background-color: rgba(235, 233, 228, 0.9);
  border: 1px solid rgba(235, 233, 228, 0.9); ←消さない
  margin-bottom: 20px;
}
.accordion-area li:last-child {
  margin-bottom: 0;
}*/
/*アコーディオンタイトル*/
.title {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  padding: 15px 0;
  transition: all .5s ease;
}
/*アイコンの＋と×*/
 .title::after {
	  content: '';
  position: absolute;
	display: inline-block;
	background-image: url("images/icon/icon-plus.svg");
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	  top: 43%;
	 right: 15px;
}
/*　closeというクラスがついたら形状変化　*/
.title.close::after {
 	  content: '';
  position: absolute;
	display: inline-block;
	background-image: url("images/icon/icon-minus.svg");
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	  top: 43%;
	 right: 15px;
}
/*アコーディオンで現れるエリア*/
.accordion-inner {
  display: none; /*はじめは非表示*/
  background: #F3F4F2;
  padding: 3%;
}
.accordion-inner li{
	font-size: 14px;
	margin-bottom: 15px;
}
.accordion-inner li:first-child{
	padding-top: 5px;
}
.accordion-inner li:last-child{
	margin-bottom: 0;
}
.accordion-inner li a{
	display: block;
}
.accordion-inner li a:hover{
	text-decoration: underline;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .accordion-area {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .accordion-area {
    width: 100%;
  }
  .title {
    padding: 15px 54px 15px 15px;
  }
  .accordion-inner-wrap {
    display: block;
  }
  .accordion-inner-wrap .inner_left {
    width: 100%;
    margin-bottom: 20px;
  }
  .accordion-inner-wrap .inner_right {
    width: 100%;
    text-align: center;
  }
}
#wrap_all path {
  fill: #fff;
  stroke: #fff;
  stroke-width: 2px;
  animation: path01 3s ease-in;
}
@keyframes path01 {
  0% {
    fill: transparent;
    stroke-dasharray: 4000px;
    stroke-dashoffset: 4000px;
  }
  50% {
    stroke-dashoffset: 0;
  }
  60% {
    fill: transparent;
  }
  90% {
    fill: #fff;
  }
}
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #eee;
  text-align: center;
  color: #fff;
}
/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
  width: 300px;
}
/*=============== SVGアニメーション内の指定 =================*/
/*アニメーション前の指定*/
#mask path {
  fill-opacity: 0; /*最初は透過0で見えない状態*/
  transition: fill-opacity .5s; /*カラーがつく際のアニメーション0.5秒で変化*/
  fill: none; /*塗りがない状態*/
  stroke: #fff; /*線の色*/
}
/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
  fill: #fff; /*塗りの色*/
  fill-opacity: 1; /*透過1で見える状態*/
  stroke: none; /*線の色なし*/
}
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
}
.loader-slide {
  width: 100%;
  height: 100%;
  background-color: #81CDDD;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#splash_logo img {
  width: 340px;
  height: auto;
}
.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-delay: 3s;
}
@keyframes slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.done {
  display: none;
}