/*
Theme Name: -sond_g2023-
Theme URI: http://www.state-of-nature.com/
Author: State Of Nature Design
Author URI: http://www.state-of-nature.com/
Description: BB4 BASIC.
Version: J.SUZUKAWA w/200611R7
*/
@charset "UTF-8";
@import url("./css/uni.css");

/*================================
style.css
=================================*/

/*
-------------------------------- */

.scroll{
overflow: auto;
white-space: nowrap;
}
.scroll::-webkit-scrollbar{
 height: 5px;
}
.scroll::-webkit-scrollbar-track{
 background: #ddd;
}
.scroll::-webkit-scrollbar-thumb {
 background: #aaa;
}


/*
-------------------------------- */

.cattag{
overflow: hidden;
display: inline-block;
min-width:60px;
height:24px;
padding: 0 10px;
line-height: 24px;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.06em;
letter-spacing: 0;
}

.cattag.roundcorner{
border-radius: 12px;
}


/* uni
-------------------------------- */

a.uni_btn{
position: relative;
display: block;
width: 324px;
height: 60px;
line-height: 60px;
font-size: 16px;
color:#fff;
font-weight: normal;
text-align: left;
text-indent: 30px;
background-color: #40210F;
}

a.uni_btn::after{
background:url(./img/element/arrow_unibtn.png) no-repeat center center;
content: "";
display: block;
width: 20px;
height: 60px;
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
}

a.btn_bg{
position: relative;
display: block;
background:url(./img/element/btn_bg.png) no-repeat center center;
width:320px;
height:58px;
}

a.btn_bg span{
display: block;
line-height: 56px;
text-align: center;
text-indent: -2em;
}


/* ------------------------------
SPC
-------------------------------- */

.br_sp,
.btn_sp,
.sp_only {
display: none!important;
}

.opabtn:hover,
a.opabtn:hover {
opacity: 0.8;
}

a.imgbtn {
box-shadow: 0 0 9px rgba(99,99,99,0.4);
}

a.imgbtn:hover {
box-shadow: 0 0 4px rgba(33,33,33,0.6);
}

a.txtbtn{
color:#fff;
}

a.txtbtn:hover{
text-decoration: underline;
}

a.tulbtn{
text-decoration: underline;
color:#fff;
}

a.tulbtn:hover{
text-decoration: none;
}

.boxshad{
box-shadow: 0 0 8px 6px rgba(1,1,1,0.1);
}
.txtshad{
text-shadow: 0 0 6px rgba(1,1,1,0.2);
}

/* social icon base
-------------------------------- */

a.soc_ico{
display: block;
width:32px;
height:32px;
}

a.btn_ln{ background:url(./img/element/social_btn_line.png) no-repeat center center; }
a.btn_ig{ background:url(./img/element/social_btn_ig.png) no-repeat center center; }
a.btn_yt{ background:url(./img/element/social_btn_youtube.png) no-repeat center center; }

a.btn_ln_gray{ background:url(./img/element/social_btn_line_gray.png) no-repeat center center; }
a.btn_ig_gray{ background:url(./img/element/social_btn_ig_gray.png) no-repeat center center; }
a.btn_yt_gray{ background:url(./img/element/social_btn_youtube_gray.png) no-repeat center center; }


/* header deco for uni
-------------------------------- */

h1, h2, h3,h4,h5{
font-size:10px;
font-weight: normal;
letter-spacing: 0;
}

.uni h3{
position: relative;
display: block;
height:130px;
text-align: center;
margin-top:50px;
font-size:16px;
font-weight: bold;
}

.uni h3 span{
display: block;
position: absolute;
top: 90px;
left: 0;
right: 0;
margin: auto;
}

/* ------------------------------
BASE
-------------------------------- */

body {
font-size: 16px;
line-height:2;
letter-spacing: 0.01em;
}

.wrapper{
position: relative;
overflow: hidden;
width:100%;
min-width:1200px;
max-width:1920px;
margin:0 auto;
}

.rows{
overflow: hidden;
position: relative;
width:100%;
min-width:1200px;
max-width:1920px;
margin:0 auto;
}

