@charset "utf-8";
/* CSS Document */

@media screen and ( max-width:767px) {


    /* メディアクエリー */
    /********************************************************/
    /*************************common*************************/
    /********************************************************/
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 15px/1.5; 
        color: #ffffff;
        background-color: #000000;
    }
    header,
    article,
    footer,
    aside,
    time,
    nav,
    small,
    section {
        display: block;
    }
    p {
        color: #ffffff;
        margin: 0 0 15px;
    }
    ul li,
    ol li {
        list-style-type: none;
    }
    a img {
        border-style: none;
    }
    a {
        color: #ffffff;
        text-decoration: none;
        display: block;
    }
    a:hover {
        color: #f9a03f;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    table {
        border-collapse: collapse;
    }
    table td {
        vertical-align: top;
    }
    table th {
        text-align: left;
    }


    section {
        padding: 40px 0;
    }

    .pc {
        display: none;
    }

    .font70 {
        font-size: 70%;
    }

    .font80 {
        font-size: 80%;
    }

    .font120 {
        font-size: 120%;
    }

    .font200 {
        font-size: 125%;
    }


    .bold {
        font-weight: bold;
    }

    .red {
        color: #F00;
    }

    .center {
        width: 95%;
        margin: 0 auto;
    }
    
    /*************************index*************************/

    .ggl_map iframe {
        width: 100%;
    }
    
    header {
        width: 90%;
        margin: 20px auto;
    }

    header h1 {
        float: left;
    }


    header nav ul li a::before {
        content: url(../images/aoaka.png);
        position:relative;
        left: -10px;
        top: -5px;
    }


    #top_copy {
        height: 100vh;
        position: relative;
        /* background-image: url(../images/top_img.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 75%; */
    }

    #top_copy h2 {
        width: 90%;
        position: absolute;
        top: 20%;
        left: 5%;
        z-index: 1;
    }

    #top_copy figure {
        position: absolute;
        top: 30%;
        left: 2%;
        z-index: -1;
        width: 95%;
        margin: 0 auto;
    }




/* ハンバーガー */

    .hamburger-morph {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger-morph__icon {
  width: 100%;
  height: 100%;
}

.hamburger-morph__line {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 60 207;
}

.hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 60 60;
}

.hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
}

.nav-morph {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(29, 29, 31, 0.98);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 900;
}

.nav-morph.active {
  clip-path: circle(150% at calc(100% - 44px) 44px);
}

.nav-morph__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.nav-morph__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.nav-morph__item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-morph.active .nav-morph__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-morph.active .nav-morph__item:nth-child(1) { transition-delay: 0.3s; }
.nav-morph.active .nav-morph__item:nth-child(2) { transition-delay: 0.4s; }
.nav-morph.active .nav-morph__item:nth-child(3) { transition-delay: 0.5s; }
.nav-morph.active .nav-morph__item:nth-child(4) { transition-delay: 0.6s; }

.nav-morph__link {
  padding: 20px;
  font-size: 28px;
  color: #fff;
}

/* top_about */

   #izm_idx {
        position: relative;
        margin-bottom: 200px;
    }

    #izm_idx::before {
    content: '';
    position: absolute;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ff664e;
    transform: skewY(-5deg);
    z-index: -1;
     /* アニメーションの命令 */
    animation: colorAnime linear;
    /* 可視範囲（スクロールポート）内でアニメーションさせる */
    animation-timeline: view();
    /* 可視範囲に入ってきてから完全に出るまでの間にアニメーション */
    animation-range: cover;
}

/* 色を変更 */
@keyframes colorAnime {
    form {
        background-color: #ff664e;
    }

    to {
        background-color: #ffb24e;
    }
}

.h2_box {
    background-image: url(../images/stk.png);
    background-position: left 65%;
    background-repeat: no-repeat;
    margin: 0 0 40px;
}

.h2_box span {
    padding: 40px 0 0;
    display: block;
}

#izm_idx h2 {
    width: 320px;
}

#izm_idx .text_area p {
    font-size: 16px;
    line-height: 250%;
    margin: 0 0 50px;
}

.w_but {
    border: 1px solid #fff;
    display: inline-block;
    padding: 10px 20px;
    width: 175px;
    position: relative;
      transition: 1.0s;
      background-color: #ffffff30;
}

.w_but::before {
    content: "";
    width: 40px;
    height: 1px;
    display: inline-block;
    background-color: #e21319;
    position: absolute;
    top: 50%;
    right: -20px;
}

#about_idx .h2_box {
    margin: 0 auto 50px;
    display: table;
}

#about_idx h2 {
    width: 200px;
}

#about_idx {
    background-image: url(../images/ao_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #676767;
    }

    #about_idx ul li {
    color: #070707;
    font-size: 23px;
    font-weight: bold;
    vertical-align:text-bottom;
    padding: 35px 0 0;
    margin: 0 15px 20px;
}

.ab_01 {
    background-image: url(../images/01_img.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 100px;
}

.ab_02 {
    background-image: url(../images/02_img.png);
    background-position: left;
    background-repeat: no-repeat;
      background-size: 100px;
}

.ab_03 {
    background-image: url(../images/03_img.png);
    background-position: left;
    background-repeat: no-repeat;
      background-size: 100px;
}

    #about_idx ul li span {
        font-size: 35px;
        font-style: italic;
    }

    #map_area {
    text-align: center;
    padding: 200px 0 0;
}

#map_area figure {
    margin: 0 0 20px;
}

.map_bg {
    background-color: #ff664e;
    padding: 30px 0;
}

#map_area h2 {
    margin: 0 0 30px;
    color: #000000;
}

