/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');

/* #Site Styles
================================================== */

:root {
	--width-base: 1200px;
	--font-family-base: 'Albert Sans', sans-serif;
	--font-family-icon: 'icomoon', sans-serif;
	--font-size-base: 18px;
	--line-height-base: 1.85;
	--color-white: #fff;
	--color-black: #000;
	--color-primary: #2f2f2f;
	--color-secondary: #ef7e00;
	--color-gray: #888;
	--color-light: #fdf4ea;
	--color-bdr: #f5dabb;
	--color-orange: #ce6e03;
	--w-100: 100%;
	--h-100: 100%;
	--base-duration: all 0.3s ease-in-out;
	--gap-heading: 20px;
	--line-height-heading: 1.1;
	--font-size-h1: 56px;
	--font-size-h2: 56px;
	--font-size-h3: 40px;
	--font-size-h4: 32px;
	--font-size-h5: 19px;
	--font-size-h6: 16px;
	--font-size-h7: 24px;
	--font-size-h8: 21px;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-primary); }
body { background: var(--color-white); }
img { display: block; max-width: var(--w-100); height: auto; border: 0; }
ul,
li { list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: none; }
p { margin-bottom: var(--gap-heading); }
h1,
h2,
h3,
h4,
h5,
h7,
h6 { margin-bottom: var(--gap-heading); font-weight: 700; line-height: var(--line-height-heading); color: var(--color-primary); }
h1 { font-size: var(--font-size-h1); font-weight: 800; }
h2 { font-size: var(--font-size-h2); font-weight: 800; }
h3 { font-size: var(--font-size-h3); font-weight: 800; }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }
h7 { font-size: var(--font-size-h7); font-weight: 800; color: #ef7e00;}
h8 { font-size: var(--font-size-h8); font-weight: 800; color: #ef7e00;}

/* ### global classes ### */
.mail { text-decoration: underline; color: #2F2F2F}
a.mail:hover {
  color: #ef7e00; 
}
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
.holder { display: flex; flex-wrap: wrap; }
.button { padding: 14px 27px 13px; display: inline-block; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--color-white); border-radius: 4px; background-color: var(--color-secondary); transition: var(--base-duration); }
.button:hover { background-color: var(--color-orange); }
.button i { margin-left: 5px; display: inline-block; font-size: 11px; vertical-align: middle; }
.button-secondary { padding: 14px 21px 10px; display: inline-block; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--color-secondary); border-radius: 4px; background-color: var(--color-white); transition: var(--base-duration); }
.button-secondary:hover { color: var(--color-white); background-color: var(--color-orange); }
.button-outline { padding: 13px 22px 12px; display: inline-block; font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--color-secondary); border: 1px solid var(--color-bdr); border-radius: 4px; transition: var(--base-duration); }
.button-outline:hover { color: var(--color-white); border: 1px solid var(--color-secondary); background-color: var(--color-secondary); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: var(--w-100); min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: var(--w-100); }

/* ### header container ### */
#headerCntr { padding-top: 28px; position: relative; z-index: 9; width: var(--w-100); overflow: hidden; }
#headerCntr:after { position: absolute; bottom: 124px; left: 0; z-index: -1; width: var(--w-100); height: var(--h-100); background-color: var(--color-white); content: ''; }
#headerCntr .holder { align-items: start; }
#headerCntr .site-logo { padding-right: 50px; padding-bottom: 21px; padding-left: 45px; position: relative; width: 23%; }
#headerCntr .site-logo:after { position: absolute; top: 0; right: 0; z-index: -1; width: 100vw; height: var(--h-100); background-color: var(--color-white); content: ''; }
#headerCntr .logo img { max-width: 100%; }
#headerCntr .d-phone { display: none; }
#headerCntr .mobileMenu { position: absolute; top: 27px; right: 8px; z-index: 15; display: none; float: left; width: 40px; height: 40px; transition: 0.2s; cursor: pointer; overflow: hidden; }
#headerCntr .mobileMenu span { position: absolute; top: 50%; right: 20%; left: 20%; display: block; height: 4px; text-indent: -9999px; border-radius: 5px; background: var(--color-black); transition: 0.2s; }
#headerCntr .mobileMenu span:before,
#headerCntr .mobileMenu span:after { position: absolute; left: 0; display: block; width: var(--w-100); height: 4px; border-radius: 5px; background-color: var(--color-black); transition-duration: 0.2s, 0.2s; content: ''; }
#headerCntr .mobileMenu span:before { top: -7px; }
#headerCntr .mobileMenu span:after { bottom: -7px; }
.mm-opened #headerCntr .mobileMenu span { background: none; }
.mm-opened #headerCntr .mobileMenu.is-active span:before,
.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ### menu box ### */
.menuBox:not(.mm-menu) { padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 77%; }
.menuBox:not(.mm-menu) ul > li { margin-right: 57px; display: inline-block; line-height: 1.1; }
.menuBox:not(.mm-menu) ul > li > a { position: relative; font-weight: 700; color: var(--color-primary); }
.menuBox:not(.mm-menu) ul > li > a:after { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: var(--base-duration); content: ''; }
.menuBox:not(.mm-menu) ul > li.is-active a:after { width: var(--w-100); }

