@charset "utf-8";

body {
	font-family: 'acumin-Pro-regular','acumin-pro-semi-condensed','HelveticaNeue', 'Helvetica', 'Arial','AvenirNext-Regular', 'ヒラギノ角ゴ Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック','ＭＳ Ｐゴシック', 'Osaka', 'MS PGothic', 'Verdana', sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
    line-height: 20px;
	}



#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*========= レイアウトのためのCSS ===============*/
#header{
	width:100%;
	background:#fff;
	color:#555;
	text-align: center;
    position: fixed;
    letter-spacing: 0.01em;
    padding: 12px 0px 0px 0px;
    z-index: 3;
}
@media only screen and (max-width: 500px) {
    #header{
    letter-spacing: 0.1em;
    padding: 12px 0px 8px 0px;
}
}
#header img{
	width:12%;
    padding-top: 5px;
    padding-bottom: 5px;
}
@media only screen and (max-width: 834px) {
    #header img{
        width:25%;
        padding-bottom: 0px;
}
}

@media only screen and (max-width: 500px) {
    #header img{
        width:35%;
        padding-bottom: 0px;
}
}

#footer{
	width:100%;
	background00:#fff;
    text-align: center;
}

#footer img{
	width:15%;
    padding-bottom: 0px;
}
@media only screen and (max-width: 500px) {
    #footer img{
	width:38%;
    padding-bottom: 5px;
}
}

#footer02{
	width:100%;
	background: url("../image_cont01/ben/footer-ben02.jpg") no-repeat; 
	background-size: 100%;
	background-position:center bottom;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment00: fixed; 
}

#footer02 img{
	width:15%;
    padding-bottom: 5px;
}
@media only screen and (max-width: 500px) {
    #footer02 img{
	width:38%;
    padding-bottom: 5px;
}
}

.sp-jp-en {
  position: fixed;
  float: left;
  top: 38px;
  left: 30px;
    z-index: 5;
    
}
@media screen and (max-width: 1112px) {
	.sp-jp-en {
  top: 27px;
  left: 10px;
}
}
@media screen and (max-width: 768px) {
	.sp-jp-en {
  top: 24px;
  left: 10px;
}
}
@media screen and (max-width: 500px) {
	.sp-jp-en {
  top: 22px;
  left: 5px;
}
}
.sp-jp-en a {
    color: #000;
    font-size: 24px;
	font-size: 2.4rem;
	letter-spacing: 0.05em;
    text-decoration: none;
}
@media screen and (max-width: 1112px) {
.sp-jp-en a {
    font-size: 20px;
	font-size: 2.0rem;
	letter-spacing: 0.00em;
}
}
@media screen and (max-width: 500px) {
.sp-jp-en a {
    font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.00em;
}
}
.sp-jp-en p {
    color: #000;
    font-size: 34px;
	font-size: 3.4rem;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 500px) {
.sp-jp-en p {

    font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.0em;
}
}






/* Font */
.slide-text{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:3.2rem;
    line-height: 3.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}
@media screen and (max-width: 500px) {
.slide-text{
	
	font-size:1.6rem;
    line-height: 2.8rem;
	letter-spacing: 0.05em;
}
}
/* Font-base */
p{
	font-size: 14px;
	font-size: 1.4rem;
    line-height: 22px;
    color: #333;
}
@media screen and (max-width: 500px) {
p{
	font-size: 12px;
	font-size: 1.2rem;
    line-height: 18px;
    color: #333;
}
}

a{
	color: #089DE0;
    text-decoration: none;
    font-size:1.4rem;
    line-height: 2.0rem;
	letter-spacing: 0.05em;
}

a:hover,
a:active{
	text-decoration: none;
}

h1{
    z-index: 5;
}

