body {
font-family: "Yu Mincho","ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
background-color: #00320d;
font-size: 1.2em;
}

* {
margin: 0;
Padding: 0;
}

/*フェードイン*/
.fadein {
opacity: 0;
transition: 1.5s;
margin-top: 60px;
}

.fadein.show {
opacity: 1;
margin-top: 0;
}


h3 {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: left;
font-size: 2em;
}

h4 {
position: relative;
font-size: 1.3em;
letter-spacing: .1em;
color: #ffffff;
padding-left: 1em;
padding-bottom: 0.3em;
width: 80%;
margin: 0 auto 1em auto;
text-align: center;
border-radius: 10px;
}

h4:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
content: '';
background-image: -webkit-repeating-linear-gradient(135deg, #ffffff, #ffffff 1px, transparent 1px, transparent 4px);
background-image: repeating-linear-gradient(-45deg, #ffffff, #ffffff 1px, transparent 1px, transparent 4px);
background-size: 5px 5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

h5 {
font-size: 1.2em;
position: relative;
padding: 1.5rem 1rem;
border: 3px solid #d8d8d8;
border-radius: 10px;
background: #f9f9f9;
}

h5:before {
position: absolute;
bottom: -14px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #d8d8d8 transparent transparent transparent;
}

h5:after {
position: absolute;
bottom: -10px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 14px 12px 0 12px;
border-style: solid;
border-color: #f9f9f9 transparent transparent transparent;
}

#nav-toggle {
display : block;
position: fixed;
z-index : 3;
right : 32px;
top   : 10px;
width : 52px;
height: 52px;
cursor: pointer;
text-align: center;
background-color: #ffffff;
border: 2px solid #000000;
}

#nav-toggle span {
display: block;
position: absolute;
width: 30px;
height: 2px;
left: 10px;
background : #555555;
-webkit-transition: 0.5s all;
-moz-transition   : 0.5s all;
transition        : 0.5s all;
}

#nav-toggle span:nth-child(1) {
top: 20px;
}

#nav-toggle span:nth-child(2) {
top: 30px;
}

.open #nav-toggle span:nth-child(1) {
top : 25px;
left: 14px;
width: 24px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.open #nav-toggle span:nth-child(2) {
top: 25px;
left:14px;
width: 24px;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}

#nav-toggle::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
content: '';
width: 52px;
height: 52px;
margin: -28px 0 0 -28px;
border: 2px solid rgba(0, 0, 0, 0);
transition: all .75s;
}

.open #nav-toggle::after {
border: 2px solid #555555;
}

#menu {
position: fixed;
z-index: 2;
top: 0;
left: 0;
color: #ffffff;
background: #00320d;
text-align: center;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
height: 100vh;
color: #ffffff;
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}

#menu-inner {
margin-top: 10vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

#menu-inner ul {
width: 30%;
list-style: none;
}

#menu-inner ul li {
font-size: 2.5em;
line-height: 1em;
padding: 30px 0;
}

#menu-inner ul li a {
text-decoration: none;
color: #ffffff;
}

#menu-inner ul li span {
font-size: 0.5em;
}

#menu-inner div {
font-size: 1.2em;
width: 30%;
margin-top: 20vh;
}

.open #menu {
transform: translateX(0%);
}

#header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}

#header .item1 {
width: 100%;
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
color: #ffffff;
}

#header .item1 h2 {
margin-left: 1em;
}

#header .item2 {
width: 100%;
height: calc( 100vw * 0.56 );
}

#header .item2 div {
display: none;
position: absolute;
width: 100%;
}

#header .item2 div:nth-child(1){
display: block;
}

#header .item2 img {
width: 100%;
margin: auto;
}

#header .item2 #title {
background-image: url(img/main04.jpg);
height: calc( 100vw * 0.568 );
background-size: cover; 
background-repeat: no-repeat; 
overflow: hidden;
}

#header .item2 #title p#main {
font-family: "Zen Antique Soft", serif;
overflow: hidden;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
color: #00320d;
font-size: 3em;
margin-top: calc( 100vw * 0.568 / 2 - 2em );
background-color : rgba( 255,255,255,0.7);
}

#header .item2 #title p#main span {
display: block;
transform: translate(100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}

#header .item2 #title p#main.-visible,
#header .item2 #title p#main.-visible span {
transform: translate(0, 0);
}

#header .item2 #title p#sub {
font-family: "Zen Antique Soft", serif;
overflow: hidden;
transform: translate(100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
color: #000000;
font-size: 1.5em;
text-align: center;
background-color : rgba( 255,255,255,0.7);
}

#header .item2 #title p#sub span {
display: block;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}

#header .item2 #title p#sub.-visible,
#header .item2 #title p#sub.-visible span {
transform: translate(0, 0);
}

#header .item2 #title p#scroll {
overflow: hidden;
font-size: 2em;
text-align: center;
transition: all 1s;
opacity: 0;
width: 3em;
height: 1em;
border-radius: 100px;
margin: 100px auto 0 auto;
padding: 0.8em 0 1.2em 0;
background-color : rgba( 255,255,255,0.8);
line-height: 0.9em;
}

#header .item2 #title p#scroll span {
display: block;
}

#header .item2 #title p#scroll.-visible,
#header .item2 #title p#scroll.-visible span {
opacity: 1;
}

