@charset "UTF-8";

/*
	Theme Name: Theme
	Author: none
	Version: none
*/

/*================================================================================
base
================================================================================*/

/* global ------------------------------------------------*/

html {
    overflow-x: hidden;
}

body {
    color: #000000;
    line-height: 2;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 2px;
    overflow-x: clip;
}

a:hover {
    transition: ease .2s;
    opacity: 0.6;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.7;
    font-weight: 600;
}

/*================================================================================
common
================================================================================*/

/* effect ------------------------------------------------*/

.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;
}

.fadein.scroll {
	opacity : 1;
	transform : translate(0, 0);
}

.appear {
    animation: appear 1s ease normal;
}

@keyframes appear {

    from {
	    opacity: 0;
	    transform : translate(0, 50px);
	}
	to {
	    opacity: 1;
	    transform : translate(0, 0);
	}
}

/*================================================================================
index
================================================================================*/

/* back ------------------------------------------------*/

.back.type-1 {
	background-image: url("assets/img/index/pattern1.jpg");
	background-size: 70px auto;
	background-position: center center;
	padding: 0 0 65px 0;
}
.back.type-1-2 {
	background-image: url("assets/img/index/pattern1.jpg");
	background-size: 70px auto;
	background-position: center center;
	padding: 0px 0 10px 0;
}
.back.type-2 {
	background-image: url("assets/img/index/pattern2.jpg");
	background-size: 70px auto;
	background-position: center center;
	padding: 100px 0 200px 0;
}

.back.type-3 {
	background-image: url("assets/img/index/pattern3.jpg");
	background-size: 70px auto;
	background-position: center center;
	padding: 100px 0 30px 0;
	border-top: 10px solid #000000;
	border-bottom: 90px solid #000000;
}
.back.type-4 {
	background-image: url("assets/img/index/pattern3.jpg");
	background-size: 70px auto;
	background-position: center center;
	padding: 100px 0 30px 0;
	border-top: 10px solid #000000;
	border-bottom: 10px solid #000000;
}
.back.type-5 {
	background-image: url("assets/img/index/pattern2-2.jpg");
	background-size: 70px auto;
	background-position: center center;
	height: 100px;
}



/* visual ------------------------------------------------*/

.top-hero_visual {
	margin: 0 0 40px 0;
}

/* campaign ------------------------------------------------*/

.top-campaign_item {
	margin: 0 0 100px 0;
}

.top-campaign_content {
	margin: 0 -25px;
}

/* branch ------------------------------------------------*/

h2.top-branch_heading {
	margin: -200px 0 60px 0;
}

.top-branch .column-content .row-outer {
	margin: 0 -15px;
}

.top-branch .column-content .col-inner {
	padding: 0 15px;
}

.top-branch .column-content .column-item {
	margin: 0 0 30px 0;
}

.top-branch_shop {
	position: relative;
}

.top-branch_shop-link {
	display: block;
	position: absolute;
	bottom: 9%;
	left: 10%;
	width: 81%;
	height: 28%;
}

@media (max-width: 991px) {

	/* back ------------------------------------------------*/
	
	.back.type-1 {
		background-size: 60px auto;
		padding: 0 0 40px 0;
	}
	.back.type-1-2 {
		background-size: 60px auto;
		padding: 0px 0 20px 0;
	}
	.back.type-2 {
		background-size: 60px auto;
		padding: 40px 0 80px 0;
	}
	
	.back.type-3 {
		background-size: 60px auto;
		padding: 40px 0 10px 0;
		border-top: 5px solid #000000;
		border-bottom: 40px solid #000000;
	}
	.back.type-4 {
		background-size: 60px auto;
		padding: 40px 0 10px 0;
		border-top: 5px solid #000000;
		border-bottom: 5px solid #000000;
	}	
		.back.type-5 {
		background-size: 60px auto;
		height: 70px;
	}

	
	/* visual ------------------------------------------------*/
	
	.top-hero_visual {
		margin: 0 0 20px 0;
	}
	
	/* campaign ------------------------------------------------*/
	
	.top-campaign_item {
		margin: 0 0 20px 0;
	}
	
	.top-campaign_content {
		margin: 0 -10px;
	}
	
	/* branch ------------------------------------------------*/
	
	h2.top-branch_heading {
		margin: -80px 0 20px 0;
	}
	
	.top-branch .column-content .row-outer {
		margin: 0;
	}
	
	.top-branch .column-content .col-inner {
		padding: 0;
	}
	
	.top-branch .column-content .column-item {
		margin: 0 0 20px 0;
	}
	
	.top-branch_shop {
		position: relative;
	}
}

