@charset "utf-8";
/* CSS Document */
@import "reset.css";
@import "util.css";
@font-face {
	font-family: 'jp_sttl01'; /* お好きな名前にしましょう */
	src: url('../font/NotoSansCJKjp-Medium.eot'); /* IE9以上用 */
	src: url('../font/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'), /* モダンブラウザ用 */ url('../font/NotoSansCJKjp-Medium.woff') format('woff'); /* iOS, Android用 *//* 念の為指定しておきます */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body {
	color:#111;
	text-align:center;
    font-size: 1.5rem;
    line-height: 1.8;
}
img {
	max-width: 100%;
	height:auto;
}
a {
	color: #111;
	text-decoration: none;
    transition: .3s;
}
a:hover {
	color: #1187c4;
	text-decoration: none;
}
#header{
    display: flex;
    flex-wrap: wrap;
}
header{
    position: relative;
    width: 100%;
    height: 100vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

header:before{
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #39a0d5, #8eafc0);
    width: 100%;
    height: 100%;
    animation-name: slideInRight;
  animation-duration: 1s;
  animation-timing-function: ease;
}
@keyframes slideInRight {
  from {
   transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}
h1{
    width: 50%;
    max-width: 300px;
    position: relative;
}
.officeBox{
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    
}
.officeBox ul li:not(:last-of-type){
   margin-bottom: 40px;
}
.officeBox ul li a{
   display: block;
    border-width: 1px;
    border-style: solid;
    padding: 20px;
    text-align: center;
    max-width: 400px;
}

.officeBox ul a.btn_kure{
   border-color: #ff9d12;
    background-image: linear-gradient(-45deg, #ff9d12 10px, transparent 0);
}
.officeBox ul a.btn_hiro{
   border-color: #e48399;
    background-image: linear-gradient(-45deg, #e48399 10px, transparent 0);
}
.officeBox ul a.btn_yakeyama{
   border-color: #74b91c;
    background-image: linear-gradient(-45deg, #74b91c 10px, transparent 0);
}

.officeBox ul li a img {
    width: 80%;
  transition: .3s;
}
.officeBox ul li a img:hover {
  transform: scale(1.1);
}
.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 767px) {
header{
    width: 50%;
}
.officeBox{
    width: 50%;
}
    
.pc_none.btn_allow{
   display: none 
}
}
h1 {
	font-size: 75%;
}
 .btn_allow{
     display: block;
     width: 100%;
     height: 20px;
     position: absolute;
     bottom: 45px;
     text-align: center;
     animation: bound 1.4s linear infinite,fadeIn2 2.8s linear;
}
@keyframes bound {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fadeIn2{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
 .btn_allow:after{
  content: "";
  display: block;
     left: calc(50% - 13px);
     bottom: -20px;
  position: absolute;
  border-bottom: solid 2px #111;
  border-right: solid 2px #111;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
#profile{
    background: #f7f7f7;
    padding: 20vmin 10px
}
.dl_profile{
    display: flex;
    flex-wrap: wrap;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.dl_profile dt{
    width:  24%;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #ccc;
}
.dl_profile dd{
    width:  76%;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #ccc;  
}
#copyright{
    background: #666;
    color: #fff;
    padding: 10px;
}

@media screen and (max-width: 766px) {

.sp_none.btn_allow{
   display: none 
}
}