.row_inner{
position:relative;
width: 1200px;
padding: 0;
margin:0 auto;
}


/* header
-------------------------------- */

header{
overflow: hidden;
position: relative;
margin:0 auto 0;
}

header.min_bg {
height:300px;
background: linear-gradient(180deg, #020001 0%, #020001 200px, #fff 200px);
}

header.mdl_bg {
height:560px;
}

header .row_inner {
overflow: hidden;
position: relative;
max-width: 1920px;
min-width: 1200px;
width: 100%;
margin: 0 auto;
}

header.min_bg .row_inner{
height: 300px;
}

header.mdl_bg .row_inner{
height: 560px;
}

header.menu_bg .row_inner{
height: 310px;
}

/* -------------------------------
boss
-------------------------------- */

.row_ovl{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
max-width: 1760px;
min-width: 1200px;
width: 100%;
height: 100%;
}

.row_ovl_full{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}

header a.boss {
background:url(./img/element/logo_ip.png) no-repeat center center;
display: block;
width: 226px;
height: 68px;
position: absolute;
left: 10px;
top: 40px;
z-index: 99;
}

    #frontpage header a.boss {
    background:url(./img/element/logo.png) no-repeat center center;
    }

header h1 {
position: absolute;
left: 260px;
top: 50px;
font-size: 16px;
font-weight: bold;
color: #fff;
}


header .infobtns {
background:url(./img/element/mv_info_btns.png) no-repeat center center;
display: block;
width:553px;
height:47px;
position: absolute;
right: 10px;
top: 46px;
z-index: 99;
}

header a.tel {
display: block;
width:270px;
height:47px;
position: absolute;
left: 190px;
top:0;
}

header a.mail {
display: block;
width:38px;
height:47px;
position: absolute;
left: 516px;
top:0;
}

header.low_bg h2{
height:170px;
margin:250px auto 0;
}

header.low_bg h2::after {
top: 60px;
}

header.low_bg h2 em{
color:#111;
margin:70px auto 0;
}


/* ------------------------------
BX O/W
-------------------------------- */

.bx-wrapper {
position: relative;
margin: 0 auto;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
border: none!important;
background: none!important;
}


/* -------------------------------
topnav
-------------------------------- */
/* fix nav*/
#topnav {
display: block;
position: relative;
z-index: 9999;
max-width: 1920px;
height : 100px;
margin-top: 40px;
}

#topnav .row_inner {
 height: 100px;
}

#topnav.is-fixed{
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-top: 0;
background-color: rgba(1,1,1, 0.88);
border-bottom: 1px solid rgba(1,1,1, 1);
}

#topnav .row_inner{
    overflow: hidden;
    width:100%;
    min-width: 1200px;
    max-width:1760px;
}

#topnav a.toplogo {
background:url(./img/element/logo.png) no-repeat center center;
display: block;
width: 260px;
height: 66px;
position: absolute;
left: 10px;
top: 8px;
z-index: 99;
}


/* gnav
-----------------*/

.gnav{
overflow: hidden;
margin-right: 0;
display: block;
width: 790px;
height: 56px;
float: right;
margin-right: 0;
margin-top:15px;
}

.gnav ul {
display: flex;
height: 56px;
position: relative;
}

    #topnav.is-fixed .gnav {
    }

.gnav ul li{
position: relative;
}

.gnav ul li a {
display: block;
height: 56px;
cursor: pointer;
transition: 0.2s;
z-index: 99;
}

.gnav ul li.item1 a { background:url(./img/element/gnav.png) no-repeat left 10px top 0; width: 146px; }
.gnav ul li.item2 a { background:url(./img/element/gnav.png) no-repeat left -137px top 0; width: 178px; }
.gnav ul li.item3 a { background:url(./img/element/gnav.png) no-repeat left -317px top 0; width: 128px; }
.gnav ul li.item4 a { background:url(./img/element/gnav.png) no-repeat left -446px top 0; width: 112px; }
.gnav ul li.item5 a { background:url(./img/element/gnav.png) no-repeat left -582px top 0; width: 175px; margin-left:30px;}