h2 {
    letter-spacing: 0.1rem;
    line-height: 2.8rem;
    font-size: 2.2rem;
    font-weight: 200;
    padding-bottom: 0px;
}
@media screen and (max-width: 500px) {
h2 {
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
    font-size: 1.8rem;
    font-weight: 200;
    padding-bottom: 20px;
}
}
h3 {
    letter-spacing: 0.1rem;
    line-height: 3.6rem;
    font-size: 2.2rem;
    font-weight: 200;
    padding-bottom: 0px;
}
@media screen and (max-width: 500px) {
h3 {
    letter-spacing: 0.0rem;
    line-height: 2.8rem;
    font-size: 1.6rem;
    font-weight: 200;
}
}
h4 {
    letter-spacing: 0.1rem;
    line-height: 1.8rem;
    font-size: 1.2rem;
    padding-bottom: 10px;
    font-weight: 200;
}
h5 {
    letter-spacing: 0.05rem;
    line-height: 2.8rem;
    font-size: 1.8rem;
    padding-bottom: 10px;
    color: #000;
    font-weight: 100;
}
@media screen and (max-width: 500px) {
h5 {
    letter-spacing: 0.0rem;
    line-height: 1,8rem;
    font-size: 1.6rem;
    font-weight: 200;
    padding-top: 10px;
}
}
h6 {
    letter-spacing: 0.1rem;
    line-height: 2.0rem;
    font-size: 1.6rem;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: 400;
}
h6 a {
    color: #089DE0;
    text-decoration: none;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/* Font-newslist */
.newslist h2 {
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
    font-size: 2.2rem;
    font-weight: 200;
    padding: 20px 0px 20px 0px;
}
@media screen and (max-width: 500px) {
.newslist h2 {
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
    font-size: 1.8rem;
    font-weight: 200;
    padding: 20px 0px 20px 0px;
}
}
.newslist h5 {
    letter-spacing: 0.05rem;
    line-height: 2.8rem;
    font-size: 1.6rem;
    color: #000;
    font-weight: 100;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
}
@media screen and (max-width: 500px) {
.newslist h5 {
    letter-spacing: 0.0rem;
    line-height: 1,6rem;
    font-size: 1.5rem;
    font-weight: 200;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
}
.newslist img {
	width: 100%;
    height: 30vh;
    object-fit: cover;
    border: solid 1px #D8D8D8;
    margin-bottom: 20px;
}

/* Font-news */
.news h1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 0.1rem;
    line-height: 3.8rem;
    font-size: 2.2rem;
    font-weight: 400;
    padding-bottom: 20px;
}
@media screen and (max-width: 500px) {
.news h1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 0.0rem;
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-weight: 400;
}
}
.news h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 0.1rem;
    line-height: 2.8rem;
    font-size: 1.8rem;
    font-weight: 400;
    padding-bottom: 20px;
}
@media screen and (max-width: 500px) {
.news h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 0.0rem;
    line-height: 2.4rem;
    font-size: 1.5rem;
    font-weight: 400;
}
}
.news h3 {
    letter-spacing: 0.1rem;
    line-height: 2.0rem;
    font-size: 1.6rem;
    font-weight: 400;
    padding-bottom: 20px;
}
@media screen and (max-width: 500px) {
.news h3 {
    letter-spacing: 0.0rem;
    line-height: 2.0rem;
    font-size: 1.4rem;
    font-weight: 400;
    padding-bottom: 20px;
}
}
.news p {
    letter-spacing: 0.1rem;
    line-height: 2.0rem;
    font-size: 1.4rem;
    padding-bottom: 30px;
}
@media screen and (max-width: 500px) {
.news p {
    letter-spacing: 0.0rem;
    line-height: 1.8rem;
    font-size: 1.2rem;
    padding-bottom: 30px;
}
}
/* Font-qa */
.qa h3 {
    letter-spacing: 0.1rem;
    line-height: 3.8rem;
    font-size: 2.8rem;
    font-weight: 400;
    padding-bottom: 5px;
}
@media screen and (max-width: 500px) {
.qa h3 {
    letter-spacing: 0.0rem;
    line-height: 2.8rem;
    font-size: 2.4rem;
    font-weight: 400;
}
}
.qa h5 {
    letter-spacing: 0.05rem;
    line-height: 2.8rem;
    font-size: 1.8rem;
    padding-bottom: 10px;
    color: #000;
    font-weight: 100;
    margin-left: 80px;
}

