@charset "UTF-8";
html { font-size: 62.5%; /* 1rem = 10px */ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background-image: url("../images/body_bg.png"); box-sizing: border-box; font-family: "Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; letter-spacing: 0.05rem; text-align: left; margin: 0; padding: 0; font-size: 1.8rem; overflow-x: hidden; }

*, *::before, *::after { box-sizing: inherit; -webkit-font-smoothing: antialiased; word-break: break-word; word-wrap: break-word; }

.font_wh { color: #fff !important; }

.btn_yw { background-color: #dcdd5e; display: inline-block; padding: 14px 40px; border-radius: 5rem; text-align: center; font-size: 2.4rem; font-weight: 600; position: relative; left: 50%; transform: translateX(-50%); margin: 50px auto; color: #1a1a1a; transition: all 0.5s 0s ease; text-shadow: none; }
.btn_yw:hover { background-color: #1a1a1a; color: #fff; }

a { text-decoration: none; }

.pc_display { display: inherit; }

.sp_display { display: none; }

.container { display: block; width: 80%; height: auto; margin: 0 auto; padding: 0; }

@media (min-width: 1281px) { .container { width: 1280px; height: auto; margin: 0 auto; padding: 0; } }
.small { font-size: 1.2rem; margin-left: 5px; }

.f-m { font-size: 1.6rem; }

.img_90 { width: 90%; height: auto; margin: auto; }

.pt_60 { padding-top: 60px; margin: 0 0 60px 0; }

.box_flex { height: auto; display: flex; position: relative; }

.box_title { width: 50%; height: auto; padding: 20rem 5rem; box-sizing: border-box; position: relative; display: flex; white-space: nowrap; margin-right: 0; }
.box_title h2 { display: inline-block; font-size: 4.0rem; margin: 0 auto 5px auto; font-weight: 900; }
.box_title h2#icon_index01 { position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); }
.box_title h2#icon_index01::before { content: ''; display: inline-block; width: 100px; height: 100px; background-image: url("../images/logo_01.png"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; }
.box_title h2#icon_index01 span { display: block; font-size: 1.6rem; font-weight: 600; margin: -30px 0 0 100px; }
.box_title h2 span { display: block; font-size: 1.6rem; font-weight: 600; margin: 0; }
.box_title .icon_index02 { width: 100px; height: auto; margin-left: 15px; }
.box_title .icon_index02 img { width: 100%; height: auto; }

.box_contets { width: 50%; height: auto; padding: 20rem 5rem; box-sizing: border-box; position: relative; margin-left: 0; }
.box_contets h3#index_h3_01 { font-size: 4.0rem; font-weight: 700; margin: 0 0 20px 0; }
.box_contets h3#index_h3_02 { width: 80%; display: block; font-size: 5.0rem; font-weight: 700; margin: 0 auto 20px auto; position: relative; }
.box_contets p { font-size: 1.6rem; width: 80%; height: auto; }

.bg_wh { background-color: #fff; width: 100%; height: 100%; margin: 0; padding: 0; }

.bg_yw { background-color: #dcdd5e; width: 100%; height: 100%; margin: 0; padding: 0; }

.bg_bk { background-color: #1a1a1a; width: 100%; height: 100%; margin: 0; padding: 0; }

.center_text { margin: 0; padding: 30px 0; text-align: center; }

.border_t { height: 10px; width: 100%; background: #1a1a1a; position: fixed; top: 0; left: 0; z-index: 998; }

.border_b { height: 10px; width: 100%; background: #1a1a1a; position: fixed; bottom: 0; left: 0; z-index: 998; }

.border_l { height: 100%; width: 10px; background: #1a1a1a; position: fixed; top: 0; left: 0; z-index: 998; }

.border_r { height: 100%; width: 10px; background: #1a1a1a; position: fixed; top: 0; right: 0; z-index: 998; }

/*------------------------------------------------------------------------HEADER*/
header { width: 100%; height: 10rem; padding: 10px 0 0 0; display: flex; position: fixed; margin: 0; top: 0; left: 0; z-index: 110; justify-content: space-between; vertical-align: baseline; /*------------------------------------------------------------------------NAV*/ }
header #header_container { width: 100%; height: auto; margin: 0 auto; display: flex; justify-content: space-between; background: transparent; transition: background 0.3s; }
header #header_container.scrolled { background: #6c7264; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* 少しの影を追加して目立たせる */ }
header #header_sign { display: flex; flex-direction: column; margin-top: 1rem; }
header #header_sign h1 { display: inline; font-size: 1.0rem; margin-left: 30px; font-weight: 300; }
header #header_sign #header_logo { display: inline; width: 300px; height: auto; margin-left: 30px; }
header #header_sign #header_logo img { width: 100%; height: auto; }
header #header_contact { background-color: #1a1a1a; color: #fff; width: auto; height: 10rem; top: 0; right: 0; position: absolute; display: inline-block; padding: 20px 5rem 10px; text-align: center; transition: all 1s 0s ease; z-index: 1000; }
header #header_contact img { width: auto; height: 100%; margin: 0 auto; }
header #header_contact:hover { background-color: #dcdd5e; }
header #header_nav { margin-right: 420px; display: inline-block; color: #fff; }
header #header_nav a { color: #fff; }
header #header_nav input { display: none; }
header #header_nav lavel { display: none; }
header #header_nav .nav_list { font-size: 2.0rem; display: flex; justify-content: space-between; align-items: center; margin: 3rem 0 0 0; padding: 0; font-weight: 600; text-shadow: 0px 2px 0px #6c7264; }
header #header_nav .nav_list #spnav_logo { display: none; }
header #header_nav .nav_list .nav_item { width: 140px; display: block; list-style: none; margin: 0; padding: 10px; white-space: nowrap; text-align: center; align-items: baseline; }
header #header_nav .nav_list a { display: block; }
header #header_nav .nav_list a:hover { color: #dcdd5e; }

/*------------------------------------------------------------------------index*/
#hero { width: 100%; height: 100vh; margin: auto; overflow: hidden; padding: auto; position: relative; }
#hero #site_img { width: 90%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#hero #site_img img { width: 100%; height: auto; }
#hero #main_copy { width: 90%; height: auto; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, -50%); }
#hero #main_copy img { width: 100%; height: auto; }
#hero ul.slider-hero { width: 100%; height: auto; margin: 0; padding: 0; }
#hero ul.slider-hero img { width: 100%; height: auto; margin: 0; }
#hero ul.slider-hero .slick-list::after { padding: 0; }
#hero ul.slider-hero .slick-slide { transition: all 1.2s; }
#hero ul.slider-hero .slick-slide.slick-center { transform: scale(1); }
#hero .slick-arrow { display: block; position: absolute; top: 0; bottom: 0; margin: auto; padding: 0; width: 20px; height: 38px; color: transparent; z-index: 1; transition: opacity 0.5s; }
#hero .slick-arrow:hover { opacity: 0.7; cursor: pointer; }
#hero .arrow-right { border-top: solid 1px #666; border-right: solid 1px #666; width: 24px; height: 24px; transform: rotate(45deg); position: absolute; right: 5%; }
#hero .arrow-left { border-bottom: solid 1px #666; border-left: solid 1px #666; width: 24px; height: 24px; transform: rotate(45deg); position: absolute; left: 5%; }

#index_box01 { background: linear-gradient(90deg, #fff 0%, #fff 40%, #dcdd5e 40%, #dcdd5e 100%); }

#index_bg01 { background-image: url("../images/bg_01.png"); background-size: 30%; background-position: 30px 30px; background-repeat: no-repeat; position: absolute; z-index: 2; }

#index_box02 { background-image: url("../images/logo_04.png"), url("../images/logo_05.png"); background-repeat: no-repeat; background-position: 30% 10% , 75% 90%; background-size: 300px , 300px; }

#index_box03 { position: relative; background-color: #1a1a1a; background-image: url("../images/logo_02.png"); background-repeat: no-repeat; background-position: 20% 70%; background-size: 300px; }

#index_contents03 { display: block; width: 100%; height: 800px; background-image: url("../images/img_01.jpg"); background-position: right; background-repeat: no-repeat; background-size: 50%; }
#index_contents03 h4 { position: absolute; font-size: 4.0rem; font-weight: 600; color: #fff; text-shadow: 1px 2px 0px #1a1a1a; padding: 0 120px 3px 10px; border-bottom: solid 2px #dcdd5e; z-index: 2; top: 20%; left: 10%; }
#index_contents03 .btn_yw { position: absolute; top: 50%; left: 25%; }

#index_box04 { position: relative; background-color: #fff; padding: 40px 0; }

#contact_link { width: 80%; height: auto; padding: 5rem 5rem; margin: 10rem auto; box-sizing: border-box; background-color: #dcdd5e; position: relative; }
#contact_link #contact_link_title { display: block; width: 40%; font-size: 3.0rem; font-weight: 900; text-align: center; border-right: solid 1px #1a1a1a; vertical-align: middle; }
#contact_link #contact_link_title span { display: block; text-align: center; font-size: 1.2rem; font-weight: 600; margin-top: 10px; }
#contact_link #contact_link_con { display: block; width: 60%; height: auto; padding: 0 30px; font-weight: 900; font-size: 3.0rem; }
#contact_link #contact_link_con span { display: inline-block; width: 150px; font-weight: 600; font-size: 2.0rem; }
#contact_link #contact_link_con span img { width: 4.0rem; vertical-align: middle; margin-right: 10px; }
#contact_link #contact_link_con a { color: #1a1a1a; }
#contact_link #add_mail { width: auto; height: 3.0rem; vertical-align: middle; }

footer { width: 100%; height: auto; margin: 0; padding: 0; position: relative; color: #fff; }
footer #footer_flex { display: flex; padding: 100px 0 60px 0; justify-content: space-between; align-items: center; align-content: center; }
footer #footer_name { font-size: 3.8rem; letter-spacing: 0.2rem; display: inline-block; align-self: center; }
footer #footer_logo { display: inline-block; width: auto; height: 40px; margin-right: 10px; align-self: center; }
footer #footer_logo img { width: auto; height: 100%; align-self: center; }
footer #footer_nav { display: inline-block; text-align: center; width: 100%; height: auto; margin: 40px 0; color: #fff; }
footer #footer_nav ul { padding: 0; margin: 0; text-align: center; }
footer #footer_nav ul li { display: inline-block; list-style: none; margin: 0 50px 0 0; }
footer #footer_nav ul li a { color: #fff; }
footer #copyright { width: 100%; height: auto; font-size: 1.2rem; text-align: right; margin-bottom: 20px; }
footer #footer_info { display: block; align-items: flex-end; color: #fff; position: relative; margin-top: 20px; padding-left: 100px; }
footer #footer_info::before { content: ''; width: 80px; height: 1px; position: absolute; border-bottom: solid 1px #fff; top: 50%; left: 0; }
footer #footer_info a { display: block; color: #fff; }

#gotop { position: absolute; width: auto; height: 100px; margin-top: -4.0rem; text-align: center; left: 50%; transform: translateX(-50%); }
#gotop img { width: auto; height: 100%; }

/*------------------------------------------------------------------------contents*/
.container h3 { font-size: 4.0rem; }

h3.h3_text { width: 80%; height: auto; margin: 0 auto 10% auto; padding-top: 10%; font-size: 3.0rem; line-height: 2.0; }

#page_title { width: 100%; height: auto; padding: 10% 0 5%; margin: 0; text-align: center; font-size: 5rem; color: #fff; text-shadow: 1px 1px 0px #1a1a1a; text-stroke: 0.9px #1a1a1a; -webkit-text-stroke: 1px #1a1a1a; }
#page_title img { display: block; width: 60px; height: auto; margin: 20px auto 0; }

#works_bg { position: relative; background-image: url("../images/logo_06.png"), url("../images/logo_07.png"); background-repeat: no-repeat; background-position: 100% 96% , 0% 10%; background-size: 500px , 300px; }

#works_list { width: 80%; height: auto; margin: 0 auto; padding: 0 0 30rem 0; }
#works_list ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
#works_list li { width: calc(100% / 2 - 10px); height: auto; margin: 0 auto 20px; padding: 10rem 5rem; box-sizing: border-box; list-style: none; background-color: #1a1a1a; font-size: 2.6rem; font-weight: 900; color: #fff; text-align: center; }

#page_title_factory { background-color: #dcdd5e; width: 100%; height: auto; padding: 10% 0; margin: 0; text-align: center; font-size: 5rem; color: #fff; text-shadow: 1px 1px 0px #1a1a1a; text-stroke: 0.9px #1a1a1a; -webkit-text-stroke: 1px #1a1a1a; }
#page_title_factory img { display: block; width: 60px; height: auto; margin: 20px auto 0; }

#factory_bg { width: 100%; height: auto; background-image: url("../images/company_img_m.jpg"); background-repeat: no-repeat; background-size: 100%; background-size: cover; background-position: center; }

#h3_factory { color: #fff; padding: 60px 0; margin: 0; text-align: center; font-size: 4.0rem; line-height: 2.0; justify-content: center; }
#h3_factory::before { content: ''; width: 80px; height: 80px; position: absolute; background-image: url("../images/logo_wh.png"); background-position: center 50%; background-repeat: no-repeat; background-size: 60px; margin-left: -80px; }

#factory_img_01 { width: 80%; height: auto; text-align: center; padding-bottom: 60px; margin: -60px auto 0 auto; }
#factory_img_01 img { width: 100%; height: auto; }

#factory_list { width: 50%; height: auto; padding: 0; margin: 0 auto 3rem auto; list-style: none; }
#factory_list li { text-align: center; border-bottom: solid 1px #fff; padding: 1rem 0 1rem 0; margin: 0; color: #fff; }

#factory_img { display: block; width: 70%; height: auto; margin: 0 auto; padding-bottom: 3rem; }
#factory_img div { margin-bottom: 30px; }
#factory_img div .right_img { display: block; width: 100%; position: relative; z-index: 9; right: -60px; }
#factory_img div .left_img { width: 100%; position: relative; z-index: 9; left: -60px; }

#page_title_company { background-color: #6c7264; width: 100%; height: auto; padding: 10% 0; margin: 0; text-align: center; font-size: 5rem; color: #1a1a1a; text-shadow: 1px 1px 0px #fff; text-stroke: 0.9px #fff; -webkit-text-stroke: 0.9px #fff; }
#page_title_company img { display: block; width: 60px; height: auto; margin: 20px auto 0; }

#company_list { width: 60%; height: auto; margin: 0 auto; padding: 10% 0; }
#company_list table { width: 100%; height: auto; }
#company_list table th { padding: 15px 10px 15px 30px; border-bottom: solid 1px #1a1a1a; }
#company_list table td { padding: 15px 10px 15px 30px; border-bottom: solid 1px #6c7264; }

#gmap { width: calc(100% - 30px); height: 800px; margin: 0 auto; }
#gmap iframe { width: 100%; height: 100%; }

#tel_time { width: 50%; height: auto; text-align: center; margin: 10px auto; padding-bottom: 10px; font-size: 2.0rem; border-bottom: solid 2px #dcdd5e; }

#tel_no { text-align: center; font-size: 3.8rem; font-weight: 900; margin: 10px 0 20px 0; }
#tel_no img { width: auto; height: 3.4rem; padding-top: 5px; margin-right: 10px; }
#tel_no a { color: #1a1a1a; }

/*------------------------------------------------------------------------js*/
.fadeIn_01 { transform: translate3d(-300px, 0, 0); transition: 1s; animation-delay: 1s; opacity: 0; }

.fadeIn_02 { transform: translate3d(300px, 0, 0); transition: 1s; animation-delay: 1s; opacity: 0; }

.fadeIn_01.animated { transform: translate3d(0, 0, 0); opacity: 1; }

.fadeIn_02.animated { transform: translate3d(0, 0, 0); opacity: 1; }

/*------------------------------------------------------------------------mail*/
.input_box { width: 100%; padding: 5px; background-color: #fff; border: solid 1px #ccc; margin: 0 10px 0 0; overflow: hidden; font-size: 1.6rem; }

.textarea_box { width: 100%; padding: 5px; background-color: #fff; border: solid 1px #ccc; margin: 0 10px 0 0; overflow: hidden; font-size: 1.6rem; }

input.btn_style { padding: 10px 40px; border: solid 2px #dcdd5e; background-color: #fff; position: relative; overflow: hidden; text-decoration: none; display: inline-block; text-align: center; outline: none; transition: ease .2s; font-size: 2.0rem; font-weight: 600; color: #1a1a1a; }

input.btn_style span { position: relative; z-index: 3; color: #1a1a1a; }

input.btn_style:hover { color: #1a1a1a; background-color: #dcdd5e; border: solid 3px #1a1a1a; transition: all 0.2s; }

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

.checkbox { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; position: relative; width: auto; }

.checkbox::before { background: #fff; border: solid 1px #1a1a1a; content: ''; display: block; width: 16px; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; }

.checkbox::after { border-right: 3px solid #dcdd5e; border-bottom: 3px solid #dcdd5e; content: ''; display: block; width: 7px; height: 9px; left: 10px; margin-top: -5px; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg); }

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

/* ラジオボタン01 */
input[type=radio] { display: none; }

.radio01 { width: 100%; height: auto; box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 30px; position: relative; }

.radio01::before { background: #fff; border: 1px solid #11110f; border-radius: 50%; content: ''; display: block; width: 16px; height: 16px; left: 5px; margin-top: -8px; position: absolute; top: 50%; }

.radio01::after { background: #3b3b9e; border-radius: 50%; content: ''; display: block; width: 10px; height: 10px; left: 8px; margin-top: -5px; opacity: 0; position: absolute; top: 50%; }

input[type=radio]:checked + .radio01::after { opacity: 1; }

.jump_btn { width: 250px; height: auto; padding: 10px 30px; margin: 40px auto 0 auto; border: solid 1px #11110f; text-align: center; background-color: #fff; }

.jump_btn a { display: block; color: #11110f; }

.jump_btn:hover { background-color: #d0dd57; }

#pp_check { text-align: center; margin: 10px 0; }

#pp_check input#check_box { margin: 0 10px 0 0; }

ul#protectionpolicy { width: 80%; height: auto; margin: 0 auto; padding: 30px; box-sizing: border-box; }

ul#protectionpolicy li { list-style: none; margin: 0 0 10px 0; padding: 0; text-align: left; }

ul#protectionpolicy li span { display: block; width: 90%; height: auto; font-weight: bold; border-bottom: solid 1px #000; padding: 0 0 5px 0; margin: 0 auto 30px auto; }

ul#protectionpolicy li p { width: 90%; height: auto; margin: 0 auto 15px auto; }

ul#protectionpolicy li ul { width: 80%; height: auto; margin: 0 auto; padding: 0; }

ul#protectionpolicy li ul li { margin: 0 0 5px 0; padding: 0; list-style: disc; }