@charset "utf-8";

@media print, screen and (min-width: 701px) {
	.display-sp {
		display:none !important;
	}
}
@media screen and (max-width: 700px) {
	.display-pc {
		display:none !important;
	}
}

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #000;
	font-family: "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 300;
	line-height: 1.65em;
}

html {
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
}

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

/* -----------------------------------------------------------------------
　レイアウト
--------------------------------------------------------------------------*/
@media print, screen and (min-width: 1501px) {
	.head-wrap {
		width:100%;
		height:765px;
		position:relative;
		overflow:hidden;
	}
	.head-img,
	.footer-img {
		width:1825px;
		position:absolute;
		top:0;
		left: 50%;
		transform: translateX(-50%);
	}
	.display-pc2 {
		display:none !important;
	}
	.footer-wrap {
		width:100%;
		height:375px;
		position:relative;
		overflow:hidden;
	}
}

@media screen and (max-width: 1500px) {
	.display-wide {
		display:none !important;
	}
}

.body-wrap {
	max-width:1100px;
	margin:0 auto;
}

.cta-wrap {
	padding:30px 15px;
}

.cta-wrap2 {
	padding:30px 15px 80px;
}

.cta-btn {
	display:block;
	max-width:500px;
	margin:0 auto;
	transition: 0.4s ease-in-out;
}

@media screen and (max-width: 900px) {
	.cta-btn {
		max-width:400px;
	}
}

@media screen and (max-width: 500px) {
	.cta-wrap {
		padding:20px 15px;
	}
	.cta-wrap2 {
		padding:20px 15px 50px;
	}
	.cta-btn {
		width:75%;
	}
}

@media print, screen and (min-width: 701px) {
	.cta-btn:hover {
		opacity:0.8;
		transform:scale(1.02,1.02);
		transition: 0.4s ease-in-out;
	}
}

/* -----------------------------------------------------------------------
　TOPに戻るボタン
--------------------------------------------------------------------------*/
#page-top {
	all: unset;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:#6b4709;
    z-index:200;
    text-align:center;
    display: flex;
	align-items: center;
	cursor: pointer;
	/* 最初は非表示 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* 非表示中はクリックできないようにする */
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-top.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#page-top:focus-visible {
  outline: 3px solid #09f;   /* 好きな色に変更可 */
  outline-offset: 0;
}

.arrow-up {
  position: relative;
  width:3px;
  height: 20px;
  background: #fff;
  margin:0 auto;
}

.arrow-up::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transform-origin: top right;
  position: absolute;
  top: -0.05em;
  right: 50%;
  box-sizing: border-box;
}

#page-top:hover {
    background:#926e36;
    transition: 0.4s ease-in-out;
}

@media screen and (max-width: 600px) {
	#page-top {
		bottom: 20px;
    	right: 20px;
    	width:40px;
    	height:40px;
	}
}