@charset "utf-8";

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,
input {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}


/* common */
html {
	font-size: 62.5%;
    overflow-x: hidden;
        
}

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







/*========= レイアウトのためのCSS ===============*/
ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #888;
    text-decoration: none;
}

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


p{
	font-size: 14px;
	font-size: 1.4rem;
    line-height: 20px;
}


.design{
	font-size: 1.1vw;
}
.wrapper{
    position: relative;
}

.container00{
	background:#555;
}

.container00 p{
	padding: 300px 0;	
	text-align: center;
	color: #fff;
}

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
@media only screen and (max-width: 1112px) {
    #slider {
    width: 100%;
    height: 96vh;
}
} 
@media only screen and (max-width: 834px) {
    #slider {
    width: 100%;
    height: 98vh;
}
} 
@media only screen and (max-width: 500px) {
    #slider {
    width: 100%;
    height: 90vh;
}
} 










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

/* ----- ----- ----- ----- ----- --- * title-navi-box */
.title-navi-box{
	position: relative;
	z-index: 2;
	left: 0%;
    margin: 0px 0px 50px 50px;
    top :45%;
    
}
@media only screen and (max-width: 834px) {
    .title-navi-box{
    margin: 0px 0px 50px 50px;
    top :55%;
}
} 
@media only screen and (max-width: 480px) {
    .title-navi-box{
    margin: 0px 0px 10px 20px;
    top :50%;
}
} 
.title-navi-box img{
	position: relative;
	width: 30%;
    margin-bottom: 20px;
}
.title-navi-box h1{
	position: relative;
	text-align: left;
	font-size: 2vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffff;
    font-weight: 600;
}
@media only screen and (max-width: 1112px) {
.title-navi-box h1{
	font-size: 3.0vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
} 
@media only screen and (max-width: 834px) {
.title-navi-box h1{
	font-size: 4.0vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    color: #fff;
}
} 
@media only screen and (max-width: 480px) {
.title-navi-box h1{
	font-size: 5.0vw;
	letter-spacing: 0.00em;
	text-transform: uppercase;
    color: #fff;
}
}
.title-navi-box h1 span{
	position: relative;
	text-align: left;
	font-size: 5vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffff;
    font-weight: 100;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
	font-style: normal;
    padding-bottom: 30px;
}
@media only screen and (max-width: 834px) {
.title-navi-box h1 span{
	font-size: 10vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}
} 
@media only screen and (max-width: 480px) {
.title-navi-box h1 span{
	font-size: 8.8vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}
} 
.title-navi-box h2{
	position: relative;
	text-align: left;
	font-size: 1.2vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffff;
    font-weight: 600;
}
@media only screen and (max-width: 1112px) {
.title-navi-box h2{
	font-size: 2vw;
}
} 
@media only screen and (max-width: 834px) {
.title-navi-box h2{
    color: #fff;
	font-size: 2vw;
}
}
@media only screen and (max-width: 480px) {
.title-navi-box h2{
    color: #fff;
	font-size: 3.8vw;
}
} 
.title-navi-box h2 a{
	color: #ffff;
    text-decoration: none;
}
@media only screen and (max-width: 834px) {
.title-navi-box h2 a{
	color: #fff;
    text-decoration: none;
}
}

.title-navi-box h2 a:hover{
	text-decoration: none;
}
.title-navi-box h2 a:active{
	text-decoration: none;
}



.title-navi-box02{
	position: relative;
	z-index: 2;
	left: 0%;
    margin: 0px 0px 0px 50px;
    padding-top: 80px;
}
@media only screen and (max-width: 480px) {
    .title-navi-box02{
    margin: 0px 0px 0px 30px;
}
}

/*スクロールダウン全体の場所*/
.scrolldown5{
    /*描画位置※位置は適宜調整してください*/
	position: absolute;
	left: 0%;
    margin: 30px 0px 0px 55px;
    top :50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}
@media (max-width: 834px) {
	.scrolldown5{
	left: 0%;
        margin: 30px 0px 0px 55px;
        top :60%;
}
}
@media (max-width: 500px) {
	.scrolldown5{
	left: 0%;
        margin: 30px 0px 0px 25px;
}
}

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

/*Scrollテキストの描写*/
.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-1px;
	bottom:26%;
    /*テキストの形状*/
	color: #ffff;
	font-size: 1.8rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
@media (max-width: 1280px) {
	.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-0px;
	bottom:25%;
    /*テキストの形状*/
	color: #ffff;
	font-size: 1.4rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
}
}
@media (max-width: 1112px) {
	.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-0px;
	bottom:20%;
    /*テキストの形状*/
	color: #ffff;
	font-size: 1.8rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
}
}
@media (max-width: 1024px) {
	.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-0px;
	bottom:20%;
    /*テキストの形状*/
	color: #ffff;
	font-size: 1.6rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
}
}
@media (max-width: 834px) {
	.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-0px;
	bottom:25%;
    /*テキストの形状*/
	color: #fff;
	font-size: 1.6rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
}
}
@media (max-width: 500px) {
	.scrolldown5 span{
    /*描画位置*/
	position: absolute;
	left:-0px;
	bottom:30%;
    /*テキストの形状*/
	color: #fff;
	font-size: 1.2rem;
    font-weight: 600;
	letter-spacing: 0.1em;
    text-transform: uppercase;
}
}
/* 矢印の描写 */
.scrolldown5:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #ffff;
    transform: skewX(-31deg);
}
@media (max-width: 834px) {
	.scrolldown5:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}
}
.scrolldown5:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 160px;
	background:#ffff;
}
@media (max-width: 1280px) {
	.scrolldown5:after{
	height: 120px;
	background:#ffff;
}
}
@media (max-width: 1112px) {
	.scrolldown5:after{
	height: 100px;
	background:#ffff;
}
}
@media (max-width: 834px) {
	.scrolldown5:after{
	height: 150px;
	background:#fff;
}
}
@media (max-width: 500px) {
	.scrolldown5:after{
	height: 100px;
	background:#fff;
}
}
/* ----- ----- ----- ----- ----- --- * archives-navi-box */
.archives-navi-box{
	position: relative;
	left: 0%;
    margin: 50px 0px 20px 50px;
    z-index: 888;
}
@media only screen and (max-width: 1112px) {
.archives-navi-box{
    margin: 50px 0px 10px 40px;
}
}
@media only screen and (max-width: 834px) {
.archives-navi-box{
    margin: 80px 0px 30px 40px;
    
}
}
@media only screen and (max-width: 768px) {
.archives-navi-box{
    margin: 80px 0px 30px 30px;
    
}
}
@media only screen and (max-width: 480px) {
.archives-navi-box{
    margin: 30px 0px 10px 20px;
}
} 


