/* # =================================================================
   # PC用オリジナルCSS
   # ================================================================= */

   html {
 overflow: auto;
 overflow-x: hidden;
}

body {
    font-family:'游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size:15px;
    background-color: #ffffff;
    height:100vh ;
}

a { text-decoration: none; }
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #666666;; }
a:active { color: #000000;; }

.br::before {
	content: "\A" ;
	white-space: pre ;
}

/* 以下背景固定用CSS */

/* init */
.background {
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
-webkit-background-size: cover;
        background-size: cover;
-webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
        transition: all 0.5s ease 0s;
}

.show .background { opacity: 1;}
.contents .wrap {
    padding: 40vh 0 10vh;
    position: relative;
    z-index: 2;
}

/*背景design*/
#content01_bg {background-image: url();
               background-size: cover;}
#content02_bg {background-image: url(../img/topimgcampany.png);
               background-size: cover;}
#content03_bg {background-image: url(../img/topimg1.jpg);
               background-size: cover;}
#content04_bg {background-image: url(../img/topimg2.jpg);
                background-size: cover;}
#content05_bg {background-image: url(../img/topimg3.jpg);
                    background-size: cover;}
#content06_bg {background-image: url(../img/topimg5.jpg);
                        background-size: cover;}
#content08_bg {background-image: url(../img/topimg4.jpg);
                            background-size: cover;}                       

#content02 .wrap { background-color: rgba(0,0,0,0.0); width: 100%; height: 100vh;}
#content03 .wrap { background-color: rgba(0,0,255,0); width: 100%; height:100vh; }
#content04 .wrap { background-color: rgba(0,0,255,0); width: 100%; height:100vh; }
#content05 .wrap { background-color: rgba(0,0,255,0); width: 100%; height:100vh; padding-bottom: 100px; }
#content06 .wrap { background-color: #ffffff; width: 100%; height: 100vh; padding: 130px 0 0 0;}
#content07 .wrap { background-color: #ffffff; width: 100%; height:110vh; }
#content08 .wrap { background-color: rgba(0,0,255,0); width: 100%; height:100vh; }


 
/* ブランドコンセプトコメント部分*/
.text-box {
    height: 250px;
    padding: 20px 10px 10px 10px;
width: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #fff;  　
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
}

.logocambio{ width: 10%; }
.logoange{ width: 15%; }
.logofel{ width: 15%; }
.logojih{ width: 22%;}
            
            
/* タイトルエフェクト */
　
.titlebox{
    width: 100%;
    height: 100vh;
}

.titlebox{
width: 100%;
position: absolute;
top: 28%;
margin:0 auto;
text-align:center;
background-size: 100%;
height: 100vh;
}


/* タイトルエフェクト */

.tagline2{
    width: 100%;
    display:block; 
    height: 100vh;
    font-family: Georgia, Roboto, sans-serif;
    color: #000000;
    font-size: 200px;
    font-weight:bold; 
transform: rotate(0.05deg);
                    }

.taglinelogo{
    width: 100%;
    height: 100vh;
    padding-top: 15%;
    vertical-align: middle;
                    }

                    .taglinelogo2 {
                        overflow: hidden;
                        position: relative;
                      }
                      
                      .taglinelogo2:before
                      {
                        animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
                        background: #fff;
                        bottom: 0;
                        content: '';
                        pointer-events: none;
                        position: absolute;
                        top: 0;
                        z-index: 1;
                      }

                      .taglinelogo2:after {
                        animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
                        background: #fff;
                        bottom: 0;
                        content: '';
                        pointer-events: none;
                        position: absolute;
                        top: 0;
                        z-index: 1;
                      }
                      
                      .taglinelogo2:before {
                        animation-name: taglinelogo2-before;
                        left: 0;
                        right: 50%;
                      }
                      
                      .taglinelogo2:after {
                        animation-name: taglinelogo2-after;
                        left: 50%;
                        right: 0;
                      }
                      
                      @keyframes taglinelogo2-before {
                        100% {
                          transform: translateY(100%);
                        }
                      }
                      
                      @keyframes taglinelogo2-after {
                        100% {
                          transform: translateY(-100%);
                        }
                      }             
                      .taglinelogo2 {
                        animation-name: fadein;
                        animation-duration: 2s;
                    }
                    @keyframes fadein {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                    }

                      .cambio-logo{
                        width: 500px;
                        padding-top: 1%;
                        text-align:center;
                                        }           
                                    

/* フレックスボックス */

.flexbox {
    display: inline-flex;
    flex-direction: row;
    width:50%;
    justify-content :space-around;
    }

/* ヘッダーメニュー */

