@charset "utf-8";

html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #ffffff;
  background-attachment: fixed; 
  line-height: 2.0;
  font-size: 16px;
  font-family:"Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  letter-spacing: 0.5pt;
  color: black;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* Link Color */
a:link { color: #7ebeab; }
a:visited { color: #7ebeab; }
a:hover { color: #00a497; }
a:active { color: #000; }

img {
  border: none;
}

a.img {
  border-bottom-style: none
}

div.title {
  font-size: 20px;
  letter-spacing: 5pt;
}

div#cont { 
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

table#bk {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 5%;
}

table#fr {
  width: 100%;
  padding: 10px;
}

table.autograph {
  font-size: 18px;
  letter-spacing: 6pt;
}

div.container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  row-gap:60px;
}

img.grid {
  width: 180px;
  height: 180px;
}

/* Language Select*/
div.text_box_top_right {
  position: fixed;
  top: 0px;
  right: 0px;
}

.lang_box li {
  display: inline-block;
}

.lang_link {
  margin: .15em;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  font-size: 1.0rem;
}

/* SNS  */
div.text_box_bottom_left {
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.sns_box li {
  display: inline-block;
}

.sns_link {
  margin: .15em;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  font-size: 1.0rem;
  background: rgba(255, 255, 255, 0.1);
  transition: transform ease-out 0.2s;
}

/* Twitter Icon */
.fab.fa-twitter {
  display: inline-block;
}

.icon_twitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0.9);
}

.icon_twitter:hover {
  background: #00b0ed;
  transform: scale(0.9);
  color: #fff;
}

/* Instagram Icon */
.fab.fa-instagram {
  display: inline-block;
}

.icon_instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0.9);
}

.icon_instagram:hover {
  background: radial-gradient(
      circle farthest-corner at 32% 106%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 10%,
      rgb(250, 145, 55) 28%,
      rgb(235, 65, 65) 42%,
      transparent 82%
    ),
    linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(0.9);
  color: #fff;
}

/* Footer */
table#main_footer {
  width: 100%;
  padding: 0px;
}

td#main_footer_cell {
  width: 100%;
  text-align: center;
  color: #7ebeab;
}

/* Top Bottun */
#re-top {
  display: none ;
  position:fixed;
  bottom:30px;
  right:30px;
  z-index:10;
  background:transparent
}

#re-topButton {
  display:block; 
  background: #7ebeab;
  color: #ffffff !important;
  position:relative;
  opacity: 80%;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
  font-family:"Arial", "Avenir", "YuGothic", "Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
  width:40px;
  height:40px;
  border-radius: 50%;
  text-align:center;
  line-height:24px;
  padding-top:30px;
  box-sizing:border-box;
}

#re-topButton:before {
  content:'\02227';
  position:absolute;
  top:50%;
  transform: scale(2, 1) translate(0, -50%);
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}

#re-top:hover #re-topButton {
  background: #00a497;
  color: #ffffff !important;
}

/* Fade Effect */
.site-content {
  animation: fadeIn 3s ease 0s 1 normal;
  -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

/* Fadein Animation 1 */
.scrollanime {
  opacity: 0;
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.downup {
  transform: translateY(100px);
}

/* Fadein Animation 2 */
.effect-fade {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 2000ms;
  overflow:hidden;
}

.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

.effect-fade:nth-of-type(2) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(3) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(4) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(5) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(6) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(7) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(8) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(9) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(10) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(11) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade:nth-of-type(12) {
  -moz-transition-delay: 0ms;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
}

.effect-fade img{
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.5s;
}

.effect-fade img:hover{
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

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

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

#containerbody{
  position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
  z-index: 0/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

#footer {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height:100vh;
  bottom: 0;
  z-index: -1;
  opacity: 0.15;
}

#slide {
  color: #FFF;
  width: 100%;
}

#slide-in {
  padding: 0px;
}