.archives-navi-box h1{
	text-align: left;
	font-size: 1.6vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    font-weight: 100;
    z-index: 999;
}
@media only screen and (max-width: 1112px) {
.archives-navi-box h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
}
@media only screen and (max-width: 834px) {
.archives-navi-box h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
} 
@media only screen and (max-width: 480px) {
.archives-navi-box h1{
	text-align: left;
	font-size: 5.6vw;
	letter-spacing: 0.01em;
}
}  

.top-news-area{
	position: relative;
    width: 100%;
    background: #888;
}
.bc-color02{
    background: #621112;
}


.top-news-area h2{
	position: relative;
	text-align: left;
	font-size: 1.2vw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
    font-weight: 600;
}
@media only screen and (max-width: 1112px) {
.top-news-area h2{
	font-size: 2vw;
}
} 
@media only screen and (max-width: 480px) {
.top-news-area h2{
	font-size: 4vw;
}
} 

.top-news-area h3{
	position: relative;
	text-align: left;
	font-size: 1.2vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}
@media only screen and (max-width: 1112px) {
.top-news-area h3{
	font-size: 1.8vw;
}
}
@media only screen and (max-width: 480px) {
.top-news-area h3{
	font-size: 4vw;
}
} 

.top-news-area p{
	text-align: left;
	font-size: 14px;
    color: #E8E8E8;
    font-weight: 200;
    letter-spacing: 0.01em;
}
@media only screen and (max-width: 480px) {
.top-news-area p{
	font-size: 12px;

}
} 
.top-news-area .news-caption p{
	text-align: right;
	font-size: 12px;
    color: #E8E8E8;
    font-weight: 100;
    padding-top: 0px;
}





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




/* すまほ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;
	}
}

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

.pc-only834 {
	display: none;
}

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

.pc-only1112 {
	display: none;
}

@media screen and (max-width: 1112px) {
	.pc-only1112 {
		display: block;
	}
}




/*まる*/
.border-radius00 {
  width: 20px;
  height: 20px;
  line-height: 10px;
  border: 0px solid #000;
    background: #000;
  border-radius: 50%;
  text-align: center;
}


/* ----- ----- ----- ----- ----- --- * here-box */
.here-box {
    position: relative;
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 0px;
	padding-bottom: 80px;
	text-align: left;
    
}

