@charset "utf-8";
    
@media screen and (max-width:480px){
    body {
        margin: 0;
        padding: 0;
    }

    /*ナビゲーション*/
    @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');

    * {
        outline: none;
    }

    /*
.page {
  width: 100%;
  height: 100vh;
  background: #fdfdfd;
  font-family: 'Encode Sans Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
  color: #212121;
}
*/

    .page {
        display: block;
    }

    .ttt {
        display: flex;
        position: fixed;
        width: 100%;
        height: 70px;
        background: #712c22;
        justify-content: center;
        align-items: center;
        /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
    }

    .ttt img {
        width: 75%;
        margin: 0 0 0 15%;
    }

    /*
main {
  padding: 70px 20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

main > div {
  margin: auto;
  max-width: 600px;
}

main h2 span {
  color: #BF7497;
}

main p {
  line-height: 1.5;
  font-weight: 200;
  margin: 20px 0;
}

main small {
  font-weight: 300;
  color: #888;
}
*/

    #nav-container {
        position: fixed;
        height: 100vh;
        width: 100%;
        pointer-events: none;
    }

    #nav-container .bg {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100% - 70px);
        visibility: hidden;
        opacity: 0;
        transition: .3s;
        background: #000;
    }

    #nav-container:focus-within .bg {
        visibility: visible;
        opacity: .6;
    }

    #nav-container * {
        visibility: visible;
    }

    .button {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        border-radius: 0;
        height: 70px;
        width: 30px;
        cursor: pointer;
        pointer-events: auto;
        margin-left: 25px;
        /*
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
*/
    }

    .icon-bar {
        display: block;
        width: 100%;
        height: 3px;
        background: #E2C764;
        transition: .3s;
    }

    .icon-bar + .icon-bar {
        margin-top: 5px;
    }

    #nav-container:focus-within .button {
        pointer-events: none;
    }

    #nav-container:focus-within .icon-bar:nth-of-type(1) {
        transform: translate3d(0, 8px, 0) rotate(45deg);
    }

    #nav-container:focus-within .icon-bar:nth-of-type(2) {
        opacity: 0;
    }

    #nav-container:focus-within .icon-bar:nth-of-type(3) {
        transform: translate3d(0, -8px, 0) rotate(-45deg);
    }

    #nav-content {
        margin-top: 70px;
        padding: 20px;
        width: 90%;
        max-width: 300px;
        position: absolute;
        top: 0;
        left: 0;
        height: calc(100% - 70px);
        background: #E2C764;
        pointer-events: auto;
        /*  -webkit-tap-highlight-color: rgba(0,0,0,0);*/
        transform: translateX(-100%);
        transition: transform .3s;
        will-change: transform;
        /*  contain: paint;*/
    }

    #nav-content ul {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #nav-content li a {
        padding: 10px 5px;
        display: block;
        text-transform: uppercase;
        transition: color .1s;
        color:#712c22;
        font-size:20px;
        font-weight: bold;
    }

    /*#nav-content li a:hover {
  color: #BF7497;
}*/

    #nav-content li:not(.small) + .small {
        margin-top: auto;
    }

    /*
.small {
  display: flex;
  align-self: center;
}

.small a {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}
.small a + a {
  margin-left: 15px;
}
*/

    #nav-container:focus-within #nav-content {
        transform: none;
    }

    * {
        /*  box-sizing: border-box;*/
        margin: 0;
        padding: 0;
    }

    /*
html, body {
  height: 100%;
}


a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}
*/

    /*a {
  color: currentColor;
  transition: .2s ease-in-out;
}*/

    h1,
    h2,
    h3,
    h4 {
        margin: 0;
    }

    ul {
        padding: 0;
        list-style: none;
    }

    /*
img {
  vertical-align: middle;
  height: auto;
  width: 100%;
}
*/


    header {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        white-space: inherit;
        background-color: #E2C764;
        padding: 0;
        background-image:url(../img/oka-gaikan-full.webp);
        background-position:left top;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .iPhone header{
        background-image: url(../img/oka-gaikan-full.jpg);
    }

/*
    .header-top {
        display: flex;
        flex-flow: column;
        justify-content: center;
        width: 230px;
        height: 230px;
        border: solid 5px #712c22;
        border-radius: 3px;
        background-color: #E2C764;
        background-image: url(../img/border-build.png);
        background-position: bottom  right 55%;
        background-repeat: no-repeat;
        background-size:200%;
        margin-top: 90px;
        padding: 5%;
    }
*/
    .header-top{
        
/*        height:100vh;*/
        height:100%;
        width:100%;
        margin:0 0 0 0;
        
    }

    .header-left p {
        display: none;
    }

    .sp-header-text {
        display: none;
/*
        display: block;
        margin-left: 5%;
        text-align: center;
        color: #712c22;
        font-weight: bold;
*/
    }

    .logo {
        display: none;
/*
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        margin: 0;
*/
    }

    .logo-r {
        width: 15%;
        margin: 0;
    }

    .logo-o {
        width: 90%;
    }

    .header-right {
        display: none;
    }
    
    .header-contact-box{
        display: none;
    }
    
    .sp-header-title{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin:auto;
        animation:fadeIn 1s ease 0.5s 1 normal;
    }
     @keyframes fadeIn{
        0% {opacity: 0}
        100% {opacity: 1}
    }
    
    .sp-header-title-logo1{
        display: flex;
        justify-content: center;
    }
    .sp-header-title-logo1 img{
        margin-bottom:10%;
    }
    .sp-header-title-logo2{
        display: flex;
        justify-content: center;
    }
    .sp-header-title-logo2 img{
/*        width:85%;*/
    }
    
    .top-menu-list {
        display: none;
    }
    
    .top-img{
        display: none;
    }

    .new-label {
        display: none;
    }

    .text-consul {
        display: none;
        font-size: 18px;
        border: none;
    }

    article {
        margin: 0;
    }

    .menu-cont-box {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
    }

    .menu-cont {
        width: 100%;
        height: 45px;
        margin: 2%;
        border:solid 3px #712c22;
        border-bottom:solid 5px #712c22;
        border-right:solid 5px #712c22;
    }

    .menu-cont a {
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        align-items: center;
        padding-left: 1em;
        color: #712c22;
        background-color: #E2C764;
    }

    .menu-cont-hidden {
        display: none;
    }

    .menu-cont-icon {
        font-size: 1em;
        color: #712c22;
    }
    .athome-cont{
        border-radius: 3px;
    }
    .athome-cont a{
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        padding:10%;
    }

    .athome-left {
        font-size: 18px;
    }

    .athome-left i {
        display: none;
    }

    aside {
        margin: 25% 10%;
    }

    .contact-button {
        display: flex;
        justify-content: center;
        margin: 10% 3%;
        font-size: 17px;
        border-radius: 3px;
    }
    .build{
        margin:0;
        padding:0;
        height:10vh;
        background-image: url(../img/border-build.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size:contain;
    }

    footer {
        padding: 5% 0;
    }
    .footer-title, .footer-athome-cont{
        display: none;
    }
    .sp-footer-title{
        display: block;
        text-align: center;
    }
    .sp-footer-title-a{
        font-size: 13px;
    }
    .sp-footer-title-b{
        font-size: 28px;
        font-weight: bold;
    }

    .footer-title p {
        font-size: 13px;
    }

    .footer-bottom-cont {
        display: none;
    }

    .footer-contact-cont {
        display: flex;
        flex-flow: column;
        text-align: center;
/*        border-top: dashed 2px;*/
        margin:0;
        padding-top: 2%;
    }

    .footer-contact-cont-left {
        font-size: 18px;
        margin: 0 0 3% 0;
        padding: 3% 10%;
    }

    .footer-contact-cont-right {
        font-size: 15px;
    }

    .footer-contact-text-add span {
        font-size: 18px;
    }
    
    .footer-contact-box{
        padding:2% 3%;
        margin:0 2%;
        font-size:14px;
    }
    .footer-contact-box span{
        font-size:18px;
    }
    .contact-box-1{
        font-size:18px;
    }
    .contact-box-2{
        font-size:12px;
    }

    .page-top {
        display: none;
    }

    /*会社案内*/
    .other-header {
        height: 10vh;
        background:none;
    }
    .other-header img{
        display: none;
    }

    .other-header-top {
        display: none;
/*
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        align-items: center;
        width: 240px;
        height: 10vh;
        border: none;
        margin: 0;
        padding: 0 8% 0 0;
        background-color: #712c22;
*/
    }

    .fa-bars {
        display: block;
        font-size: 2em;
    }

    .breadcrumb {
        display: none;
    }

    .company-title {
        margin: 5%;
    }
    
    .company-img{
        display: none;
    }
    .sp-company-img{
        display: flex;
        justify-content: center;
    }

    .company-cont {
        margin: 3%;
        font-size: 12px;
    }

    .company-cont-left {
        width: 20%;
    }
    .company-text{
        margin:0 5%;
    }
    /*お問い合わせ*/
    .contact-alert{
        margin:5%;
    }
    .formwrap{
        width:95%;
        margin:0 auto;
    }
    table.formTable th,table.formTable td {
        width:auto;
        display: block;
        text-align: left;
    }
    input[type="text"],input[type="email"],select,textarea {
        width: 80%;
        padding: 5px;
        font-size: 110%;
        display: block;
    }
    input[type="submit"],input[type="reset"],input[type="button"] {
        display: block;
        width: 100%;
        height: 40px;
    }
    input[type="submit"]{
        margin-top:5%;
    }
    input[type="reset"]{
        margin-bottom:5%;
    }
    .formTable th{
        color:#fff;
        background-color:#712c22;
        line-height: 1em;
    }
    .formTable td{
        border-top:solid 1px #712c22;
        border-bottom:solid 1px #712c22;
    }
    
    /*アクセス*/
    .map-text{
        margin:5% 0;
    }
    /*ポリシー*/
    .policy-text{
        margin:3% 5%;
        font-size:88%;
    }
    .policy-title-small{
        margin:0;
        padding:2% 2%;
    }

    /*サイトマップ*/
    .sitemap-list {
        margin: 10% 2%;
    }

    .sitemap-list p {
        display: none;
    }

    .list-athome {
        margin: 5% 2%;
    }

    /*お知らせ*/
    .news-cont-top {
        margin: 5% 5% 0 5%;
        padding: 3%;
    }

    .news-cont-text {
        margin: 0 5%
    }

    .news-ribbon {
        display: none;
    }

    .back-home-btn {
        margin: 15%;
    }
}
@media screen and (min-width:481px) and (max-width:770px){
    .header-left{
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0 3% 0 0;
    }
    .header-left p{
        display: none;
        margin-top:2%;
        margin-left:2%;
    }
    
    .logo-r{
        margin:0;
    }
    .logo{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
    }
    
    .top-img{
        display: flex;
        justify-content: center;
    }
    .top-img img{
        width:100%;
    }
    
    .header-right{
        margin-top:2%;
        margin-left:2%;
    }
    .header-contact-box{
        padding:3% 2% 2% 2%;
    }
    .p-time{
        margin:0;
        font-size:16px;
    }
    
    .header-menu{
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
    }
    
    .btn-flat-vertical-border{
        width:6em;
        white-space: nowrap;
        padding:1em 1.5em;
    }
    .menu-cont{
        width:200px;
        height:200px;
        margin:1%;
    }
    
    .contact-button{
        margin:5% auto;
    }
    footer{
        padding:3% 5%;
    }
    .footer-contact-cont-left{
        font-size:20px;
    }
    /*会社案内*/
    .company-cont{
        margin:2% 20%;
    }
    
    .company-img img{
        width:90%;
    }
}