@charset "UTF-8";

@import url("css/reset.css");
@import url("css/all.min.css");
@import url("css/animate.css");

/*基本フォント*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:700&display=swap&subset=japanese");


/*::::::::::::::::::::::::::::::::::::::::::::::::::
base
::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body {
	font-size: 18px;
	line-height: 1.5;
	color: #251e1c;
	background-color: #fff;
	font-family: 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
@media(max-width:543px) {
	html, body {
		font-size: 16px;
	}
}
@media(max-width:499px) {
	html, body {
		font-size: 15px;
	}
}

.wrapper {
	overflow: hidden;/*スマフォの画面右隙間削除*/
	min-height: 100%;
}

/*container設定*/
.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
	width: 100% !important;
	max-width: 500px !important;
	overflow: auto;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::
共通
::::::::::::::::::::::::::::::::::::::::::::::::::*/
a {
	transition: all .5s ease;
}
a:hover,
a:focus {
	color: #333;
}
img {
	width: 100%;
	max-width: 470px;
}
strong, .strong { font-weight: bold; }
figcaption {
	text-align: left;
	padding-top: 10px;
	padding-bottom: 20px;
}
p,
dd {
	text-align: justify;
	text-justify: distribute;
}

/*ローディング*/
.loading {
	display: none;
	position: fixed;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 100;
}

/*改行設定*/
.br_over992 { display: none; }
@media (min-width:992px) {.br_over992 {display: block;}}

/*画像角丸設定*/
.img_radius {
	border-radius: 8%;
}
.img_radius_50 {
	border-radius: 50%;
}

.back_giza_top img {
	width: 100%;
	max-width: 100%;
	vertical-align: bottom;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::
ヘッダ
::::::::::::::::::::::::::::::::::::::::::::::::::*/
.language {
	text-align: right;
	padding: 5px 0;
}
.language a {
	padding: 3px 10px;
	margin: 3px 5px 3px 0;
	color: #333;
	font-weight: bold;
	background-color: #eee;
	border-radius: 3px;
	font-size: 12px;
	text-decoration: none;
}
.language a:hover {
	color: #fff;
	background-color: orange;
}
.language a.here {
	background-color: #fee884;
}
.language a.here:hover {
	color: #333;
}

header {
	padding-top: 30px;
	background: url(img/header_back.png) repeat scroll center top;
}
h1 {
	margin-bottom: 30px;
	font-size: 1.7rem;
	font-weight: bold;
	text-align: center;
	color: #6c0047;
}
@media (max-width:399px){
	h1 {
		font-size: 1.5rem;
	}
}
@media (max-width:349px){
	h1 {
		font-size: 1.3rem;
	}
}
figure {
	text-align: center;
	margin: 1rem auto;
}
.box {
	padding-top: 30px;
	padding-bottom: 30px;
}
/*header*/
header h1 {
	padding: 0 15px;
}
header h1 img {
	display: block;
	margin: 0 auto;
}
header h1 img.logo_endo {
	width: 200px;
	margin: 15px auto;
}
header .container_wrapper {
	background-color: #6c0047;
}
header .container {
	position: relative;
}
header figure img {
}
header figure::after {
	content: '';
	background: url(img/header_02.png) no-repeat scroll right top;
	background-size: contain;
	width: 35%;
	height: 250px;
	display: block;
	position: absolute;
	top: 0;
	right: 15px;
}
@media (max-width:449px) {
	header figure::after {
		width: 30%;
		height: 180px;
	}
}
/*intro*/
.intro {
}
/*brands*/
.brands {
	color:#fff;
	background: url(img/back_giza.png) repeat-y scroll center top;
	background-size: 100% auto;
}
.brands h1 {
	color: #fff;
}
.brands img {
	border: 3px solid #fff;
}
.brands dl {
	padding-bottom: 15px;
}
.brands dt {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 7px;
}
.brands dl {}

/*creation*/
.creation {
	background: #fffbd0 url(img/creation_back.png) repeat scroll center top;
	padding-bottom: 70px;
}
.creation img {
}

/*recipe*/
.recipe {
	color:#fff;
	background: url(img/back_giza.png) repeat-y scroll center top;
	background-size: 100% auto;
}
.recipe h1 {
	color: #fff;
}
.recipe img {
	border: 3px solid #fff;
}

/*items*/
.items {
	padding-bottom: 20px;
	background: #fffbd0 url(img/items_back.png) repeat-x scroll center center;
	background-size: 500px auto;
	margin: 0;
	padding-top: 20px;
}
.items figure {
	position: relative;
}
.items figcaption {
	position: absolute;
	bottom: 12px;
	right: 20px;
	color: #fff;
	padding: 0;
	font-size: 0.9rem;
}
.items_line {
	display: flex;
	align-items: center;
}
.items_line img {
	width: 140px;
	margin: 0 auto;
	display: block;
}
.items_line::before,
.items_line::after {
	content: '';
	background-color: #6c0047;
	height: 26px;
	display: block;
	flex-grow: 1;
}
@media (max-width:399px) {
	.items_line img {
		width: 100px;
	}
	.items_line::before,
	.items_line::after {
		height: 15px;
	}
}

/*contact*/
.contact {
	background-color: #fffbd0;
	padding: 0px 0;
}
.contact_01 {
	width: 80%;
	max-width: 400px;
}
.contact_logo {
	width: 80%;
	max-width: 360px;
	margin-top: 15px;
}
.tel {
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #6c0047;
	border-bottom: 4px dotted #251e1c;
	padding-bottom: 30px;
	margin-top: 20px;
	margin-bottom: 30px;
	line-height: 1.3;
}
.tel strong {
	display: block;
	font-size: 2.7rem;
}
@media (max-width:399px) {
	.tel {
		font-size: 1.3rem;
	}
	.tel strong {
		font-size: 2rem;
	}
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::
ページトップ
::::::::::::::::::::::::::::::::::::::::::::::::::*/
.page_top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	z-index: 3;
}
.page_top a {
	background-color: #fff;
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	padding-top: 5px;
	border: 3px solid #6c0047;
	border-radius: 50%;
}
.page_top a i {
	color: #6c0047;
	font-size: 36px;
	transition: .7s;
}
.page_top a:hover {
	color: #fff;
	background-color: #6c0047;
	border-color: #6c0047;
}
.page_top a:hover i {
	color: #fff;
}

@media (max-width: 767px) {
	.page_top {
		display: none !important;
	}
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::
loading
::::::::::::::::::::::::::::::::::::::::::::::::::*/
@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; }
}

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; }
}

.ball-scale-multiple {
  position: relative;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px); }
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-multiple > div {
    background-color: #ccc;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -30px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite;
}