@media (min-width: 2000px) {
.here-box {
	margin-left: 17%;
	margin-right: 11%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 1280px) {
.here-box {
	margin-left: 6%;
	margin-right: 2%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 834px) {
.here-box {
	margin-left: 8%;
	margin-right: 5%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 768px) {
.here-box {
	margin-left: 5%;
	margin-right: 2%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 500px) {
.here-box {
	margin-left: 1%;
	margin-right: 1%;
    padding-bottom: 30px;
	}
}

/* ----- ----- ----- ----- ----- --- * 1カラム */
.one-column-child-here {
	display: inline-block;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	
}
@media (min-width: 2000px) {
.one-column-child-here {
	display: inline-block;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 25px;

}
}

@media (max-width: 768px) {
.one-column-child-here {
	display: inline-block;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;

}
}
@media (max-width: 500px) {
.one-column-child-here {
	display: inline-block;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;

}
}

/* ----- ----- ----- ----- ----- --- * 1カラム */
.one-column-child-here02 {
	display: inline-block;
	padding-top: 2px;
	padding-left: 50px;
	padding-right: 50px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	
}
@media (min-width: 2000px) {
.one-column-child-here02 {
	display: inline-block;
	padding-top: 0px;
	padding-left: 25px;
	padding-right: 25px;

}
}

@media (max-width: 768px) {
.one-column-child-here02 {
	display: inline-block;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;

}
}
@media (max-width: 500px) {
.one-column-child-here02 {
	display: inline-block;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;

}
}



/* ----- ----- ----- ----- ----- --- * 2カラム */
.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
@media screen and (max-width: 1800px) {
	.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1366px) {
	.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1280px) {
	.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 1.8%;
	margin-right: 1.8%;
}
}
@media screen and (max-width: 834px) {
	.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
	.two-column-child-here {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}

/* ----- ----- ----- ----- ----- --- * 3カラム */
.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 27%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
@media screen and (max-width: 1800px) {
	.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 27%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1366px) {
	.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 27%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1280px) {
	.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 27%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 1.8%;
	margin-right: 1.8%;
}
}
@media screen and (max-width: 834px) {
	.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
	.three-column-child-studio {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}


/* ----- ----- ----- ----- ----- --- * 2カラムkk-profile */
.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
@media screen and (max-width: 1800px) {
	.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1366px) {
	.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1280px) {
	.two-column-child-kk-profile{
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 1.8%;
	margin-right: 1.8%;
}
}
@media screen and (max-width: 1112px) {
	.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
@media screen and (max-width: 834px) {
	.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
	.two-column-child-kk-profile {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}

/* ----- ----- ----- ----- ----- --- * here-box-news */
.here-box-news {
    position: relative;
	margin-left: 5%;
	margin-right: 5%;
	padding-top: 0px;
	padding-bottom: 80px;
	text-align: left;
    
}

@media (min-width: 2000px) {
.here-box-news {
	margin-left: 17%;
	margin-right: 11%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 1280px) {
.here-box-news {
	margin-left: 6%;
	margin-right: 2%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 834px) {
.here-box-news {
	margin-left: 8%;
	margin-right: 5%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 768px) {
.here-box-news {
	margin-left: 5%;
	margin-right: 2%;
	padding-top: 0px;
	padding-bottom: 30px;
	text-align: left;
}
}
@media (max-width: 500px) {
.here-box-news {
	margin-left: 1%;
	margin-right: 1%;
    padding-bottom: 30px;
	}
}

/* ----- ----- ----- ----- ----- --- * 1カラム */
.one-column-child-here-news {
	display: inline-block;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	
}
@media (min-width: 2000px) {
.one-column-child-here-news {
	display: inline-block;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 25px;

}
}

@media (max-width: 768px) {
.one-column-child-here-news {
	display: inline-block;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;

}
}
@media (max-width: 500px) {
.one-column-child-here-news {
	display: inline-block;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;

}
}
/* ----- ----- ----- ----- ----- --- * 2カラム */
.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
@media screen and (max-width: 1800px) {
	.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1366px) {
	.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 2.2%;
	margin-right: 2.2%;
}
}
@media screen and (max-width: 1280px) {
	.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 45%;
	box-sizing: border-box;
	vertical-align: top;
	margin-bottom: 30px;
	margin-left: 1.8%;
	margin-right: 1.8%;
}
}
@media screen and (max-width: 834px) {
	.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
	.two-column-child-here-news {
	display: inline-block;
	padding: 0px;
	width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 20px;
	padding-right: 20px;
}
}
.two-column-child-here-news img {
	width: 100%;
    margin-bottom: 5px;
}


/*--------header---固定----------------------------------------------------------*/
.innerFIX {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
 
.inner:after {
  content:"";
  clear: both;
  display: block;
}
 
/*--------header-------スクロール前----*/




/* オープンイングアニメーション */
.kuro-logo03-right { 
    position:absolute; 
	top: 120px; 
	right: 120px;
    z-index: 500;
}
@media screen and (max-width: 1112px) {
	.kuro-logo03-right { 
    position:absolute; 
	top: 100px; 
	right: 80px;
    z-index: 500;   
}
}
@media screen and (max-width: 500px) {
	.kuro-logo03-right { 
	top: 88px; 
	right: 10px;
}
}
.kuro-logo03-right img { 
    width: 120px;
}
@media screen and (max-width: 1112px) {
	.kuro-logo03-right img { 
    width: 100px;
}
}
@media screen and (max-width: 834px) {
	.kuro-logo03-right img { 
    width: 110px;
}
}
@media screen and (max-width: 500px) {
	.kuro-logo03-right img { 
    width: 80px;
}
}
/* オープンイングアニメーション */
.kuro-logo04-right { 
    position:absolute; 
	top: 50px; 
	right: 100px;
    z-index: 500;
}


.kuro-logo04-right img { 
    width: 380px;
}


/* オープンイングアニメーション */
.kuro-logo05-right { 
    position:absolute; 
	top: 80px; 
	right: 100px;
    z-index: 500;
}
@media screen and (max-width: 1280px) {
	.kuro-logo05-right { 
    position:absolute; 
	top: 60px; 
	right: 20px;
    z-index: 500;   
}
}
@media screen and (max-width: 1112px) {
	.kuro-logo05-right { 
    position:absolute; 
	top: 50px; 
	right: 50px;
    z-index: 500;   
}
}
@media screen and (max-width: 834px) {
	.kuro-logo05-right { 
    position:absolute; 
	top: 100px; 
	right: 10px;
    z-index: 500;   
}
}
@media screen and (max-width: 500px) {
	.kuro-logo05-right { 
	top: 50px; 
	right: 0px;
}
}
.kuro-logo05-right img { 
    width: 250px;
}
@media screen and (max-width: 1280px) {
	.kuro-logo05-right img { 
    width: 240px;
}
}
@media screen and (max-width: 1112px) {
	.kuro-logo05-right img { 
    width: 220px;
}
}
@media screen and (max-width: 834px) {
	.kuro-logo05-right img { 
    width: 240px;
}
}
@media screen and (max-width: 500px) {
	.kuro-logo05-right img { 
    width: 140px;
}
}

/* オープンイングアニメーション */
.office-title-right01 { 
    position:absolute; 
	top: 90px; 
	right: 60px;
    z-index: 500;
}
@media screen and (max-width: 1112px) {
	.office-title-right01 { 
    position:absolute; 
	top: 90px; 
	right: 50px;
    z-index: 500;   
}
}
@media screen and (max-width: 500px) {
	.office-title-right01 { 
	top: 88px; 
	right: 10px;
}
}
.office-title-right01 img { 
    width: 100px;
}
@media screen and (max-width: 1112px) {
	.office-title-right01 img { 
    width: 90px;
}
}
@media screen and (max-width: 834px) {
	.office-title-right01 img { 
    width: 110px;
}
}
@media screen and (max-width: 500px) {
	.office-title-right01 img { 
    width: 80px;
}
}

/* オープンイングアニメーション */
.office-title-right03 { 
    position:absolute; 
	top: 39%; 
	right: 0px;
    z-index: 500;
}
@media screen and (max-width: 1112px) {
	.office-title-right03 { 
    position:absolute; 
	top: 90px; 
	right: 50px;
    z-index: 500;   
}
}
@media screen and (max-width: 500px) {
	.office-title-right03 { 
	top: 20%; 
	right: 0px;
}
}
.office-title-right03 img { 
    width: 100%;
}
@media screen and (max-width: 1112px) {
	.office-title-right03 img { 
    width: 90px;
}
}
@media screen and (max-width: 834px) {
	.office-title-right03 img { 
    width: 110px;
}
}
@media screen and (max-width: 500px) {
	.office-title-right03 img { 
     width: 100%;
}
}

/* オープンイングアニメーション */
.statements-title-right01 { 
    position:absolute; 
	top: 100px; 
	right: 70px;
    z-index: 500;
}
@media screen and (max-width: 1112px) {
	.statements-title-right01 { 
    position:absolute; 
	top: 100px; 
	right: 70px;
    z-index: 500;   
}
}
@media screen and (max-width: 500px) {
	.statements-title-right01 { 
	top: 88px; 
	right: 10px;
}
}
.statements-title-right01 img { 
    width: 120px;
}
@media screen and (max-width: 1112px) {
	.statements-title-right01 img { 
    width: 100px;
}
}
@media screen and (max-width: 834px) {
	.statements-title-right01 img { 
    width: 110px;
}
}
@media screen and (max-width: 500px) {
	.statements-title-right01 img { 
    width: 80px;
}
}

/* オープンイングアニメーションarchives */
.archives-title-right01 { 
    position: fixed; 
	top: 80px; 
	right: 35px;
    z-index: 888;
}
@media screen and (max-width: 1112px) {
	.archives-title-right01 {  
	top: 80px; 
	right: 20px;
  
}
}
@media screen and (max-width: 834px) {
	.archives-title-right01 { 
	top: 80px; 
	right: 20px;
 
}
}
@media screen and (max-width: 768px) {
	.archives-title-right01 { 
	top: 50px; 
	right: 15px;
}
}
@media screen and (max-width: 500px) {
	.archives-title-right01 { 
	top: 50px; 
	right: 5px;
}
}
.archives-title-right01 img { 
    width: 80px;
}
@media screen and (max-width: 1112px) {
	.archives-title-right01 img { 
    width: 60px;
}
}
@media screen and (max-width: 834px) {
	.archives-title-right01 img { 
    width: 50px;
}
}
@media screen and (max-width: 500px) {
	.archives-title-right01 img { 
    width: 38px;
}
}

/* オープンイングアニメーションarchives */
.history-title-right01 { 
    position: absolute; 
	top: 80px; 
	right: 35px;
    z-index: 888;
}
@media screen and (max-width: 1112px) {
	.history-title-right01 { 
	top: 80px; 
	right: 20px;
  
}
}
@media screen and (max-width: 834px) {
	.history-title-right01 { 
	top: 80px; 
	right: 20px;
 
}
}
@media screen and (max-width: 768px) {
	.history-title-right01 { 
	top: 50px; 
	right: 15px;
}
}
@media screen and (max-width: 500px) {
	.history-title-right01 { 
	top: 50px; 
	right: 15px;
}
}
.history-title-right01 img { 
    width: 80px;
}
@media screen and (max-width: 1112px) {
	.history-title-right01 img { 
    width: 55px;
}
}
@media screen and (max-width: 834px) {
	.history-title-right01 img { 
    width: 50px;
}
}
@media screen and (max-width: 500px) {
	.history-title-right01 img { 
    width: 30px;
}
}


.profile-area{
	position: relative;

}
@media screen and (max-width: 1112px) {
	.profile-area{
	position: relative;
    background-color: #171B1C;
}
}
.profile-area h1{
	text-align: left;
	font-size: 1.6vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    color: #CCCCCC;
    font-weight: 100;
    z-index: 999;
}
@media only screen and (max-width: 1112px) {
.profile-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
}
@media only screen and (max-width: 834px) {
.profile-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
} 
@media only screen and (max-width: 480px) {
.profile-area h1{
	text-align: left;
	font-size: 5.6vw;
	letter-spacing: 0.01em;
}
}
.profile-area h2{
	text-align: left;
	font-size: 24px;
    color: #CCCCCC;
    font-weight: 100;
}
.profile-area h3{
	text-align: left;
	font-size: 18px;
    color: #CCCCCC;
    font-weight: 100;
}
@media only screen and (max-width: 480px) {
.profile-area h3{
	text-align: left;
	font-size: 16px;
    font-weight: 100;
}
} 
.profile-area p{
	text-align: left;
	font-size: 15px;
    color: #CCCCCC;
    font-weight: 100;
    letter-spacing: 0.05em;
    line-height: 24px;
}
@media only screen and (max-width: 480px) {
.profile-area p{
	font-size: 12px;
    line-height: 20px;

}
} 
.profile-area .caption p{
	text-align: right;
	font-size: 12px;
    color: #C8C8C8;
    font-weight: 100;
    padding-top: 5px;
    position: relative;
}
.profile-area .imgbox{
    text-align: right;
}
.profile-area .imgbox img{
	width: 70%;
}

/* --
@media only screen and (min-width: 1023px) {
.section1, .section3, .section5 { background-attachment: fixed; }
}*/

/* section1 pc */
.section-profile {
    width: 100%;
	height: 100%; 
	background: url("../img_profile/profile-kuro02.jpg") no-repeat; 
	background-size: cover;
	background-position:center bottom;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}
/* section1 sp_tate */
@media screen and (max-width: 1112px){
.section-profile { 
    background: url("") no-repeat;
	background-color: #171B1C;
}
}
/* section1 sp_tate */
@media screen and (max-width: 500px){
.section-profile { 
    background: url("") no-repeat;
	background-color: #171B1C;
}
}

.company-area{
	position: relative;
    background-color000: #444;
}
@media screen and (max-width: 834px){
.company-area{
	position: relative;
    background-color: #fff;
}
}
.company-area h1{
	text-align: left;
	font-size: 1.6vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    color: #A8A8A8;
    font-weight: 100;
    z-index: 999;
}
@media only screen and (max-width: 1112px) {
.company-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
}
@media only screen and (max-width: 834px) {
.company-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
} 
@media only screen and (max-width: 480px) {
.company-area h1{
	text-align: left;
	font-size: 5.6vw;
	letter-spacing: 0.01em;
}
}
.company-area h2{
	text-align: left;
	font-size: 24px;
    color: #A8A8A8;
    font-weight: 100;
}
.company-area h3{
	text-align: left;
	font-size: 20px;
    color: #A8A8A8;
    font-weight: 100;
}
@media only screen and (max-width: 480px) {
.company-area h3{
	text-align: left;
	font-size: 16px;
    font-weight: 100;
}
} 
.company-area p{
	text-align: left;
	font-size: 14px;
    color: #A8A8A8;
    font-weight: 100;
    letter-spacing: 0.1em;
}
@media only screen and (max-width: 480px) {
.company-area p{
	font-size: 12px;

}
} 
.company-area .caption p{
	text-align: right;
	font-size: 12px;
    color: #C8C8C8;
    font-weight: 100;
    padding-top: 5px;
    position: relative;
}
.company-area .imgbox{
    text-align: right;
}
.company-area .imgbox img{
	width: 70%;
}
.section-company {
    width: 100%;
	height: 100%; 
	background: url("../img_company/company-kk01.png") no-repeat; 
	background-size: cover;
	background-position:left center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}
/* section1 tb_yoko */
@media (min-width: 737px) and (max-width: 1024px) and (orientation:landscape) {
	.section-company { 
	width: 100%; 
	
}
}
/* section1 tb_tate */
@media (min-width: 737px) and (max-width: 1024px) and (orientation:portrait) {
	.section-company { 
	height: 100%; 
	background: url(image_back/bc01_tb.jpg) no-repeat; 
	
}
}
/* section1 sp_tate */
@media screen and (max-width: 500px){
.section-company { 
	height: 100%; 
	background: url(image_back/bc01_sp.jpg) no-repeat; 
	
}
}



.section-company02 {
    width: 100%;
	height: 100%; 
	background: url("../img_company/company-kk02.png") no-repeat; 
	background-size: cover;
	background-position:left center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}
/* section1 tb_yoko */
@media (min-width: 737px) and (max-width: 1112px) and (orientation:landscape) {
	.section-company02 { 
	width: 100%;
	height: 100%;
	background: url("../img_company/company-kk02.png") no-repeat; 
}
}
/* section1 sp_tate */
@media screen and (max-width: 500px){
.section-company02 { 
	height: 100%; 
	background: #fff; 
	
}
}

.contact-area{
	position: relative;

}

.contact-area h1{
	text-align: left;
	font-size: 1.6vw;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    color: #A8A8A8;
    font-weight: 100;
    z-index: 999;
}
@media only screen and (max-width: 1112px) {
.contact-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
}
@media only screen and (max-width: 834px) {
.contact-area h1{
	font-size: 2.4vw;
	letter-spacing: 0.01em;
}
} 
@media only screen and (max-width: 480px) {
.contact-area h1{
	text-align: left;
	font-size: 5.6vw;
	letter-spacing: 0.01em;
}
}
.contact-area h2{
	text-align: center;
	font-size: 18px;
    color: #555;
    font-weight: 400;
}
.contact-area h3{
	text-align: center;
	font-size: 16px;
    color: #555;
    font-weight: 400;
}
@media only screen and (max-width: 480px) {
.contact-area h3{
	text-align: center;
	font-size: 16px;
    font-weight: 400;
}
} 
.contact-area p{
	font-size: 14px;
    color: #555;
    font-weight: 100;
    letter-spacing: 0.05em;
}
@media only screen and (max-width: 480px) {
.contact-area p{
	font-size: 12px;

}
}


.gradation {
	width: 100%;
	height: auto;/*100vh*/
	background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
    z-index: -999;
    
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.footer-area{
	position: relative;
    background-color: #fff;
    width: 100%;
    height: auto;
    bottom: 0;
    z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}
.footer-area img{
	height: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
@media screen and (max-width: 500px){
.footer-area img{
	height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}
@media screen and (max-width: 320px){
.footer-area img{
	height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}
.footer-right{
    position: relative;
    float: right;
    background-color: #fff;
}
@media screen and (max-width: 500px){
.footer-right{
    width: 100%;
    text-align: right;
    float: right;
}
}
.footer-right p{
    position: relative;
	font-size: 12px;
    float: left;
    color: #888;
    padding-right: 20px;
    padding-top: 25px;
}
@media screen and (max-width: 500px){
.footer-right p{
    color: #888;
    padding-left: 10px;
    padding-top: 17px;

}
}




#office{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
    width: 100%;
	height: 100vh;
    overflow: hidden;/*はみ出しているところを隠す*/
}

#office-img{
	position: fixed;/*背景を固定するためfixedをかける------------使ってない*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img_office/01.jpg") no-repeat top center;/*背景画像の設定*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
    

}
@media screen and (max-width: 834px){
#office-img { 
	background: url("../img_office/01sp.jpg") no-repeat top center;/*背景画像の設定*/
}
}

#container-office{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
    
    /*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img_office/02.png") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
	
}
@media screen and (max-width: 1112px){
#container-office { 
	background: url("../img_office/02.png") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
}
}

@media screen and (max-width: 834px){
#container-office { 
	height: 100%; 
	background: #fff; 
	
}
}

#container-office03{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
    
    /*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img_office/03.png") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
	
}
@media screen and (max-width: 1112px){
#container-office03 { 
	background: url("../img_office/03.png") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
}
}

@media screen and (max-width: 834px){
#container-office03 { 
	background: url("../img_office/03sp.png") no-repeat top center;/*背景画像の設定*/
	background-size:cover;
	
}
}

#container-office-kara{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
    
    /*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img_office00/02.png") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
	
}


#slider-office{
    /*headerを全画面で見せる*/
	width:100%;
	height: 100vh;
	position: relative;
    
} 
#slider-office:before{
    /*header の疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	/*背景画像設定*/
	background:url("../img_slid/img_07a.jpg") no-repeat center;
	background-size:cover;
}

#slider-statements{
    /*headerを全画面で見せる*/
	width:100%;
	height: 100vh;
	position: relative;
    
} 
#slider-statements:before{
    /*header の疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	/*背景画像設定*/
	background:url("../img_slid02/01.jpg") no-repeat center;
	background-size:cover;
}

.bc-shadow01{
    position: absolute; 
    width: 100%;
	background: url("../img_statements/bc-shadow01.jpg") no-repeat top center;/*背景画像の設定*/
	background-size: cover;
	background-position:left center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}





#slider-office00 {/*オーバー*/
    position: relative;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img_office/01.jpg") no-repeat top center;/*背景画像の設定*/
	background-size:cover;
	transform-origin00:center;/*変化する基点を中心からに設定*/
}
@media only screen and (max-width: 1112px) {
    #slider-office00 {
    width: 100%;
    height: 96vh;
}
} 
@media only screen and (max-width: 834px) {
    #slider-office00 {
    width: 100%;
    height: 98vh;
}
} 
@media only screen and (max-width: 500px) {
    #slider-office00 {
    width: 100%;
    height: 90vh;
}
} 









