/* # =================================================================
   # スマホ用オリジナルCSS
   # ================================================================= */


   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: auto;
    }

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: 30vh 0 30vh;
    position: relative;
    z-index: 2;
}


/*背景design*/
#content01_bg {background-image: url();
               background-size: cover;}
               #content02_bg {background-image: url(../img/topimgcampanysp.png);
                background-size: cover;}
#content03_bg {background-image: url(../img/topimg1sp.jpg);
               background-size: cover;}
#content04_bg {background-image: url(../img/topimg2sp.jpg);
                background-size: cover;}
#content05_bg {background-image: url(../img/topimg3sp.jpg);
                    background-size: cover;}
#content06_bg {background-image: url(../img/topimg5.jpg);
                        background-size: cover;}
#content08_bg {background-image: url(../img/topimg4sp.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: 110vh; padding: 130px 0 0 0;}
#content07 .wrap { background-color: #ffffff; width: 100%; height:100vh; }
#content08 .wrap { background-color: rgba(0,0,255,0); width: 100%; height:100vh; }



#content07 {
    padding-top: 130px; margin-top: -130px;
  }

.titlebox{
width: 100%;
height:70vh;
text-align:center;
background-color: #ffffff;
margin-top:-100px;
padding-top:150px;
}

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

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

                    }

                    .cambio-logo{
                        width: 280px;
                        text-align:center;

                                        }           
                                

                    .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);
                    }
                    }


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

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


.logo-menu{
    width:70px; height:70px ;
    position: absolute;
    top:2px;
    left:15px;
    background-color: #666666;
    z-index: 1000;
}

.mainlogo{
    width:100%; 
    height:100% ;
    background-color: #ffffff;
} 

.campany-menu{ 
    display: inline-block;
    font-family:  Roboto, sans-serif;
    font-size: 15px;
    font-weight:bold; 
    transform: rotate(0.05deg);
    width: 32%;
    padding-top:85px;
}

.brand-menu{ 
    display: inline-block;
    font-family:  Roboto, sans-serif;
    font-size: 15px;
    font-weight:bold; 
    transform: rotate(0.05deg);
    width: 32%;
}

.contact-menu{  
    display: inline-block;
    font-family:  Roboto, sans-serif;
    font-size: 15px;
    font-weight:bold; 
    transform: rotate(0.05deg);
    width: 32%;
}



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

}


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

footer.foot-content {
    position: fixed;	/* ヘッダーを固定する */
    bottom: 0;	/* 下部から配置の基準位置を決める */ 
    left: 0;	/* 左から配置の基準位置を決める */ 
    width: 100%;	/* ヘッダーの横幅を指定する */
    height: 45px;	/* ヘッダーの高さを指定する */
    font-family:  Roboto, sans-serif;
    background-color: #ffffff;
    color: #000000;	/* フォントの色を指定する */
    font-size: 12px;
font-weight:bold; 
    z-index: 1000;
    text-align:center;
    padding: 5px 5px 5px 5px;
    border-top: solid 1px #cccccc;

}


/* カンパニー部分*/

#content02 {
    position: relative;
    height: 130vh;
    margin-top:200px;
    width: 100%;
  }

  #content02:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 130%;
    height: 80%;
    margin: 0% -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(5deg);
    z-index: -1;
  }

  .campany-contents{
    height: 500px;
    width: 90%;
    margin: -150px auto 0 auto;
    color: #ffffff;
    padding-top: 150px;
    padding-left: 10px;
}

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

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

#campany-title2{ 
    font-family:  Roboto, sans-serif; font-size: 35px; font-weight:bold; transform: rotate(0.05deg);
    margin-bottom: 20px; padding-top: 130px; padding-left: 20px; color: #ffffff;}

dl.campany-list{
}
dd.campany-list{ font-size:0.9em; margin-bottom: 10px }


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

.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{
        width: 100%;
        height:400px;
        background-color: #fff;
        margin: auto;
    }
    
    p.brandpagetitle{
        font-family:  Roboto, sans-serif;
            font-size: 80px;
            font-weight:bold; 
        transform: rotate(0.05deg);
    text-align: center;
    margin-top:70px;
    }



/* ブランドコンセプトコメント部分*/

#content03 {
    padding-top: 130px; margin-top: -130px;
  } 

.text-box {
    height: 220px;
    padding: 20px 10px 10px 10px;
    width: 100vw;
    background-color: rgba(0,0,0,0.5);
    color: #fff;  　
    margin: 0 auto;
    text-align: center;
    font-size: 13px; 
    vertical-align: middle;
}

.logocambio{ width: 20%; }
.logoange{ width: 30%; }
.logofel{ width: 30%; }
.logojih{ width: 40%; margin-bottom:15px;}
            

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


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

#content06 { padding-top: 200px; margin-top: -100px; }

.mail-contents{ 

    width: 100%;
    font-weight: bold;
    font-size: 13px;
    position: absolute;
    top: 1%;
    margin-top:-130px;
    margin-bottom:60px;
    background-color: #fff;
}
p.mail-pagetitle{
    display: none;
    z-index: 10;
    font-family:  Roboto, sans-serif;
    font-size: 40px;
    font-weight:bold; 
    text-align: center;
    }

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

/* コンタクトフォーム指定 */


iframe::-webkit-scrollbar {
  display: none;
}
.companymail_form_iframe_box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  aspect-ratio: auto;
}

.companymail_form_iframe_box iframe {
  width: 100%;
  height: 100%;
  
}

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

.contact-body{
    width: 100%;
    margin: 0 auto ;
    color: black ;
    a color: black ;
    font-size:13px;
    line-height:30px;
    text-align: center;
}
h3.class1 {
    width:100%;
    height: 20px;
    margin: 10px 0px 5px 0px ;
    text-align: center;
}
p.class2 {
    width:100%;
    height: 30px;
    margin: 8px 0px 5px 0px ;
    text-align: center;
    line-height:15px;
}
.class3 {
    width:80%;
    height: 40px;
	margin: 5px 0px 5px 0px ;
}

.class8{
    width:80%;
    margin: 0 auto ;
display: inline-flex;
text-align: right;

}

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

  .class4:visited {
    height: 20px;
    width:100px;
    margin: 10px 0px 0px 0px ;
    border:3px solid #666666;
    background-color: #ffffff;
    color:  #666666;
  }

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

  .class5:visited {
    height: 20px;
    width:100px;
    margin: 10px 0px 0px 0px ;
    border:3px solid #666666;
    background-color: #ffffff;
    color:  #666666;
  }

 
.class6 {
    height: 30px;
    width:80%;
    border:1px solid #ccc;
    margin: auto ;
    text-align: center;
}

td.class7 {
    width:100%;
    margin: auto ;
    text-align: center;
}


#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
    width:auto;
    margin: auto ;
	display:block;
}
table.formTable th {
	margin-top:5px;
    border-bottom:0;
    margin: auto ;
}
input[type="text"], textarea {
    width:80%;
    border:1px solid #666666;
	padding:5px;
	font-size:110%;
    display:block;
    margin: auto ;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:80%;
    height:30px;
}

/* PHPが効かないため代替としてフレーム使用 */

.iframeWrapper{
position: relative; margin-top: 10px;}
.iframeWrapper::before{
content: "";
display: inline-block;
padding-top: 140%;
}
.iframeWrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
}