﻿.font_en, .date, a[href^="tel:"], a[href^="mailto:"]{
    font-family: 'Outfit', 'Zen old Mincho', "游明朝", serif;
}
.bg_color1{
    background-color: #b1becc;
}
.bg_color3{
    background-color: #b1becc;
}
.bg_color4{
    background-color: #1a2032;
}
.hvr_bg_color1:hover{
    background-color: rgba(3,3,3,1);
}
.border_color1{
     border-color: #b1becc;
}
.border_color3{
    border-color: #1a2032;
}
.txt_color1{
    color: #1a2032;
}
.txt_color3{
    color: #b1becc;
}
@media (max-width: 768px){
    .head_banner a.bg_color3{
        background-color: #1A2032;
    }
}
/*header*/
#main_menu .txt_color1, header .tel_bt a.txt_color1{
    color: #fefefe;
}
header .tel_bt a{
    border-color: #fefefe;
}
#main_menu a, header .tel_bt a{
    font-family: 'Outfit', 'Zen old Mincho', "游明朝", serif;
}
#main_menu ul li a::before{
    background-color: #fefefe;
}
header .tel_bt .button:hover::after {
	box-shadow: inset 0 0 0 15em rgba(3,3,3,1);　　/*(96,59,26,1)*/
}
@media (max-width: 667px){
    h1#logo.width_150-max_sp{
        width: 60px;
    }
    .hamburger{
        top: 10px;
    }
}
/*fv*/
#catchCopy {
    max-width: 33%;
    top: 66vh;
    right: 280px;
    z-index: 2;
}
.scroll_bt{
    display: none;
}
@media (max-width: 768px){
    #catchCopy{
        max-width: 57%;
        top: 67vh;
        right: 40px;
    }
}
@media (max-width: 667px){
    #catchCopy {
        max-width: 85%;
        top: 48vh;
        right: 22px;
    }
}
/*main*/
#contents1,#contents2,#contents3{
    max-width: 68%;
}
#contents1{
    position: relative;
    padding: 360px 10% 200px 10%;
}
#contents1 h2, #contents1 p{
    position: relative;
    z-index: 2;
}
#contents1 h2.font_24{
    font-size: 40px;
}
#contents1 p.txt3{
    padding-left: 40px;
    line-height: 3.0rem;
    font-size: 16px;
}
#contents1 p.txt3.mg_t-20px{
    margin-top: 100px;
}
#contents1 p.con_no{
    padding-right: 0;
    position: absolute;
    left: 0;
    top: 2%;
    max-width: 100vw;
}
.con_no img{
    opacity: 0.15;
    width: 400%;
}
.con_no::before{
    display: none;
}
#contents_box #intro_back{
    width: 100%;
    opacity: 0.08;
    top: 105vh;
    left: 0;
}

#contents2{
    padding: 100px 10% 340px;
}
#contents2 .d_flex{
    position: relative;
}
#contents2 figure.img5 {
    transform: translateY(175px);
}
#contents2 h2, #contents2 p{
    position: relative;
    z-index: 2;
}
#contents2 h2.font_24{
    font-size: 40px;
}
#contents2 p{
    padding-left: 40px;
    line-height: 3.0rem;
    font-size: 16px;
}
#contents2 p.mg_t-20px{
    margin-top: 100px;
}
#contents2 p.con_no{
    padding-right: 0;
    position: absolute;
    left: -6750px;
    bottom: -35%;
    max-width: 100vw;
    z-index: 2;
}
#contents2 figure.img5 {
    z-index: 3;
}
#contents2 #con2_back{
    width: 100%;
    opacity: 0.08;
    top: -27vh;
    left: 0;    
}

#contents3 h2{
    text-align: center;
    font-size: 40px;
    transform: translateY(-80px);
}
#contents3 p{
    line-height: 3.0rem;
    font-size: 16px;
}
#contents3 .grid_6{
    margin-top: 0;
}
#contents3 h3{
    margin: 20px 0;
}
#contents3 h3.font_20{
    font-size: 30px;
}

@media (max-width: 1535px){
    #contents_box #intro_back{
            top: 128vh;
    }
}
@media (max-width: 768px){
    #contents_box #intro_back{
        top: 208vh;
    }
    #contents1, #contents2, #contents3{
        max-width: 100%;
    }
    #contents1{
        padding: 311px 10% 200px 10%;
    }
    #contents1 h2.font_24, #contents1 h2.font_24, #contents3 h2{
        font-size: 33px;
    }
    
    #contents2 #con2_back{
        top: -1vh;
    }
    #contents2 p.con_no{
        left: -1800px;
        bottom: 250px;
    }
}
@media (max-width: 667px){
    #contents1{
        padding: 210px 10% 200px 10%;
    }
    #contents1 p.txt3, #contents2 p.mg_t-20px{
        padding-left: 0;
    }
    #contents1 h2.font_24, #contents1 h2.font_24, #contents3 h2 {
        font-size: 30px;
    }
    #contents1 p.txt3.mg_t-20px, #contents2 p.mg_t-20px{
        margin-top: 40px;
    }
    #contents_box #intro_back {
        top: 290vh;
    }
    #contents2 h2.font_24 {
        font-size: 27px;
    }
    #contents2 p.con_no{
        bottom: 120px;
    }
    #contents3 .font_16_tb{
        font-size: 22px;
    }
}
/*TOPテキストアニメーション*/

#contents1 .d-demo{
    position: absolute;
    left: 0;
    top: 60px;
}
#contents2 .d-demo{
    position: absolute;
    bottom: -200px;
    left: -250px;
}
.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 0.5);
}
.d-demo__item > img{
   width: 100%;
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.d-demo__list--right{
animation :infinity-scroll-right 95s infinite linear 0.5s both;
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

@media (max-width: 768px){
    .d-demo__item {
        width: calc(100vw / 0.15);
    }
    #contents2 .d-demo {
        position: absolute;
        bottom: 253px;
        left: -250px;
    }
}
@media (max-width: 667px){
    #contents1 .d-demo{
        top: 10px;
    }
    #contents2 .d-demo{
        bottom: 60px;
    }
}
/*top-cms*/
#top_cms{
    max-width: 87.5%;
}
@media (max-width: 768px){
    #top_cms{
        max-width: 100%;
    }
}
/*お問い合わせ*/
#contact_tel.border_color4, #contact_tel2.border_color4, #contact_tel3.border_color4{
    border: none;
    border-bottom: solid 1px #b1becc;
}
.con_tel_box a.width_300-max{
    max-width: 600px;
}
.con_tel_box .grid_6{
    width: 71%!important;
}
#tel_txt.mg_t-30px {
    margin-top: 80px;
}
@media (max-width: 667px){
    .con_tel_box .grid_6{
        width: 100%!important;
    }
    .con_tel_box .grid_6 p a{
        font-size: 18px;
    }
}
/*footer*/
#footer_menu ul, #page-top, #copyright{
    transform: translateX(-5vw);
}
@media (max-width: 667px){
    footer h2.logo{
        text-align: center;
    }
    #footer_menu ul, #page-top, #copyright{
    transform: translateX(0);
}
}