/*========= レイアウトのためのCSS ===============*/
.statements-area{
	position: relative;
    width: 100%;
    text-align: left;
}
.statements-area h1{
	color: #000;
    
}
.statements-area h2{
	color: #000;
    text-align: left;
	font-size: 19px;
	letter-spacing: 0.01em;
    font-weight: 600;
}
@media only screen and (max-width: 500px) {
    .statements-area h2{
	font-size: 18px;
    letter-spacing: 0.00em;
}
} 
.statements-area h3{
	color: #000;
    text-align: left;
	font-size: 16px;
	letter-spacing: 0.01em;
    font-weight: 600;
}
@media only screen and (max-width: 500px) {
    .statements-area h3{
	font-size: 14px;
}
}
.statements-area h4{
	color: #000;
    text-align: left;
	font-size: 12px;
	letter-spacing: 0.01em;
    padding-top: 10px;
    font-weight: 100;
}

.statements-area p{
	color: #000;
    letter-spacing: 0.05em;
}
@media only screen and (max-width: 500px) {
    .statements-area p{
	font-size: 12px;
    letter-spacing: 0.00em;
}
} 



.studio-area{
	position: relative;
    width: 100%;
    text-align: left;
}
.studio-area h1{
	color: #000;
    
}
.studio-area h2{
	color: #555;
    text-align: left;
	font-size: 22px;
	letter-spacing: 0.01em;
    font-weight: 600;
    border-top: solid 1px #888;
    padding-top: 20px;

}
@media only screen and (max-width: 500px) {
    .studio-area h2{
	font-size: 18px;
    letter-spacing: 0.00em;
}
} 
.studio-area h3{
	color: #555;
    text-align: left;
	font-size: 16px;
	letter-spacing: 0.01em;
    font-weight: 600;
}
@media only screen and (max-width: 500px) {
    .studio-area h3{
	font-size: 14px;
}
}
.studio-area h4{
	color: #555;
    text-align: left;
	font-size: 16px;
	letter-spacing: 0.01em;
    padding-top: 10px;
    font-weight: 600;
}
.studio-area a{
	color00: #555;
    
}

