@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');


:root {
  --fonts-color: #051332;
  --bg-color:#FBFDFB;
  --hover-color:#83776a;
  --bg-tya:#4f3d2b;
  --link-color:#888266;
  --link-hover:#5c5845;

}

html{
	scroll-behavior: smooth;

}
body {

font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-style: normal;
font-weight: 300;
	line-height: 1.6;
	font-size: 15px;
	color:var(--fonts-color);
}
.max_w{
    max-width: 1400px;
}
#wrapper{
	overflow: hidden;
}

a {
  color: var(--fonts-color);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover {
  text-decoration: none!important;
  color:var(--hover-color);
}
a:focus, a:active {
  outline: none;
}

::-webkit-selection {
  color: #777;
  background: #f4f5f7;
}

::-moz-selection {
  color: #777;
  background: #f4f5f7;
}

::selection {
  color: #777;
  background: #f4f5f7;
}
ul{
	margin:0;
	padding:0;
	list-style: none;
}
.min{
	font-family: yu-mincho-36p-kana,yu-mincho-pr6n, sans-serif;
	font-size: 2.3em;
}
.sub_h3{
	font-size: 1em;
}
/**header**/




/* 横並びレイアウト */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ロゴ部分 */
.logo img {
  height: 60px;
  width: auto;
}

/* ナビ部分 */
.main-nav ul {
  display: flex;
  gap:40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  position: relative;
  padding: 5px 0;
}

.main-nav a:hover {
  color: #8D785A;
}

/* 下線アニメーション（参考サイト風） */
.main-nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 1px;
  background: #8D785A; ;
  transition: width 0.3s ease;
}

.main-nav a:hover::after {
  width: 100%;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .main-nav a {
    display: block;
    width: 100%;
  }
}

/***/

/**btn_arrow**/
.link2 p{
	display: block;
}
.btn_arrow{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
    color: #fff;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btn_arrow::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    top:50%;
    right:13%;
    /*下線の形状*/    
    width: 9%;
    height: 1px;
  background:#fff;
    /*アニメーションの指定*/
    transition: all .3s;
	z-index: 100;
}

.btn_arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:47%;
    right:13%;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
  background:#fff;
    transform: rotate(20deg);
    /*アニメーションの指定*/
    transition: all .3s;
	z-index: 100;
}

/*hoverした際の移動*/
.btn_arrow:hover::before{
    right:12%;
	background-color:#62543E!important
}

.btn_arrow:hover::after{
    right:12%;
	background-color:#62543E!important
}



/************************/

header{
	background-color:#fff;
	height: 130px;
}
header h1{
	font-size: 2em;
	letter-spacing: 2px;
}
header h1 span{
	font-size: 23px;
	display: inline-block;
	margin-right: 10px;
}
header h2{
	font-size: .7em;
	letter-spacing: 2px;
}
header h3{
	margin-bottom: 0;
	font-size: 1.1em;
	text-align: center;
}

/**logo**/
header h1{
font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: 3rem;
}
/**sub_nav**/
.sub_nav li a{
	display: block;
	color:#fff;
	font-size: .8em;
	padding: 5px 15px;
}


/*nav***/




.list-inline-item:not(:last-child) {
    margin-right: 0;
}
.article_nav .sub_nav li a{
	color:#171717!important;
}
#nav{

	padding-top: 5px;
	max-width: 600px;
}
#nav li a{
	font-size: 1em;
	display: block;
	position: relative;
	z-index: 2;
}
#nav li a span{
	display: block;
	font-size: 10px;
	margin:0;
	padding:0;
	letter-spacing: 1px;
	color:#62543E
}
.con_link a{
	display: block;
	background-color:#F8D100;
	padding: 13px 45px;
	border-radius:100vw;
}



/*slide**/

.fv-css-slider {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.fv-css-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fvSlide 24s infinite;
  transform: scale(1);
}

.fv-css-slider img:nth-child(1) { animation-delay: 0s; }
.fv-css-slider img:nth-child(2) { animation-delay: 6s; }
.fv-css-slider img:nth-child(3) { animation-delay: 12s; }
.fv-css-slider img:nth-child(4) { animation-delay: 18s; }

@keyframes fvSlide {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1.06); }
  40%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}


/**slide_text*/

.text_slide{
	height: 100px;
	display: block;
	position: absolute;
	top: 40%;
	width: 100%;
}
.slide_text_w{
	position: absolute;
	width: 100%;
	display: block!important;
    z-index: 10;
}
.slide_text_w h2{
    margin-bottom: 0;
    font-style:italic;
    font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    letter-spacing: 2px;
	font-size: 2.5em;
	text-align: center;
	color:#fff;
	z-index: 2
}
.slide_text_w h3{
	font-size: 1.5em;
	letter-spacing: 3px;
	margin-top: 10px;
	color:#fff;
}

/***concept***/
.line_mark{
	background:linear-gradient(transparent 70%,rgba(175,144,100,.3) 70%);

	
}
#concept{
	background-image:url("../img/concept_bg.png");
	background-position: right top;
	background-repeat: no-repeat;
	background-size: cover;

}
#concept h3{
	font-size: 2.2em;
	color:#161310;
}
#concept h4{
	font-size: 1.7em;

}
.concept_box h5{
	font-size: 1.2em;
	text-align: center;
	line-height:1.4em;
	border-left:1px solid #8D785A;
	border-right:1px solid #8D785A;
	padding:0px 10px;
	font-weight: bold;
}