/* ### content container ### */
#contentCntr { width: var(--w-100); }

/* ### hero box ### */
.heroBox { margin-top: -124px; }
.heroBox .box { position: relative; display: flex; align-items: center; min-height: 620px; }
.heroBox .text { padding-top: 99px; padding-left: 150px; position: relative; z-index: 1; max-width: 500px; }
.heroBox h1 { margin-bottom: 0; color: var(--color-white); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.heroBox .image { position: absolute; top: 0; left: 0; width: var(--w-100); height: var(--h-100); }
.heroBox .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; object-position: center center; }

/* ### banner box ### */
.bannerBox { margin-top: -124px; }
.bannerBox .box { margin-left: auto; position: relative; max-width: 922px; min-height: 304px; }
.bannerBox .image { padding-right: 135px; position: absolute; top: 0; left: 0; width: var(--w-100); height: var(--h-100); }
.bannerBox .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; object-position: center center; }

/* ### about box ### */
.aboutBox { margin-bottom: 56px; padding-top: 80px; }
.aboutBox .text { margin: 0 auto; max-width: 760px; }
.aboutBox h2 { margin-bottom: 0; }
.aboutBox h3 { margin-bottom: 4px; }
.aboutBox strong { margin-bottom: 16px; display: block; font-size: 20px; color: var(--color-gray); }
.aboutBox p { margin-bottom: 31px; }
.aboutBox p:last-child { margin-bottom: 0; }
.aboutBox span { display: block; font-size: 20px; font-weight: 600; }
.aboutBox.inner .text { max-width: 1000px; }

/* ### now box ### */
.nowBox { margin-bottom: 122px; }
.nowBox .box { margin: 0 auto; padding: 86px 146px 98px 20px; position: relative; max-width: 860px; background-color: var(--color-secondary); overflow: hidden; }
.nowBox .text { margin-left: auto; position: relative; z-index: 1; max-width: 155px; }
.nowBox h3 { margin-bottom: 16px; line-height: 0.95; color: var(--color-white); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.nowBox .button-secondary { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3); }
.nowBox .image { position: absolute; top: 0; left: 0; width: var(--w-100); height: var(--h-100); }
.nowBox .image img { opacity: 0.48; width: var(--w-100); height: var(--h-100); object-position: center center; object-fit: cover; }
.nowBox .link { position: absolute; right: -2px; bottom: -2px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; font-size: 11px; color: var(--color-white); border: 2px solid var(--color-white); transition: var(--base-duration); }
.nowBox .link:hover { color: var(--color-black); background-color: var(--color-white); }

/* ### member box ### */
.memberBox { margin-bottom: 127px; }
.memberBox h4 { margin-bottom: 55px; text-align: center; }
.memberBox .holder { margin: 0 -14px; }
.memberBox .item { margin-bottom: 51px; padding: 0 14px; width: 25%; }
.memberBox .btn { text-align: center; }