.studio-area p{
	color: #555;
    letter-spacing: 0.05em;
}
@media only screen and (max-width: 500px) {
    .studio-area p{
	font-size: 12px;
    letter-spacing: 0.00em;
}
}

.studio-area p .bold{
    font-weight: 600;
}
@media only screen and (max-width: 500px) {
    .studio-area p .bold{
	font-size: 12px;
    letter-spacing: 0.00em;
    font-weight: 600;
}
}


.history-area{
	position: relative;
    width: 100%;
    background-color:#2E4041;
}
.history-area h1{
	color: #fff;
}
.history-area p{
	color: #fff;
}

.archives-area{
	position: relative;
    width: 90%;
}
@media only screen and (max-width: 500px) {
    .archives-area{
	position: relative;
    width: 88%;
}
} 

.office-area{
	position: relative;
	z-index:1;
    /*以下はレイアウトのための記述*/
	background000:#fff;
	
}
.office-area h1{
	color: #fff;
}
.office-area h2{
	color: #fff;
    font-size: 22px;
    letter-spacing: 0.05em;
    font-weight: 100;
    
    
}
.office-area p{
	color: #fff;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 24px;
}
@media screen and (max-width: 500px){
.office-area p{
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 18px;
}
}
.addres-box{
    height: 90vh;
}