#service {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 0.5em;
padding-top: 3em;
padding-bottom: 3em;
color: #ffffff;
background-color: #2f5939
}

#service div {
text-align: center;
}

#service .item1 {
order: 2;
width: 2em;
padding: 0 2.3em 0 1.7em;
}

#service .item1:before{
content: "  ";
white-space: pre-wrap;
}

#service .item1 span:before{
content: "   ";
white-space: pre-wrap;
}

#service .item2 {
order: 1;
width: calc( (100% - 6em) / 2 );
padding-top: 4em;
}

#service .item3 {
order: 3;
width: calc( (100% - 6em) / 2);
padding-top: 4em;
}

#service img {
width: 98%;
margin: auto;
}

#service p {
font-size: 1.5em;
}

#information {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding-top: 3em;
padding-bottom: 3em;
background-color: #F4F2EF;
}

#information .item1 {
width: 100%;
}

#information .item1 h3 {
margin-left: calc( 50% - 1em);
margin-bottom: 1em;
}

#information .item2 {
width: calc( 50% - 4em );
padding: 2em 0 2em 2em;
}

#information .item3 {
width: calc( 50% + 2em );
text-align: center;
padding: 2em 0;
}

#information .item4 {
width: 80%;
margin: 2em auto;
}

#information .item5 {
width: 80%;
margin: 2em auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

#information .item2 table {
width: 100%;
}

#information .item2 table th,
#information .item2 table td {
border :1px solid #000000;
padding: 0.2em;
}

#information .item2 table ul {
list-style: none;
}

#information .item3 img {
width: 90%;
margin: auto;
}

#information .item4 h4 {
color: #000000;
}

#information .item4 h4:after {
background-image: -webkit-repeating-linear-gradient(135deg, #000000, #000000 1px, transparent 1px, transparent 4px);
background-image: repeating-linear-gradient(-45deg, #000000, #000000 1px, transparent 1px, transparent 4px);
}

#information .item5 h5 {
width: 100%;
}

#information .item5 img {
width: 48%;
margin: 1em 1%;
}

#recruit {
text-align: center;
background-color: #2f5939;
color: #ffffff;
padding-top: 4em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

#recruit .item1 {
width: 100%;
}

#recruit .item2 {
width: 96%;
margin: 2em auto 0 auto;
text-align: center;
}

#recruit .item3 {
width: 55%;
margin: 3em auto 0 0;
text-align: left;
}

#recruit .item4 {
width: 41%;
margin-top: 3em;
margin-left: 2%;
margin-right: 2%;
text-align: center;
}

#recruit .item5 {
width: 44%;
margin: 5em 1% 1em 0;
}

#recruit .item6 {
width: 53%;
margin: 2em 1% 1em 1%;
}

#recruit .item7 {
width: 50%;
margin: 2em 0 2em 0;
}

#recruit .item8 {
width: 50%;
margin-top: 4em;
margin-bottom: 2em;
}

#recruit .item9 {
width: 100%;
text-align: center;
}

#recruit .item1 h3 {
margin-left: calc( 50% - 1em);
margin-bottom: 1em;
}

#recruit .item3 img {
width: 100%;
}

#recruit .item4 p {
text-align: left;
padding-left: 1em;
}

#recruit .item4 img {
margin: 1em auto 0 auto;
width: 96%;
}

#recruit .item5 img, 
#recruit .item6 img {
width: 100%;
}

#recruit .item7 img {
width: 60%;
margin: 0.5em 20%;
}

#recruit .item8 table {
width: 90%;
margin-left: 5%;
color: #ffffff;
border-collapse: collapse;
border-spacing: 0;
}

#recruit .item8 table th,
#recruit .item8 table td {
padding: 0.5em;
}

#recruit .item8 table th {
width: 4em;
border: 1px solid #443A2A;
background-color: #ffffff;
color: #000000;
}

#recruit .item8 table td {
text-align: left;
border: 1px solid #ffffff;
}

#recruit .item8 table td ul li {
list-style: none;
}

#recruit .button {
padding: 0.5em 1em;
font-size: 1.5em;
}

#recruit .item9 a {
width: 60%;
display: block;
border-radius: 6px;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 201% auto;
background-image: linear-gradient(
  to right,
  #a48c61 0%,
  #a48c61 50%,
  #06260d 50%,
  #06260d 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
text-align: center;
color: #fff;
text-decoration: none;
font-weight: bold;
margin: 0 auto 3em auto;
}

#recruit a:hover {
background-position: 0 0;
}

#footer {
color: #ffffff;
text-align: center;
padding-top: 1em;
}

#footer .address {
}

#footer #copyright {
}

#footer #footer-map {
position: relative;
width: 100%;
height: 300px;
margin-top: 0.5em;
}

#footer #footer-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#to-top {
position: fixed;
bottom: 50px;
right: 10px;
width: 60px;
height: 45px;
padding-top: 15px;
color: #ffffff;
background-color: rgba(0,0,0,.8);
border: 3px solid #ffffff;
border-radius: 50%;
z-index: 1001;
text-align: center;
}

#to-top img {
width: 50%;
max-width: 100%;
height: auto;
}

#to-top a {
color: #722f03;
width: 100px;
display: block;
border-radius: 5px;
}