header.hed-content {
    position: fixed;	/* ヘッダーを固定する */
    top: 0;	/* 上部から配置の基準位置を決める */ 
    left: 0;	/* 左から配置の基準位置を決める */ 
    width: 100%;	/* ヘッダーの横幅を指定する */
    height: 100px;	/* ヘッダーの高さを指定する */
    padding: 5px;	/* ヘッダーの余白を指定する(上下左右) */
    margin-bottom: 120px;	/* ヘッダーの余白を指定する(上下左右) */
    background-color: #ffffff;	/* ヘッダーの背景色を指定する */
    color: #000000;	/* フォントの色を指定する */
    z-index: 10000;
    text-align:center;
    border-bottom: solid 1px #cccccc;
    }


.mainlogo{ width:80px; 
    position: absolute;	/* 位置を決める */
    left: 5%;	/* 左から配置の基準位置を決める */ 
    top: 10%;	/* 左から配置の基準位置を決める */ 
} 


.news-menu{ width:200px; height:50px; 
    position: absolute;	/* 位置を決める */
    top: 30px;	/* 上部から配置の基準位置を決める */ 
    left: 10%;	/* 左から配置の基準位置を決める */ 
    font-family:  Roboto, sans-serif;
font-size: 20px;
font-weight:bold; 
transform: rotate(0.05deg);
padding-top: 10px;
margin-left: 50px;
}

.campany-menu{ width:200px; height:50px; 
    position: absolute;	/* 位置を決める */
    top: 30px;	/* 上部から配置の基準位置を決める */ 
    left: 10%;	/* 左から配置の基準位置を決める */ 
    font-family:  Roboto, sans-serif;
font-size: 20px;
font-weight:bold; 
transform: rotate(0.05deg);
padding-top: 10px;
margin-left: 50px;
}

.brand-menu{ width:200px; height:50px; 
    position: absolute;	/* 位置を決める */
    top: 30px;	/* 上部から配置の基準位置を決める */ 
    left: 20%;	/* 左から配置の基準位置を決める */ 
    font-family:  Roboto, sans-serif;
font-size: 20px;
font-weight:bold; 
transform: rotate(0.05deg);
padding-top: 10px;
margin-left: 50px;
}

.contact-menu{ width:200px; height:50px; 
    position: absolute;	/* 位置を決める */
    top: 30px;	/* 上部から配置の基準位置を決める */ 
    left: 30%;	/* 左から配置の基準位置を決める */ 
    font-family:  Roboto, sans-serif;
font-size: 20px;
font-weight:bold; 
transform: rotate(0.05deg);
padding-top: 10px;
margin-left: 50px;
}


.online-store{ width:200px; height:50px; 
    position: absolute;	/* 位置を決める */
    top: 30px;	/* 上部から配置の基準位置を決める */ 
    right: 5%;	/* 左から配置の基準位置を決める */ 
    border: medium solid #000000; 
    font-family: Roboto, sans-serif;
font-size: 20px;
font-weight:bold; 
transform: rotate(0.05deg);
padding-top: 10px;
margin-left: 50px;
}


.side-left{
    background-color: #ffffff;	/* ヘッダーの背景色を指定する */
    position: fixed;	/* ヘッダーを固定する */
    top: 0;	/* 上部から配置の基準位置を決める */ 
    left: 0;	/* 左から配置の基準位置を決める */ 
    width: 50px;	/* ヘッダーの横幅を指定する */
    height: 100%;	/* ヘッダーの高さを指定する */
    z-index: 1000;
} 

.side-right{
    background-color: #ffffff;	/* ヘッダーの背景色を指定する */
    position: fixed;	/* ヘッダーを固定する */
    top: 0;	/* 上部から配置の基準位置を決める */ 
    right: 0;	/* 右から配置の基準位置を決める */ 
    width: 50px;	/* ヘッダーの横幅を指定する */
    height: 100%;	/* ヘッダーの高さを指定する */
    z-index: 1000;
} 

/* フッターメニュー */

footer.foot-content {
    position: fixed;	/* ヘッダーを固定する */
    bottom: 0;	/* 下部から配置の基準位置を決める */ 
    left: 0;	/* 左から配置の基準位置を決める */ 
    width: 100%;	/* ヘッダーの横幅を指定する */
    height: 50px;	/* ヘッダーの高さを指定する */
    background-color: #ffffff;	/* ヘッダーの背景色を指定する */
    color: #000000;	/* フォントの色を指定する */
    z-index: 1000;
    text-align:center;
}

/* フレックスボックス2(ヘッダーメニュー部) */

#content02 {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 50px 0 50px;
    height: 800px;
  }


  .campany-contents{
    display: flex; justify-content: center; align-items: center;
    height: 500px;
    width: 100%;
    color: #ffffff;
    margin-top: -150px;
    padding-top: 230px;
    padding-left: 100px;
}

.campany-contents a{ color: #ffffff;}

.campany-contents a:hover { color: #cccccc; }

  
  #content02:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 80%;
    margin: 3% -10% 0;
    background: #666666;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    z-index: -1;
  }

  .contents:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 80%;
    margin: 3% -10% 0;
    background: #cccccc;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -2;
  }