@media screen and (max-width: 834px){
.addres-box{
    height: 20vh;
}
}
.height-center{
	position: relative;
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 834px){
.height-center{
	position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
}
.bc-history{
    width: 100%;
	background: url("../img_history/bc_historyline01.png") ;/*使ってない*/
	background-size: cover;
	background-position:top right;
	background-repeat:repeat;
	-moz-background-size:cover;
    background-attachment: fixed;
}

.history-line{
    background-image: url("../img_history/bc_historyline02.png") ;/*使ってない*/
    background-size: cover;
	background-position:top right;
	background-repeat:repeat;
	-moz-background-size:cover;
    background-attachment: fixed;
}
.history-line03{
    background-image: url("../img_history/bc_historyline03.png") ;/*使ってない*/
    background-repeat:repeat-y;/*縦方向への繰り返し指定*/
    background-position:right top;/*位置指定*/
}
.history-right01 { 
    position:absolute; 
	top: 80px; 
	right: 3%;
    z-index: 888;
}
@media (max-width: 500px) {
.history-right01 { 
    position:absolute; 
	top: 56px; 
	right: 3%;
    z-index: 888;
}
} 
/*tima参考*/
.tate-text02 {
  float: right;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    
}
.mk-title {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    font-weight: 100;
	font-style: normal;
    font-size: 38px;
	font-size: 3.8rem;
	line-height: 3.8rem;
    letter-spacing: 1px;
    float: left;
    padding-right: 20px;
    color: #fff;
}
.kurokawa-j-title {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    font-weight: 100;
	font-style: normal;
    font-size: 38px;
	font-size: 3.8rem;
	line-height: 3.8rem;
    letter-spacing: 1px;
    float: left;
    padding-right: 20px;
    color: #000;
}

.kurokawa-archives-title {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    font-weight: 100;
	font-style: normal;
    font-size: 38px;
	font-size: 3.8rem;
	line-height: 3.8rem;
    transform: rotate(.03deg);
    letter-spacing: 2px;
    float: right;
    padding-right: 20px;
    color: #888;
}
@media (max-width: 1280px) {
.kurokawa-archives-title {
    font-size: 36px;
	font-size: 3.6rem;
	line-height: 3.6rem;
    letter-spacing: 2px;
    padding-right: 10px;
}
}
@media (max-width: 834px) {
.kurokawa-archives-title {
    font-size: 36px;
	font-size: 3.6rem;
	line-height: 3.6rem;
    letter-spacing: 2px;
    padding-right: 5px;
}
}
@media (max-width: 500px) {
.kurokawa-archives-title {
    font-size: 20px;
	font-size: 2.0rem;
	line-height: 2.0rem;
    letter-spacing: 2px;
    padding-right: 10px;
}
} 

.kurokawa-history-title {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Times New Roman", serif;
    font-weight: 100;
	font-style: normal;
    font-size: 38px;
	font-size: 3.8rem;
	line-height: 3.8rem;
    transform: rotate(.03deg);
    letter-spacing: 1px;
    float: right;
    padding-right: 20px;
    color: #fff;
}
@media (max-width: 500px) {
.kurokawa-history-title {
    font-size: 22px;
	font-size: 2.2rem;
	line-height: 2.2rem;
    letter-spacing: 1px;
    padding-right: 10px;
}
} 



.four-column-child-timahome {
	display: inline-block;
	padding: 0px;
	width: 25%;
	box-sizing: border-box;
    border-left: solid 1px #555;
    height: 350px;
    position: relative;
}
/*tima参考*/
.bc-office{/*つかってない*/
    background: #243650;
}
.bc-office-img{/*つかってない*/
    width: 100%;
	background: url("../img_office/03sp.png") no-repeat top left;/*背景画像の設定*/
	background-size: cover;
	background-position:top center;
	background-repeat:repeat;
	-moz-background-size:cover;
    background-attachment: fixed;
}
.bc-green{
    width: 100%;
	background: url("../img_statements/bc-green01.jpg") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
}
.bc-green01{
	background: #2E4041;
}
.bc-green02{
	background: #4C5F60;
}
.bc-yellow{
    width: 100%;
	background: url("../img_statements/bc-yellow.jpg") no-repeat top left;/*背景画像の設定*/
	background-size:cover;
	background00: #0E2022-00000000;
}
.bc-mist{
    width: 100%;
	background: url("../video/mist01.jpg") no-repeat top center;/*背景画像の設定*/
	background-size: cover;
	background-position:top center;
	background-repeat:no-repeat;
	-moz-background-size:cover;
    background-attachment: fixed; 
}

#video-area-office{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
#video-area-statements{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}
#office-move{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
}
#statements-move{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 