/* ### card-member ### */
.card-member { padding: 20px 10px; position: relative; display: flex; align-items: center; justify-content: center; height: 139px; background-color: var(--color-light); overflow: hidden; }
.card-member img { opacity: 0.52; }
.card-member i { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 8px; color: #f5a65d; background-color: var(--color-white); }
.card-member .icon i { font-size: 18px; color: var(--color-white); background-color: var(--color-secondary); }

/* ### project box ### */
.projectBox { margin-bottom: 157px; }
.projectBox h4 { margin-bottom: 44px; text-align: center; }
.projectBox .wrap { margin: 0 auto; max-width: 1000px; }
.projectBox .holder { margin: 0 -40px; }
.projectBox .item { margin-bottom: 10px; padding: 0 40px; width: 33.3%; }
.projectBox .btn { padding-top: 8px; text-align: center; }

/* ### card-project ### */
.card-project { display: block; }
.card-project .image.first { padding: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #f5dabb; }
.card-project .image.first img { width: auto; height: auto; }
.card-project .image { width: var(--w-100); height: 186px; }
.card-project .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; object-position: center center; }
.card-project .text { padding-top: 30px; padding-bottom: 30px; }
.card-project h5 { margin-bottom: 22px; max-width: 278px; font-size: 20px; font-weight: 600; line-height: 1.4; }
.card-project span { display: block; font-size: 15px; font-weight: 600; text-transform: uppercase; color: var(--color-secondary); }
.card-project span i { margin-left: 9px; font-size: 10px; }

/* ### treat box ### */
.treatBox { margin-bottom: 86px; }
.treatBox .holder { margin: 0 -25px; }
.treatBox .item { margin-bottom: 50px; padding: 0 25px; width: 50%; }

/* ### card-treat ### */
.card-treat { padding: 32px 42px 25px; height: var(--h-100); background-color: var(--color-light); }
.card-treat .card-member { margin-bottom: 33px; height: 114px; background-color: var(--color-white); }
.card-treat .card-member img { opacity: 1; }
.card-treat h5 { margin-bottom: 8px; }
.card-treat p { margin-bottom: 0; font-size: 15px; line-height: 1.8; color: var(--color-gray); }

/* ### current box ### */
.currentBox { margin-bottom: 160px; padding-top: 39px; position: relative; }
.currentBox .heading { margin-bottom: 43px; padding-left: 97px; }
.currentBox .title { margin-bottom: 34px; padding: 19px 20px 15px 97px; position: relative; font-size: 23px; font-weight: 700; line-height: 1.2; background-color: var(--color-light); }
.currentBox .title:before { position: absolute; top: 12px; left: 25px; display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; font-family: var(--font-family-icon); font-size: 11px; color: var(--color-secondary); background-color: var(--color-white); content: '\e904'; }
.currentBox .smile { position: absolute; top: -64px; right: -77px; }

/* ### content box ### */
.contentBox { margin: 0 auto 40px; max-width: 1007px; }
.contentBox .text { padding-right: 20px; width: 70%; }
.contentBox .image { width: 30%; }
.contentBox .image img { margin-left: auto; }
.contentBox p { margin-bottom: 30px; }
.contentBox strong { display: block; font-weight: 600; }

/* ### image box ### */
.imageBox { margin: 0 auto 90px; max-width: 1007px; }
.imageBox .holder { margin: 0 -15px; }
.imageBox .image { padding: 0 15px; }
.imageBox .image.image-1 { width: 52%; }
.imageBox .image.image-2 { width: 22.4%; }
.imageBox .image.image-3 { width: 22.5%; }
.imageBox .text { padding-top: 27px; padding-bottom: 25px; }
.imageBox span { margin-bottom: 3px; display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--color-gray); }
.imageBox i { display: block; font-size: 14px; line-height: 1.75; color: var(--color-gray); }

/* ### table box ### */
.tableBox { margin: 0 auto 90px; max-width: 1007px; }
.tableBox strong { margin-bottom: 20px; display: block; }
.tableBox td { padding: 16px 18px 14px; line-height: 1.2; border-top: 1px solid var(--color-bdr); }
.tableBox .info { padding-top: 40px; }
.tableBox p { margin-bottom: 0; }
.tableBox p a { color: var(--color-primary); transition: var(--base-duration); }
.tableBox p a:hover { color: var(--color-secondary); }
.tableBox p a.mail { text-decoration: underline; }

/* ### year box ### */
.yearBox { margin: 0 auto; max-width: 1007px; }
.yearBox .year { margin-bottom: 6px; display: block; font-weight: 600; line-height: 1.2; color: var(--color-secondary); }
.yearBox ul { margin-bottom: 26px; padding-left: 18px; }
.yearBox ul > li { list-style: disc; }
.yearBox ul > li:last-child { margin-bottom: 0; }
.yearBox p { margin-bottom: 0; }

/* ### footer container ### */
#footerCntr { width: 100%; }

