/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*
#loader{
    display:none;
}
*/
@import url('https://fonts.googleapis.com/css2?family=Slackside+One&display=swap');
.font_sl,
#content1 .sub_title,
#content2 .sub_title,
#t_cms_banner .imo_motion{
  font-family: "Slackside One", cursive;
  font-weight: 400;
  font-style: normal;
}

.bg_img{
    background-image:url(/Files/img/bg.jpg);
    background-repeat:repeat;
    background-size:500px;
}


.clone-nav #header{
    max-width: unset;
    width: 100%;    
}
#logo{
    margin-left:80px;
}

/* ① 元々あるヘッダーを非表示にする */
/* クラス名はHTMLに合わせて調整してください */
header:not(.clone-nav), 
#header:not(.clone-nav #header) {
    display: none !important;
}

/* ② スクロールで降りてくるヘッダー（.clone-nav）を最初から表示する */

.clone-nav {
    background-color: rgba(237, 227, 202, 0.9);
    
    position: fixed !important; /* 画面上部に固定 */
    top: 0 !important;          /* 位置をトップに固定 */
    left: 0;
    width: 100%;
    z-index: 9999;              /* 最前面に */
    
    /* JSによる「隠す」「出す」の動き（transformやopacity）を無効化 */
    transform: none !important; 
    opacity: 1 !important;
    visibility: visible !important;

}

header #header .contact a,
.sp_contact a{
    padding: 15px 25px;
    background-color: #25a565;
    color: #fff;
    border:none;
    border-radius: 30px;
}
header #header .contact a i,
.sp_contact a i{
    border-right:none;
}
.is-show #header .tel a, .is-show #header .tel a i, .is-show #header .contact a{
    color:#fff;
    border-color:none;
}

.sns_links{
    justify-content: center;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 820px){
#logo {
    margin-left: 0;
}
#footer .grid_6{
    width:100%!important;
}
#footer #info{
    margin-bottom:50px;
}
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#loader img{
    width: 250px;
}
.clone-nav #header{
    width:90%;
}
#logo2{
    width:100%!important;
}
}
@media screen and (max-width: 375px){
.clone-nav #header {
    padding-top: 0;
    padding-bottom: 0;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*FV内テキスト*/
#main_img .font_sl{
    font-size:10.5vw;
    transform: translate(-50px, -23px) rotate(-5deg);
    line-height: 0.8;
    margin-bottom: 70px;
}
#main_img .catchcopy{
    top: 15%;
    left: 5%;
    z-index: 2;
}
/* 外枠の基本設定 */
.brand-history {
    line-height: 1.2;
    margin-bottom: 20px;
}

/* 「名古屋市昭和区で」のスタイル */
.location {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 0.2em;
    letter-spacing: 0.08em;
}

/* 「創業 68 年。」のスタイル */
.foundation-year {
    font-size: 4.2rem;      /* メインの強調サイズ */
    font-weight: 800;       /* より太くしてインパクトを最大化 */
    margin: 0;
    display: flex;
    align-items: baseline;  /* 文字の下端を揃える */
}

/* 数字（68）を際立たせる */
.number {
    font-size: 1.4em;       /* 周囲の文字より一回り大きく */
    margin: 0 0.1em;        /* 数字の横に微細な余白 */
    letter-spacing: -0.02em; /* 数字は少し詰めると綺麗 */
}


/* レスポンス（スマホ対応） */
@media (max-width: 768px) {
    .location { font-size: 1.4rem; }
    .foundation-year { font-size: 2.5rem; }
}

#main_img .sub{
    font-size:1.2rem;
}

/* スライドショー本体のサイズと場所を指定 */
.fv_slider_part {
    position: absolute!important;    /* 親要素(section)を基準に動かす */
    
    /* 【サイズ指定】 */
    width: 55vw;
    height: 85vh;    
    top: 15%;
    right: 5%; 
    border-top-left-radius: 550px;    /* 左上を大きく丸める */
    border-top-right-radius: 550px; /* 左下を大きく丸める */ 
    overflow: hidden;
    z-index: 1;
}

/* ---------------------------　note PC　-------------------------- */
@media screen and (max-width: 1530px){
#main_img .catchcopy{
    top:10%;
}

#main_img .font_sl{
    font-size:10vw;
}
}

@media screen and (max-width: 1366px){
#main_img .catchcopy{
    top:10%;
}

}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 820px){
.fv_slider_part{
    width:90vw;
    top:auto;
    bottom:1%;
    right:50%;
    transform:translateX(50%);
    height:50vh!important;
}
#main_img .catchcopy{
    top:6%;
    text-align:center;
}
#main_img .font_sl {
    font-size: 17vw;
    transform: translate(17px, 13px) rotate(-4deg);
    margin-bottom: 30px;
}
.location{
    display: inline-block;
}
.foundation-year{
    display: inline-block;
    font-size: 3.2rem;
}
.number{
    margin: 0;
    letter-spacing: 0.04em;
}
}

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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#main_img .catchcopy {
        top: 9%;
        text-align: center;
    }
#main_img .font_sl{
    transform: translate(0px, 5px) rotate(-4deg);
}
#main_img .sub {
    font-size: 1rem;
}
#main_img .catchcopy{
    left:50%;
    transform:translateX(-50%);
}
.foundation-year {
    font-size: 2.5rem;
}
}
@media screen and (max-width: 375px){
#main_img .catchcopy {
    top: 7%;
}
.brand-history,
.location{
    margin-bottom:0;
}
#main_img .sub {
    font-size: 0.9rem;
}

}


@media screen and (max-width: 390px){
#main_img .sub{
    letter-spacing: 0;
}    
}

/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.intro_outer{
    padding:5%;
}
#intro .txt_wrap {
        padding: 50px 10px;
    }
#intro .txt_wrap .title{
    text-align: start;
}
#content1 .con1_wrap{
    position: relative;
    z-index: 2;
}
#content1 .con1_img1{
    overflow: hidden;
    height: 300px;
    margin-top: -17%;
}
#content1 .sub_title,
#content2 .sub_title{
    font-size: 6rem;
    opacity: 0.3;
}
#content1 .sub_title{
    display: block;
    margin-top: -50px;
    margin-right: -100px;
}
#content2 .sub_title{
    display: block;
    margin-top: -50px;
    margin-right: -100px;
}
#t_cms_banner .imo_motion{
    font-size:3rem;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#content1 .sub_title, #content2 .sub_title {
    font-size: 4rem;
}
#content1 .sub_title{
    margin-top: -25px;
    margin-right: -80px;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#intro .txt_wrap .title{
    letter-spacing: -1px;
    text-align: center;
}
#content2 .con_txt{
    letter-spacing: 0;
}
#content1 .sub_title, #content2 .sub_title {
    font-size: 3rem;
    margin-top: 0;
    margin-right: 0;
}
#content1 #con1_txt > div{
    height: 280px;
    padding-top:0;
}
#content1 .con1_img1{
    width: calc(100% - 7vw);
    height: 200px;
}
#content2 .more_btn span::before{
    left:110px;
}
#content2 .more_btn span::after {
    left: 183px;
}
#t_cms_banner .imo_motion {
    font-size: 2rem;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.contact_btn a {
        font-size: 20px !important;
    }
        .line_box .contact_btn a {
        padding: 0 !important;
    }
}