/* contact entry*/

.entry-inner-box {
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
		padding-left: 0;
		width: 900px;
	}
@media (max-width: 834px) {
.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%;
	}
}


/* class - table form */
.entry-form {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
.entry-form textarea {
	resize: vertical;
	width: 100%;
}
.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: #555;
}
.entry-form dd {
	display:table-cell;
	padding: 0 20px;
	text-align: left;
}

@media (max-width: 735px) {
	entry-form dl {
		display: block;
	}
	.entry-form dd {
		display: block;
		text-align: left;
	}
	.entry-form dt {
		display: block;
		width: 100%;
		border-bottom: dotted 0px #dcdcdc;
		border-right: none;
		text-align: left;
	}
}
.to-block {
	display: inline-block;
}
.pl20-disappear {
	padding-left: 20px;
}
@media (max-width: 735px) {
	.pl20-disappear {
		padding-left: 0;
	}
}
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;
	}
}

.quadrant input[type="text"] {
	margin-right: 5px;
	width: 100px;
}
@media (max-width: 735px) {
	.quadrant input[type="text"] {
		max-width: 22%;
	}
}

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 */

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;
	}
}
@media (max-width: 480px) {
	input[type="reset"], input[type="submit"] {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
		margin-left: 0;
	}
}
.pr20-toggle {
	padding-right: 20px;
}
@media (max-width: 735px) {
	.to-block {
		display: block;
	}
	.pr20-toggle {
		padding-right: 0;
	}
}
.input-text-short {
	width: 100px;
	max-width: 25% !important;
}
@media (max-width: 735px) {
	.input-text-short {
		max-width: 25% !important;
	}
}
.input-text-wide {
	width: 500px;
	max-width: 100% !important;
}
.input-text-tel {
	width: 350px;
	max-width: 100% !important;
}
.input-text-middle {
	width: 350px;
	max-width: 100% !important;
}
@media (max-width: 735px) {
	.entry-display-ltob {
		display: block;
	}
}

.send-bottun input.red-bg {
	padding: 10px 60px;
	background: #ff0000;
	border: solid 1px #ff0000;
	color: #fff;
}
.send-bottun02 input.red-bg {
	padding: 10px 60px;
	background: #fff;
	border: solid 1px #ff0000;
	color: #ff0000;
}
.check-the-input {
	padding-bottom: 3px;
}
.check-ok {
	color: #2CA635;
}
.check-error {
	color: #ff0000;
}
.re-input {
	padding-right: 6px;
	padding-bottom: 6px;
}
.re-input input {
	text-align: center;
}
.re-input input.orange {
	font-weight: bold;
	padding: 10px !important;
	width: 50px !important;
}



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

.quadrant input[type="text"] {
	margin-right: 5px;
	width: 100px;
}
@media (max-width: 735px) {
	.quadrant input[type="text"] {
		max-width: 22%;
	}
}
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;
	}
}
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;
	}
}
@media (max-width: 480px) {
	input[type="reset"], input[type="submit"] {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
		margin-left: 0;
	}
}
.pr20-toggle {
	padding-right: 20px;
}
@media (max-width: 735px) {
	.to-block {
		display: block;
	}
	.pr20-toggle {
		padding-right: 0;
	}
}
.input-text-short {
	width: 100px;
	max-width: 25% !important;
}
@media (max-width: 735px) {
	.input-text-short {
		max-width: 25% !important;
	}
}
.input-text-wide {
	width: 500px;
	max-width: 100% !important;
}
.input-text-tel {
	width: 350px;
	max-width: 100% !important;
}
.input-text-middle {
	width: 350px;
	max-width: 100% !important;
}
@media (max-width: 735px) {
	.entry-display-ltob {
		display: block;
	}
}

.send-bottun01 input.red-bg {
	padding: 10px 60px;
	background: #ff0000;
	border: solid 1px #ff0000;
	color: #fff;
}
.send-bottun02 input.red-bg {
	padding: 10px 60px;
	background: #fff;
	border: solid 1px #ff0000;
	color: #ff0000;
}
.check-the-input {
	padding-bottom: 3px;
}
.check-ok {
	color: #2CA635;
}
.check-error {
	color: #ff0000;
}
.re-input {
	padding-right: 6px;
	padding-bottom: 6px;
}
.re-input input {
	text-align: center;
}
.re-input input.orange {
	font-weight: bold;
	padding: 10px !important;
	width: 50px !important;
}



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

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

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