/* ### footer box ### */
.footerBox { padding-bottom: 58px; position: relative; background-color: var(--color-light); }
.footerBox .logo { margin-bottom: 36px; position: relative; }
.footerBox .logo:after { position: absolute; bottom: 0; left: 0; width: var(--w-100); height: 2px; background-color: var(--color-white); content: ''; }
.footerBox .logo a { padding: 34px 29px 27px 27px; font-size: 50px; font-weight: 800; line-height: 1; color: var(--color-secondary); background-color: var(--color-white); }
.footerBox .info { padding-left: 27px; width: 50%; }
.footerBox address { margin-bottom: 31px; font-weight: 500; font-style: normal; color: var(--color-gray); }
.footerBox .info ul > li { margin-bottom: 2px; }
.footerBox .info ul > li:last-child { margin-bottom: 0; }
.footerBox ul > li > a { padding-left: 47px; position: relative; font-weight: 500; color: var(--color-gray); transition: var(--base-duration); }
.footerBox ul > li > a:hover { color: var(--color-secondary); }
.footerBox ul > li > a:hover i { color: var(--color-secondary); }
.footerBox ul > li > a.mail { text-decoration: underline; }
.footerBox ul > li > a i.icon-tel { top: 4px; font-size: 22px; }
.footerBox ul > li > a i { position: absolute; top: 7px; left: 2px; color: #f6b374; transition: var(--base-duration); }
.footerBox .list { padding-top: 7px; padding-left: 27px; width: 50%; }
.footerBox h6 { margin-bottom: 24px; font-size: 18px; font-weight: 600; color: var(--color-secondary); }
.footerBox .list ul > li { margin-bottom: 11px; padding-left: 40px; position: relative; font-size: 16px; font-weight: 300; color: var(--color-gray); }
.footerBox .list ul > li:last-child { margin-bottom: 0; }
.footerBox .list ul > li:before { position: absolute; top: 5px; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-family: var(--font-family-icon); font-size: 10px; line-height: 1; color: var(--color-white); background-color: var(--color-secondary); content: '\e901'; }
.footerBox .smile { margin-left: -107px; position: absolute; top: -66px; left: 50%; }

/* ### copyright ### */
.copyright { padding-top: 33px; padding-bottom: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background-color: var(--color-white); }
.copyright p { margin-bottom: 0; padding-left: 27px; font-size: 15px; font-weight: 300; color: var(--color-gray); }
.copyright ul { display: flex; }
.copyright ul > li:after { margin: 0 10px; display: inline-block; width: 1px; height: 15px; vertical-align: middle; background-color: var(--color-gray); content: ''; }
.copyright ul > li:last-child:after { display: none; }
.copyright ul > li > a { font-size: 15px; font-weight: 300; text-decoration: underline; color: var(--color-gray); transition: var(--base-duration); }
.copyright ul > li > a:hover { color: var(--color-secondary); }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1230px) {
	.centered { padding-right: 15px; padding-left: 15px; }
}

@media only screen and (max-width: 1199px) {
	#headerCntr .site-logo { padding-right: 40px; padding-left: 0; }
	.heroBox .box { min-height: 500px; }
	.bannerBox .image { padding-right: 0; }
	.currentBox .heading { padding-left: 0; }
	.footerBox .info { width: 45%; }
	.footerBox .list { width: 55%; }
}

@media only screen and (max-width: 991px) {
	#headerCntr:after { bottom: 80px; }
	#headerCntr .site-logo { padding-right: 20px; width: 21%; }
	#headerCntr .logo { max-width: 130px; }
	.menuBox:not(.mm-menu) { width: 79%; }
	.menuBox:not(.mm-menu) ul > li { margin-right: 25px; }
	.heroBox .box { min-height: 420px; }
	.heroBox .text { padding-left: 30px; max-width: 400px; }
	.bannerBox { margin-top: -81px; }
	.aboutBox { margin-bottom: 80px; padding-top: 80px; }
	.nowBox { margin-bottom: 80px; }
	.nowBox .box { padding: 86px 30px 98px 20px; }
	.memberBox { margin-bottom: 80px; }
	.memberBox .item { margin-bottom: 30px; }
	.projectBox { margin-bottom: 100px; }
	.projectBox .holder { margin: 0 -20px; }
	.projectBox .item { padding: 0 20px; }
	.treatBox { margin-bottom: 60px; }
	.treatBox .holder { margin: 0 -15px; }
	.treatBox .item { margin-bottom: 30px; padding: 0 15px; }
	.card-treat { padding: 25px; }
	.currentBox { margin-bottom: 120px; }
	.tableBox .scroll { overflow-x: scroll; }
	.tableBox table { width: 1000px; }
	#scroll-hide::-webkit-scrollbar-track { background-color: transparent; }
	#scroll-hide::-webkit-scrollbar { background-color: transparent; }
	.footerBox .info { padding-left: 0; width: 35%; }
	.footerBox .list { width: 65%; }
	.copyright p { padding-left: 0; }
}

