@charset "utf-8";

/*
 * Author: 菱田法律会計事務所
 * Copyright (c) 菱田法律会計事務所
 */


@media  (max-width: 662px) {

#preloader{
  width:100vw;
  height:100vh;
  margin:0;
padding:0;
  background:#FFF;
    display: flex;
  align-items: center;
  justify-content:center;
}

#preloader .bg_right {
	height:100vh;
	width: 11vw;
	position:absolute;
	top:0;
	right:0;
	background:url(../img/bg_hishi2.svg);
	z-index:9999;
}

#preloader .item{
	position: absolute;
	font-family:'Noto Serif JP', serif;
	font-weight:500;

	font-size:25px;
	color:#323838;
	
  animation: opacity 2s forwards;
  z-index:3238381;
}

@keyframes shutter {
 70% {
    width:100vw;opacity: 1;
  }
  100% {
    width:0;opacity:1; 
  }
}

header {
	width:100vw;
	position:relative;
}

header section h1 {
	position:absolute;
	top: 55vh;
	left:55vw;
	transform: translate(-100vw, -50vh);
	line-height:1;
	z-index:2000;
	color:#ffffff;
	font-size:3.9vh;
	letter-spacing:4px;
	text-shadow: 0 0 21px #555555;
	font-family: 'Shippori Mincho', serif;
	font-weight:500;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

#start-page {
	width:100vw;
}

#start-page .bg_right {
	height:100vh;
	width: 22vw;
	position:absolute;
	top:0;
	right:0;
	opacity:0.5;
	z-index:999999;
	background:url(../img/bg_hishi2.svg);
}

.rect-wrap {
  width:100%;
  height:100vh;
  position:relative;
  left:0;
  top:0;
  text-align:center;
  z-index:1000;
  transform:none;
}
.rect {
  width : 100% ;
  height:100vh;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url(../img/image_c.jpg),
     url(../img/image_a.jpg);
   animation: fadeSlideImg 30s ease-out infinite;
   animation-delay: 2s;
   text-indent:-9999px;
   padding-top:0;
   border-radius: 0;
}
.rect-wrap2 {
	display:none;
}
.rect2 {
	display:none;
}

.scrolldown{
	z-index:9998;
  position:absolute;
  left:10vw;
  bottom:0;
  height:100px;
}

.scrolldown span{
  position: absolute;
  left:-16px;
  top: -16px;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
    text-transform: uppercase;
  -ms-writing-mode: horizontal-tb;
    -webkit-writing-mode:horizontal-tb;
    writing-mode:horizontal-tb;
}

.scrolldown::after{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height:200px;
  background: #eee;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
.scrolldown:before {
	display:none;
  animation:none;
}

@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:100px;
    opacity: 1;
  }
  100%{
    height:0;
    top:80px;
    opacity: 0;
  }
}



/*   Lawyers
----------------------------------------------------------- */

#lawyers {
	width:100vw;
    z-index: 1000;
    position: relative;
    background: #fff;
    margin:0;
    padding: 120px 0 60px 0;}

#lawyers p {
	width:100%;
	line-height:200%;
		font-size: 15px;
    font-size: 1.5rem;
}
#lawyers h1 {
	margin:0 auto 60px auto;
	text-align:center;
	font-size: 14px;
    font-size: 1.4rem;
	font-family:'Noto Serif JP', serif;
	font-weight:400;
	
}
.t_main {
	font-size:42px;
	font-size:4.2rem;
	padding-bottom:18px;
	letter-spacing:0rem;
}
#h_lta h1 {
	text-align:center;
	margin:0 auto 30px auto;
	font-size: 39px;
    font-size: 3.9rem;
}

#h_lta {
	width:90vw;
	min-height: calc(100vw * 0.557);
	padding:calc(100vw * 0.557) 0 90px 0;
	margin:0 auto;
	text-align:left;
	background-position:center top;
	background-repeat: no-repeat;
	   background-size: cover;
	background-image: url(../img/sp/hishida_kenji.png);
	background-size: 100% auto;
   animation: none;
   animation-delay: 0;
}
.h_lta_inner {
	width:100%;
	padding:0;
}
#h_lta .t_right {
	text-align:center;
}
#h_l {
	width:90vw;
	min-height: calc(100vw * 0.557);
	padding:calc(100vw * 0.557) 0 45px 0;
	margin:0 auto 0 auto;
	text-align:left;
	background-position:center top;
	background-repeat: no-repeat;
	background-image: url(../img/sp/hishida_kiwayo.png);
	   animation: none;
	   background-size: 100% auto;
   animation-delay: 0;
}

#h_l h1 {
	text-align:center;
	margin:0 auto 30px auto;
	font-size: 39px;
    font-size: 3.9rem;
}
#h_l .t_right {
	text-align:center;
	margin:0;
}
.h_l_inner {
	width:100%;
	padding:0;
	margin:0;
}

