@charset "UTF-8";

/* RESPONSIVE 
--------------------------------------------- */

/* KYOUTSU END // PC BASE ==================== */
@media only screen and (min-width: 1080px){	


/* base
============================================== */
body {
/* padding-top: 70px!important; */
font-size: min(6vw,18px)!important;
}
.pcNon {
display: none!important;
}
h1 {
font-size: min(6vw,34px);
}


/* header
============================================== */
#Header {
    width: 100%;
    background-color: #fff;
    position: absolute;
    /* top: 50px; */
    padding-bottom: 25px;
    padding-top: 30px;
    transition: all .3s;
    z-index: 10;
}

#low #Header {
    width: 100%;
    background-color: #fff;
    position: relative;
    padding-top: 50px;
    top: 0;
    transition: all .3s;
    /* margin-bottom: 50px; */
    }

#Header .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 1080px;
min-height: 70px;
display: flex;
flex-wrap: nowrap;
align-items: start;
justify-content: space-between;
}
#Header .logo {
max-width: 200px;
min-width: 160px;
}

#Header .logo img{
    width: 100%;
    }

/* globalnavi
============================================== */
#navDrawer
{
    align-self: center;
    display: flex;
}
.navUnshown {
display:none;
}
#gnav { 
margin-top: 0px;
text-align: right;
vertical-align: middle;
}
#gnav #nav {
margin-left: auto;
display: flex;
flex: none;
justify-content: flex-end;
}
#gnav a,
#gnav p,
#gnav #nav details summary {
padding-right: 1.5em;
padding-left: 1.5em;
color: var(--base_black);
display: flex;
align-items: top;
}
#gnav a:hover,
#gnav p:hover,
#gnav #nav details:hover summary {
background-color: #ffffff;
color: var(--base_black);
text-decoration: none;
}
#gnav li.navItem_4 a {
    color: var(--base_black);
    background-color: rgba(255,255,255,1);
}
#gnav li.navItem_4 a:hover {
    color: var(--base_black);
    background-color: rgba(255,255,255,0);
}
#gnav #nav > .nav > a,
#gnav #nav details summary {
    font-size: 23px;
    display: flex;
    align-items: center;
    min-height: 70px;
    justify-content: space-between;
cursor: pointer;
}
#gnav #nav > li {
    color: var(--base_black);
}
#gnav #nav details summary {
border-bottom: 5px solid transparent;
transition: all 0.3s;
position: relative;
}
#gnav #nav details[open] summary {
border-bottom: 5px solid #ffffff;
transition: all 0.3s;
}
#gnav #nav details summary:hover {
cursor: pointer;
}
#gnav #nav details summary::after {
content: '';
width: 10px;
height: 10px;
display: inline-block;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(135deg);
position: absolute;
top: 40%;
right: 8%;
transition: all .3s;
}
#gnav #nav details summary:hover::after {
border-color: #ffffff;
}
#gnav #nav details .menu {
min-width: 15.3%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: absolute;
top: 70px;
text-align: left;
z-index: 99999;
white-space: nowrap;
}
#gnav #nav details .menu li {
display: block;
width: 100%;
}
#gnav #nav details .menu li a {
padding: 1em 1.5em 1em 1.5em;
width: 100%;
/* background-color: #0e3e98; */
display: flex;
align-items: center;
white-space: nowrap;
}
#gnav #nav details .menu li a:hover {
background-color: #ffffff;
color: var(--base_black);
}

/* footer
============================================== */
#Footer {
    padding-top: 95px;
    display: inline-block;
    }
    #Footer .contents {
    display: block;
    }
    #Footer .contentsWrap {
    margin-right: auto;
    margin-bottom: 80px;
    margin-left: auto;
    width: 1080px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    #Footer .logo {
    margin-bottom: 20px;
    max-width: 200px;
    min-width: 160px;
    }
    #Footer address .tel small {
    margin-right: 0.5em;
    font-size: 24px;
    }
    #Footer address .tel strong {
    font-size: 32px;
    }
    #Footer .add {
    margin-bottom: 15px;
    font-size: 18px;
    }
    #Footer address .code {
    margin-right: 0.8em;
    display: inline-block;
    }
    #Footer .mail {
    font-size: 18px;
    }
    #Footer #footNavi > ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    }
    #Footer #footNavi > ul > li {
    padding-right: 1.2em;
    padding-left: 1.2em;
    display: inline-block;
    }
    #Footer #footNavi li > ul {
    margin-top: 1.5em;
    }
    #Footer #footNavi li > a {
    margin-bottom: 1.5em;
    display: inline-block;
    transition: all .3s;
    }
    #Footer #footNavi li:hover > a {
    transform: scale(1.1);
    }
    
    


}/* PC END // SP BASE |||||||||||||||||||||||||||||| */
@media only screen and (max-width: 1079px){

/* base
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
body {
display: inherit;
font-size: max(3vw,18px);
}
.spNon {
display: none!important;
}
h1 {
font-size: max(3vw,26px);
}


/* header
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Header {
    /* position: fixed; */
    width: 100%;
    /* height: clamp(60px, 30vw, 120px); */
    /* background-color: #0e3e98; */
    transition: all .3s;
    top: 0 !important;
    z-index: 1000000;
    background:transparent;
    padding-top: 20px;
}

