/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, footer, nav, section, article, aside, details, summary { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }

@font-face { font-family: 'gotham-medium'; src: url(../fonts/gotham-medium.ttf) format('truetype'); }
@font-face { font-family: 'gotham-bold'; src: url(../fonts/gotham-bold.ttf) format('truetype'); }
@font-face { font-family: 'GothamCondensed-Book'; src: url(../fonts/GothamCondensed-Book.ttf) format('truetype'); }
@font-face { font-family: 'gotham-black'; src: url(../fonts/gotham-black.ttf) format('truetype'); }


*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body  { min-width: 360px; font-size: 1.25rem; font-family: "Poppins", serif; color: #2e2f2f; line-height: 1.5; overflow: auto; background: #ffffff; }
/* body = 20px */

h1, h2, h3, h4, h5, h6  { font-family: 'gotham-bold'; font-weight: normal; line-height: 1.2; margin-bottom: 25px; }
h1 { font-size: 3rem; line-height: 1.2; }
h2  { font-size: 2.5rem; color: #588608; text-transform: uppercase; }
h3  { font-size: 1.5rem; color: #360886; text-align: center; text-transform: uppercase; margin-bottom: 25px; }
h4  { font-size: 1.375rem; }
h5  { font-size: 1.125rem; }
h6  { font-size:  1rem; }

p  { margin-top: 0; margin-bottom: 20px; }
ul, ol { padding: 0 ;margin: 0 0 25px 2.5%; }
li { padding: 0; margin: 0 0 2px 2.5%; }
span { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

.wrapvideoplayer { height: 0; padding-top: 1px; padding-bottom: 56.25%; position:relative; z-index: 19; }
.wrapvideoplayer iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.flex2col { display: flex; align-items: center; gap: 20px 5%; margin: 0 0 25px; }
.flex2col_blk { flex-basis: 47.5%; flex-grow: 1; flex-shrink: 1; }

.flex3col { display: flex; gap: 20px 3%; flex-wrap: wrap; margin: 0 0 25px; }
.flex3col_blk { flex-basis: 30%; flex-grow: 1; flex-shrink: 1; }

.flex4col { display: flex; gap: 20px 2.5%; }
.flex4col_blk { flex-basis: 22.5%; flex-grow: 1; flex-shrink: 1; }

.grid2col { display: grid; grid-template-columns: auto auto; gap: 20px; }
.grid3col { display: grid; grid-template-columns: auto auto auto; gap: 20px; }
.grid4col { display: grid; grid-template-columns: auto auto auto auto; gap: 20px;  }

.subgrids_2rows { display: grid; grid-template-rows: subgrid; grid-row: span 2; }

.sechd { font-weight: normal; }
.sechd::first-letter { font-size: 1.25em; font-weight: 700; }

.center { text-align: center; }
.centerblk { margin-left: auto; margin-right: auto; }
.clearsides { clear: both; }

.vio { color: #360886; }
.grn { color: #588608; }

.wrapcontent { max-width: 1500px; width: 90%; padding-top: calc(15px + 2%); padding-bottom: calc(15px + 2%); margin-left: auto; margin-right: auto; position: relative; z-index: 10; }

.sec1 { display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; gap: 0;  }

header { flex-grow: 0; flex-shrink: 1; border-bottom: #73658a solid 7px; }
header .wrapcontent { display: flex; width: 95%; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; }

.sitename { flex-grow: 0; flex-shrink: 1; font-size: 3rem; font-family: 'GothamCondensed-Book'; color: #8fb315; text-transform: uppercase; line-height: 1; }
.sitename span { color: #360886; }

.navmenu { flex-grow: 1; flex-shrink: 1; display: flex; justify-content: flex-end; padding: 0; margin: 0; }
.menu { display: flex; gap: 0 1px; font-size: 0.875rem; font-family: 'gotham-medium'; text-transform: uppercase; list-style: none; padding: 0; margin: 0; }
.menu li { padding: 0; margin: 0; }
.menu li a { display: block; color: inherit; text-decoration: none; padding: 10px 15px; margin: 0; border-radius: 4px; }
.menu li a:hover { color: #ffffff; background-color: #f8933b; }
.menu li a.active { color: #ffffff; background-color: #e9760f; }

.checkbox_navswitch { display: none; width: 48px; height: 48px; margin: 0; position: absolute; top: 10px; right: 0; z-index: 72; cursor: pointer; opacity: 0; }
.resmenuicon { display: none; flex-direction: column; justify-content: space-between; width: 35px; height: 28px; position: absolute; top: 20px; right: 0; z-index: 71; border-radius: 4px; }
.resmenuicon span { display: block; width: 100%; height: 4px; background-color: #8fb315; border-radius: 20px; }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(1) { transform-origin: 0% 0%; transition: transform 0.3s ease-in-out; }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(2) { transition: transform 0.2s ease-in-out; }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(3) { transform-origin: 0% 100%; transition: transform 0.3s ease-in-out; }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(1) { transform: rotate(45deg); }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(2) { transform: scaleY(0); }
.checkbox_navswitch:checked ~ .resmenuicon span:nth-child(3) { transform: rotate(-45deg); }

.hero_sec { flex-grow: 1; flex-shrink: 1; background: #ffffff url(../images/a003_bg1.webp) center top no-repeat; background-size: cover; }
.hero_sec { flex-grow: 1; flex-shrink: 1; background: #ffffff url(../images/a003_bg1.webp) center top no-repeat; background-size: cover; }
.hero_sec .wrapcontent { display: flex; flex-direction: column; justify-content: space-between; }

.hero_grp1 { display: flex; align-items: center; gap: 20px 30px; font-size: 1.5rem; font-weight: 300; }
.hero_grp1_blk1 { flex-basis: 260px; flex-grow: 0; flex-shrink: 0; order: 2; }
.image1 { display: block; max-width: 260px; width: 100%; margin: 0 auto; }
.hero_grp1_blk2 { flex-grow: 1; flex-shrink: 1; order: 1; }
.image1b { display: none; }

.hero_grp2 { display: flex; justify-content: center; gap: 25px 30px; margin: 0 auto 25px; }
.hero_grp2_blk { flex-basis: 31%; flex-shrink: 1; padding: 20px 3%; background-image: linear-gradient( to bottom, rgba(255,255,255) 85%, rgb(244,244,244) 100%); box-shadow: 0px 0px 5px 0px rgba(0, 0, 1, 0.17); }
.hero_grp2 h3 { font-size: 1.5rem; color: #360886; text-align: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom: #cccccc solid 1px; }


footer { text-align: center; border-top: #73658a solid 7px; }
footer .wrapcontent { padding-top: 20px; padding-bottom: 25px; }
footer .sitename { font-size: 1.875rem; margin-bottom: 10px; }
.footer_det { font-size: 0.75rem; }
.footer_det span { display: inline-block; }
.footer_det a { color: #615a02; }
.footer_det a:hover { background-color: #ecefe9; }


.sec_about { font-size: 1.5rem; background: url(../images/a003_bg2.webp) left top no-repeat; background-size: cover; }
.sec_about .flex2col { margin-bottom: 0; }
.sec_about .flex2col_blk:nth-child(2) { flex-basis: 821px; flex-grow: 0; flex-shrink: 2; }
.sec_about .flex2col_blk:nth-child(2) img { display: block; max-width: 821px; width: 100%; margin: auto; }
.sec_about .flex2col_blk p { line-height: 2; }


.secspec { background: url(../images/a003_bg3.webp) left top no-repeat; background-size: cover; }
.specblk { padding: 20px 3%; background-image: linear-gradient( to bottom, rgba(255,255,255) 85%, rgb(244,244,244) 100%); box-shadow: 0px 0px 5px 0px rgba(0, 0, 1, 0.17); }
.specblk h3 { text-align: center; }

.specblk_cont { line-height: 1.8; padding-left: 80px; position: relative; }
.specblk_img { max-width: 58px; width: 35%; position: absolute; left: 0; top: 10px; }

.secportfolio { background: url(../images/a003_bg4.webp) left top no-repeat; background-size: cover; }

.secportfolio .flex3col { justify-content: center; }
.secportfolio .flex3col_blk { max-width: 480px; flex-grow: 0; }
.secpf_imgblk { max-width: 480px; margin: 0 auto 20px; }
.secpf_imgblk img { max-width: 480px; width: 100%; }


.secfeature { background: url(../images/a003_bg5.webp) center top repeat-x; background-size: cover; }
.secft_subhd { font-size: 3.375rem; color: #3f3f3f; text-align: center; text-transform: none; line-height: 1.2; margin-bottom: 2px; }
.secft_hd { font-size: 4rem; color: #588608; text-align: center; text-transform: uppercase; line-height: 1.2; margin-bottom: 3%; }
.secft_subhd2 { font-size: 1.875rem; color: #360886; text-align: left; text-transform: none; margin-top: 3%; }

.secftrlst { list-style: none; padding: 0; margin: 0 0 25px 2.5%; }
.secftrlst li { min-height: 85px; padding: 10px 0 0 105px; margin: 0 0 20px; background: url(../images/a003_image16.webp) left top no-repeat; }

.secfeature .flex2col { align-items: center; margin: 4% auto 3%; }
p.secft_txt1 { font-size: 1.75rem; line-height: 1.8; }
.formswitch { max-width: 582px; width: 100%; cursor: pointer; margin: 0 auto 25px; }
.btncontact { display: block; max-width: 582px; width: 85%; margin: auto; }
.frameimage16 { max-width: 720px; width: 100%; font-size: 0; line-height: 0; padding: 4px; box-sizing: content-box; background-color: #ffffff; box-shadow: 10px 10px 0 #dde6d1; }
.ftrd_img { max-width: 720px; width: 100%; }


.sectesti .grid3col { gap: 0 30px; margin-bottom: 3%; }
.sectesti .subgrids_2rows { padding-left: 40px; position: relative; }
.sectesti .subgrids_2rows::before { content: "“"; font-size: 3.5rem; font-family: 'gotham-black'; color: #acacac; position: absolute; top: -22px; left: 0; }
.auth { font-weight: 600; font-style: italic; color: #360886; margin-bottom: 0; }


.secql { font-size: 0.75rem; color: #3f3f3f; background-color: #f8f7ea; }
.secql .wrapcontent { padding-top: 25px; padding-bottom: 25px; }
.secql p { margin-bottom: 15px; }
.secqlhd { color: #360886; }
.secql ul { list-style: none; padding: 0; margin: 0; }
.secql ul li { list-style: none; padding: 0; margin: 0; }
.secql ul li a { display: block; color: inherit; color: #635d0b; text-decoration: none; padding: 2px 7px; margin: 0 0 5px; }
.secql ul li a:hover { color: #000000; background-color: #e4e3d0; border-radius: 4px; }
.qlsubhd1, p.qlsubhd1 { font-size: 0.875rem; font-weight: 700; color: #360886; text-decoration: underline; margin-left: 7px; margin-bottom: 5px; }
.secql .flex4col_blk { flex-basis: 18%; }
.secql .flex4col_blk:nth-child(4) { flex-basis: 40%; }


.flex2col.panformrow { margin-bottom: 10px; }
.panformblk1 { flex-basis: 120px; }
.panformblk2 { flex-basis: 700px; }
.panel_form input[type=text], .panel_form input[type=email], .panel_form textarea { width: 100%; font-size: 1.25rem; padding: 4px 10px; background-color: #ffffff; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.35),inset 0px 3px 7px 0px rgba(0, 0, 0, 0.35); }
.panel_form input[type=text], .panel_form input[type=email] { min-height: 50px; }
.panel_form textarea { min-height: 220px; font-size: 1.25rem; }
.flex2col.btnrow { padding: 0 1%; }
.btnsubmit { width: 100%; font-size: 1.25rem; font-weight: 500; color: #ffffff; cursor: pointer; padding: 5px 3%; background-color: #e9760f; border: none; }

/* pop-up */
.modal_wrap { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0, 0, 0, 0.35); }
.modal_blk { display: none; max-width: 800px; width: 98%; padding: 20px 2%; box-sizing: border-box; margin: 0 auto 0; position:relative; background-color: #ffffff; border-radius: 4px; box-shadow: 0 4px 4px #818181; }
.close { display: inline-block; font-size: 30px; color: #ffffff; line-height: 1; padding: 1px 7px; position: absolute; top: -10px; right: -10px; cursor: pointer; background: #000000; border-radius: 50px; box-shadow: 2px 4px 4px #818181; }

@media screen and (max-width: 1400px) {
    .hero_grp2_blk { font-size: 1rem; }
}

@media screen and (max-width: 1300px) {
    .secportfolio .flex3col { gap: 30px 5%; }
    .secportfolio .flex3col_blk { flex-basis: 45%; }
}

@media screen and (max-width: 1200px) {
    .secspec .grid3col { grid-template-columns: auto auto; }

    .secft_subhd { font-size: 3rem; }
    .secft_hd { font-size: 3.6rem; }
}

@media screen and (max-width: 1100px) {    
    .hero_grp2 { flex-wrap: wrap; }
    .hero_grp2_blk { flex-basis: 45%; }
    
    .flex2col { flex-direction: column; }
    .flex2col > div { flex-basis: auto; }
    
    .grid3col { grid-template-columns: auto auto; }
    .subgrids_2rows { margin-bottom: 50px; }

    .sec_about .flex2col { gap: 0; }
    .sec_about .flex2col_blk p { line-height: 1.5; }
    .sec_about .flex2col_blk:nth-child(2) { flex-basis: auto; max-width: 580px; }

    .secql .flex2col { align-items: normal; }

    .flex2col.panformrow { flex-direction: row; }
    .flex2col .panformblk1 { flex-basis: 100px; }
    .flex2col .panformblk2 { flex-basis: 480px; }
}

@media screen and (max-width: 1000px) {
    header .wrapcontent { display: block; position: relative; z-index: 200;  }
    .checkbox_navswitch { display: block; }
    .resmenuicon { display: flex; }
    .menu { display: block; max-width: 300px; width: 100%; padding: 5px; position: absolute; top: 100%; background-color: #f9fcf6; border: #e7e5e5 solid 1px; box-shadow: -3px 0 1px #f2f2f2, 0 3px 1px #f2f2f2, 3px 3px 1px #f2f2f2, 0 -3px 1px #f2f2f2; transform: translateY(-250%); transition: transform 0.5s ease-in-out; }
    .menu li { display: block; border-bottom: #cccccc groove 1px; }
    .menu li a { display: block; border-radius: 0; }
    .checkbox_navswitch:checked ~ .menu { transform: translateY(0); }
    
    .hero_grp1_blk1 { align-self: flex-end; }
    h1 { font-size: 2.8rem; }
}

@media screen and (max-width: 900px) {
    .grid3col { grid-template-columns: auto; }

    .secft_subhd { font-size: 2.25rem; }
    .secft_hd { font-size: 3.25rem; }
    .secft_subhd2 { font-size: 1.5rem; }
    
    .hero_grp1 { font-size: 1.25rem; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); }
    h1 { font-size: 2.4rem; }
    
    /* pop-up */
	.modal_blk { padding-top: 35px; }
	.close { font-size: 18px; padding: 2px 5px; top: 2px; right: 2px; border-radius: 2px; box-shadow: 1px 2px 2px #818181; }
}

@media screen and (max-width: 800px) {
    .hero_grp2 { flex-direction: column; }
    .hero_grp2_blk { flex-basis: auto; max-width: 580px; }
    
    .secspec .grid3col { max-width: 550px; grid-template-columns: auto; margin-left: auto; margin-right: auto; }
    
    .secportfolio .flex3col { flex-direction: column; align-items: center; gap: 30px 25px; margin-top: 30px; }
    .secportfolio .flex3col_blk { flex-basis: auto; }
}

@media screen and (max-width: 700px) {
    html { font-size: 15px; }

    .hero_grp1_blk1 { display: none; }

    .hero_grp1_blk2_sub { display: flex; gap: 0 20px; }
    .image1b { display: block; flex-basis: 180px; flex-grow: 0; flex-shrink: 1; order: 2; }
    .image1b img { max-width: 240px; width: 100%; }
    .hero_grp1_blk2_sub p { flex-basis: 320px; flex-grow: 1; flex-shrink: 1; order: 1; }
    
    .subgrids_2rows { margin-bottom: 30px; }
    
    .secft_subhd { font-size: 2rem; }

    .secftrlst li { padding: 0 0 0 90px; background-position: left 10px; background-size: 70px; }
}

@media screen and (max-width: 600px) {
    html { font-size: 14px; }
    h1, h2, h3, h4, h5, h6  { margin-bottom: 15px; }

    .checkbox_navswitch { width: 36px; height: 36px; }
    .resmenuicon { width: 27px; height: 21px; }
    .resmenuicon span { height: 3px; }
    
    .secftrlst li { padding: 0 0 0 75px; background-position: left 5px; background-size: 55px; }
    .secfeature .flex2col { gap: 5px; }
    .secft_subhd { font-size: 1.75rem; }
    .secft_hd { font-size: 3rem; }
    .frameimage16 { box-shadow: 5px 5px 0 #dde6d1; }
    
    .secql .flex4col { flex-wrap: wrap; }
    .secql .flex4col_blk { flex-basis: 27%; flex-grow: 1; }
    .secql .flex4col_blk:nth-child(4) { flex-basis: 100%; flex-grow: 1; }
}

@media screen and (max-width: 500px) {
    html { font-size: 12px; }
    p { margin-bottom: 10px; }
    
    .specblk_cont { padding-left: 58px; }
    .specblk_img { max-width: 45px; }
    
    .secportfolio .flex3col { gap: 15px 25px; margin-top: 15px; }
    
    .secft_subhd { font-size: 1.75rem; }
    .secft_hd { font-size: 2.875rem; }

    .sectesti .subgrids_2rows { padding-left: 25px; }
    .sectesti .subgrids_2rows::before { top: -17px; }
    
    .flex2col.panformrow { flex-direction: column; align-items: flex-start; gap: 0; }
    .flex2col .panformblk1, .flex2col .panformblk2 { flex-basis: auto; width: 100%; }
    .panel_form input[type=text], .panel_form input[type=email] { min-height: 0; }
    .panel_form textarea { min-height: 140px; }
}

@media screen and (max-width: 400px) {
    html { font-size: 10px; }
    
    .checkbox_navswitch { width: 30px; height: 30px; right: 10px; }
    .resmenuicon { width: 18px; height: 14px; right: 10px; }
    .resmenuicon span { height: 2px; }
    
    .sectesti .subgrids_2rows { padding-left: 20px; }
    .sectesti .subgrids_2rows::before { top: -12px; }
    
    .secft_subhd { font-size: 1.875rem; }
    .secft_hd { font-size: 2.875rem; }
    .secftrlst li { padding: 0 0 0 50px; background-size: 40px; }
}