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


.ef-fade01 {
    opacity: 0;
    transition: .8s;
}
.fade01 {
    opacity: 1.0;
}

/*************************キーフレームアニメーション*************************/

.anime_01 {
    animation: vertical 1s ease-in-out infinite alternate;
    animation-duration: 1.5s;
}

.anime_02 {
    animation: horizontal 1s ease-in-out infinite alternate;
    animation-duration: 1.5s;
}

.anime_03 {
    animation: vertical 1.5s ease-in-out infinite alternate;
    animation-duration: 2s;
}

.anime_04 {
    animation: horizontal 2s ease-in-out infinite alternate;
    animation-duration: 1.5s;
}

@keyframes horizontal {
    0% { transform:translateX( -3px); }
    100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
    100% { transform:translateY(  0px); }
}

@media screen and (min-width: 768px){
    /* メディアクエリー */


    /********************************************************/
    /*************************common*************************/
    /********************************************************/

    *{
        margin:0;
        padding:0;
    }

html {
    height: 100%;
}

    body{
        height: 100%;
        font: 15px/1.5;
        color:#ffffff;
        min-width: 1300px;
        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: #ff664e;
    }
    img{
        vertical-align:bottom;
        max-width: 100%;
        height: auto;
    }
    a:hover img{
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        opacity: 0.5;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    a{
        text-decoration:none;
        display:block;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    table{
        border-collapse:collapse;
    }
    table td{
        vertical-align:top;
    }
    table th{
        text-align: left;
    }


    section {
        padding:0 0 70px 0;}

    .sp_only {
        display:none;}

    .center {
        width:1100px;
        margin:0 auto;
    }

    .font70 {
        font-size:70%;}

    .font80 {
        font-size:80%;}

    .font120 {
        font-size: 120%;
    }

    .font200 {
        font-size: 200%;
    }


    .bold {
        font-weight:bold;}

    .red {
        color:#F00;}


    main {
        width:1200px;
        margin:0 auto;}
    
    #top_img {
        width: 100%;
        height: calc(100vh + 200px);
    }
    
    
    /*************************固定ボタン*************************/

    #sp_but {
        position: fixed;
        top: 5%;
        right: 20px;
        z-index: 99;
        width: 200px;
    }
    
    #to_top {
        position: fixed;
        bottom: 5px;
        right: 10px;
        z-index: 99;
    }
    
  
    
    /*************************index*************************/
    
    header {
        width: 90%;
        margin: 20px auto;
    }

    header h1 {
        float: left;
    }

    header nav {
        float: right;
        margin: 5px 0 0;
    }

    header nav ul {
        margin: 20px 0 0 155px;
    }

    header nav ul li a {
        padding:  0 0 0 18px;
        margin: 0 0 30px;
        display: inline-block;
        z-index: 1;
    }

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

    header nav ul li a:hover::before {
        left: -10px;
        transition: 0.5s;
    }

    #top_copy {
        width: 1100px;
        margin: 0 auto;
        height: 80vh;
        /* background-image: url(../images/top_img.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 75%; */
    }

    #top_copy figure img {
        width: 75%;
    }



    #top_copy h2 {
        position: absolute;
        right: 10%;
    }
    

    #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: #ffce8e;
    }
}


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

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

#izm_idx .text_area {
    width: 670px;
    float: right;
}

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

#izm_idx .w_but {
    position: absolute;
    bottom: 120px;
}

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

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

.w_but:hover::before {
    width: 50%;
    right: 0;
      transition: 0.5s;
}

.w_but:hover {
    color: rgba(255, 255, 255, 0.85);
  box-shadow: rgba(255, 255, 255, 0.493) 0 80px 0px 2px inset;
}



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

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

    #about_idx .w_but {
        float: right;;
        z-index: 1;
    }

    #about_idx ul li span {
        font-size: 65px;
        position: relative;
        top: 10px;
        margin: 0 20px 0 0;
    }

