@charset "utf-8";
/* Top */
#mv {position: relative;}
#mv .mv-txt {position: absolute; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 10%; width: 28%; max-width: 537px;}

.tit {text-align: center; margin-bottom: 50px;}
.tit .en {font-family: 'pinyon-script', sans-serif; font-size: 5rem; text-align: center; color: #d09823; line-height: 1; margin-bottom: 10px;} 
.tit .jp {text-align: center; font-size: 3.4rem; letter-spacing: 0.1em;}
.tit.white * {color: #fff;}

.main-txt {line-height: 2.5;}

.tit-h3 {font-size: 2.4rem; margin-bottom: 20px;}

.group-btn p {color: #916f2b; font-size: 2.2rem; margin-bottom: 20px; text-align: center; letter-spacing: 0.1em;}
.group-btn .list-btn {font-size: 0; text-align: center; max-width: 660px; width: 100%; margin: 0 auto;}
.group-btn .list-btn a {width: 48.49%;}
.group-btn .list-btn a:hover {opacity: 0.7;}

#about {background: url(../images/aboutbg.jpg) no-repeat; background-size: cover; padding: 80px 0 150px;}
#about .tit .jp span {position: relative;}
#about .tit .jp span::after {content: 'ヒノキ'; position: absolute; top: -10px; left: 0; font-size: 9px; width: 100%; text-align: center;}
#about .c-img {position: relative;}
#about .c-img > img {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 43.75%;}
#about .c-img .in {width: 50%; margin-left: auto; margin-right: 0;}
#about .c-img .in ul {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px;}
#about .c-img .in ul li {width: 33%; text-align: center;}
#about .c-img .in ul li p {color: #aa8028; margin-bottom: 10px; font-size: 1.4rem;}

#point {background: url(../images/pointbg.jpg) no-repeat; background-size: cover; padding: 80px 0;}
#point ul li {background: #fff; border-radius: 5px; padding: 30px; width: 48.34%; margin-bottom: 40px;}
#point ul li figure {position: relative; margin-bottom: 20px;}
#point ul li .txt .txt-tit {text-align: center; margin-bottom: 20px; letter-spacing: 0.1em;}
#point ul li .txt .txt-tit span {display: block; line-height: 1.4;}
#point ul li .txt .txt-tit .en {font-family: 'pinyon-script', sans-serif; font-size: 3.2rem; color: #d09823;}
#point ul li .txt .txt-tit .jp {font-size: 2.2rem;}
#point ul li .txt .txt-desc {line-height: 2;}

#qa {background: #f9f4e3; padding: 80px 0;}
#qa h2 {font-size: 4.2rem; text-align: center; margin: 0 auto 60px; color: #7c7169; font-weight: 500;}
#qa ul li:not(:last-of-type) {margin-bottom: 40px;}
#qa ul li .q {width: 80%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); padding: 30px 20px; margin-bottom: 20px; border-radius: 10px; position: relative; padding-left: 70px; color: #7c7169; font-size: 2.2rem; letter-spacing: 0.05em;}
#qa ul li .q::before {content: 'Q.'; font-family: 'Dancing Script', sans-serif; font-size: 5rem; position: absolute; top: 4px; left: 20px; color: #7c7169;}
#qa ul li .a {width: 80%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); margin-left: auto; margin-right: 0; padding: 30px 20px; background: #fff; border-radius: 10px; padding-left: 70px; position: relative; color: #d09823; font-size: 2.3rem; letter-spacing: 0.05em;}
#qa ul li .a::before {content: 'A.'; font-family: 'Dancing Script', sans-serif; font-size: 5rem; position: absolute; top: 6px; left: 20px; color: #d09823;}

#job {background: url(../images/jobbg.jpg) no-repeat; background-size: cover; padding: 80px 0 15vw;}
#job .material-symbols-outlined {font-size: 1.6rem;}
#job .red {color: #e04645;}
#job .border-red {border: 1px solid #e04645; padding: 25px 40px;}
#job .italic {font-style: italic;}
#job .txt-center {text-align: center;}
#job .tit {margin-bottom: 0;}
#job .list-txt {list-style: circle outside url("../images/circle.gif"); padding-left: 20px; line-height: 2;}
#job .google-link {display: inline-block; border-bottom: 1px solid #e04645;}
#job a:hover {opacity: 0.7;}
#job h3 {position: relative; font-size: 4.6rem; text-align: center; color: #d4a342; margin-bottom: 100px;}
#job h3::before {content: ''; width: 93px; height: 32px; background: url(../images/bg_tit.png) no-repeat; background-size: cover; position: absolute; top: -40px; left: 0; right: 0; margin: 0 auto;}
#job h3::after {content: ''; width: 93px; height: 32px; background: url(../images/bg_tit.png) no-repeat; background-size: cover; position: absolute; bottom: -40px; left: 0; right: 0; margin: 0 auto; transform: rotate(180deg);}
#job .navtab {text-align: center; margin: 50px 0;}
#job .navtab a {display: inline-block; background: #fff; border: 1px solid #916f2b; color: #916f2b; padding: 10px; font-size: 2rem; width: 280px; text-align: center;}
#job .navtab a:not(:last-of-type) {margin-right: 20px;}
#job .navtab a:hover {color: #fff; background: #916f2b; opacity: 1;}
#job .navtab .active {color: #fff; background: #916f2b;}
#job [id^="tab"] {background: #fff; padding: 100px 80px 50px;}
#job [id^="tab"] .main-tab-txt {text-align: center; margin-bottom: 40px; line-height: 2;}
#job [id^="tab"] .cap {font-size: 1.2rem;}
#job [id^="tab"] .item {margin-bottom: 50px;}
#job [id^="tab"] .item h4 {background: #fbf6ec; color: #916f2b; text-align: center; font-size: 2.5rem; margin-bottom: 20px; padding: 5px 0; letter-spacing: 0.1em;}
#job [id^="tab"] .item h5 {text-align: center; font-size: 2.5rem; margin-bottom: 20px; padding: 5px 0; letter-spacing: 0.1em;}
#job [id^="tab"] .item > p {line-height: 2;}
#job [id^="tab"] .number [class^=row] span {display: inline-block; vertical-align: bottom; line-height: 1;}
#job [id^="tab"] .number [class^=row] .f22 {font-size: 2.2rem;}
#job [id^="tab"] .number [class^=row] .f20 {font-size: 2rem; letter-spacing: 0.1em;}
#job [id^="tab"] .number [class^=row] .f45 {font-size: 4.5rem; letter-spacing: 0.1em;}
#job [id^="tab"] .number [class^=row] .f100 {font-size: 10rem; letter-spacing: 0.1em;}
#job .item-col .item {width: 49%; margin-bottom: 20px;}
#job #tab1 .item .number [class^=row] {margin-bottom: 20px;}
#job #tab1 .item .number .row1 {text-align: center;}
#job #tab1 .item .number .row1 span:not(:nth-of-type(2)) {margin-bottom: 5px;}
#job #tab1 .item .number .row2 {text-align: center; font-size: 2.5rem; line-height: 1; letter-spacing: 0.1em;}
#job #tab1 .item .number .row3 {text-align: center; font-size: 4rem; line-height: 1;}
#job #tab1 .item .number .row4 li {width: 32%; background: #fcecec; padding: 25px 10px; border-radius: 5px; justify-content: space-around; align-items: center;}
#job #tab1 .item .number .row4 li p {font-size: 3.8rem; text-align: center; line-height: 1;}
#job #tab1 .item .number .row4 li p span {display: block; text-align: center; font-size: 1.6rem; margin-top: 10px;}
#job #tab1 .item-list-txt-col .list-txt {width: 32%;}
#job #tab2 .main-txt {line-height: 2; margin-bottom: 40px;}
#job #tab2 .main-txt p:not(:last-of-type) {margin-bottom: 20px;}
#job #tab2 .main-txt .list-txt {text-align: left; max-width: 400px; width: 100%; margin: 0 auto 20px;}
#job #tab2 .main-txt p:nth-of-type(2) {margin-bottom: 30px;}
#job #tab2 .main-txt p:nth-of-type(3) {color: #d09823; font-size: 2rem;}
#job #tab2 .item1 .list-txt {margin-bottom: 20px;}
#job #tab2 .item1 .list-txt li:not(:last-of-type) {margin-bottom: 10px;}

#store {background: url(../images/storebg.jpg) no-repeat; background-size: cover; padding: 15vw 0 80px; color: #fff; text-align: center; position: relative;}
#store > img {position: absolute; top: -10vw; right: 0; width: 43.80%;}
#store .tit-h3 {margin-bottom: 40px;}

#message {background: url(../images/messagebg.jpg) no-repeat; background-size: cover; padding: 100px 0;}
#message .c-img {position: relative; padding: 85px 0;}
#message .c-img > img {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 45.79%;}
#message .c-img .in {width: 50%; margin-left: auto; margin-right: 0;}

#company {background: url(../images/companybg.jpg) no-repeat; background-size: cover; padding: 100px 0; color: #fff;}
#company ul {max-width: 800px;}
#company ul li {border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 1.8rem;}
#company ul li p:nth-of-type(1) {width: 55px; font-weight: bold;}
#company ul li p:nth-of-type(2) {width: calc(100% - 65px);}
#company ul li p:nth-of-type(2) span:not(:last-of-type) {margin-left: 20px;}

#fix-btn-sp {display: none;}
#fix-btn-sp a {width: 50%;}
#fix-btn-sp a img {box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);}

/*          Media
----------------------------*/
@media (max-width: 767px){
	.group-btn p {font-size: 4vw;}
	.group-btn .list-btn a {width: 100%;}
	.group-btn .list-btn a:not(:last-of-type) {margin: 0 0 10px;}
	.group-btn .list-btn a img {width: 100%;}

	#mv .mv-txt {width: 43%; left: 4vw;}

	#fix-btn-sp {display: flex; position: fixed; bottom: 0; left: 0; width: 100%;}

	.tit .en {font-size: 4rem;}

	#about {padding: 15vw 0 15vw;}
	#about > img {margin-bottom: 10vw;}
	#about .c-img .in {width: 100%;}
	#about .c-img .in ul li {width: 32%;}
	#about .c-img .in ul li p {font-size: 1.3rem;}

	#point {padding: 15vw 0;}
	#point ul {width: calc(100% - 15vw);}
	#point ul li {width: 100%; margin-bottom: 0;}
	#point ul li:not(:last-of-type) {margin-bottom: 6vw;}

	#qa {padding: 15vw 0;}
	#qa h2 {font-size: 6vw; margin: 0 auto 6vw;}
	#qa ul {width: calc(100% - 15vw);}
	#qa ul li .q {width: 100%; }
	#qa ul li .a {width: 100%;}

	#job {padding: 15vw 0 40vw;}
	#job .navtab {font-size: 0; margin: 10vw 0;}
	#job .navtab a {width: 100%;}
	#job .navtab a:not(:last-of-type) {margin: 0 auto 10px;}
	#job [id^="tab"] {padding: 20vw 5vw 5vw;}
	#job h3 {margin-bottom: 15vw;}
	#job #tab1 .item .number .row1 span:nth-of-type(4) {display: block; margin-top: 20px;}
	#job #tab1 .item .number .row4 li {width: 100%;}
	#job #tab1 .item .number .row4 li:not(:last-of-type) {margin-bottom: 10px;}
	#job [id^="tab"] .number [class^="row"] .f100 {font-size: 10vw;}
	#job [id^="tab"] .number [class^="row"] .f45 {font-size: 5vw;}
	#job [id^="tab"] .number [class^="row"] .f22 {font-size: 3vw;}
	#job .border-red {padding: 10px 10px;}
	#job .item-col .item {width: 100%; margin-bottom: 8vw;}
	#job #tab1 .item-list-txt-col .list-txt {width: 100%;}
	#job [id^="tab"] .item h4 {margin-bottom: 4vw;}
	#job [id^="tab"] .item h5 {margin-bottom: 4vw;}

	#store {padding: 35vw 0 15vw;}
	#store > img {width: 90%; top: -23vw;}

	#message {padding: 15vw 0;}
	#message .c-img {padding: 0;}
	#message .c-img > img {position: static; width: 90%; transform: translateY(0); -webkit-transform: translateY(0); margin: 0 0 5vw;}
	#message .c-img .in {width: 100%;}

	#company {padding: 15vw 0;}
}