#campany-title2{ width:40%; font-family:  Roboto, sans-serif; font-size: 50px; font-weight:bold; color:#ffffff;
    padding: 130px 0 0 0 ;
    padding-left: 90px;

}

.campany-contents-mini{}

dl.campany-list{
    width: 100%;
    padding: 5px;
    line-height: 230%;
    z-index: 1000;

}

dt.campany-list{  
    display: block;
    width: 30%;
    clear: left;
    float: left;
    white-space: nowrap;
    

}

dd.campany-list{
    display: block;
    width: 70%;
    float: left;
    white-space: nowrap;
}


/* ブランド紹介前のタイトル画面*/

.animation {
    display: flex;
    justify-content: center;
}
    .anm_mod {
     opacity: 0;
     transform: translate3d(0, 100%, 0);
     transition: all 1s ease;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
    }

     .full {
      width: 100%;
      font-size: 3rem;
    }

     .right {
      transform: translate3d(100%, 0, 0);
     }
   
   .animation .anm_mod.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
   }
   
   .org_to_top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

    .m_to_top {
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
    }

    .brand-pagetitle{
        clear: both;
        width: 100%;
        height: 500px;
        background-color: #fff;
        margin: auto;
    }
    
    p.brandpagetitle{
        font-family:  Roboto, sans-serif;
            font-size: 100px;
            font-weight:bold; 
        transform: rotate(0.05deg);
    text-align: center;
    margin-top:80px;
    margin-left: 50px;
    }



/* content06　メールフォーム */

/* ここから上↑は2025-9-3にメールフォーム差し替えのため追加 */

.mail-contents{ 
    font-weight: bold;
    width: 100vw;
    background-color: #ffffff;}

p.mail-pagetitle{
    display: none;
    z-index: 10;
    margin:0px auto 0px auto;
    font-family:  Roboto, sans-serif;
            font-size: 50px;
            font-weight:bold; 
        transform: rotate(0.05deg);
    text-align: center;
    position: absolute;
    top: 15%;
    left:14%;}

.lease_info {
    text-align: left;
    width: 700px;
    line-height: 1.5;
    margin: 15px auto;
    font-size: 12px;}

    .contact-body{
        background-color: #ffffff;
        width: 100%;
        text-align:center;
        margin: -50px 0 0 30px ;
        color: black ;
        a color: black ;
        font-size:15px;}

    #formWrap {
        width:60%;
        color:#555;
        line-height:120%;
        font-size:90%;
        white-space: nowrap;
        margin: 0 auto;}

/* IE */
_:-ms-lang(x)::-ms-backdrop, #formWrap {
    position: absolute;
    top: 10%;
    left: 2%;
    }

/* Edge */
@supports (-ms-ime-align: auto) {
	#formWrap {
        width:80%;
        color:#555;
        line-height:120%;
        font-size:90%;
        white-space: nowrap;
        position: absolute;
        top: 10%;
        left: 5%;
    }
}

    h3.class1 {
        height: 30px;
        margin: 10px 0px 10px 0px ;
    }
    
    p.class2 {
        height: 30px;
        width:100%;
        margin: 10px 0px 5px 0px ;
        text-align: left;
    }
    
    .class3 {
        height: 30px;
        width:100%;
        margin: 5px 0px 5px 0px ;
    }
    
    
    .class4 {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 0px ;
        border:3px solid #666666;
        background-color: #666666;
        color: #ffffff;
      }
      .class4:hover {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 0px ;
        border:3px solid #666666;
        background-color: #ffffff;
        color:  #666666;
      }
    
    .class5 {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 10px ;
        border:3px solid #666666;
        background-color: #666666;
        color: #ffffff;
      }

      .class4:active {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 10px ;
        border:3px solid #666666;
        background-color: #ffffff;
        color:  #666666;
      }
    

      .class5:hover {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 10px ;
        border:3px solid #666666;
        background-color: #ffffff;
        color:  #666666;
      }

      .class5:active {
        height: 30px;
        width:100px;
        margin: 15px 0px 5px 10px ;
        border:3px solid #666666;
        background-color: #ffffff;
        color:  #666666;
      }
     
    .input[type="submit"] { width: 100px; padding: 3px 3px; }
    
    .input[type="reset"] { width: 100px; }
    
     
    
    .class6 {
        height: 30px;
        width:500px;
        margin: 5px 0px 5px 0px ;
        text-align: left;
        border:1px solid #ccc;
    }
    
    .class8 {
        text-align: right;
        margin: 10px 0px 5px 0px ;
    }
    
    
    table.formTable{
        width:700px;
        border-collapse:collapse;
        text-align:left;
    }
    table.formTable td,table.formTable th{
        border:1px solid #ccc;
        padding:10px;
        width:70%;
    }
    table.formTable th{
        width:30%;
        font-weight:normal;
        background:#efefef;
        text-align:left;
    }