.gnav ul li a:hover {
opacity: 0.7;
}

.gnav ul li a span{
display: block;
font-size: 20px;
font-weight: bold;
}

.gnav ul li a em{
display: block;
font-size: 14px;
color:#E60011;
font-weight: bold;
letter-spacing: 0.08em;
}




/* ------------------------------
footer
-------------------------------- */

footer{
position: relative;
overflow: hidden;
background:url(./img/element/footer_bg.jpg) no-repeat center top;
margin: 0 auto;
color: #fff;
}

footer .row_inner{
width: 1060px;
padding: 0 20px;
}

footer .footbox{
display: flex;
justify-content: start;
margin: 80px auto 0;
padding: 0;
}

/* footer infobox
---------------------- */

footer .info{
position: relative;
overflow: hidden;
display: block;
width: 500px;
vertical-align: top;
}

footer .info .logo{
position: relative;
background:url(./img/element/logo.png) no-repeat left -4px center;
display: block;
width: 300px;
height: 60px;
margin: 0;
}

footer .info .tit{
position: relative;
margin-top: 15px;
font-size: 19px;
font-weight: bold;
letter-spacing: 0em;
}

footer .info .loco{
position: relative;
margin-top: 15px;
letter-spacing: 0.07em;
}

footer .info p.parking {
position: relative;
line-height: 25px;
text-indent: 40px;
margin-top: 30px;
}
footer .info p.parking::before {
content: "";
background:url(./img/element/footer_parking_ico.png) no-repeat center center;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: 0;
top: 0;
}

footer .info a.btn_to_access {
background:url(./img/element/footer_btn_access.png) no-repeat center center;
width: 241px;
height: 59px;
display: block;
margin-top: 35px;
}

footer .rbox a.btn_to_front {
display: block;
width:100px;
margin-top: 0;
padding-bottom: 10px;
color:#fff;
font-size: 19px;
font-weight: bold;
letter-spacing: 0.07em;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

footer .rbox .fnav ul{
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: start;
width: 640px;
margin: 0 auto 0;
vertical-align: top;
}

footer .fnav ul li {
position: relative;
overflow: hidden;
display: block;
vertical-align: top;
width: 290px;
}

footer .fnav ul li:nth-child(2n) {
margin-left: 60px;
}

footer .fnav ul.col1 {
margin-top: 0;
}


footer .fnav ul li a{
overflow: hidden;
display: block;
padding: 30px 0 20px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

footer .fnav ul li a span{
position: relative;
display: block;
color: #fff;
font-size: 18px;
font-weight: bold;
}

footer .fnav ul li a em{
display: block;
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.07em;
color: #fff;
}

footer .fnav ul li a span::before{
display:block;
content:"";
background:url(./img/element/fnav_li_arrow.png) no-repeat center center;
width:7px;
height:12px;
cursor:pointer;
position:absolute;
top: 12px;
right: 4px;
margin: auto;
transition: 0.2s;
}

footer .fnav ul li a span:hover::before{
right:0;
}


footer .fnav ul.ext {
margin-top: 20px;
border: none;
}

footer .fnav ul.ext li{
width: 150px;
}

footer .fnav ul.ext li a{
padding: 30px 0 0;
border: none;
}



/* footer copy
---------------------- */

footer .copy {
position: relative;
overflow: hidden;
padding: 30px 0 30px;
text-align: left;
margin-top: 40px;
}

footer .copy::before{
content: "";
position: absolute;
top: 0;
left: 0;
margin: auto;
display: block;
width: 120px;
height: 2px;
border-top: 2px solid rgba(255, 255, 255, 0.7);
}


footer .copy p{
color:#fff;
letter-spacing: 0.1em;
font-size: 16px;
}



/*--------------------------------
ScrollToTop
(2)180x180
-------------------------------- */

#pagetop {
display: none;
position: fixed;
bottom: 70px;
right: 100px;
font-size: 1em;
opacity: 1;
z-index:9999;
}

#pagetop a {
background:url(./img/element/pagetop.png) no-repeat center center;
width: 54px;
height: 54px;
display: block;
}

