@charset "utf-8";

body {
	font-family: 'Noto Sans JP', sans-serif;
}

html {scroll-behavior: smooth;}

img {
    max-width: 100%;
    height: auto;/*高さ自動*/
}

a {
    display: block;
    text-decoration-line: none;
}

a:hover,a img:hover {
    color: #FFFFFF;
    opacity: 0.8;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {text-decoration: none;}

select {
  -webkit-appearance: none;
  appearance: none; /* デフォルトの矢印を非表示 */
}

.box600 {max-width: 600px;}

.box800 {max-width: 800px;}

.box1000 {max-width: 1000px;}

.orange-font {color: #E83828;}

.small-font {font-size: 14px;}


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

/* ablut area */
h1 {margin-top: 0;}

h1 img {width: 100%;}

.top_area,.contact_area,.orange_bg {
	background-color: #FFBE3B;
}

.about_area {
	max-width: 800px;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* gourmet area */

.gourmet_area {
	background-image: url("../images/gourmet_bg.jpg");
	background-repeat: repeat-y;
	background-size: 100%;
}

.gourmet_area_ttl {
	margin-top: 0;
}

.gourmet_area p {
	color: #fff;
	filter: drop-shadow(0px 0px 3px #40220F);
	line-height: 1.4em;
}

.gourmet_content {
	max-width: 1400px;
	padding-left: 1rem;
	padding-right: 1rem;
}

.gourmet_img {
	z-index: 1;
}

div.gourmet_img:first-of-type {
	margin-left: 5rem;
}

div.gourmet_img:last-of-type {
	margin-right: 5rem;
}

div.position-r:first-of-type {
	padding-left: 5rem;
	padding-top: clamp(8rem,15vw,15rem);
	text-align: right;
}

div.position-r:last-of-type {
	padding-right: 5rem;
	padding-top: clamp(8rem,15vw,15rem);
	text-align: left;
}

.gourmet_ttl {
	position: absolute;
	top: 6%;
}

.gourmet_fl > div:first-of-type .gourmet_ttl {
	right: -19%;
}

.gourmet_fl > div:last-of-type .gourmet_ttl {
	left: -19%;
}

.gourmet_fl >div.position-r p {
	max-width: 380px;
	display: inline-block;
}

.yellow-txt_box {
	color: #40220F;
	background-color: #FFE200;
	padding: 0.2rem 0.5rem;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.over_bg_img {
	top: -1px;
	width: 100%;
}
.under_bg_img {
	bottom: -1px;
	width: 100%;
}

/* contact area */

.contact_form_area {
	background-color: #fff;
	border-radius: 10px;
}

.form_tbl {
	border-spacing: 4px;
	width: 100vh;
	width: -webkit-fill-available;
	max-width: 100%;
}

.form_tbl th {
	background-color: #FFE200;
	border-radius: 10px;
	color: #40220F;
	font-weight: bold;
	text-align: center;
	padding: 1rem;
	width: 180px;
	max-width: 100%;
}

.form_tbl td {font-size: clamp(14px,2vw,16px);}

.form_tbl td input,.form_tbl td select,.form_tbl td textarea {
	border: none;
	background-color: #FFF5CC;
	border-radius: 10px;
	padding: 1rem;
}

.form_tbl td select {
	width: 320px;
	max-width: 100%;
	cursor: pointer;
}

.form_tbl td select:invalid {color: #898989;}
.form_tbl td select option {color: #000;}
.form_tbl td select option:first-child {color: #898989;}

.form_tbl td input:focus,.form_tbl td select:focus,.form_tbl td textarea:focus {
	outline: #FFE200 solid 3px;
	outline-offset: -3px;
}

.form_tbl td input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s !important;
}

.form_tbl td .long_txt {
	width: 540px;
	max-width: 100%;
}

.form_tbl tr.mail_conf th {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.option_cursor {
	position: relative;
	display: inline-block;
}

.option_cursor:before {
	display: block;
	content: "";
	width: 30px;
	height: 30px;
	background-color: #FFE200;
	border-radius: 5px;
	position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
	pointer-events: none;
}

.option_cursor:after {
	display: block;
	content: "";
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 10px solid transparent;
	border-top: 10px solid #40220F;
	border-radius: 5px;
	position: absolute;
	right: 5.5%;
    top: 65%;
    transform: translateY(-60%);
    pointer-events: none;
}

input[type="reset"] {
	width: 225px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #595757;
	border: none;
    box-shadow: 0 0 0 6px #DCDDDD;
	border-radius: 40px;
	font-weight: bold;
	color: #fff;
	margin-right: 1rem;
    margin-left: 1rem;
}

input[type="submit"] {
	width: 225px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #E83828;
	border: none;
    box-shadow: 0 0 0 6px #FCC3C0;
	border-radius: 40px;
	font-weight: bold;
	color: #fff;
	margin-right: 1rem;
    margin-left: 1rem;
}

input[type="reset"]:hover,input[type="submit"]:hover {
	opacity: 0.7;
	cursor: pointer;
}

/* footer */

footer {
	background-color: #40220F;
	font-weight: bold;
	color: #fff;
}

footer h3 {font-size: clamp(20px,3vw,30px);}


@media screen and (max-width: 768px) {
	
	/* contact area */
	.form_tbl {border-spacing: 0;}
	
	.form_tbl th,.form_tbl td {
		display: block;
		width: calc(100% - 2rem);
	}
	
	.form_tbl td {margin-bottom: 0.5rem;}
	
	.option_cursor {display: block;}
	
	.form_tbl td .long_txt,.form_tbl td input, .form_tbl td select, .form_tbl td textarea {
		/* width: -webkit-fill-available; */
		width: 100%;
		/* min-width: 262px; */
	}
	
	.option_cursor:after {
		right: 4.8%;
	}
	
	.sp_width100,.form_tbl td.sp_width100 {width: 100%;}
	
}

@media screen and (max-width: 560px) {
	
	/* contact area */
		.option_cursor:after {
		right: 5.5%;
	}
}

/* メールフォーム送信後設定 */
.form_top {
	display: block;
    width: 225px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #FFE200;
    outline: #fff solid 6px;
    outline-offset: -3px;
    border-radius: 40px;
    font-weight: bold;
    color: #40220F;
}

.form_top:hover {
	opacity: 1;
    color: #40220F;
    background-color: #FFB600;
}

input[type="button"].form_back {
	width: 225px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #E60012;
    outline: #fff solid 6px;
    outline-offset: -3px;
    border-radius: 40px;
    font-weight: bold;
    color: #fff;
}

input[type="button"].form_back:hover {
	background-color: #C30D23;
}


/* ページトップへ戻るボタン */
#page-top {
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 5000;
}

#page-top a {
	display: block;
	width: clamp(5em,9vw,7em);
	text-align: center;
}

#page-top a:hover {
	opacity: 0.6;
}

@media screen and (max-width: 768px) {
	#page-top a:hover,#page-top a img:hover {opacity: 1;}
}