#low #Header {
    background: rgb(255,255 ,255,0.5);
}
#Header .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 90%;
/* height: clamp(60px, 30vw, 120px); */
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
#Header .logo {
    max-width: 50%;
    margin: auto auto auto 25%;
}
#Header .logo img{
    width: 100%;
}

/* globalnavi
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#navDrawer {
position: relative;
}
.navUnshown {
display:none;
}
#navOpen {
width: min(10vw,60px);
height: min(10vw,40px);
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
z-index: 999;
}
#navOpen span, #navOpen span:before, #navOpen span:after {
content: '';
margin: auto;
width: 100%;
height: 2px;
position: absolute;
border-radius: 3px;
background-color: black;
display: block;
z-index: 999;
right: 0;
left: 0;
}
#navOpen span:before {
top: 650%;
}
#navOpen span:after {
top: 1300%;
}
#navClose {
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index: 99;
top: 0;
right: 0;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
#navContent {padding-top: 3em;width: 100%;/* max-width: 320px; */height: 100%;position: fixed;top: 0;right: 0;z-index: 100;
    overflow: auto;transition: .3s ease-in-out;-webkit-transform: translateY(-105%);transform: translateY(-105%);
    background: url(../../images/sm_footer_bg.jpg) top left repeat-x;
    background-size: cover;
}
#navInput:checked ~ #navClose {
display: block;
opacity: .5;
}
#navInput:checked ~ #navContent {
-webkit-transform: translateY(0%);
transform: translateY(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#navInput:checked ~ #navOpen span, #navInput:checked ~ #navOpen span:before, #navInput:checked ~ #navOpen span:after {
height: 3px;
background-color: #ffffff;
}
#navInput:checked ~ #navOpen {
}
#navInput:checked ~ #navOpen::after {
opacity: 0;
}
#navInput:checked ~ #navOpen span {
width: 50px;
bottom: 16px;
transform: translateY(0) rotate(45deg);
transition: all .15s linear;
background: #000;
}
#navInput:checked ~ #navOpen span:before {
visibility: hidden;
}
#navInput:checked ~ #navOpen span:after {
width: 50px;
top: 0;
transform: translateY(0) rotate(95deg);
background: #000;
}
#gnav #nav {
margin-top: 1.5em;
margin-right: auto;
margin-left: auto;
display: block;
width: 80%;
height: auto;
position: inherit;
top: 0;
right: 0;
left: 0;
}
#gnav .subNav {
margin-right: 0;
margin-left: auto;
width: 90%;
}
#gnav li {
margin-bottom: 1em;
}
#gnav li summary,
#gnav li a {
line-height: 3;
display: block;
color: black;
text-align: center;
font-size: min(3.5vw,20px);
border-bottom: 1px solid black;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
#gnav li summary:hover,
#gnav li a:hover {
border-bottom: 1px solid black;
text-decoration: none;
}
#gnav li summary {
position: relative;
}
#gnav li summary::after {
content: '';
width: 17px;
height: 17px;
display: inline-block;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(135deg);
position: absolute;
top: 0.3em;
right: 10%;
transition: all .3s;
}
#gnav ul.subMenu {
padding-top: 1em;
}
#gnav ul.subMenu li a {
padding-left: 1em;
}




/* Footer
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Footer {
padding-top: min(10vw,200px);
display: inline-block;
}
#Footer .contents {
display: block;
}
#Footer .contentsWrap {
margin-right: auto;
margin-bottom: 80px;
margin-left: auto;
width: 90%;
}
#Footer .logo {
margin-bottom: 0.5em;
max-width: 200px;
min-width: 160px;
}
#Footer address {
margin-bottom: min(10vw,128px);
}
#Footer address .tel small {
margin-right: 0.5em;
font-size: min(4vw,34px);
}
#Footer address .tel strong {
font-size: min(10vw,45px);
}
#Footer .add {
margin-bottom: 15px;
font-size: min(4vw,26px);
word-break: auto-phrase;
}
#Footer address .code {
margin-right: 0.8em;
display: block;
}
#Footer .mail {
font-size: min(4vw,26px);
}
#Footer .mail img {
width: auto!important;
height: 1em!important;
}
#Footer #footNavi > ul {
font-size: min(3vw,26px);
}
#Footer #footNavi > ul > li {
padding-right: 1em;
padding-left: 1em;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#Footer #footNavi li > ul,
#Footer #footNavi li > ul li {
display: inline-block;
}
#Footer #footNavi li > ul {
width: 70%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#Footer #footNavi li > ul li {
width: 50%;
position: relative;
text-align: center;
}
#Footer #footNavi li > ul li a {
display: block;
border-left: 1px solid #ffffff;
}
#Footer #footNavi li > a {
margin-bottom: 1.5em;
display: inline-block;
transition: all .3s;
}
#Footer #footNavi li:hover > a {
transform: scale(1.1);
}


}/* SP END |||||||||||||||||||||||||||||||||||||||| */