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

/* ------------------------------
フォント指定
------------------------------ */

body {
font-family: 'Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}
input {
font-family: 'Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}
textarea {
font-family: 'Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}

/* ------------------------------
Clearfix
------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* ------------------------------
Loading
------------------------------ */

#loader-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader-bar {
  width: 400px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
}

.loader-fill {
  width: 0%;
  height: 100%;
  background: #ff9211;
  border-radius: 10px;
  position: relative;
  z-index: 1; /* バーの下層 */
}

.loader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #ff9211; /* テキスト色をオレンジに */
  opacity: 1;
  z-index: 2; /* バーの上に表示 */
}

@keyframes textFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loader-text {
  animation: blink 1s infinite;
}


/* ------------------------------
サイト共通
------------------------------ */
html,body{
    width: 100%;
	-webkit-text-size-adjust: 100%;

}

#wrapper{
	position: relative;
    margin: 0 auto;
	overflow: hidden;
}

html{
}
    
body{
	background:#fff;
	overflow: hidden;
}

h1,h2,h3{
	text-indent:-10000px;
	overflow:hidden;
}

h3{
}

h2{
}

a{
color:#a18f8b;
}

a:hover{
color:#ec6d7b;
}

a:hover{
}

strong{
	font-weight:bold;
    color:#e8437e;
}

div#contents{
}

div.inside{
	width:1060px;
	margin:0 auto;
	position:relative;	
}

p{
}

.small{
    font-size: 26px;
    margin-left: 6px;
}

@keyframes vertical {
    0% { transform:translateY(-15px); }
  100% { transform:translateY(  0px); }
}

@keyframes vertical2 {
    0% { transform:translateY(-8px); }
  100% { transform:translateY(  0px); }
}

/* ------------------------------
OP
------------------------------ */
#op {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
	z-index: 200;
  opacity: 1;
  transition: opacity .2s ease-out;
  background-color: rgba(256, 256, 256, 0.8);
  overflow: hidden;
  background-size:cover;
}

#op p{
  position: absolute;
}

#op p.op_text1{
	text-indent:-10000px;
	overflow:hidden;
	max-width: 803px;
  width: 100%;
	height: 76px;
    background: url(../images/op_text1.png);
	opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#op p.op_text2{
	text-indent:-10000px;
	overflow:hidden;
	max-width: 915px;
  width: 100%;
	height: 154px;
    background: url(../images/op_text2.png);
	opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#op p.op_text3{
	text-indent:-10000px;
	overflow:hidden;
	max-width: 839px;
  width: 100%;
	height: 358px;
    background: url(../images/op_text3.png);
	opacity: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

div.container{
  position: absolute; /* or absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: center;     /* 垂直方向中央 */
  z-index: 10; /* 背面の要素に隠れないように調整 */
  background-image: url(../images/visual_op.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}



/* ------------------------------
FRAME
------------------------------ */

/* 額縁用オーバーレイ */
#frame-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* マウス操作を妨げない */
  border: 20px solid #fff;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 9998; /* OPより前面 */
}

/* ------------------------------
TOP
------------------------------ */

#contents{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	overflow: hidden;
	background: url(../images/op_bg.png) repeat;
  }

#contents_inside{
  position: absolute; /* or absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: center;     /* 垂直方向中央 */
  z-index: 10; /* 背面の要素に隠れないように調整 */
  opacity: 0;
}

#main-visual {
  top: 50%; /* 縦中央を基準に */
  right: 0;
  left: 0; /* 中央揃えのために追加（必要なら） */
  width: auto;
  height: 100vh;
  transform: translateY(-40%); /* ← 少し下へずらす（中央より下） */
  opacity: 0;
  background-image: url(../images/visual.jpg);
  background-size: cover;
  background-position: center 55%;
  z-index: 5;
}


#contents h1{
    width: 510px;
    height: 306px;
    position: relative;
    background: url(../images/logo.png);
    background-size:cover;
    margin: 0 auto 25px;
	opacity: 0;
	top: 0;
}

div.footer{
  position: fixed; /* 画面下部に固定 */
  left: 50%;
  transform: translateX(-50%); /* 水平方向中央 */
  bottom: 60px; /* 画面下からの余白（調整可能） */
  z-index: 10;
  opacity: 0;
}

p.footer_logo{
  background:url(../images/footer_logo.png) no-repeat;
  width:92px;
  height:47px;
  text-indent:-10000px;
  overflow:hidden;
  display:block;
  position: relative;
  background-size:cover;
  margin: 0 auto 30px;
}

div.x_btn{
text-align: center;
}

p.footer_logo a{
  width:92px;
  height:47px;
  display: block;
	position: relative;
}

#footer_text{
}

p.copy{
	color: #fff;
	font-size:80%;
	position: relative;
	margin: 5px 0 0;
	letter-spacing: 0.1em;
}