@media screen and (max-width: 500px) {
.qa h5 {
    letter-spacing: 0.0rem;
    line-height: 1,8rem;
    font-size: 1.6rem;
    font-weight: 200;
    text-align: left;
    padding-top: 10px;
    margin-left: 0px;
}
}
.qa p {
    font-size: 14px;
	font-size: 1.4rem;
    line-height: 22px;
    color: #333;
    text-align: left;
    margin-left: 80px;
}
@media screen and (max-width: 500px) {
.qa p {
    font-size: 12px;
	font-size: 1.2rem;
    line-height: 18px;
    color: #333;
    text-align: left;
    margin-left: 0px;
}
}
/* Font-service */
.service h3 img {
    width: 55px;
    padding-right: 20px;
    vertical-align: middle;
}
.service h3 {
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
    font-size: 2.0rem;
    font-weight: 200;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
}
@media screen and (max-width: 500px) {
.service h3 {
    letter-spacing: 0.0rem;
    line-height: 2.0rem;
    font-size: 1.8rem;
    font-weight: 200;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 20px;
}
}
.service h5 {
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    font-size: 1.8rem;
    text-align: left;
    padding-left: 20%;
    font-weight: 400;
}
@media screen and (max-width: 820px) {
.service h5 {
    letter-spacing: 0.01rem;
    line-height: 1.8rem;
    font-size: 1.4rem;
    text-align: left;
    font-weight: 400;
    padding-left: 0%;
}
}
.service p {
    letter-spacing: 0.1rem;
    line-height: 2.0rem;
    font-size: 1.4rem;
    text-align: left;
    padding-left: 20%;
}
@media screen and (max-width: 820px) {
.service p {
    letter-spacing: 0.05rem;
    line-height: 1.8rem;
    font-size: 1.2rem;
    text-align: left;
    padding-left: 0%;
}
}
/* Font-concept */
.concept h2 {
    letter-spacing: 0.1rem;
    line-height: 3.6rem;
    font-size: 3.2rem;
    font-weight: 200;
    padding-bottom: 0px;
}
@media screen and (max-width: 500px) {
.concept h2 {
    letter-spacing: 0.0rem;
    line-height: 2.8rem;
    font-size: 2.2rem;
    font-weight: 200;
}
}
.concept h3 {
    letter-spacing: 0.1rem;
    line-height: 3.6rem;
    font-size: 2.6rem;
    font-weight: 200;
    padding-bottom: 0px;
}
@media screen and (max-width: 500px) {
.concept h3 {
    letter-spacing: 0.0rem;
    line-height: 2.8rem;
    font-size: 1.8rem;
    font-weight: 200;
}
}
.concept p {
    font-size: 14px;
	font-size: 1.4rem;
    line-height: 22px;
    color: #333;
    text-align: center;
}
@media screen and (max-width: 500px) {
.concept p {
    font-size: 12px;
	font-size: 1.2rem;
    line-height: 18px;
    color: #333;
    text-align: left;
}
}
.concept-image {
    width: 50%;
}
@media screen and (max-width: 500px) {
.concept-image {
    width: 100%;
}
}
/* Font-design */
.design p {
    font-size: 14px;
	font-size: 1.4rem;
    line-height: 22px;
    color: #333;
    text-align: left;
}
@media screen and (max-width: 500px) {
.design p {
    font-size: 12px;
	font-size: 1.2rem;
    line-height: 18px;
    color: #333;
    text-align: left;
}
}
.company h3 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
    font-size: 2.0rem;
    font-weight: 200;
    text-align: center;
    padding-top: 20px;
}
@media screen and (max-width: 500px) {
.company h3 {
    letter-spacing: 0.0rem;
    line-height: 2.0rem;
    font-size: 1.8rem;
    font-weight: 200;
    text-align: center;
    padding-top: 10px;
}
}



.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*====

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;

font-family: 'acumin-Pro-regular','acumin-pro-semi-condensed','HelveticaNeue', 'Helvetica', 'Arial','AvenirNext-Regular', 'ヒラギノ角ゴ Pro', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック','ＭＳ Ｐゴシック', 'Osaka', 'MS PGothic', 'Verdana', sans-serif;

font-family:"trajan-pro-3";

=====*/


/*========= pcナビゲーションのためのCSS ===============*/
#g-nav3{
    position: relative;
    padding: 3px;
}
@media screen and (max-width: 834px) {
#g-nav3{
	display: none;
}
}
.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	border: 0px solid #555;
	border-radius: 0px;
    min-width: 80px;
	padding: 10px;
    text-align: center;
	display: inline-block;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s;
    font-family:"trajan-pro-3";
    letter-spacing: 0.00rem;
}

/*hoverした際の変化*/
.btntextchange:hover{
  background:#fff;
  color:#178BC8;
}

.btntextchange span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}

.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}



#g-nav2{
   
}

nav2 ul{
	list-style: none;
	display: flex;
	justify-content: center;
}
@media screen and (max-width: 834px) {
nav2 ul{
	display: none;
}
}
nav2 ul li a{
	display: block;
	text-decoration: none;
	color: #000;
	padding:8px;
	transition:all 0.3s;
    font-weight: bold;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
}

nav2 ul li.current a,
nav2 ul li a:hover{
	color:#888;	
}