@media only screen and (max-width: 767px) {
	h1 { font-size: 40px; }
	h2 { font-size: 40px; }
	h3 { font-size: 30px; }
	.menuBox:not(.mm-menu) { display: none; }
	#headerCntr .mobileMenu { display: block; }
	.menuBox:not(.mm-menu) .button { display: none; }
	#headerCntr { padding-top: 18px; }
	#headerCntr:after { bottom: 70px; }
	#headerCntr .site-logo { padding-right: 0; padding-bottom: 0; width: 52%; }
	#headerCntr .site-logo:after { display: none; }
	#headerCntr .logo { padding-right: 20px; padding-bottom: 20px; padding-left: 20px; position: relative; max-width: 150px; }
	#headerCntr .logo:after { position: absolute; top: 0; right: 0; z-index: -1; width: 100vw; height: var(--h-100); background-color: var(--color-white); content: ''; }
	#headerCntr .d-phone { margin-top: 12px; padding-right: 40px; display: inline-block; width: 48%; text-align: right; }
	#headerCntr .d-phone .button { padding: 9px 10px 8px; font-size: 14px; }
	.heroBox { margin-top: -72px; }
	.heroBox .box { padding-top: 110px; padding-bottom: 50px; min-height: auto; }
	.heroBox .text { padding-top: 0; padding-left: 25px; max-width: 300px; }
	.bannerBox { margin-top: -72px; }
	.bannerBox .box { min-height: 290px; }
	.aboutBox { margin-bottom: 50px; padding-top: 50px; }
	.aboutBox h2 { margin-bottom: 10px; }
	.aboutBox p { margin-bottom: 25px; }
	.aboutBox strong { font-size: 18px; line-height: 1.2; }
	.nowBox { margin-bottom: 50px; }
	.memberBox { margin-bottom: 50px; }
	.memberBox h4 { margin-bottom: 30px; }
	.memberBox .item { width: 50%; }
	.projectBox .item { padding: 0; width: var(--w-100); }
	.card-project { margin: 0 auto; max-width: 280px; }
	.card-project .image { height: auto; }
	.projectBox { margin-bottom: 80px; }
	.projectBox .holder { margin: 0; }
	.treatBox { margin-bottom: 40px; }
	.treatBox .item { width: var(--w-100); }
	.currentBox { margin-bottom: 70px; }
	.currentBox .smile { display: none; }
	.currentBox .title { padding: 19px 15px 15px 60px; font-size: 18px; }
	.currentBox .title:before { top: 50%; left: 15px; width: 30px; height: 30px; font-size: 9px; transform: translateY(-50%); }
	.contentBox .text { padding-right: 0; order: 2; width: var(--w-100); }
	.contentBox .image { margin-bottom: 30px; order: 1; width: var(--w-100); }
	.contentBox .image img { margin-left: 0; }
	.imageBox { margin: 0 auto 40px; }
	.imageBox .image img { width: var(--w-100); }
	.imageBox .image.image-1 { margin-bottom: 10px; width: var(--w-100); }
	.imageBox .image.image-2 { width: 50%; }
	.imageBox .image.image-3 { width: 50%; }
	.tableBox { margin: 0 auto 50px; }
	.tableBox .info { padding-top: 20px; }
	.footerBox .info { margin-bottom: 40px; width: var(--w-100); }
	.footerBox .list { padding-left: 0; width: var(--w-100); }
	.footerBox .list ul > li { padding-left: 26px; }
	.footerBox .smile { display: none; }
	.copyright { text-align: center; }
	.copyright p { width: var(--w-100); }
	.copyright ul { justify-content: center; width: var(--w-100); }
}

@media only screen and (max-width: 479px) {
	.memberBox .item { width: var(--w-100); }
	.memberBox .button-outline { width: var(--w-100); }
	#headerCntr .d-phone .button { font-size: 12px; }
}