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

/*　共通　*/
.ib_area {
 height:          100%;
 overflow-x:      hidden;
 background-color:#000;
}

.ib_box {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
  
 /* 左右中央寄せ */
 -webkit-box-pack:  center;
 -ms-flex-pack:     center;
 justify-content:   center;
  
 /* 上下中央寄せ */
 -webkit-box-align: center;
 -ms-flex-align:    center;
 align-items:       center;

 -webkit-flex-direction: column; /* Safari */
  flex-direction:        column; 

 padding:    0px;
 box-sizing: border-box;
  
 width:      100vw;
 height:     auto;
 min-height: 100vh;  
  
 background-size:     cover;
 background-position: center;
 background-image:    url("/images/ib/rotate.php");
}


/*　コピー切り替え　*/
@media screen and (min-width: 350px) { 
p.ib_copy {
 font-size:        1.8em;
 letter-spacing:   0.6em;
 color:            #FFF;
 -ms-writing-mode: tb-rl;
 writing-mode:     vertical-rl;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      500;
}
p.ib_sub_copy  {
 font-size:        0.6em;
 letter-spacing:   0.2em;
 color:            #FFF;
 -ms-writing-mode: tb-lr;
 writing-mode:     horizontal-tb;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      normal;
}
}
@media screen and (min-width: 700px) {
p.ib_copy  {
 font-size:        2.4em;
 letter-spacing:   0.8em;
	  margin-right: -0.8em;
 color:            #FFF;
 -ms-writing-mode: tb-lr;
 writing-mode:     horizontal-tb;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      500;
}
p.ib_sub_copy  {
	margin-top:-30px;
		margin-bottom:50px;
 font-size:        0.8em;
 letter-spacing:   0.4em;
	  margin-right: -0.4em;
 color:            #FFF;
 -ms-writing-mode: tb-lr;
 writing-mode:     horizontal-tb;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      normal;
}
}


/*　リード切り替え　*/
@media screen and (min-width: 350px) { 
p.read {
	margin-left:      auto;
	margin-right:     auto;
 font-size:        1.0em;
 letter-spacing:   0.8em;
 line-height:      2.6em;
 color:            #000;
 -ms-writing-mode: tb-rl;
 writing-mode:     vertical-rl;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      500;
}
}
@media screen and (min-width: 700px) {
p.read  {
	margin-left:      auto;
	margin-right:     auto;
 font-size:        1.6em;
 letter-spacing:   0.8em;
 line-height:      2.2em;
 color:            #000;
 -ms-writing-mode: tb-rl;
 writing-mode:     vertical-rl;
 font-family:      tbudmincho-std, sans-serif;
 font-style:       normal;
 font-weight:      500;
}
}


/*　言語切り替え　*/
.lang_area {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 width:   280px;
}
.top_lang_btn_off {
 width:               140px;
 height:              36px;
 background-color:    #000;
 border:              1px solid #000;
	border-left:         0px;
 text-align:          center;
 text-decoration:     none;
 outline:             none;
 font-size:           0.6rem;
 color:               #fff;
 line-height:         32px;
 display:             inline-block;
 position:            relative;
 cursor:              pointer;
 background:          #000;
 border-top-right-radius:            18px;
	border-bottom-right-radius:         18px;
	-webkit-border-top-right-radius:    18px;
	-webkit-border-bottom-right-radius: 18px;
	-moz-border-radius-topright:        18px;
	-moz-border-radius-bottomright:     18px;
	border-top-left-radius:             0px;
	border-bottom-left-radius:          0px;
	-webkit-border-top-left-radius:     0px;
	-webkit-border-bottom-left-radius:  0px;
	-moz-border-radius-topleft:         0px;
	-moz-border-radius-bottomleft:      0px;
}
.top_lang_btn_off::before,
.top_lang_btn_off::after {
 position: absolute;
 z-index:  -1;
 display:  block;
 content:  '';
}
.top_lang_btn_off,
.top_lang_btn_off::before,
.top_lang_btn_off::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing:    border-box;
 box-sizing:         border-box;
 -webkit-transition: all .3s;
 transition:         all .3s;
}
.top_lang_btn_off:hover {
	 background: #ffffff;
 background: rgb(255,255,255,0.6);


 border-color:     #000;
 color:            #000;
 border-left:      0px;
}
.top_lang_btn_off a{
 display:             inline-block;
    position: absolute;
    top: 0;
    left: 0;
 width:               100%;
 height:              100%;
				 border:              0px solid #000;
 text-align:          center;
 text-decoration:     none;
 outline:             none;
}


.top_lang_btn_on {
 width:            140px;
 height:           36px;
	 background: #ffffff;
 background: rgb(255,255,255,0.5);

 border:           1px solid #000;
 text-align:       center;
 text-decoration:  none;
 outline:          none;
 font-size:        0.6rem;
 color:            #000;
 line-height:      32px;
 display:          inline-block;
 border-top-left-radius:             18px;
	border-bottom-left-radius:          18px;
	-webkit-border-top-left-radius:     18px;
	-webkit-border-bottom-left-radius:  18px;
	-moz-border-radius-topleft:         18px;
	-moz-border-radius-bottomleft:      18px;
	border-top-right-radius:            0px;
	border-bottom-right-radius:         0px;
	-webkit-border-top-right-radius:    0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-topright:        0px;
	-moz-border-radius-bottomright:     0px;
}


/*　スクロールマウス　*/
@media screen and (min-width: 350px) { 
.mouse_icon {
	position:absolute;

 bottom:            10px;
 margin-left:       auto;
 margin-right:      auto;
 display:           inline-block;
 -webkit-transform: translate(0, -50%);
 transform:         translate(0, -50%);
 font-size:         0.4rem;
 color:             #CCC;
 text-decoration:   none;
 padding-top:       45px;
}
}
@media screen and (min-width: 700px) {
	.mouse_icon {
	position:absolute;

 bottom:            20px;
 margin-left:       auto;
 margin-right:      auto;
 display:           inline-block;
 -webkit-transform: translate(0, -50%);
 transform:         translate(0, -50%);
 font-size:         0.4rem;
 color:             #CCC;
 text-decoration:   none;
 padding-top:       45px;
}
}
.mouse_icon span {
	position:absolute;
 top:           0;
 left:          50%;
 width:         24px;
 height:        40px;
 margin-left:   -12px;
 border:        2px solid #CCC;
 border-radius: 50px;
 box-sizing:    border-box;
}
.mouse_icon span::before {
	position:absolute;
 top:               10px;
 left:              50%;
 content:           '';
 width:             4px;
 height:            4px;
 margin-left:       -2px;
 background-color:  #fff;
 border-radius:     100%;
 -webkit-animation: sdb 2s infinite;
 animation:         sdb 2s infinite;
 box-sizing:        border-box;
}
@-webkit-keyframes sdb {
 0% {
 -webkit-transform: translate(0, 0);
 opacity: 0;
}
 40% {
 opacity: 1;
}
 80% {
 -webkit-transform: translate(0, 20px);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes sdb {
 0% {
 transform: translate(0, 0);
 opacity: 0;
}
 40% {
 opacity: 1;
}
 80% {
 transform: translate(0, 20px);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}