@charset "utf-8";

@font-face {
font-family: 'GeosansLight';
src:url('../font/GeosansLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,th,td,em,span,strong,figcaption,figure {
color: rgba(25,25,25, 1);
margin: 0;
padding: 0;
line-height: 1.6;
font-weight: normal;
font-feature-settings: "palt";
font-family:"GeosansLight","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
letter-spacing: 0.064em;
}
strong {
font-weight:700;
}
::selection {
background: rgba(228,228,228,1);
}
table {
border-collapse: collapse;
}
th {
font-weight: normal;
}


li {
list-style: none;
}
em {
font-style: normal;
}
img,svg {
border: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
min-height: auto;
width/***/: auto;
}
a img:hover {
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

html {
}
body {
-webkit-font-smoothing: subpixel-antialiased;
letter-spacing: .08em;
overflow-x: hidden;
margin:0;
}

a,
header a img{
text-decoration: none;
color: rgba(25,25,25, 1);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover {
text-decoration: underline;
}
a:focus {
outline: none;
}
* html body {
text-align: center; /* IE6.0 */
}
.clear {
clear: both;
}
.clearfix {
zoom: 1;  /* for IE 5.5-7 */
}
.clearfix:after {  /* for modern browser */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}



a img:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}
.img-wrap {
overflow: hidden;
}
.img-wrap img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover .img-wrap img {
transform: scale(1.1);
opacity: 1;
}
.center {
text-align: center;
}




header{

}

footer {

}

main {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding:5%;
min-height:100vh;
box-sizing:border-box;
}
main article {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
/*    min-width: 600px;*/

}
main header {
/*width:205px;*/
box-sizing:border-box;
padding-right:5%;
position:relative;
}
main header p{
position:absolute;
bottom:0;
font-size:10px;
line-height:16px;
}
main header p em{
font-size:16px;
vertical-align:middle;
padding-right:2px;
}
main header h1 img{
min-width:125px;
margin-bottom:45px;
}
main header ul li{
margin-bottom:25px;
font-size:14px;
line-height:1;
}
main header ul li a{
color:rgba(0,0,0,.6);
}
main header ul li a:hover{
color:rgba(0,0,0,.9);
text-decoration:none;
}
main header a.btn img{
opacity:.35;
}
main header a.btn:hover img{
opacity:.6;
}
@media only screen and (max-width: 910px) {
main article {
width: 100%;
min-width: inherit;
margin-right: 0; }
main .sub {
width: 100%;
margin-top: 10px; }
}


/* ============================================================ pc */
@media screen and (min-width:800px) {
body {
font-size: 16px;
}
.sp,
.nav-button,
.nav-wrapper,
.menu-area{
display:none;
}
section p,
section dd {
letter-spacing: 0.2rem;
text-align: justify;
line-height:2;
}

footer p{
bottom:3rem;
}
}
/* ============================================================ sp */
@media screen and (max-width:800px) {

html {
}
body {
font-size: 14px;
}
.pc{
display:none;
}
main {

flex-flow: row wrap;
padding:10vh 5vw;
min-height:100vh;
box-sizing:border-box;
}
main article {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
/*    min-width: 600px;*/
}

section p,
section dd {
letter-spacing: 0.1rem;
text-align: justify;
line-height:1.8;
}

footer p{
font-size:8px;
bottom:1rem;
letter-spacing:0;
}



.menu-area{
position: fixed;
top: 0;
z-index:9;
padding:.6rem;
text-align:center;
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
/*backdrop-filter: blur(6px);
background-color:rgba(255,255,255,.85);*/
}
.menu-area h1 img{
max-height:3vh;
}

button:focus {
outline: none;
}
.button-lines {
position: fixed;
background: none;
height: 70px;
width: 40px;
border: none;
cursor: pointer;
display: inline-block;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-ms-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
z-index: 9999;
margin-top:8px;
}
.button-lines:hover {
cursor: pointer;
}
.button-lines {
top:-0.85rem;
right:5%;
}
.lines:after,
.lines:before {
margin-left: 20px;
}
.nav-visible .button-lines-x .lines:after {

margin-left: 20px;
}
.lines {
width: 40px;
display: inline-block;
}
.lines:hover {
}
.lines,
.lines:after,
.lines:before {
background: rgba(80,80,80, 1);
display: inline-block;
height: 1px;
position: relative;
text-align: right;
content: "";
position: absolute;

}
.lines {
display: inline-block;
height: 1px;
position: relative;
text-align:right;
}
.nav-visible .lines:after,
.nav-visible .lines:before{
}
.lines:after,
.lines:before {
}
.lines:after:hover,
.lines:before:hover {
background: rgba(80,80,80, 1);
}
.lines:after {
top: 8px;
left: -20px;
width: 40px;
}
.lines:before {
    top: -8px;
    left: -20px;
width: 40px;
}




.close {
opacity: 1;
}
.button-lines-x .lines:after,
.button-lines-x .lines:before {
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
-webkit-transition: top 0.3s 0.4s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.4s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.4s ease, transform 0.3s ease;
transition: top 0.3s 0.4s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.nav-visible .button-lines-x .lines {
background: transparent;
}
.nav-visible .button-lines-x .lines:after,
.nav-visible .button-lines-x .lines:before {
background: rgba(80,80,80, 1);
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.3s ease;
transition: top 0.3s ease, -webkit-transform 0.3s 0.3s ease;
transition: top 0.3s ease, transform 0.3s 0.3s ease;
transition: top 0.3s ease, transform 0.3s 0.3s ease, -webkit-transform 0.3s 0.3s ease;
}
.nav-visible .button-lines-x .lines:after {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
top: 5px;
left: -20px;
width: 45px;
}
.nav-visible .button-lines-x .lines:before {
top: 5px;
left:-20px;
width: 45px;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
.nav-wrapper {
background-color:rgba(247,247,247,.6);
backdrop-filter: blur(6px);
height: 100vh;
-webkit-perspective: 100%;
perspective: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
transition: all 0.4s;
visibility: hidden;
width: 100vw;
z-index: 999;
}
.nav-visible .nav-wrapper {
opacity: 1;
visibility: visible;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.nav-wrapper h1 {
margin-bottom:1rem;
}
.nav-wrapper .btn img{
	width:30px;
	opacity:.4;
	display:inline-block;
	margin-top:1rem;
	margin-bottom:2rem;
}
.nav-wrapper ul.menu li {
text-align: center;
font-size: .95rem;
margin-bottom:1rem;
}
.nav-wrapper ul.menu li a{
color: rgba(25,25,25, 1);
letter-spacing:1px;
}
.nav-wrapper ul.menu li a:hover{
text-decoration:none;
color:rgba(153,153,153,1);
}
.nav-wrapper ul.menu li:nth-last-child(1) {
margin-bottom:0;
}

.nav-wrapper ul.social li img {
width:1.5rem;
}

}