#map_area p {
    color: #000000;
}

.foot_tel {
    color: #000000;
    background-image: url(../images/tel_blk.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 40px;
    display: table;
    margin: 0 auto 30px;
    font-size: 30px;
    font-weight: bold;
}

footer {
    background-image: url(../images/foot_bg.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px 0 20px;
    text-align: center;
}

.foot_nav {
    margin: 0 0 100px;
}

.foot_nav a {
    margin: 20px;
    font-size: 20px;
    font-weight: 100;
}

    #to_top {
        position: fixed;
        bottom: 5px;
        right: 10px;
        z-index: 99;
    }

    .scroll {
  display: block;
  position: relative;
  padding: 20px;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #ffffff;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(135deg) translate(0, 0);
  }
  80% {
    transform: rotate(135deg) translate(-40px, 40px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/******************************page h2****************************/

.page_ttlstyl {
        background-image: url(../images/about/about_bg.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        height: 209px;
        text-align: center;
        background-size: 100px;
        position: relative;
        top: -120px;
}

.page_ttlstyl h2 {
        position: relative;
        top: 105px;
        font-weight: bold;
        font-size: 45px;
        font-style: italic;
        text-shadow: 5px 0px 0px #1eb8bc;
        letter-spacing: -0.5px;
}

.page-cont {
    margin-top: -120px;
    padding: 100px 0 50px;
}

/******************************about.html*****************************/

.h2_area {
    background-image: url(../images/about/about_bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 209px;
    margin-top: -120px;
    text-align: center;
    background-size: 100px;
}

.h2_area h2 {
    display: table;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 100px);
    top: 90px;
    width: 200px;
}

.title_stl {
    text-align: center;
    font-size: 25px;
    position: relative;
    margin: 0 0 80px;
    font-style: italic;
}

.title_stl span {
    font-size: 15px;
}

.title_stl::after {
    content: url(../images/stk.png);
    width: 20px;
    position: absolute;
    left: 40%;
    bottom: -30px;
}

#ab_01 {
    padding: 100px 0 50px;
    position: relative;
}

#ab_01 .cont_area figure {
    /* display: none; */
    position: absolute;
    opacity: 0.5;
    width: 45%;
    height: 45%;
}

#ab_01 .abc_02 figure {
    left: 30%;
}

#ab_01 .abc_03 figure {
    left: 50%;
}

#ab_01 .cont_area div {
    margin: 0 10px 15px;
    padding: 0 0 30px;
}

#ab_01 h3 {
    font-size: 20px;
    margin: 0 0 20px;
}

#ab_01 h3 span {
    font-size: 33px;
    font-style: italic;
}

#ab_01 .cont_area p {
    font-size: 16px;
}

#ab_01 .abc_01 {
    /* background-image: url(../images/about/ab_01_50.png); */
    background-position: left;
    background-repeat: no-repeat;
    background-size: 50%;
}

#ab_01 .abc_02 {
     /* background-image: url(../images/about/ab_02_50.png); */
    background-position: 20% top;
    background-repeat: no-repeat;
    background-size: 50%;
}

#ab_01 .abc_03 {
     /* background-image: url(../images/about/ab_03_50.png); */
    background-position: 40% top;
    background-repeat: no-repeat;
    background-size: 50%;
}

#ab_01 {
    overflow: hidden;
}

#ab_01::before {
    content: url(../images/about/maru_bg.png);
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: -1;
    animation: 20s 0s rotate linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


/******************************company.html*****************************/

.company_ttlstyl {
    background-image: url(../images/company/company_bg.png);
}

.company_ttlstyl h2 {
    width: 289px;
    left: calc(50% - 144px);
}

#com_01 {
    padding: 100px 0 280px;
    background-image: url(../images/company/com_bg.png);
    background-repeat: no-repeat;
    background-position: 80% 24%;
}

#com_01 .title_stl {
    text-align: left;
    margin-bottom: 45px;
}

#com_01 .title_stl::after {
    left: 0;
}

#com_01 h3 {
    font-size: 19px;
    margin: 0 0 25px;
}

#com_01 p {
    font-size: 16px;
    line-height: 200%;
    margin: 0 0 20px;
}

#com_02 {
    background-image: url(../images/company/com_bg02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#com_02 .cont_area {
    background-color: #ffffffd3;
    color: #000;
    margin: 0 auto;
    padding: 70px 10px;
    position: relative;
    top: -115px;
}

#com_02 .cont_area h2 {
    font-size: 20px;
    margin: 0 0 50px 20px;
    color: #070707;
}

#com_02 .cont_area table {
    font-size: 16px;
    color: #181818;
}

#com_02 .cont_area table tr th {
    white-space: nowrap;
    vertical-align:top
}

#com_02 .cont_area table tr th,#com_02 .cont_area table tr td {
    padding: 5px;
    line-height: 200%;
    color: #181818;
}



/*****************メインビジュアルアニメーション******************/
/* body {
    overflow-x: hidden;
} */

.ofh {
    overflow: hidden;
}
.pattern6 {
    overflow: hidden;
    position: relative;
}

.pattern6::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    z-index: 2;
    transition: 1s;
}
.pattern6.show::before{
    transform: translateX(100%);
}
.pattern6 img {
    opacity: 0;
    transition: .5s;
}
.pattern6.show img {
    opacity: 1;
}
.pattern6 h2{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
    z-index: 1;
    overflow: hidden;
}
.pattern6.show h2{
    opacity: 1;
    transform: translateX(0);
}
.pattern6 h2::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    transition: .5s;
    transition-delay: 1s;
}
.pattern6.show h2::before{
    transform: translateX(100%);
}




    
}