/**link***/
.link_btn a{
	display: block;
	background-color:#8D785A;
	color:#fff;
	padding:15px 0;
	text-align: center;
	cursor: pointer;
	position: relative;
	max-width: 350px;
	border-radius: 100vw;

}
.link_btn a:hover{
	background-color:#62543E;
}
.link_btn a:before{
	content: "";
    position: absolute;
    right: 25px;
    top: calc((100% - 7px)/2);
    width: 7px;
    height: 7px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-45deg);
	transition: .3s linear;
}
.link_btn a:hover:before{
	right: 20px;
}



.link p{
	margin-bottom: 0;
}
.link2 a{
	display: block;
	background-color:#333;
	color:#fff;
	padding:25px 0;
	text-align: center;
	cursor: pointer;
}
.link2 a:hover{
	background-color:#62543E;
}

.link2 p{
	margin-bottom: 0;
}

.btn_link{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	color:#333;
	border:2px solid #333;
}
.btn_link:hover{
	border:2px solid rgba(98,84,62,1.00)
}

/*ボタン内spanの形状*/
.btn_link span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}

.btn_link:hover span{
  color:#333!important;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
    /*色や形状*/
  background:#fff;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;

}

/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.link2.f_mail a.btn_link{
	background-color:#1d69cf;
	border:2px solid #fff;
}

.link2.f_mail a.btn_link:hover{
	background-color:#1d69cf;
	border:2px solid #1d69cf;

}
.link2.f_mail a.btn_link:hover span{
	color:#1d69cf!important;
}
/*hoverした際の移動*/
.link2.f_mail .btn_arrow:hover::before{
	background-color:#1d69cf!important
}

.link2.f_mail .btn_arrow:hover::after{
	background-color:#1d69cf!important
}

/*cl**/
.cl_w{
	color:#fff;
}


.footer-contact {
  background: #f8f9fa;
  padding: 60px 0;
}

p.copy{
	font-size: 10px;
	padding:15px;
	text-align: center;
	letter-spacing: 2px;
}

	/****スマホ*****/


/* メインコンテンツ */
.contents {
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
	box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}
/* チェックボックスオンの時 */
.check:checked ~ .contents {
    -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
}

/* ドロワー */
.drawer-menu {
    position: fixed;
    top: 0px;
    right: 0;
    width: 100%;
    height: 100%;
	padding: 100px 0;
	background: #333;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
	z-index: 1111111111;
	overflow: scroll;
}

.drawer-menu li {
	text-align: left;
}

.drawer-menu li a {
	display: block;
	color: #fff;
	-webkit-transition: all .8s;
	transition: all .8s;

	font-weight: bold;
	padding:15px 0;
	border-bottom: 1px solid #eee;
}

.drawer-menu li a:hover {
	color: #5E4923;

}
/* ------------------------------------------------ checkbox */
.check {
	display: none;
}

/* ------------------------------------------------ menu button */
.menu-btn {
	position: fixed;
	display: block;
	top: 0px;
	right: 0px;
	display: block;
	width: 52px;
	height: 50px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 111114;
	background-color:#333;
    background-size: cover;
	background-position: right;
	padding:3px;
	
}

.bar {
	position: absolute;
	top: 7px;
	left: 11px;
	display: block;
	width: 33px;
	height: 1px;
	background: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.bar.middle {
	top: 16px;
	opacity: 1;
}

.bar.bottom {
	top: 25px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}

.menu-btn__text {
	position: absolute;
	bottom: 3px;
	left: 11px;
	margin: auto;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
	font-size: 10px!important;
  font-family: "Outfit", sans-serif;
  font-style: normal;

	letter-spacing: 1px
}

.menu-btn:hover .bar {
	background:  #fff;
}
.menu-btn:visit .bar {
	color: #fff;
}
.menu-btn:hover .menu-btn__text {

}

.close-menu {
	position: fixed;
	top: 0;
	right: 250px;
	width: 100%;
	height: 100vh;
	background: #1A3249;
	cursor: url(../images/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}

/* ------------------------------------------------ checked */
.check:checked ~ .drawer-menu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index:13;
}

.check:checked ~ .contents {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
	visibility: hidden;
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
	width: 42px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
	width: 42px;
	top: 36px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.2);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}
.drawer-title {
  font-weight: 700;
  margin-top: 20px;
	
}

.drawer-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 12px;
	background-color:#fff;
	display: inline-block;
	padding: 3px 10px;
}


.drawer-child a{
	font-size: .8em!important;
}
.drawer-nagumo a{font-size: .8em!important;}
.sp_toi a{
  background-color: #856835;
  color:#fff;
  padding:17px 35px;
  text-align: center;
  display: block;
	font-size: 1.1em;
	border-radius: 50vw;
	margin-top: 20px;
}

/**sp***/
@media screen and (max-width: 552px) {
	header h1{
		font-size: 2em;
		letter-spacing: -1px;


	}
	header h2{
		font-size:0.74em;
		letter-spacing:-0.5px;
	}
}

@media screen and (max-width:572px) {

	.carousel-item{
		height: 40vh;
	}
	/*mail**/
	.wpcf7 .template02 p.form__body{
		padding:30px 0!important;
	}
	#wpcf7-f5-p109-o1{
		margin-bottom: 30px;
	}
}
@media (max-width: 768px) {
	header{
		height: 100px;
	}
	.slide_text_w{
		width: auto;
	}
	.slide_text_w h2{
		font-size: 1.4em;
	}
	.slide_text_w h3{
		font-size: .91em;
	}
	.logo img {
	  height: 30px;

	}
	.link_btn a{
		margin:20px auto;
		max-width: 300px;
	}
	.f_box{
		padding: 15px;
		border: 1px solid #eee;
	}
	.link_mail{
		width: 300px;
		padding: 15px 0;
	}
footer{

	background-size: contain;
	padding-bottom: 70px;
}
	/**article*/
	#article{
		padding: 0 15px;
	}

}