.clear {
  clear: both;
  display: block;
}



/* ベース　テキスト */
.color-red {
	color: #ff0000;
}
.color-gry {
	color: #888;
}
.color-black {
	color: #000;
}
.color-white {
	color: #fff;
}
.color-orange {
	color: #EE7B02;
}
.color-blue {
	color: #384DB0;
}
.backcolor-orange {
	background-color: #EE7B02;
}
.backcolor-white {
	background-color: #fff;
}
.backcolor-lightblue {
	background-color: #384DB0;
}
.color-lightgry {
	color: #D8D8D8;
}
.text-small {
	font-size: 12px;
    font-size: 12em;
}
.backcolor-lightgry{
	background: #EEEEEE;
}
.backcolor-gry{
	background: #8B8B8B;
}
.navi-line {
    border-right: solid 1px ;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    max-height: 1px;
  }
.navi-line00 {
    font-size00: 20px;
  }
.font-l {
    font-size: 20px;
  }
.text-right{
    text-align: right;
  }
.text-left{
    text-align: left;
  }


.spacing10 {word-spacing: 10px;}

.mt10 {
	margin-top: 10px;
}
.mb10 {
	margin-bottom: 10px;
}
.mt20 {
	margin-top: 20px;
}

.mt40 {
	margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.mt80 {
	margin-top: 80px;
}
.mt250 {
	margin-top: 250px;
}
@media (max-width: 834px) {
	.mt250 {
	margin-top: 100px;
}
}
.mb80 {
	margin-bottom: 80px;
}
.mb150 {
	margin-bottom: 150px;
}
.pb-none {
	padding-bottom: 0;
}
.pt1 {
	padding-top: 1px;
}
.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;
}
.p40 {
	padding: 40px;
}
.pt40 {
	padding-top: 40px;
}
.pt50 {
	padding-top: 50px;
}
.pt80 {
	padding-top: 80px;
}
.pt100 {
	padding-top: 100px;
}
.pt200 {
	padding-top: 200px;
}
@media (max-width: 414px) {
	.pt250 {
	padding-top: 100px;
}
}
.pr40 {
	padding-right: 40px;
}
.pb40 {
	padding-bottom: 40px;
}
.pb80 {
	padding-bottom: 80px;
}
.pb100 {
	padding-bottom: 100px;
}
.pl40 {
	padding-left: 40px;
}
.pt80 {
	padding-top: 80px;
}
.bt-single-gry {
	border-top: solid 1px #888888;
}
.bb-single-gry {
	border-bottom: solid 1px #555;
}
.btb-single {
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}
.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;
}
.bb-single-orange {
	border-bottom: solid 1px #EE7B02;
}
.ba-single-orange {
	border: solid 1px #EE7B02;
}
.bt-thick-orange {
	border-top: solid 2px #EE7B02;
}
.bt-thick-red {
	border-top: solid 2px #ff0000;
}
.bb-thick-orange {
	border-bottom: solid 2px #EE7B02;
}

.va-top {
	vertical-align: top;
}
.va-middle {
	vertical-align: middle;
}
.va-bottom {
	vertical-align: bottom;
}


.text14 {
	font-size: 14px;
	font-size: 1.4rem;
}
.text16 {
	font-size: 16px;
	font-size: 1.6rem;
}
@media (max-width: 767px) {
	.text16 {
	font-size: 14px;
	font-size: 1.4rem;
	}
}
@media (max-width: 414px) {
	.text16 {
	font-size: 12px;
	font-size: 1.2rem;
	}
}


.text-middle {
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 3.0rem;
}
@media (max-width: 767px) {
	.text-middle {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2.2rem;
	}
}
@media (max-width: 414px) {
	.text-middle {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 2.2rem;
	}
}

@media (max-width: 1120px) {
	.text-larger {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2.8rem;
	}
}
.text-larger {
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 4.5rem;
}
@media (max-width: 1120px) {
	.text-larger {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2.8rem;
	}
}

@media (max-width: 768px) {
	.text-larger {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2.8rem;
	}
}
@media (max-width: 414px) {
	.text-larger {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 2.8rem;
	}
}
.text-large {
	font-size: 33px;
	font-size: 3.3rem;
	line-height: 3.3rem;
}
@media (max-width: 760px) {
	.text-large {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 2.0rem;
	}
}
@media (max-width: 414px) {
	.text-large {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 2.0rem;
	}
}
.text-center {
	text-align: center;
}
.text-bottom {
	text-align: bottom;
}

/* kk-profile-style */
.kk-profile-style {
	display: table;
	table-layout: fixed;
	width: 100%;
}
@media screen and (max-width: 480px) {
	.kk-profile-style {
		display: table;
		padding: 0px;
		margin-bottom: 0px;
	}
}
.kk-profile-dt {
	display: table-cell;
	padding-right: 0px;
	padding-left: 0px;
	border-right: solid 0px #E8E8E8;
	width: 70px;
	box-sizing: border-box;
	text-align: left;
	vertical-align: top;
}
@media screen and (max-width: 480px) {
	.kk-profile-dt {
		display: table-cell;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		border-right: none;
		border-bottom: solid 0px #E8E8E8;
		width: 16%;
		text-align: left;
	}
}
.kk-profile-dd {
	display: table-cell;
	padding-right: 0px;
	padding-left: 0px;
	width: 100%;
	vertical-align: top;
}
@media screen and (max-width: 480px) {
	.kk-profile-dd {
        display: table-cell;
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;
		width: 80%;
	}
}
/* 矢印 */
.dli-chevron-round-right {
  display: inline-block;
  vertical-align: middle;
  color: #888;
  line-height: 1;
  position: relative;
  width: 0.6em;
  height: 0.6em;
  transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-round-right::before, .dli-chevron-round-right::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.dli-chevron-round-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.dli-chevron-round-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
/* /矢印 */



.j-text-box-center {
	z-index: 100;
	margin-left: auto;
	margin-right: auto;
	width: 100%;

}
.j-text-box-center-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width:50%;
}
@media (max-width: 1024px) {
	.j-text-box-center-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width:70%;
}
}
@media (max-width: 414px) {
	.j-text-box-center-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width:80%;
}
}