@charset "UTF-8";
/* CSS Document */


/* //// 全体のスタイル ////*/
*{
	margin: 0px;
	padding: 0px;	
  box-sizing: border-box;
}

body{
  background:#fff;
  font-family: 'Noto Serif JP', serif;
	color: #000;
	font-size:1rem;
	line-height:1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

@media screen and (max-width:768px) {
body{
	font-size:0.8rem;
	}
}

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

a{
	color: #333;
  outline: none;
}

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

/*========= ここまで全体のスタイル ===============*/


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash,
#splash02{
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background:#fff;
	text-align:center;
	color:#555;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
  z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #000;
}


/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}


#fade{
  animation: fadeIn 0.2s ease 0.6s 1 normal;
    }
    
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
        0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
        100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
    }


/*========= 上部固定させるためのCSS ==============*/

/* area */
#container{
  position: relative;
  overflow-x: hidden;
}

#header{
  position:fixed;
  top:0;
  left:0;
  width:24%;
  height: 100vh;
  background:#efedeb;
  padding: 150px 0 0 0;
}

.header-area{
  position:fixed;
  bottom:0;
  left:3%;
  width:18%;
  height: 48%;
  border-left: 1px solid #000;
  padding-left: 2%;
}

h1{
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color:#3e2058;
  font-family:"Arial Black", Gadget, "sans-serif";
  padding: 0 0 8% 0;  
}

.randomAnime {
	visibility: hidden;
}


#header p{
  font-size: 1.3rem;  
}

@media screen and (max-width:1300px) {
h1{
  font-size: 3.0rem;
}
}
@media screen and (max-width:1100px) {
h1{
  font-size: 2.8rem;
}
}
@media screen and (max-width:980px) {
.header-area{
  left:3%;
}
h1{
  font-size: 2.5rem;
  letter-spacing: 0;
}
#header p{
  font-size: 1.1rem;
  line-height: 1.2em;
}
}
@media screen and (max-width:768px) {
h1{
  font-size: 2.4rem;
  letter-spacing: 0;
}
  #header p{
  font-size: 1.1rem;  
}
}
@media screen and (max-width:667px) {
.header-area{
  position:absolute;  
  left:8%;
  width:80%;
  height:60%;
  padding-left: 5%;
}
h1{
  font-size: 2.2rem;
  letter-spacing: 0;
}
}
@media screen and (max-width:576px) {
#header{
  width:12%;
  }
h1{
   /*以下縦書きの設定*/
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 3.1rem;
  letter-spacing: 0;
}
#header p{
  padding-top: 0.6em;
  -webkit-writing-mode:vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
}
@media screen and (max-width:414px) {

h1{
  font-size: 2.5rem;
}
#header p{
  font-size: 0.9rem;
  line-height: 1.1em;
  }
}



/* content-area */
#content-area{
  width:100%;
  padding:0 0 0 24%;
}
@media screen and (max-width:576px) {
#content-area{
  padding:0 0 0 12%;
  }
}
#main-area{
  display: flex;
  justify-content: stretch;
  flex-wrap: wrap;
  position: relative;
  padding:0;
  background:#efedeb;
  
}

small{
  position: absolute;
  left:97%;
  top:45%;
  color: #000;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  line-height: 1;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
@media screen and (max-width:980px) {
small{
  top:30%;
  }
}
@media screen and (max-width:768px) {
small{
  font-size: 0.6rem;
  top:35%;
  }
}
@media screen and (max-width:414px) {
small{
  font-size: 0.5rem;
  top:30%;
  }
}

#main-area section{
  width:32%;
  height: 100vh;
  padding:0;
  color: #fff;
}

#main-area .main-menu01{
  position:absolute;
  top:30%;
  left: 10%;
}

#main-area .disp02{
  color:lightpink;
}

#main-area section img{
  width:100%;
  height: 100vh;
}


.topimg_pc { display: block !important; }
.topimg_sp { display: none !important; }

@media screen and (max-width:1300px) {
#main-area section{
  width:32%;
  height: auto;
}
#main-area section img{
  width:100%;
  height:100%;
}  
}

#main-area section h2,
.head-title h2{
  font-family:"Arial Black", Gadget, "sans-serif";
  font-size:3.3rem;
  padding: 0 0 2px 0;
}
#main-area section h4,
.head-title h4{
  font-size:1.6rem;
  padding: 0 0 20px 0;
}

#main-area section p,
.head-title li{
  font-size: 1.0rem;
  line-height: 2em;
}

/*menu_area*/
#menu-area{
  width:100%;
  height: auto;
  padding: 10% 5% 0 5%;
  margin-bottom: 50px;
}

.head-title{
 float: left;
 width: 150px;
 height: auto;
}
@media screen and (max-width:667px) {
.head-title{
 float: none;
 width: 200px;
  margin: 0 0 10% 6%;
}
}

#menu-area:after,
#menu-area02:after{
	content:"";
	clear:both;
	display:block;
}


@media screen and (max-width:980px) {
#main-area .main-menu01{
  top:24%;
  left: 10%;
}
#main-area section h2,
.head-title h2{
  font-size:2.6rem;
  padding: 0 0 1px 0;
}
#main-area section h4,
.head-title h4{
  font-size:1.3rem;
  padding: 0 0 10px 0;
}
#main-area section p,
.head-title li{
  font-size: 0.9rem;
  line-height: 2.1em;
}
.topimg_pc { display: none !important; }
.topimg_sp { display: block !important; }
}
@media screen and (max-width:576px) {
#main-area .main-menu01{
  top:26%;
}
#main-area section h2,
.head-title h2{
  font-size:2.2rem;
}
#main-area section h4,
.head-title h4{
  font-size:1.1rem;
  padding: 0 0 6px 0;
}
#main-area section p{
  font-size: 1.0em;
  line-height: 1.7em;
}
.head-title li{
  font-size: 1.2em;
  line-height: 2em;
}

}
@media screen and (max-width:414px) {
#main-area section p{
  font-size: 0.9em;
  }
.head-title li{
  font-size: 1.1em;
  line-height: 1.4em;
}  
}




/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
  width: 380px;
  margin: 8% auto 4%;
}

.tab li a{
	display: block;
	border: 1px solid #000;
  margin:0 30px;
	padding:15px 20px;
  text-decoration-line: none;
}
.tab li a:hover{
	background:#000;
  color: #fff;
}

.tab .disp a{
  background:#000;
  color: #fff;
}

@media screen and (max-width:1300px) {
.tab{
  width: 300px;
  }
.tab li a{
  margin:0 14px 0 28px;
	padding:12px 16px;
}
}
@media screen and (max-width:1100px) {
.tab{
  width: 270px;
  }
.tab li a{
  margin:0 14px 0 26px;
	padding:10px 14px;
}
}
@media screen and (max-width:414px) {
.tab{
  width: 220px;
  }
.tab li a{
  margin:0 10px 0 22px;
	padding:6px 10px;
}
}

/*========= ページトップへのCSS ==============*/

#footer{
  position: relative;
  width: 100%;
  height: 50px;
  z-index: 2;
}

#page-top img{
  display: inline-block;
  width: 80px;
  height: auto;
}

#page-top a:hover{
	opacity: 0.8;
}

@media screen and (max-width:768px) {
#page-top img{
  width: 80px;
}
}
@media screen and (max-width:576px) {
#page-top img{
  width: 50px;
}
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 3%;
	bottom:6px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*　コンテンツ下テキスト　*/
.text_po{
  text-align: right;
  font-size: 0.9em;
  margin: 10px 4% 0;
}