#about_idx ul li {
    height: 140px;
    color: #000000;
    font-size: 27px;
    font-weight: bold;
    vertical-align:text-bottom;
    padding: 80px 0 5px;
}

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

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

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

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

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

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

#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;
}

.ggl_map iframe {
    width: 100%;
}

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

.foot_nav {
    display: flex;
    justify-content: center;
    margin: 0 0 150px;
}

.foot_nav a {
    margin: 0 60px;
    font-size: 20px;
    font-weight: 100;
}
    
/*デフォルトのマウスカーソルを非表示にする*/
html,
body,
a {
  cursor: none;
}

/*独自のマウスカーソルを作成*/
.cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(205, 114, 113, 0.5);
}
    

.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 center;
    height: 350px;
    position: relative;
    top: -120px;
    z-index: -1;
}

.page_ttlstyl h2 {
    text-align: center;
    position: relative;
    top:50px;
    z-index: 1;
    font-size: 140px;
    font-weight: bold;
    font-style: italic;
    text-shadow: 15px 0px 0px #1eb8bc;
    letter-spacing: -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 center;
    height: 350px;
    margin-top: -120px;
    text-align: center;
}

.h2_area h2 {
    display: table;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 255px);
    top: 150px;
}

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

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

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

#ab_01 {
    padding: 100px 0 50px;
    position: relative;
    z-index: 1;
}

#ab_01 .cont_area figure {
    float: left;
}

#ab_01 .cont_area div {
    margin-bottom: 15px;
}

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

#ab_01 .cont_area p {
    font-size: 20px;
    margin: 0 0 0 313px;
}

#ab_01 .abc_02 {
    margin: 0 0 0 35px;
}

#ab_01 .abc_03 {
    margin: 0 0 0 70px;
}

#ab_01::before {
    content: url(../images/about/maru_bg.png);
    position: absolute;
    top: 10%;
    left: 70%;
    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 {
    left: calc(50% - 366px);
}

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

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

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

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

#com_01 .text_area {
    width: 690px;
}

#com_01 p {
    font-size: 17px;
    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;
    width: 755px;
    margin: 0 auto;
    padding: 50px 100px;
    position: relative;
    top: -115px;
}

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

#com_02 .cont_area table {
    font-size: 19px;
}

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

/*****************メインビジュアルアニメーション******************/
/* 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%);
}

[href^="tel:"] {
    pointer-events: none;
}


/* メディアクエリ閉じタグ */
}





/*****************遷移アニメーション******************/
/*comppanyページページ遷移*/

.move .bg {
  background: #ff664e;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/*aboutページページ遷移*/

.move_01 .bg {
  background: #54bac3;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/*アニメーション*/
.bg {
  animation-name: bg-anime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.move_01 .bg {
  animation-name: bg-anime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes bg-anime {
  0% {
    transform-origin: center right;
    transform: scale(2,2) translateX(300%) skewX(45deg);
  }
  50% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(45deg);
  }
  50.001% {
    transform-origin: center right;
    transform: scale(2,2) translateX(17%) skewX(45deg);
  }
  100% {
    transform-origin: center right;
    transform: scale(2,2) translateX(-500%) skewX(45deg);
  }
}


/*topページページ遷移*/


/* .move_top .bg_top {
  background: #00000000;
  display: none;
  content: "";
  position: fixed;
  transform: scale(100);
  z-index: 999;
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  display: block;
  border-radius: 50%;
} */

/*アニメーション*/
/* .bg_top {
  animation-name: bg-anime_top;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
} */

/* @keyframes bg-anime_top {
  0% {
    transform: scale(100);
  }
  100% {
    transform: scale(0);
  }
} */
 
@keyframes bg-anime_top {
  0% {
    background-color: #000;
  }
  100% {
    background-color: #00000000;
    transform: scale(0);
  }
}


/*****************inviewアニメーション******************/


/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1.5s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_side {
  opacity: 0;
  position: relative;
  left: -200px;
  transition: 0.5s;
}
.fadeIn_side.is-show {
  transform: translateX(200px); /* 右に100px移動 */
  opacity: 1;
}