@charset "utf-8";
/* CSS Document */

/* 共通項目
-------------------------------------*/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,tbody,tfoot,th,thead,time,ul{margin:0;padding:0;border:0;outline:0;font-size:100%}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}ol,ul{list-style:none}a:active,a:link,a:visited{text-decoration:none}img{max-width: 100%;}

main {width: 100%; background: #5C5C5C; color: #FFFFFF; padding: 0 0 3rem; font-family: "Zen Kaku Gothic Antique", sans-serif; font-weight: 400;}
.menuList span, .mttl {font-family: "Lato", sans-serif; font-weight: 300;}
.header_txt {font-family: "Zen Old Mincho", serif; font-weight: 500;}

.scroll_up {transition: 1.3s ease-in-out; transform: translateY(30px); opacity: 0;}
.scroll_up.on {transform: translateY(0); opacity: 1.0;}

/* フッター */
.footer_wrap {width: 100%; margin: 0 auto; text-align: center; font-size: 14px;}
.footer_wrap .footer_list li {margin-bottom: .5rem;}
.footer_wrap .footer_list li a {color: #FFFFFF;}
.footer_wrap .footer_list .sns {margin-top: 2rem;}
.footer_wrap .footer_list .sns img {width: 40px;}
.footer_wrap .copy {margin: 2rem auto 0; font-size: 12px;}

/* page top */
.pagetop {position: fixed; right: 3%; bottom: 3%; background-color: rgba(0,0,0,0.5); font-size: 20px;}
.pagetop a {display: block; padding: .5rem 1rem; color: #FFFFFF;}



/* PC
-------------------------------------*/
@media screen and (min-width:768px) {
.sp {display: none!important;}

/* PCヘッダー */
.pcheader_wrap {width: 100%; height: 100vh; background-image: url("../img/headimg_20250402.jpg"); background-position: center; background-size: auto 100%; position: relative; margin-bottom: 5rem;}
.header_box {position: absolute; left: 5%; top: 10%;}
.header_logo {width: 300px;}
.header_txt {font-size: 40px; color: #484848;}
.header_txt div:nth-child(2) {font-size: 26px; margin-top: 1rem;}
.menuList {width: 40%; position: absolute; right: 0; top: 25%;}
.menuList li {margin-bottom: 1px;}
.menuList li a {display: block; padding: 1.5rem 0 1.5rem 5rem; background-color: rgba(0,0,0,0.3); color: #FFFFFF; font-size: 14px;}
.menuList li a:hover {background-color: rgba(0,0,0,0.5);}
.menuList span {font-size: 30px; padding-right: 1rem;}
.menuList li.home {background-image: url("../img/icn_home.png"); background-repeat: no-repeat; background-size: auto 50%; background-position: 3% center;}
.menuList li.about {background-image: url("../img/icn_about.png"); background-repeat: no-repeat; background-size: auto 50%; background-position: 3% center;}
.menuList li.works {background-image: url("../img/icn_works.png"); background-repeat: no-repeat; background-size: auto 50%; background-position: 3% center;}
.menuList li.company {background-image: url("../img/icn_company.png"); background-repeat: no-repeat; background-size: auto 50%; background-position: 3% center;}
.menuList li.contact {background-image: url("../img/icn_contact.png"); background-repeat: no-repeat; background-size: auto 50%; background-position: 3% center;}
.fixList {width: 100%; background: #2A2A2A; text-align: center; display: flex; position: fixed; top: 0; left: 0; z-index: 999;}
.fixList li {width: 100%; font-size: 14px;}
.fixList li a {display: block; padding: .7rem 0; color: #FFFFFF;}
.fixList li a:hover {background-color: rgba(255,255,255,0.1);}

/* 共有コンテンツ */
.contents_ttlbox {text-align: center; margin-bottom: 3rem;}
.contents_ttlbox .mttl {font-size: 40px; margin-bottom: 1rem;}

/* ABOUT */
.about_wrap {width: 100%; margin: 0 auto 10rem;}
.about_txt {width: 900px; margin: 0 auto; line-height: 1.5em;}
.about_list {width: 900px; margin: 3rem auto 0;}
.about_list li {width: 100%; margin: 0 auto 2rem; display: flex; align-items: center;}
.about_list li:nth-child(even) {flex-direction: row-reverse;}
.about_list .imb, .about_list .txtbox {width: 100%;}
.about_list li:nth-child(odd) .txtbox {margin-left: 2rem;}
.about_list li:nth-child(even) .txtbox {margin-right: 2rem;}
.about_list .ttl {margin-bottom: 2rem; font-size: 20px; color: #BBB798;}
.about_list .txt {line-height: 1.5em;}
.about_top {width: 900px; margin: 5rem auto 0;}
.about_topttl {width: 100%; text-align: center; color: #BBB798; font-size: 20px; display: inline-block; position: relative;}
.about_topttl:before, .about_topttl:after {content: ''; position: absolute; top: 50%; display: inline-block; width: 40%; height: 1px; background-color: #BBB798;}
.about_topttl:before {left: 0;}
.about_topttl:after {right: 0;}
.about_toptxt {width: 85%; margin: 3rem auto; line-height: 1.5em;}
.about_topname {width: 100%; text-align: right; color: #BBB798; font-size: 20px; display: inline-block; position: relative;}
.about_topname:before {content: ''; position: absolute; top: 50%; display: inline-block; width: 75%; height: 1px; background-color: #BBB798; left: 0;}
.about_topname span {font-size: 14px; padding-right: 1rem;}

/* WORKS */
.works_wrap {width: 100%; margin: 0 auto 10rem;}
.works_list {width: 900px; margin: 0 auto;}
.works_list li {width: 100%; display: table; border-bottom: 1px dotted #999999; padding: .5rem 0;}
.works_list li div {display: table-cell; vertical-align: bottom;}
.works_list li .day {width: 10%;}
.works_sns {width: 900px; margin: 2rem auto 0; text-align: center;}
.works_sns .link {width: 50%; margin: 1rem auto 0;}
.works_sns .link a {display: block; padding: .5rem 0; border: 1px solid #FFFFFF; color: #FFFFFF;}
.works_sns .link a:hover {border-color: #BBB798; color: #BBB798;}

/* COMPANY */
.company_wrap {width: 100%; margin: 0 auto 10rem;}
.company_list1 {width: 900px; margin: 0 auto 2rem; text-align: center;}
.company_list1 li {margin-bottom: .5rem;}
.company_list1 li:nth-child(1) {font-size: 20px; margin-bottom: 2rem;}
.company_list1 li a {color: #FFFFFF;}

/* CONTACT */
.contact_wrap {width: 100%; margin: 0 auto 10rem;}
.contact_box {width: 400px; margin: 2rem auto 0; text-align: center;}
.contact_box input {width: 100%; padding: .5rem 1rem; margin: .5rem auto 2rem;}
.contact_box textarea {width: 100%; height: 200px; padding: 1rem; margin: .5rem auto 2rem;}
.contact_box button {cursor: pointer; cursor: hand; color: #5C5C5C;}
.contact_box .form_required {font-size: 12px; color: #F47275; padding-left: .5rem;}

/* 問い合わせサンクスページ */
.formthank_wrap {width: 900px; margin: 0 auto; padding: 15rem 0 10rem;}
.formthank_ttl {text-align: center; font-size: 28px; margin: 0 auto 3rem;}
.formthank_txt {width: 90%; margin: 0 auto 3rem; line-height: 1.5em;}
.formthank_contact {width: 70%; margin: 0 auto; text-align: center;}
.formthank_contact li a {display: block; padding: 1rem 0; font-size: 18px; border-radius: .5rem; color: #FFFFFF;}
.formthank_contact li:nth-child(1) a {border: 1px solid #FFFFFF; margin-bottom: 1rem;}
.formthank_contact li:nth-child(2) a {background: #8A866B; margin-bottom: 1rem;}
.formthank_contact li:nth-child(3) a {background: #97947A;}
.formthank_list {width: 100%; margin: 3rem auto 0; text-align: center;}
.formthank_list li {margin-bottom: .5rem;}
}



/* SP
-------------------------------------*/
@media screen and (max-width:768px) {
.pc {display: none!important;}

/*SPヘッダー*/
.spheader_wrap {width: 100%; height: 100vh; background-image: url("../img/headimg_20250402.jpg"); background-size: auto 100%; background-position: center; position: relative; margin-bottom: 5rem;}
.header_box {width: 80%; margin: 0 auto; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
.header_logo {width: 50%; margin: 0 auto 1rem;}
.header_txt {width: 100%; margin: 0 auto; font-size: 32px; text-align: center; color: #484848;}
.header_txt div:nth-child(2) {font-size: 18px; margin-top: 1rem;}

/* SP追従メニュー */
.spmenu {width: 100%; margin: 0 auto; background: #353535; position: fixed; top: 0; right: 0; z-index: 999;}
.toggle-btn {background: transparent; border: none; padding: 0; position: fixed; top: 0; right: 0; display: none; z-index: 999;}
.toggle-btn:hover {cursor: pointer;}
.toggle-btn span {display: inline-block; background: #FFFFFF; height: 2px; width: 20px; position: relative;}
.toggle-btn span:before {content: ""; display: inline-block; background: #FFFFFF; height: 2px; width: 20px; position: absolute; top: 8px; left: 0;}
.toggle-btn span:after {content: ""; display: inline-block; background: #FFFFFF; height: 2px; width: 20px; position: absolute; top: -8px; left: 0;}
#open-btn {background: #353535; padding: .6rem 1rem 1.1rem;;}
#open-btn.active span {background: transparent; }
#open-btn.active span:before {transform: rotate(45deg); top: 0;}
#open-btn.active span:after {transform: rotate(-45deg); top: 0;}
.menuList {width: 100%; display: none; background: #353535; padding: 3rem 0; position: fixed; top: 0; left: 0; z-index: 999;}
.menuList li {width: 85%; margin: 0 auto; border-bottom: 1px dotted #DDDDDD; font-size: 14px;}
.menuList a {display: block; color: #FFFFFF; padding: 1rem 0;}
.toggle-btn {display: block;}
#menuWrap.open {display: block;}

/* 共有コンテンツ */
.contents_ttlbox {text-align: center; margin-bottom: 3rem;}
.contents_ttlbox .mttl {font-size: 36px; margin-bottom: 1rem;}

/* ABOUT */
.about_wrap {width: 100%; margin: 0 auto 8rem;}
.about_txt {width: 80%; margin: 0 auto; line-height: 1.5em;}
.about_list {width: 100%; margin: 0 auto;}
.about_list li {margin-top: 3rem;}
.about_list .imb {margin-bottom: 1rem;}
.about_list .txtbox {width: 80%; margin: 0 auto;}
.about_list .ttl {font-size: 20px; color: #BBB798; margin-bottom: 1rem; text-align: center;}
.about_list .txt {line-height: 1.5em;}
.about_top {width: 80%; margin: 5rem auto 0;}
.about_topttl {width: 100%; text-align: center; color: #BBB798; font-size: 20px; display: inline-block; position: relative;}
.about_topttl:before, .about_topttl:after {content: ''; position: absolute; top: 50%; display: inline-block; width: 30%; height: 1px; background-color: #BBB798;}
.about_topttl:before {left: 0;}
.about_topttl:after {right: 0;}
.about_toptxt {width: 90%; margin: 3rem auto; line-height: 1.5em;}
.about_topname {width: 100%; text-align: right; color: #BBB798; font-size: 20px; display: inline-block; position: relative;}
.about_topname:before {content: ''; position: absolute; top: 50%; display: inline-block; width: 40%; height: 1px; background-color: #BBB798; left: 0;}
.about_topname span {font-size: 14px; padding-right: 1rem;}

/* WORKS */
.works_wrap {width: 100%; margin: 0 auto 8rem;}
.works_list {width: 80%; margin: 0 auto;}
.works_list li {width: 100%; border-bottom: 1px dotted #999999; padding: 1rem 0;}
.works_list li .day {margin-bottom: .3rem;}
.works_sns {width: 80%; margin: 2rem auto 0; text-align: center;}
.works_sns .link {width: 80%; margin: 1rem auto 0;}
.works_sns .link a {display: block; padding: .5rem 0; border: 1px solid #FFFFFF; color: #FFFFFF;}

/* COMPANY */
.company_wrap {width: 100%; margin: 0 auto 8rem;}
.company_list1 {width: 80%; margin: 0 auto 2rem; text-align: center;}
.company_list1 li {margin-bottom: .5rem;}
.company_list1 li:nth-child(1) {font-size: 20px; margin-bottom: 2rem;}
.company_list1 li a {color: #FFFFFF;}

/* CONTACT */
.contact_wrap {width: 100%; margin: 0 auto 8rem;}
.contact_box {width: 80%; margin: 2rem auto 0; text-align: center;}
.contact_box input {width: 100%; padding: .5rem 0; margin: .5rem auto 2rem; font-size: 16px;}
.contact_box textarea {width: 100%; height: 200px; padding: 1rem 0; font-size: 16px; margin: .5rem auto 2rem;}
.contact_box button {margin-top: 1rem; cursor: pointer; cursor: hand; color: #5C5C5C; background: #DDDDDD; padding: .3rem 1rem;}
.contact_box .form_required {font-size: 12px; color: #F47275; padding-left: .5rem;}

/* 問い合わせサンクスページ */
.formthank_wrap {width: 80%; margin: 0 auto; padding: 10rem 0;}
.formthank_ttl {text-align: center; font-size: 28px; margin: 0 auto 3rem;}
.formthank_txt {width: 90%; margin: 0 auto 3rem; line-height: 1.5em;}
.formthank_contact {width: 100%; margin: 0 auto; text-align: center;}
.formthank_contact li a {display: block; padding: 1rem 0; font-size: 18px; border-radius: .5rem; color: #FFFFFF;}
.formthank_contact li:nth-child(1) a {border: 1px solid #FFFFFF; margin-bottom: 1rem;}
.formthank_contact li:nth-child(2) a {background: #8A866B; margin-bottom: 1rem;}
.formthank_contact li:nth-child(3) a {background: #97947A;}
.formthank_list {width: 100%; margin: 3rem auto 0; text-align: center;}
.formthank_list li {margin-bottom: .5rem;}
}