@charset "UTF-8";
* { /*outline: 1px solid red;*/ }

body { font-family: sans-serif; font-size: 16px; font-weight: 400; color: #000; margin: 0; padding: 0; width: 100%; height: 100%; font-feature-settings: "palt"; letter-spacing: 1.2; }

img { width: 100%; height: auto; }

a { color: #000; text-decoration: none; }
a img { border: none; }

.pc-display { display: inherit; }

.sp-display { display: none; }

.mb-50 { margin-bottom: 50px; }

.thin { font-weight: 300; }

.bold { font-weight: 700; }

.red { color: #ff0000; }

/*---------------------------------------------ページ共通*/
.flexbox { display: flex; flex-direction: row; }

.vbox { display: flex; flex-direction: column; }

.container { width: 1000px; height: auto; margin: 0 auto; }

.bg_gray { background-color: #a7bbba; }

.whbox { background-color: #fff; }

#pagetitle { width: auto; height: 70px; display: inline-block; position: absolute; text-align: left; top: 200px; left: 50%; transform: translate(-50%, -50%); }
#pagetitle img { width: auto; height: 100%; }

/*---------------------------------------------ヘッダー*/
header { width: 100%; height: 90px !important; background: rgba(255, 255, 255, 0.85); position: fixed; z-index: 100; top: 0; left: 0; justify-content: center; align-content: center; }
header h1 { font-size: 10px; font-weight: 300; position: absolute; top: 5px; left: 160px; margin: 0; padding: 0; }
header #header_icon { width: 150px; height: 150px; position: absolute; top: 0; left: 0; }
header #header_icon img { width: 100%; height: 100%; }
header #header_logo { width: 152px; height: auto; position: absolute; left: 160px; bottom: 20px; }
header #header_logo img { width: 100%; height: auto; }
header #header-menu { width: 90%; height: 55px; position: absolute; right: 10%; top: 0; display: flex; justify-content: flex-end; }
header #header-menu .menu { width: 90px; height: 55px; text-align: center; margin-top: 25px; }
header #header-menu .menu a { display: block; color: #000; }
header #header-menu .menu a img { display: block; width: 90px; height: 22px; margin: 10px auto 0; }
header #header-menu .menu a span { display: block; font-size: 12px; font-weight: 300; line-height: 1; margin-top: 2px; }
header #header-menu .menu a span:hover { color: #00a059; }
header #header-menu #contact { width: 90px; height: 55px; margin-top: 25px; text-align: center; background-color: #00a059; }
header #header-menu #contact a { display: block; color: #fff; }
header #header-menu #contact a img { display: block; width: 90px; height: 22px; margin: 10px auto 0; }
header #header-menu #contact a span { display: block; font-size: 12px; font-weight: 300; line-height: 1; margin-top: 2px; }
header #header-menu #contact:hover { opacity: 0.8; }

/*---------------------------------------------トップページ*/
#index_main { width: 100%; height: 75vh; background-image: url("../images/index_main.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; top: 0; left: 0; }
#index_main h2 { position: absolute; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline; color: #fff; text-shadow: 0 0 5px #000; font-size: 50px; white-space: nowrap; font-weight: 900; }

#index_h3 { width: 100%; height: auto; padding: 18px 0; margin-bottom: 50px; text-align: center; color: #fff; }
#index_h3 h3 { font-size: 22px; margin: 0 0 26px 0; }
#index_h3 p { font-size: 18px; }

#index_menu { width: 1000px; height: auto; margin: 0 auto; display: flex; justify-content: space-between; }
#index_menu .index_menu_box { width: 144px; height: auto; background-color: #fff; position: absolute; right: 0; top: 102px; }
#index_menu .index_menu_box img { width: 100%; height: auto; }
#index_menu #index_menu_01, #index_menu #index_menu_02, #index_menu #index_menu_03, #index_menu #index_menu_04 { display: block; width: 190px; height: 258px; padding-top: 102px; box-sizing: border-box; position: relative; background-position: left top; background-repeat: no-repeat; background-size: 165px; }
#index_menu #index_menu_01 { background-image: url("../images/index-01.png"); background-position: left top; background-repeat: no-repeat; background-size: 165px; }
#index_menu #index_menu_01 .index_menu_btn { background-color: #00a159; }
#index_menu #index_menu_02 { background-image: url("../images/index-02.png"); background-position: left top; background-repeat: no-repeat; background-size: 165px; }
#index_menu #index_menu_02 .index_menu_btn { background-color: #bc64a4; }
#index_menu #index_menu_03 { background-image: url("../images/index-03.png"); background-position: left top; background-repeat: no-repeat; background-size: 165px; }
#index_menu #index_menu_03 .index_menu_btn { background-color: #3399cc; }
#index_menu #index_menu_04 { background-image: url("../images/index-04.png"); }
#index_menu #index_menu_04 .index_menu_btn { background-color: #ff9900; }
#index_menu h4 { font-size: 12px; margin: -12px 0 0 5px; padding: 0; color: #000; }
#index_menu .index_menu_text { font-size: 12px; width: 138px; height: auto; margin: 15px auto; color: #000; }
#index_menu .index_menu_btn { width: 100%; height: 20px; color: #fff; font-size: 15px; text-align: center; line-height: 20px; padding: 1px 0; }
#index_menu .index_menu_btn a { color: #fff; }

/*---------------------------------------------フッター*/
footer { width: 1000px; height: auto; margin: 100px auto 35px auto; display: block; }
footer #footer_contents { width: 1000px; height: auto; display: flex; border-bottom: solid 1px #000; margin-bottom: 14px; }
footer #footer_contents #footer_icon { width: 66px; height: auto; }
footer #footer_contents .vbox { width: 100%; height: auto; margin-bottom: 10px; }
footer #footer_contents .vbox #footer_logo { width: 108px; height: auto; margin-left: 10px; }
footer #footer_contents .vbox #footer_add { width: 100%; height: auto; display: flex; justify-content: space-between; flex-direction: row; margin-left: 10px; font-size: 14px; }
footer #footer_contents .vbox #footer_add div { width: 100%; }
footer #footer_contents .vbox #footer_add div span { margin-left: 2.6rem; }
footer #footer_nav { width: 100%; height: auto; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; font-size: 14px; margin-bottom: 35px; }
footer #footer_nav span { display: inline; }
footer #footer_nav > div:not(:last-child)::after { content: " ︱ "; margin: 0 6px; }
footer #copyright { text-align: center; font-size: 12px; }

/*---------------------------------------------ごあいさつ*/
#message_box { width: 100%; height: auto; background: linear-gradient(to bottom, #a7bbba 60%, transparent 60%); background-position: top; padding: 250px 0 100px; overflow: hidden; }
#message_box h2 { width: auto; height: auto; display: inline-block; position: relative; font-size: 28px; color: #fff; line-height: 2; }
#message_box #message_img { width: 100%; height: auto; background-image: url("../images/message_bg.png"); background-repeat: no-repeat; background-position: bottom; background-size: 80%; position: relative; margin-left: 30px; padding-top: 550px; }
#message_box #message_img #massage_name { width: 100vw; left: 0; padding-right: 5px 100% 5px 5px; margin-right: -100%; background-color: #000; color: #fff; position: absolute; bottom: 0; }
#message_box #message_img #massage_name p { margin: 0 auto 0 140px; padding: 0; font-size: 16px; }
#message_box #message_img #massage_name h5 { margin: 0 auto 0 120px; padding: 0; font-size: 20px; }
#message_box #message_img #massage_name h5 span { font-size: 16px; margin-right: 10px; font-weight: 400; }
#message_box .whbox { width: 480px; height: auto; padding: 20px 30px; font-size: 16px; line-height: 2; }

/*---------------------------------------------会社情報*/
#company_box #pageheader { width: 100%; height: 340px; background-image: url("../images/company_bg.jpg"); background-repeat: no-repeat; background-position: top; background-size: cover; padding: 240px 0 0 0; box-sizing: border-box; }
#company_box .container { margin-top: 160px; }
#company_box .container .company_title { display: flex; }
#company_box .container .company_title span { width: 220px; height: 20px; display: inline-block; background-color: #a7bbba; color: #fff; text-align: right; padding: 0 5px 0 0; font-size: 14px; }
#company_box .container .company_title h4 { width: 100%; display: inline-block; font-size: 20px; color: #bc64a4; border-left: solid 1px #a7bbba; border-bottom: solid 1px #a7bbba; box-sizing: border-box; margin: 0 0 30px 0; padding: 0; line-height: 40px; text-indent: 5px; }
#company_box .container .company_contents { margin-bottom: 40px; margin-left: 230px; }
#company_box .container .company_contents .flexbox { margin-bottom: 15px; }
#company_box .container .company_contents .company_pic { font-weight: 600; margin-right: 100px; white-space: nowrap; }
#company_box .container .company_contents .company_pic_l { font-weight: 600; width: 40%; margin-right: 50px; }
#company_box .container .company_contents .company_pic_r { font-weight: 600; }
#company_box #gmap { width: 100%; height: 500px; margin-top: 5px; }
#company_box #gmap iframe { width: 100%; height: 500px; }

/*---------------------------------------------サービス*/
#service_box #pageheader { width: 100%; height: 340px; background-image: url("../images/service_bg.jpg"); background-repeat: no-repeat; background-position: top right; background-size: auto 500px; padding: 240px 0 0 0; box-sizing: border-box; }
#service_box .container { margin-top: 160px; }
#service_box .container .service_contents { display: flex; border-bottom: solid 1px #000; padding-bottom: 50px; margin-bottom: 50px; }
#service_box .container .service_contents .service_no { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-size: 120px; font-weight: 900; color: rgba(51, 153, 204, 0.3); transform: scaleX(75%); margin-top: -30px; }
#service_box .container .service_contents .service_container { margin-right: 30px; }
#service_box .container .service_contents .service_container h2 { font-size: 28px; margin: 0; padding: 0; }
#service_box .container .service_contents .service_container p { margin-bottom: 50px; }
#service_box .container .service_contents .service_container .service_com { width: 42%; }
#service_box .container .service_contents .service_container .service_com .service_com_title { width: 100%; text-align: center; background-color: #000; color: #fff; font-weight: 700; padding: 5px 0; text-align: center; }
#service_box .container .service_contents .service_container .service_com ul { margin: 10px 0 30px 0; padding: 0; }
#service_box .container .service_contents .service_container .service_com ul li { margin: 0 0 5px 1rem; padding: 0; list-style: square; }
#service_box .container .service_contents .service_container .service_com ul li.small_list { list-style: none; font-size: 11px; position: relative; padding-left: 1rem; margin-left: 0; text-align: left; margin-bottom: 5px; }
#service_box .container .service_contents .service_container .service_com ul li.small_list::before { content: "※"; position: absolute; left: 0; top: 0; }
#service_box .container .service_contents .service_container .service_img { display: flex; width: calc(58% - 30px); height: auto; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; margin-left: 30px; gap: 2%; }
#service_box .container .service_contents .service_container .service_img img { width: 49%; height: auto; }
#service_box .container .service_contents .service_container .service_img_w { display: block; width: calc(58% - 30px); height: auto; margin-left: 30px; }
#service_box .container .service_contents .service_container .service_img_w img { width: 100%; height: auto; }
#service_box .container .service_contents_07 { border-bottom: none !important; }

/*---------------------------------------------施工実績*/
#works_box #pageheader { width: 100%; height: 340px; background-image: url("../images/works_bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: 140%; padding: 240px 0 0 0; box-sizing: border-box; }
#works_box .container { margin-top: 60px; }
#works_box .container h3 { font-size: 20px; color: #ff9900; text-align: center; margin-bottom: 50px; }
#works_box .container #works_img { width: 100%; height: auto; display: flex; flex-wrap: wrap; gap: 10px; }
#works_box .container #works_img img { width: calc((100% - 30px) / 4); height: auto; }

/*---------------------------------------------プライバシーポリシー*/
#policy_box { letter-spacing: 1px; }
#policy_box #pageheader { width: 100%; height: 340px; background-image: url("../images/policy_bg.jpg"); background-repeat: no-repeat; background-position: center 60%; background-size: cover; padding: 240px 0 0 0; box-sizing: border-box; }
#policy_box .container { width: 800px; margin-top: 60px; }
#policy_box .container h3 { font-size: 20px; text-align: center; border-bottom: solid 1px #000; margin-bottom: 50px; padding-bottom: 5px; }
#policy_box .container .policy_listtitle { font-size: 18px; font-weight: 700; color: #00a159; margin-bottom: 5px; }
#policy_box .container p { margin: 0; padding: 0; line-height: 1.8; }
#policy_box .container p.policy_last { margin: 0 0 60px 0; padding: 0; line-height: 1.8; }
#policy_box .container ul { margin: 0 0 60px 0; padding: 0; }
#policy_box .container ul li { margin: 0; padding: 0; line-height: 2.0; list-style-position: inside; }

/*---------------------------------------------お問い合わせ*/
#contact_box { letter-spacing: 1px; }
#contact_box #pageheader { width: 100%; height: 340px; background-image: url("../images/contact_title.jpg"); background-repeat: no-repeat; background-position: bottom 60% center; background-size: 100%; padding: 240px 0 0 0; box-sizing: border-box; }
#contact_box .container { width: 800px; margin-top: 60px; }
#contact_box .container h3 { font-size: 20px; text-align: center; color: #00a159; margin-bottom: 20px; }
#contact_box .container .bold { text-align: center; margin-bottom: 50px; }
#contact_box .container #formtable { width: 100%; height: auto; margin: 50px 0; }
#contact_box .container #formtable div { margin-bottom: 20px; }
#contact_box .container #formtable div.inputname { margin-bottom: 2px; }
#contact_box .container #formtable .input_box { width: 100%; height: auto; padding: 10px 3px; border: solid 1px #000; margin-bottom: 15px; font-size: 20px; line-height: 1.5; }
#contact_box .container #formtable .input_box_s { width: 100%; height: auto; padding: 10px 3px; border: solid 1px #000; margin-bottom: 5px; font-size: 20px; line-height: 1.5; }
#contact_box .container #formtable .small_info { font-size: 0.9rem; margin: 0; padding: 0; }
#contact_box .container #formtable .required { color: #ff0000; margin-left: 20px; }
#contact_box .container #formtable #pp_check { position: relative; align-content: center; }
#contact_box .container #formtable #pp_check a { color: #00a159; text-decoration: underline; }
#contact_box #thanks { width: 100%; height: 500px; display: grid; place-items: center; text-align: center; }
#contact_box .error_title { font-size: 22px; font-weight: 700; background-color: #00a159; padding: 5px 60px; color: #fff; }

#pp_check { width: auto; height: auto; display: block; margin-bottom: 40px !important; }

#pp_check input[type="checkbox"] { display: none; }

#pp_check .checkbox { position: relative; padding-left: 35px; cursor: pointer; display: inline-block; line-height: 20px; }

#pp_check .checkbox::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 6px; background: #fff; transition: 0.2s; }

#pp_check input[type="checkbox"]:checked + .checkbox::before { background: #00a159; border-color: #00a159; }

#pp_check .checkbox::after { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-65%) rotate(45deg); width: 7px; height: 12px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; opacity: 0; transition: 0.2s; }

#pp_check input[type="checkbox"]:checked + .checkbox::after { opacity: 1; }

#pp_check a { color: #00a159; text-decoration: none; }

.material-symbols-outlined { font-size: 16px; vertical-align: middle; }

.material-symbols-outlined { vertical-align: middle; margin-right: 5px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

.submit_style { font-size: 22px; color: #fff; background-color: #00a159; border: none; padding: 5px 30px; margin-right: 5px; }
.submit_style:hover { cursor: pointer; background-color: #000; }

.reset_style { font-size: 22px; color: #fff; background-color: #a7bbba; border: none; padding: 5px 30px; margin-left: 5px; }
.reset_style:hover { cursor: pointer; background-color: #000; }

#checktable { width: 100%; border: none; text-align: left; }
#checktable tr { padding: 15px 0 30px 0; }
#checktable th { width: 30%; border-bottom: solid 2px #9e9e9e; padding: 5px 0 5px 10px; }
#checktable td { width: 70%; border-bottom: solid 1px #9e9e9e; padding: 5px 0 5px 10px; }

.error_messe { margin-top: 20px; font-size: 20px; color: #00a159; }