#pagetop a:hover {
opacity: 1;
}


/*--------------------------------
POP
-------------------------------- */

    #pop {
    position: fixed;
    bottom: -450px;
    right: 90px;
    z-index:9999;
    }

    #pop .pic{
    position: relative;
    width:100%;
    height: 100%;
    }

    #pop .pic img{
    position: relative;
    display: block;
    width:100%;
    max-width: 600px;
    max-height: 400px;
    height: auto;
    }

    #pop .pop_close {
    background:url(./img/element/pop_close.png) no-repeat center center;
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    right: -30px;
    top: -30px;
    cursor:pointer;
    }

    #pop a:hover {
    opacity: 1;
    }


/*
ast_service
---------------------- */

#ast_service {
overflow: hidden;
display: block;
background-color: #fff;
background-color: #F8F8F8;
}

#ast_service h3{
background:url(./img/element/ast_service_tit.png) no-repeat center top;
width: 200px;
height: 40px;
position: relative;
margin: 100px auto 35px;
text-align: center;
}

#ast_service ul{
overflow: hidden;
display: flex;
justify-content: space-between;
overflow: hidden;
width: 1260px;
height: 155px;
margin :10px auto 100px;
}

#ast_service ul li{
overflow: hidden;
display: block;
width: 393px;
height: 155px;
}

#ast_service ul li a{
position: relative;
display: block;
width: 393px;
height: 155px;
transition: 0.2s;
}

#ast_service ul li a.link_logo{ background:url(./img/element/ast_service_logo.png) no-repeat center top; }
#ast_service ul li a.link_graphic{ background:url(./img/element/ast_service_graphic.png) no-repeat center top; }
#ast_service ul li a.link_homepage{ background:url(./img/element/ast_service_homepage.png) no-repeat center top; }

#ast_service ul li a::after{
content: "";
background:url(./img/element/ast_service_li_arrow.png) no-repeat center center;
display: block;
width: 45px;
height: 45px;
position: absolute;
right: 15px;
bottom: 5px;
}

#ast_service ul li a:hover::after{
right: 12px;
}


/*
ast_contact
---------------------- */

#ast_contact {
overflow: hidden;
display: block;
background-color: #fff;
border-top: 1px solid #EBEBEB;
}

#ast_contact h3{
background:url(./img/element/ast_contact_tit.png) no-repeat center top;
width: 540px;
height:120px;
position: relative;
margin: 110px auto 100px;
text-align: center;
}

#ast_contact h3 b{
display: block;
font-size: 18px;
font-weight: bold;
margin: 120px auto 50px;
}

#ast_contact h3 em{
display: block;
font-size:18px;
font-weight: bold;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#ast_contact ul{
overflow: hidden;
display: block;
height:100px;
margin:50px auto 120px;
text-align: center;
}

#ast_contact ul li {
overflow: hidden;
display: inline-block;
width:590px;
height:100px;
text-align: center;
border-right: 3px solid #fafafa;
}

#ast_contact ul li:first-child {
border-left: 3px solid #fafafa;
}

#ast_contact li h4{
display: block;
position: relative;
font-size: 18px;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.06em;
}

/*
#ast_contact li.tel h4::after{
content: "";
width: 40px;
height: 1px;
background-color: #926134;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
*/

#ast_contact li.tel a{
position: relative;
background: url(./img/element/ast_contact_tel.png) no-repeat center center;
position: relative;
display: block;
width: 460px;
height: 58px;
margin: 0 auto 0;
}

#ast_contact li.mail a{
position: relative;
background: url(./img/element/ast_contact_mail.png) no-repeat center center;
position: relative;
display: block;
width: 349px;
height: 58px;
margin: 0 auto 0;
}

#ast_contact p.note{
display: block;
text-align: center;
font-size: 16px;
margin: 5px auto 0;
color: #4E5861;
}
    #ast_contact .tel p.note{
text-align: left;
margin-left: 66px;
}


