@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&family=Work+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&family=Source+Sans+Pro:wght@300;400;600&family=Work+Sans:wght@300;400;500&display=swap');
body, .font_sans-serif, #intro h2, #contents1 h2, #contents2 h2, #top_cms h2, #top_info h2, #f_contact .con_bt, #top_info .more_bt2 a, #main_img .txt, #f_contact .con_txt {
    font-family: 'Source Sans Pro','Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
    font-weight: 300;
}
.fix_banner {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 27;
}    
.fix_banner a {
   padding: 10px;
    background: #000; 
    border-radius: 0 10px 0 0;
    display: block;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 317px;
    margin: 0 auto;
    /* min-height: 1vh; */
    position: relative;
    z-index: 1;
}
.btn-1 {
    background-image: linear-gradient(to right, #161726 0%, #808080 51%, #262626 100%);
}

.btn {
flex: 1 1 auto;
    margin: 24px;
    padding: 14px 0 14px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #949494;
    border-radius: 7px;
}
.btn:hover {
    background-position: right center;
}
#sp_nav a.active {
    border-bottom: 1px solid #a9a9a9;
}
.more_bt a {
background: #2b2b2b;
    border-radius: 0;
    color: #efefef;
}
.more_bt a:hover span.before {
    background: #9c9c9c;
}
video {
    object-fit: contain;
}
#intro {
    /*background: url(Dup/img/kazari.png) no-repeat 100% 100%;
    background-size: 530px;
    z-index: 0;*/
}
#intro .intro_bg {
    background: transparent;
}

#intro .bg_box {
background-image:  linear-gradient(to bottom right, #4a4a4a, #000000)!important;
  
}
#contents1 .bg_color2 {
    background: url(Dup/img/cubes4.png),  linear-gradient(to bottom right, #e4e4e4, #fff)
      /*background-position: top left!important;
    background-repeat: repeat!important;
    background-size: 240px, auto!important;*/
}
#main_img p {
    letter-spacing: 3.3px;
}
#main_img .txt {
    left: 50px;
    bottom: 50px;
    top: auto;
}
#main_img h2 {
    font-size: 50px;
    line-height: 1.3;
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;    font-weight: normal;
    letter-spacing: 0.1em;
    
}
#main_img h2::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: #fff;
}
.intro_title, #contents1 .con1title {
    position: relative;
}
.intro_title .mini, #contents1 .mini {
    position: absolute;
    top: -55px;
    left: 0;
    font-size: 37px;
    font-weight: bold;
}

.top_cms_title h2 {
display: inline-block;
    padding-bottom: 7px;
    border-bottom: 3px solid;
    position: relative;
}
.top_cms_title h2:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -8px;
    left: 0;
    display: block;
    background-color: #212121;
    width: 21%;
    height: 1px;
}
.top_cms_title span:first-child {
    font-weight: bold;
}
.top_cms_title span:first-child:first-letter {
    color: #555;
}
.top_cms_title h2 span:nth-child(2) {
    font-weight: bold;
}
#contents2 {
    background: #f7f7f7;
}
.contents2_bg, #page_title .bg {
    background-position: 50% 89%!important;
}

.tracking-in-expand {opacity: 0}
.tracking-in-expand.trans{
	-webkit-animation: tracking-in-expand 2.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 2.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;    -webkit-filter: blur(10px);
            filter: blur(10px);
  }

  100% {
    opacity: 0.2;    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
}
/* -------------------------------------------------*/
#top_cms {
background-color: #f7f7f7;
background-image: url("https://www.transparenttextures.com/patterns/light-wool.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.cms_6-a {
    background: #fff;
    padding: 43px;box-shadow: 0px 3px 11px rgb(0 0 0 / 2%);
}
#f_contact a span.hover_box {/*★*/
    opacity: 0.8;
}
/* -------------------------------------------------*/


#contents2 .contents2_bg, #f_contact {
      will-change: transform;
    transform: scale(1.05);
    transition: transform 2.8s ease-out;  
}
#contents2 .contents2_bg.trans, #intro figure img.trans, #f_contact.trans  {
        transform: scale(1);
    transition-delay: 0s;  
}
#intro figure img, .contents1_img img {
    will-change: transform;
    transform: scale(1.05) translate(-50%,-50%);
    transition: transform 2.8s ease-out;
}
#intro figure img.trans, .contents1_img img.trans {
    transform: scale(1) translate(-50%,-50%);
}    

#page_title h2 {
    font-weight: normal;
}



			#cms_2-a h3 {
    position: relative;
    padding: 1rem 1rem 6px;
    border: none;
    border-bottom: 1px solid #333;
    display: block;
    text-align: center;
    margin-bottom: 53px;
}
			#cms_2-a h3:before {
    position: absolute;
    bottom: -13px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-width: 12px 11px 0 11px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}
#cms_2-a h3:after {
position: absolute;
    bottom: -11px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    content: '';
    border-width: 12px 11px 0 11px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

@media(max-width: 768px) {

}


@media(max-width: 667px) {
#main_img {
    height: 70vh!important;
}
    #main_img h2 {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
#main_img .txt {
    left: 5%;
    width: 91%!important;
}
}