.ex {
	line-height:200%;
}

.name {
		font-size: 39px;
    font-size: 3.9rem;
	font-family:'Noto Serif JP', serif;
	font-weight:500;
	padding-bottom:12px;
	letter-spacing:0.9rem;
}

#gallery {
	display:none;
}

}
@media (max-width: 269px) {
#preloader .item{
	font-size:18px;

}

.name {
		font-size: 24px;
    font-size:2.4rem;
}

.ex {
	line-height:140%;
}
#gallery {
	display:none;
}
}
@media (min-width: 663px) and (max-width: 980px) {
#preloader .item{
	position: absolute;
	font-family:'Noto Serif JP', serif;
	font-weight:500;
	top: 50%;
	left: 50%;
	width:100vw;
	text-align:center;
	transform: translate(-50%, -50%);
	font-size:27px;
	color:#323838;
  animation: opacity 2s forwards;
  z-index:3238381;
}


/*   Lawyers
----------------------------------------------------------- */

#lawyers {
		z-index:1000;
	position:relative;
	background:#fff;
	margin:0;
	padding:120px 0;
	}


#lawyers h1 {
	margin:0 auto 120px auto;
	text-align:center;
	font-size: 16px;
    font-size: 1.6rem;
	font-family:'Noto Serif JP', serif;
	font-weight:400;
	
}


.t_main {
	font-size:45px;
	font-size:4.5rem;
	font-weight:500;
	padding-bottom:12px;
	letter-spacing:-0.1rem
}

#lawyers p {
	font-size: 15px;
    font-size: 1.5rem;
	font-family:'Noto Serif JP', serif;
	color:#323838;
	line-height:220%;
}

#h_lta h1 {
	text-align:left;
	margin:0 auto 30px auto;
}

#h_lta {
	width:95vw;
	min-height:66vw;
	margin:0 auto;
	text-align:left;
background-size:contain;
	background-position:left top;
	background-repeat: no-repeat;
	background-image: url(../img/tablet/hishida_kenji.png),
     url(../img/tablet/hishida_kenji2.png);
   animation: fade_h_lta 15s ease-out infinite;
   animation-delay: 0;
}

@keyframes fade_h_lta {
  0% { background-image: url(../img/tablet/hishida_kenji2.png); }
  10% { background-image: url(../img/tablet/hishida_kenji.png); }
  50% { background-image: url(../img/tablet/hishida_kenji.png); }
  60% { background-image: url(../img/tablet/hishida_kenji2.png); }
  100% { background-image: url(../img/tablet/hishida_kenji2.png); }
}

.h_lta_inner {
	width:42vw;
	padding:0 0 0 53vw;
}

#h_l {
	width:95vw;
	min-height:66vw;
	margin:90px auto 0 auto;
	text-align:left;
	background-size:contain;
	background-position:right top;
	background-repeat: no-repeat;
	background-image: url(../img/tablet/hishida_kiwayo.png),
     url(../img/tablet/hishida_kiwayo2.png);
   animation: fade_h_l 15s ease-out infinite;
   animation-delay: 0;
}

@keyframes fade_h_l {
  0% { background-image: url(../img/tablet/hishida_kiwayo2.png); }
  10% { background-image: url(../img/tablet/hishida_kiwayo.png); }
  50% { background-image: url(../img/tablet/hishida_kiwayo.png); }
  60% { background-image: url(../img/tablet/hishida_kiwayo2.png); }
  100% { background-image: url(../img/tablet/hishida_kiwayo2.png); }
}


#h_l h1 {
	text-align:left;
	margin:0 auto 30px auto;
}

.h_l_inner {
	width:42vw;
	padding:0 53vw 0 0;
}
.name {
	font-size:6.1vw;
	font-family:'Noto Serif JP', serif;
	font-weight:500;
	padding-bottom:12px;
	letter-spacing:0.9rem;
}

.read-more {
	margin-top:21px;
}

}

@media (min-width: 630px) and (min-height: calc(100vw * 1)) {
#preloader .item{
	font-size:4.3vmin;
}

.rect-wrap {
  height:92vw ;
  width:92vw;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  z-index:1000;
}
.rect {
  width: 100% ;
  padding-top : 100% ;
  border-radius: 50%;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url(../img/image_c.jpg),
     url(../img/image_a.jpg),
     url(../img/image_b.jpg);
   animation: fadeSlideImg 15s ease-out infinite;
   animation-delay: 0;
   text-indent:-9999px;
}

.rect-wrap2 {
  height:95vw ;
  width:95vw;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  z-index:50;
}
.rect2 {
  width: 100% ;
  padding-top : 100% ;
  border-radius: 50%;
  background:#ffffff;
  border:1px solid #E4E6E8;
   text-indent:-9999px;
}

header section h1 {
    font-size: 4.3vw;
}
}