/*
ast_ln
---------------------- */

#ast_ln {
overflow: hidden;
display: block;
background-color: #F3F3F3;
padding: 35px 0;
text-align: center;
}


#ast_ln a{
position: relative;
background: url(./img/element/ast_ln_btn.png) no-repeat center center;
display: inline-block;
width: 230px;
height: 66px;
vertical-align: top;
}

#ast_ln span{
display: inline-block;
vertical-align: top;
font-size: 17px;
letter-spacing: 0.12em;
margin-left: 20px;
line-height: 66px;
}

#ast_ln em{
color: #926234;
margin-right: 2em;
}

#ast_ln span b{
font-weight: bold;
}



/*
ast_qa
-------------------------*/

#ast_qa {
position: relative;
margin:0 auto;
text-align:center;
}

#ast_qa .row_inner{
max-width: 1500px;
min-width: 1200px;
width: 100%;
}

#ast_qa h3{
background:url(./img/element/ast_qa_tit.png) no-repeat center top;
width: 300px;
height: 90px;
position: relative;
margin: 50px auto 30px;
}

#ast_qa dl{
width:1200px;
padding-bottom: 80px;
margin: 0 auto;
}

#ast_qa dt{
position: relative;
display:block;
width:1200px;
cursor:pointer;
background-color:#1D2124;
margin-top:20px;
}

#ast_qa dt span{
display:block;
padding:20px 60px 20px 60px;
color:#fff;
line-height:1.3em;
font-size:18px;
font-weight: bold;
text-align: left;
margin:0;
}

#ast_qa dt::before{
display:block;
content:"";
background:url(./img/element/ast_qa_q.png) no-repeat center center;
width:60px;
height:50px;
cursor:pointer;
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto;
transition: 0.2s;
}

#ast_qa dt::after{
display:block;
content:"";
background:url(./img/element/ast_qa_open.png) no-repeat center center;
width:80px;
height:30px;
cursor:pointer;
position:absolute;
top:0;
bottom:0;
right:0;
margin:auto;
transition: 0.2s;
}

#ast_qa dd{
position: relative;
display:none;
overflow: hidden;
width:1200px;
padding: 20px 40px;
line-height:1.6;
text-align: left;
margin-bottom:18px;
background-color:#fff;
}

#ast_qa dd p{
text-align: left!important;
color: #3F2210;
}

#ast_qa dd a.close{
display:block;
background:url(./img/element/ast_qa_close.png) no-repeat center center;
width:126px;
height:40px;
cursor:pointer;
margin:20px auto 0;
transition: 0.2s;
}

#ast_qa dd a.close:hover{
background:url(./img/element/ast_qa_close.png) no-repeat center center;
}



/*------------------------
drawer
-------------------------*/

.drawer {
margin:0;
padding:0;
outline:none;
border:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-align:left;
text-decoration:none;
list-style:none;
}

.drawer .drawer_bg {
width:100%;
height:100%;
position:fixed;
z-index:999;
background-color:rgba(0,0,0,0);
display:none;
top:0;
left:0;
}

.drawer a.drawer_tab {
display: block;
overflow: hidden;
background:url(./img/drawer/drawer_tab.png) no-repeat center right;
width: 70px;
height: 221px;
border:none;
outline:none;
cursor:pointer;
position: fixed;
right: 0;
top: 310px;
z-index:999999;
}

.drawer a.drawer_tab.active {
background:url(./img/drawer/drawer_tab_close.png) no-repeat center right;
}

.drawer a.drawer_tab .drawer_button{
display:block;
background:0 0;
width:100%;
height: 100%;
}

.drawer .drawer_wrap{
    overflow: auto;
    -webkit-overflow-scrolling: touch;

background:url(./img/drawer/drawer_bg.png) no-repeat left top;
display: block;
width: 1130px;
height: 100%;
transition:all .2s;
position:fixed;
top:0;
right:0;
z-index:9999;
border-radius: 20px;
}

.drawer .drawer_wrap{
transform:translate(100%);
opacity:1;
}

