@charset "utf-8";

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

body000{
    word-break: break-all;
}

/* HEADER */

#header000{
	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%);
    text-align: center;
    z-index: 200;
}





.sc-text-box-center {
	z-index: 100;
	margin: 0 auto;
	width: 100%;
    height00: 100%;
}
.sc-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%);
    text-align: center;
    z-index: 200;
}
@media (max-width: 834px) {
	.sc-text-box-center-inner {
	top: 50%;
	left: 50%;
	width: 90%;
}
}
.sc-text-box-center img{
	width: 41%;
}
@media only screen and (max-width: 834px) {
    .sc-text-box-center img{
	width: 41%;
}
}




/* パソコンで見たときは"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; }
}

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

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

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

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

/*全体のエリア設定*/

.ms-section{
	color:#fff;
	padding:20px;
}

.ms-section a{
	color:#fff;
}

h1{
	font-size:1.5rem;
}

h2{
	font-size:1.3rem;
	margin:0 0 20px 0;
	text-align: center;
}

p{
	margin:0 0 20px 0;
}

/*右にある丸ナビゲーション色*/

#multiscroll-nav span{
	background:transparent!important;
	border-color:#fff!important;
}

/*右にある丸のナビゲーション現在地色*/

#multiscroll-nav li .active span{
	background:#fff!important;
}

/*右上のナビゲーション*/

#menu li {
	display:inline-block;
	margin: 10px;
}

#menu li a{
	text-decoration:none;
	color: #fff;
	padding: 5px 10px;
	display:block;
	border-radius: 10px;
}

#menu li.active a{
	color: #666;
}

/*leftエリア画像設定*/

#left1{
	background:url("../img/a-frm001.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left1{
	background:url("../img/a-frm001sp.jpg") no-repeat center;
}
}

#left2{
	background:url("../img/a-frm002.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left2{
	background:url("../img/a-frm002sp.jpg") no-repeat center;
}
}

#left3{
	background:url("../img/a-frm003.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left3{
	background:url("../img/a-frm003sp.jpg") no-repeat center;
}
}

#left4{
	background:url("../img/a-frm004.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left4{
	background:url("../img/a-frm004sp.jpg") no-repeat center;
}
}

#left5{
	background:url("../img/a-frm005.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left5{
	background:url("../img/a-frm005sp.jpg") no-repeat center;
}
}

#left6{
	background:url("../img/a-frm006.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #left6{
	background:url("../img/a-frm006sp.jpg") no-repeat center;
}
}



/*右エリア画像設定*/

#right1{
	background:url("../img/a-xyz001.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right1{
	background:url("../img/a-xyz001sp.jpg") no-repeat center;
}
}

#right2{
	background:url("../img/a-xyz002.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right2{
	background:url("../img/a-xyz002sp.jpg") no-repeat center;
}
}

#right3{
	background:url("../img/a-xyz003.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right3{
	background:url("../img/a-xyz003sp.jpg") no-repeat center;
}
}

#right4{
	background:url("../img/a-xyz004.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right4{
	background:url("../img/a-xyz004sp.jpg") no-repeat center;
}
}

#right5{
	background:url("../img/a-xyz005.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right5{
	background:url("../img/a-xyz005sp.jpg") no-repeat center;
}
}

#right6{
	background:url("../img/a-xyz006.jpg") no-repeat center;
	background-size:cover;
}
@media only screen and (max-width: 834px) {
    #right6{
	background:url("../img/a-xyz006sp.jpg") no-repeat center;
}
}




/*＝＝＝＝＝＝＝＝＝＝＝タブレット以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:10px){
	
#header{
	justify-content: center;
}

/*全体のボックスについている余白をリセット*/
.ms-section{
	padding:0;
}

/*天地中央になっている見せ方を上ぞろえに上書き*/
.ms-tableCell{
	vertical-align:top;
}

/*右上ナビゲーションと右エリア非表示*/
#menu,
.ms-right{
	display: none;
}

/*左エリアを横幅100%にして画像＋テキストを出す設定*/
.ms-left{
	width:100%!important;
}

 /*左エリア上部画像設定*/
.sp-top{
	height:50%;
	margin:0 0 0px 0;
}
	


/*左エリア下部テキスト余白設定*/
.sp-bottom{
    height:50%;
	padding:0px;
}
	
}






#left1 .sp-top{
	background:url("../img/a-frm001.jpg") no-repeat center;
	background-size:cover;
}

#left2 .sp-top{
	background:url("../img/a-frm002.jpg") no-repeat center;
	background-size:cover;
}

#left3 .sp-top{
	background:url("../img/a-frm003.jpg") no-repeat center;
	background-size:cover;
}
	
#left4 .sp-top{
	background:url("../img/a-frm004.jpg") no-repeat center;
	background-size:cover;
}

#left5 .sp-top{
	background:url("../img/a-frm005.jpg") no-repeat center;
	background-size:cover;
}

#left6 .sp-top{
	background:url("../img/a-frm006.jpg") no-repeat center;
	background-size:cover;
}




#left1 .sp-bottom{
	background:url("../img/a-xyz001.jpg") no-repeat center;
	background-size:cover;
}
#left2 .sp-bottom{
	background:url("../img/a-xyz002.jpg") no-repeat center;
	background-size:cover;
}
#left3 .sp-bottom{
	background:url("../img/a-xyz003.jpg") no-repeat center;
	background-size:cover;
}
#left4 .sp-bottom{
	background:url("../img/a-xyz004.jpg") no-repeat center;
	background-size:cover;
}
#left5 .sp-bottom{
	background:url("../img/a-xyz005.jpg") no-repeat center;
	background-size:cover;
}
#left6 .sp-bottom{
	background:url("../img/a-xyz006.jpg") no-repeat center;
	background-size:cover;
}




#slideshow-chan000000000 {
   height: 100vh;
   background-attachment: fixed; 
    background-size: cover;
    background-position: center center;
    background: url("../img/1010cont01.png") no-repeat; 
   
}
.j-text-box-center {
	z-index: 9999;
	margin: 0 auto;
	width: 100%;
    height00: 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%);
    text-align: center;
    z-index: 200;
}
.j-text-box-center-inner img {
	
	width:100%;

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

/* fade btn　*/
.fade {
	opacity:1;
    -webkit-transition: 0.5s ease-in-out;
       -moz-transition: 0.5s ease-in-out;
         -o-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
}
.fade:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
} 
/* fade btn　*/
.fade-btn {
	opacity:1;
    
    transition: 0.5s;
}
.fade-btn:hover {
    transform: scale(1.01,1.01);
    opacity: 0.6;
    filter: alpha(opacity=60);
}