@media (max-width: 650px) {

	/* back ------------------------------------------------*/
	
	.back.type-1 {
		background-size: 60px auto;
		padding: 0 0 20px 0;
	}
	.back.type-1-2 {
		background-size: 60px auto;
		padding: 0px 0 20px 0;
	}
	.back.type-2 {
		background-size: 60px auto;
		padding: 40px 0 70px 0;
	}
	
	.back.type-3 {
		background-size: 60px auto;
		padding: 40px 0 10px 0;
		border-top: 5px solid #000000;
		border-bottom: 30px solid #000000;
	}
	.back.type-4 {
		background-size: 60px auto;
		padding: 40px 0 10px 0;
		border-top: 5px solid #000000;
		border-bottom: 5px solid #000000;
	}	
		.back.type-5 {
		background-size: 60px auto;
		height: 40px;
	}
}

.go-top {
	position: fixed; /*固定表示*/
	bottom: 15px;
	right: 10px;
	text-decoration: none;
	display: none;
	height: 50px;
	width: 50px;
}
.go-top img {
	width: 100%;
	height: auto;
}

@media(max-width:768px) {
.go-top {
	height: 40px;
	width: 40px;
	bottom: 5px;
	right: 5px;
}
}


	/* メイン店舗情報 ------------------------------------------------*/

.top-hero_visual-tenpo {
 	display: flex;
    flex-wrap: wrap;         /*折り返し有り・複数行*/
    justify-content: space-between; /*均等に間隔をあける*/
}
.top-hero_visual-tenpo .kuwashikuha{
	width: 48.5%;
}
.top-hero_visual-tenpo a{
 	display: block;
	width: 23.5%;
    text-align: center;
	background-color: #e9decd;
	padding: 8px 15px ;
	margin-bottom: 15px ;
	border: solid 3px #000;
	border-radius: 15px;
}
.top-hero_visual-tenpo::before{
  content:"";
  display: block;
  width:23.5%;
  order:1;
}
.top-hero_visual-tenpo::after{
  content:"";
  display: block;
  width:23.5%;
}

.top-hero_visual-tenpo a h3{
    letter-spacing: 0;
	color: #e55934;
	padding-bottom: 5px ;
	margin-bottom: 3px ;
	border-bottom: dotted 2px #000;
}
.top-hero_visual-tenpo a div{
    font-weight: 600;
    letter-spacing: 1px;
}

@media(max-width:991px) {
.top-hero_visual-tenpo a{
	width: 32%;
}
.top-hero_visual-tenpo .kuwashikuha{
 	display: none;
}
}
@media(max-width:768px) {
.top-hero_visual-tenpo a{
	width: 49%;
	border: solid 3px #000;
}
}
@media(max-width:650px) {
.top-hero_visual-tenpo a{
	width: 100%;
 	display: flex;
    align-items: center;     /*中央揃え*/
	border: solid 2px #000;
	padding: 5px 0px ;
	margin-bottom: 12px ;
}
.top-hero_visual-tenpo a h3{
	width: 60%;
    font-size: 16px;
	padding-bottom: 0 ;
	margin-bottom: 0 ;
	border: none;
}
}


/*--------------- flex参考 ---------------*/

 .flex_dummy{
 	display: flex;
	   
    flex-wrap: no-wrap;      /*折り返しなし・単一行（デフォルト）*/
    flex-wrap: wrap;         /*折り返し有り・複数行*/
    flex-wrap: wrap-reverse; /*折り返し有り・複数行・折り返し地点が逆*/

	   
    justify-content: flex-start;    /*左（上）揃え*/
    justify-content: flex-end;      /*右（下）揃え*/
    justify-content: center;        /*中央揃え*/
    justify-content: space-between; /*均等に間隔をあける*/
    justify-content: space-around;  /*均等に間隔をあける・両端にも間隔をあける*/
	   
    align-items: flex-start; /*上（左）揃え*/
    align-items: flex-end;   /*下（右）揃え*/
    align-items: center;     /*中央揃え*/
    align-items: baseline;   /*ベースラインを揃える*/
    align-items: stretch;    /*全ての要素の高さを揃える*/   

    align-content: flex-start;    /*上（左）揃え*/
    align-content: flex-end;      /*下（右）揃え*/
    align-content: center;        /*中央揃え*/
    align-content: space-between; /*均等に間隔をあける*/
    align-content: space-around;  /*均等に間隔をあける・両端にも間隔をあける*/
    
	background-image: url(../img/aaaa.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #FFFFFF;
　background-size: auto 100%;

}
.aaaaaaaaaaa >:first-child {
	margin-top: 0px;	
}