.drawer .drawer_wrap .inner{
height: 860px;
position:relative;
margin-top: 50px;
margin-left: 150px;
z-index:1000;
}

.drawer .drawer_wrap.open{
transform:translate(0);
display:block;
opacity:1;
}

.drawer_wrap a{
transition: 0.2s;
}

.drawer_wrap a.logo{
background:url(./img/element/logo.png) no-repeat left center;
display: block;
width:264px;
height:56px;
position: relative;
margin-left:-8px;
margin-bottom:30px;
}

.drawer_wrap ul.dnav {
overflow: hidden;
display: block;
width:760px;
}

.drawer_wrap ul.dnav li {
overflow: hidden;
position: relative;
display: block;
width: 760px;
height: 210px;
margin-bottom: 0;
}
    .drawer_wrap ul.dnav li.homepage {
    height: 160px;
    border-bottom: 1px solid #554F82;
    }

.drawer_wrap ul.dnav li a.btn_to_design{
position: relative;
display: block;
width: 655px;
height: 131px;
}
.drawer_wrap ul.dnav li.logo a.btn_to_design { background:url(./img/drawer/logo_btn_design.png) no-repeat center center; }
.drawer_wrap ul.dnav li.graphic a.btn_to_design { background:url(./img/drawer/graphic_btn_design.png) no-repeat center center; }
.drawer_wrap ul.dnav li.homepage a.btn_to_design { background:url(./img/drawer/homepage_btn_design.png) no-repeat center center; }

.drawer_wrap ul.dnav li a.btn_to_works{
position: relative;
display: block;
width: 428px;
height: 62px;
margin-left: 280px;
margin-bottom: 0;
}
.drawer_wrap ul.dnav li.logo a.btn_to_works { background:url(./img/drawer/logo_btn_works.png) no-repeat center center; }
.drawer_wrap ul.dnav li.graphic a.btn_to_works { background:url(./img/drawer/graphic_btn_works.png) no-repeat center center; }
.drawer_wrap ul.dnav li.homepage a.btn_to_works { background:url(./img/drawer/homepage_btn_works.png) no-repeat center center; }


.drawer_wrap ul.dnav li.logo a.btn_to_design::before,
.drawer_wrap ul.dnav li.graphic a.btn_to_design::before {
background:url(./img/drawer/line_L.png) no-repeat center center;
content:"";
display: block;
width: 193px;
height: 55px;
position: absolute;
top: 109px;
left: 160px;
}

.drawer_wrap ul.dnav li a::after {
background:url(./img/drawer/btn_arrow.png) no-repeat center center;
content:"";
display: block;
width: 132px;
height: 132px;
position: absolute;
top: 0;
bottom: 0;
right: 3px;
margin: auto;
}
.drawer_wrap ul.dnav li a:hover::after {
right: -1px;
}

.drawer_wrap ul.dnav li a.btn_to_works::after {
right: -10px;
}
.drawer_wrap ul.dnav li a.btn_to_works:hover::after {
right: -14px;
}

.drawer_wrap .infolist{
overflow: hidden;
position: relative;
display: block;
vertical-align: top;
text-align: left;
color:#fff;
}

.drawer_wrap .infolist p{
display: flex;
align-items: center;
margin-top: 30px;
}

.drawer_wrap .infolist a {
display: inline-block;
font-size: 16px;
letter-spacing: 0.1em;
line-height: 1.6em;
text-align: left;
color: #fff;
}


.drawer_wrap .infolist a.btn_to_tel {
background:url(./img/drawer/btn_tel.png) no-repeat center center;
display: inline-block;
width: 291px;
height: 40px;
}

.drawer_wrap .infolist a.btn_to_tel_company {
display: block;
margin-left: 30px;
margin-top: 4px;
}

.drawer_wrap .infolist a.btn_to_contact {
background:url(./img/drawer/btn_mail.png) no-repeat center center;
display: block;
width: 350px;
height: 58px;
margin-bottom: 10px;
}

.drawer_wrap .infolist span {
display: inline-block;

letter-spacing: 0.1em;
margin-left: 30px;
}