/*========= spナビゲーションのためのCSS ===============*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 3;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:rgba(255, 255, 255, 0.95); 
    /*動き*/
	transition: all 0.6s;
    
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 5; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 5;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:15px 5px 10px 5px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: bold;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
}

#g-nav li a:hover{
	color:#888;	
}

#g-nav img{
	width: 20%;
    
}
@media only screen and (max-width: 500px) {
    #g-nav img{
	width: 70%;
}
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
@media only screen and (max-width: 500px) {
    .openbtn{
	
	top:5px;
	right: 10px;
}
}	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #666;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}



/*========= レイアウトのためのCSS ===============*/



.bt-single-gry {
	border-top: solid 1px #888888;
}
.mt10 {
	margin-top: 10px;
}
.mb10 {
	margin-bottom: 10px;
}
.mt20 {
	margin-top: 20px;
}
.mt30 {
	margin-top: 30px;
}
.mt40 {
	margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.mt80 {
	margin-top: 80px;
}
.mt100 {
	margin-top: 100px;
}
.mt200 {
	margin-top: 200px;
}
.pt5 {
	padding-top: 5px;
}
.pr5 {
	padding-right: 5px;
}
.pb5 {
	padding-bottom: 5px;
}
.p10 {
	padding: 10px;
}
.pl10 {
	padding-left: 10px;
}
.pt10 {
	padding-top: 10px;
}
.pr10 {
	padding-right: 10px;
}
.pb10 {
	padding-bottom: 10px;
}
.pl20 {
	padding-left: 20px;
}
.pt20 {
	padding-top: 20px;
}
.pt-20 {
	padding-top: -20px;
}
.pr20 {
	padding-right: 20px;
}
.pb20 {
	padding-bottom: 20px;
}
.pb50 {
	padding-bottom: 50px;
}
.p40 {
	padding: 40px;
}
.pt40 {
	padding-top: 40px;
}
.pt50 {
	padding-top: 50px;
}
.pt80 {
	padding-top: 80px;
}
.pt100 {
	padding-top: 90px;
}
@media only screen and (max-width: 500px) {
    .pt100 {
	padding-top: 50px;
}
}
.pt150 {
	padding-top: 150px;
}
@media only screen and (max-width: 500px) {
    .pt150 {
	padding-top: 100px;
}
}
.pt200 {
	padding-top: 150px;
}
@media only screen and (max-width: 500px) {
    .pt200 {
	padding-top: 125px;
}
}

.pt300 {
	padding-top: 300px;
} 
@media only screen and (max-width: 500px) {
    .pt300 {
	padding-top: 150px;
}
}


.bt-single-gry {
	border-top: solid 1px #DCDBDB;
}
.bt-single {
	border-top: solid 1px #000;
}
.bb-single {
	border-bottom: solid 1px #000;
}
.bt-thick {
	border-top: solid 1px #000;
}
.bt-thick4 {
	border-top: solid 4px #000;
}
@media (max-width: 414px) {
	.bt-thick4 {
	border-top: solid 0px #000;
}
}

.bb-thick {
	border-bottom: solid 1px #000;
}
.bt-single-orange {
	border-top: solid 1px #EE7B02 !important;
}
.bb-single-orange {
	border-bottom: solid 1px #EE7B02 !important;
}
.ba-single-orange {
	border: solid 1px #EE7B02 !important;
}
.bt-thick-orange {
	border-top: solid 2px #EE7B02 !important;
}
.bt-thick-red {
	border-top: solid 2px #ff0000 !important;
}
.bb-thick-orange {
	border-bottom: solid 2px #EE7B02 !important;
}
.ba-thick-orange {
	border: solid 2px #EE7B02 !important;
}
.bt-single-green {
	border-top: solid 1px #187C27 !important;
}
.bb-single-green {
	border-bottom: solid 1px #187C27 !important;
}
.bt-none {
	border-top: none !important;
}
.bb-none {
	border-bottom: none !important;
}
.va-top {
	vertical-align: top;
}
.va-middle {
	vertical-align: middle;
}
.va-bottom {
	vertical-align: bottom;
}
.text-small {
	font-size: 12px;
	font-size: 1.2rem;
}


.text-center {
	text-align: center;
}
.text-bottom {
	text-align: bottom;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.color-red {
	color: #ff0000;
}
.color-gry {
	color: #777;
}
.color-lightgry {
	color: #E8E8E8;
}
.color-coad {
	color: #B53302;
}
.color-black {
	color: #000;
}
.color-white {
	color: #fff;
}
.color-orange {
	color: #EE7B02;
}
.color-blue {
	color: #216FAB;
}
.backcolor-orange {
	background-color: #EE7B02;
}
.backcolor-white {
	background-color: #fff;
}
.backcolor-gry {
	background-color: #E8E8E8;
}
.backcolor-lightblue {
	background-color: #DCF5F9;
}
.color-black {
	color: #000;
}
.color-lightgrey {
	color: e9e9e9;
}
.color-green {
	color: #187C27;
}
.font-bold {
	font-weight: bolder;
}
.font-normal { 
	font-weight: normal; 
}
.font-lighter { 
	font-weight: lighter; 
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.word-break {
	word-break: break-all;
}



/* すまほdisplay: none;*/
.pc-only {
	display: none;
}

@media screen and (min-width: 500px) {
	.pc-only {
		display: block;
	}
}

.sp-only {
	display: block;
}
@media screen and (min-width: 500px) {
	.sp-only {
		display: none;
	}
}

.tb-only {
	display: none;
}
@media screen and (max-width: 1024px) {
	.tb-only {
		display: block;
	}
}
@media screen and (max-width: 501px) {
	.tb-only {
		display: none;
	}
}


.pc-only834 {
	display: none;
}
@media screen and (max-width: 834px) {
	.pc-only834 {
		display: block;
	}
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc_image01 { display: block !important; }
.tb_image01 { display: none !important; }
.sp_image01 { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc_image01 { display: none !important; }
    .tb_image01 { display: none !important; }
    .sp_image01 { display: block !important; }
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc_image02 { display: block !important; }
.tb_image02 { display: none !important; }
.sp_image02 { display: none !important; }
 

/* tbで見たときは"tb"のclassがついた画像が表示される */
@media only screen and (min-width: 701px) and (max-width: 1024px) {
    .pc_image02 { display: none !important; }
    .tb_image02 { display: block !important; }
    .sp_image02 { display: none !important; }
}


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 700px) {
    .pc_image02 { display: none !important; }
    .tb_image02 { display: none !important; }
    .sp_image02 { display: block !important; }
}


/* Font */
.times-new {
	font-family: "Times New Roman", Times, serif;
}
.italic {
	font-style: italic;
}
.tk-trajan-pro-3 {
	font-weight: 200;
}
.ben-Mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    letter-spacing: 1.0px;
    line-height: 2.2rem;
}
@media (max-width: 500px) {
	.ben-Mincho {
    letter-spacing: 1.0px;
    line-height: 1.8rem;
}
}


.wrapper{
	position: relative;
    
}

.container{
	
}
.ben-box {
	margin-left: auto;
	margin-right: auto;
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 30px;
	padding-bottom: 10px;
    text-align: left;
}
@media (min-width: 1366px) {
.ben-box {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 30px;
	padding-bottom: 10px;
    width: 1366px;
	}
}

@media (max-width: 500px) {
.ben-box {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
	padding-bottom: 10px;
	}
}
/* ----- ----- ----- ----- ----- --- * 1カラムben */
.one-column-child-ben {
	display: inline-block;
	padding: 30px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	.one-column-child-ben {
	display: inline-block;
	padding: 5px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
}
}
.one-column-child-ben img {
	
    border: solid 0px #888;
}
/* ----- ----- ----- ----- ----- --- * 1カラムben-ser */
.one-column-child-ben-service {
	display: inline-block;
	padding: 0px 50px 0px 50px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	.one-column-child-ben-service {
	padding: 0px 10px 0px 10px;	
}
}
/* ----- ----- ----- ----- ----- --- * 1カラムben-ser */
.one-column-child-ben-company {
	display: inline-block;
	padding: 0% 15% 0% 15%;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	.one-column-child-ben-company {
	padding: 0px 10px 0px 10px;	
}
}
/* ----- ----- ----- ----- ----- --- * 1カラムben-ser */
.one-column-child-ben-news {
	display: inline-block;
	padding: 0% 3% 0% 3%;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	.one-column-child-ben-news {
	padding:  0% 2% 0% 2%;
}
}
.news-text-box {
	display: inline-block;
	padding: 5% 18% 5% 18%;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
    border-top: solid 0px #888888;
}
@media screen and (max-width: 820px) {
	.news-text-box {
	padding: 10% 0% 0% 0%;	
}
}
/* ----- ----- ----- ----- ----- --- * 2カラム */
.two-column-child-ben {
	display: inline-block;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 30px;
	margin-right: 30px;

}
@media screen and (max-width: 1800px) {
	.two-column-child-ben {
	display: inline-block;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2%;
	margin-right: 2%;
}
}
@media screen and (max-width: 1366px) {
	.two-column-child-ben {
	display: inline-block;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2%;
	margin-right: 2%;
}
}
@media screen and (max-width: 767px) {
	.two-column-child-ben {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
}
.two-column-child-ben img {
	
    border: solid 0px #888;
}
/* ----- ----- ----- ----- ----- --- * 3カラムben */
.three-column-child-ben {
	display: inline-block;
	padding: 30px 30px 0px 30px;
	width: 33%;
	box-sizing: border-box;
	vertical-align: top;
    
}

@media screen and (max-width: 820px) {
	.three-column-child-ben {
	display: inline-block;
	padding: 30px 20px 50px 20px;
	width: 49%;
	box-sizing: border-box;
	vertical-align: top;
}
}
@media screen and (max-width: 500px) {
	.three-column-child-ben {
	display: inline-block;
	padding: 5px 5px 50px 5px;
	width: 49%;
	box-sizing: border-box;
	vertical-align: top;
}
}


.three-column-child-ben .showroomlist-logo img {
	width: 30%;
}
@media screen and (max-width: 500px) {
	.three-column-child-ben .showroomlist-logo img {
	width: 50%;
}
}
.two-column-child-ben .showroom-logo img {
	width: 30%;
}
@media screen and (max-width: 500px) {
	.two-column-child-ben .showroom-logo img {
	width: 50%;
}
}
/*==================================================
スライダーのためのcss
===================================*/
.slider-showroom {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
    padding-top: 20px;
}

.slider-showroom img {
    width:75vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider-showroom .slick-slide {
	transform: scale(0.88);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider-showroom .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}





/*　セピアからカラーへ　*/

.sepia img{
	filter: sepia(100%);/*セピア具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.sepia a:hover img{/*hoverした時の変化*/
	filter:sepia(0);
}


/*　キラッ　*/

.shine span.mask{
	position: relative;/*キラッの基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.shine span.mask::before {
	position: absolute;
	content:"";
	width: 50%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	left: -75%;/*画面の見えていない左から右へ移動するスタート地点*/
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);/*背景白透過を斜めに*/
}

.shine span.mask:hover::before {/*hoverした時の変化*/
	animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

/*　モノクロからカラーへ　*/

.grayscale img{
	filter: grayscale(100%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.grayscale a:hover img{/*hoverした時の変化*/
	filter:grayscale(0);
}
/*　ぼかす　*/

.blur-btn img{
	filter: blur(0);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.blur-btn a:hover img{/*hoverした時の変化*/
	filter: blur(5px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}


/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
/*　画像の拡大　*/

.zoomIn-btn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn-btn a:hover img{/*hoverした時の変化*/
	transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3.0s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}


/* 上から */




.fadeDown{
animation-name:fadeDownAnime;
animation-duration:3.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fadeDownTrigger{
    opacity: 0;
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(30px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}


/*==================================================
じわっ
===================================*/

.blur{
	animation-name:blurAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(0.96);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.8);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.1);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomOutTrigger{
    opacity: 0;
    
}

.zoomInTrigger{
    opacity: 0;
}
/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 6;
	background: url("../image_cont01/ben/open-ben01.jpg") repeat top center;/*背景画像の設定*/
    background-size:cover;
	text-align:center;
	color:#fff;
}
@media screen and (max-width: 500px) {
	#splash {
    position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 6;
	background: url("../image_cont01/ben/open-ben01sp.jpg") repeat top center;/*背景画像の設定*/
    background-size:cover;
	text-align:center;
	color:#fff;
}
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:50%;
}

@media screen and (max-width: 500px) {
	#splash_logo img {
	width:100%;
}
}

/* timeser */
.timeser-list {
	overflow: hidden;
}
.timeser-list li {
	overflow: hidden;
	display: table;
	table-layout: fixed;
	padding: 20px 0;
	border-bottom: solid 1px #D8D8D8;
	width: 100%;
}
.timeser-list li:first-child {
	border-top: solid 1px #999;
}
.timeser-list li div {
	display: table-cell;
}
@media (max-width: 700px) {
	.timeser-list li div {
		display: block;
	}
}
.timeser-list-left {
	width: 150px;
	padding-right: 50px;
}
.timeser-list-left img {
	width: 150px;
}
@media (max-width: 700px) {
	.timeser-list-left {
		width: 45%;
		padding-right: 0;
		padding-bottom: 20px;
	}
	.timeser-list-left img {
		width: 100%;
	}
}
.timeser-list-text {
	overflow: hidden;
}

#timeser-wrap {
	overflow: hidden;
	width: 100%;
	background-color: #FEEF21
}
#timeser02-wrap {
	overflow: hidden;
	width: 100%;
	background-color: #DCDCDC
}
/* /timeser02 */
.timeser-list02 {
	overflow: hidden;
}
.timeser-list02 li {
	overflow: hidden;
	display: table;
	table-layout: fixed;
	padding: 20px 0;
	border-bottom: solid 1px #999;
	width: 100%;
}
.timeser-list02 li:first-child {
	border-top: solid 1px #999;
}
.timeser-list02 li div {
	display: table-cell;
}
@media (max-width: 700px) {
	.timeser-list02 li div {
		display: block;
	}
}
.timeser-list-left02 {
	width: 250px;
	padding-right: 78px;
}
.timeser-list-left02 img {
	width: 250px;
}
@media (max-width: 700px) {
	.timeser-list-left02 {
		width: 75%;
		padding-right: 0;
		padding-bottom: 20px;
	}
	.timeser-list-left02 img {
		width: 100%;
	}
}
.timeser-list-text02 {
	overflow: hidden;
}
/*スクロールダウン全体の場所*/
.top-slid-box{
	position:relative;
    height: 100vh;
}
/* その場で3.5s遅れるanimation-delay scrolldown4用*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom: 1%;
	right:50%;
    margin-bottom: 0.5%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}
@media (max-width: 500px) {
	.scrolldown4{
    bottom:1%;
	right:50%;
    margin-bottom: 7%;
}
}


/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}


/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}


/* その場で3.5s遅れるanimation-delay scrolldown4用*/
.fadeIn-late{
animation-name:fadeIn-late;
animation-duration: 3.0s;/* 3.0sかけて現れる*/
animation-delay: 3.8s;/* 3.8s遅れる*/
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeIn-late{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*==================================================
グレーマップ
===================================*/
/*　グレーマップ　*/
.grayscale-map {
    filter: grayscale(1);
}


/* ----- ----- ----- ----- ----- --- * .contact-boxカラムここから */
.contact-box {
    position: relative;
	margin-left: 11%;
	margin-right: 11%;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: left;
}

@media (min-width: 2000px) {
.contact-box {
	margin-left: 17%;
	margin-right: 11%;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: left;
}
}
@media (max-width: 1280px) {
.contact-box {
	margin-left: 10%;
	margin-right: 10%;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: left;
}
}
@media (max-width: 834px) {
.contact-box {
	margin-left: 12%;
	margin-right: 12%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 768px) {
.contact-box {
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 500px) {
.contact-box {
	margin-left: 5%;
	margin-right: 5%;
    padding-bottom: 30px;
	}
}
/* contact entry　box */

.entry-inner-box {
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
		width: 80%;
    position: relative;
	}
@media (max-width: 901px) {
.entry-inner-box {
    padding-right: 0px;
    padding-left: 0px;
    width: 99%;
	}
}
@media (max-width: 500px) {
.entry-inner-box {
    padding-right: 0px;
    padding-left: 0px;
    width: 99%;
	}
}
.entry-inner-box img {
		width: 35%;
	}
@media (max-width: 500px) {
.entry-inner-box img {
    width: 80%;
	}
}

/* フォームの横はみ出し修正 */
input, select, textarea {
    width00000000000000000000: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 自動拡大防止 */
}
/* class - table form */
.entry-form {
	padding-right: 0 !important;
	padding-left: 0 !important;

}
.entry-form textarea {
	resize: vertical;
	width: 100%;
    border: 1px solid #888;
}
.entry-form dl {
	overflow: hidden;
	display:table;
	padding-top: 8px;
	padding-bottom: 8px;
	width: 100%;
}
.entry-form dt {
	display:table-cell;
	padding: 0 20px;
	width: 28%;
	text-align: right;
    color: #000;
}
.entry-form dd {
	display:table-cell;
	padding: 0 20px;
	text-align: left;
}

@media (max-width: 901px) {
	entry-form dl {
		display: block;
	}
	.entry-form dd {
		display: block;
		text-align: left;
	}
	.entry-form dt {
		display: block;
		width: 100%;
		border-right: none;
		text-align: left;
        padding-bottom: 10px;
	}
}





/* contact text */

input[type="text"] {
	border: solid 1px #888;
	padding: 3px 5px;
	max-width: 100%;
}
@media (max-width: 735px) {
	input[type="text"] {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}


/* contact submit */

input[type="submit"] {
	box-sizing: border-box;
	margin-right: 10px;
	margin-left: 10px;
}
@media (max-width: 735px) {
	input[type="submit"] {
		max-width: 100%;
		padding: 10px 5% !important;
        
	}
}

/* contact reset */

input[type="reset"] {
	box-sizing: border-box;
	margin-right: 10px;
	margin-left: 10px;
}
@media (max-width: 735px) {
	input[type="reset"] {
		max-width: 100%;
		padding: 10px 5% !important;
        
	}
}

/* contact reset submit 480px */

@media (max-width: 480px) {
	input[type="reset"], input[type="submit"] {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
		margin-left: 0;
        
	}
}

/*　contact text-wide*/

.input-text-wide {
	width: 100%;
	max-width: 100% !important;
}


/* 送信ボタン */
.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;

  /* ボタン有効時のスタイル */
    font-size: 16px;
  color: #fff;
  padding: 18px 50px;
  background-color: #EB0000;
  cursor: pointer; /* ポインターカーソルを表示 */
}

/* ボタン無効時のスタイル */
.submit-btn[disabled] {
  background-color: #838383;
  cursor: not-allowed; /* クリック不可のカーソルを表示 */
}

.send-bottun01 input.red-bg {
	padding: 10px 50px;
	background: #ff0000;
	border: solid 1px #ff0000;
	color: #fff;
}

.send-bottun02 input.red-bg {
	padding: 10px 50px;
	background: #fff;
	border: solid 1px #ff0000;
	color: #ff0000;
}

.send-bottun02 input.red-bg2 {
	padding: 10px 50px;
	background: #ff0000;
	border: solid 1px #ff0000;
	color: #fff;
}
/* ----- ----- ----- ----- ----- --- * .contact-boxカラム　ここまで */
/* for table    border-collapse: collapse; */
#form-tbl {
	margin-left: auto;
    margin-right: auto;
    background: #fff;
    position: relative;
    width: 100%;
}
@media (max-width: 500px) {
#form-tbl {
    margin-left: auto;
    margin-right: auto;
}
}
#form {
	border-collapse: collapse;
	margin-left: 1%;
    margin-right: 1%;
    width: 100%;
}
#form th, #form td {
	border: 1px solid #D8D8D8;
	padding: 10px;
    background: #fff;
    
}
#form th {
	white-space: nowrap;
	background: #e8e8e8;
}
#form td {
	background: #fff;
    width: 1200px;
    overflow-wrap: break-word;
    display: block;
}
@media (max-width: 1800px) {
#form td {
    width: 900px;
}
}
@media (max-width: 1500px) {
#form td {
    width: 800px;
}
}
@media (max-width: 1366px) {
#form td {
    width: 750px;
}
}
@media (max-width: 1200px) {
#form td {
    width: 680px;
}
}
@media (max-width: 1133px) {
#form td {
    width: 640px;
}
}
@media (max-width: 1024px) {
#form td {
    width: 570px;
}
}
@media (max-width: 830px) {
#form td {
    width: 550px;
}
}
@media (max-width: 500px) {
#form td {
    width: 280px;
}
}
@media (max-width: 440px) {
#form td {
    width: 270px;
}
}
@media (max-width: 410px) {
#form td {
    width: 250px;
}
}
@media (max-width: 375px) {
#form td {
    width: 235px;
}
}

/* contact for table
p.btn input {
	width: 110px;
	height: 32px;
}

a {
	color: #BBBBBB
}
 */
/* contact for table    border-collapse: collapse; */

.fixed-image {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
    z-index: -1;
  transform: translateX(-50%); /* 中央寄せの場合 */
}
.fixed-image2 {
  position: fixed;
  right: 0;
  
  width: 100%;
    z-index: -1;
  transform: translateX(-50%); /* 中央寄せの場合 */
}
.manekin {
	width:100%;
	background: url("../image_cont01/ben/bc-manekin01.jpg") no-repeat; 
	background-size: 100%;
	background-position:right top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}
/* ページネーション　ページ送り */
.pagination-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  list-style-type: none;
  padding: 0;
}

.pagination-3 a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2em;
  height: 2em;
  border-bottom: 2px solid #f2f2f2;
  color: #333;
  text-decoration: none;
}

.pagination-3 .current a {
  border-bottom: 2px solid #2589d0;
  pointer-events: none;
}