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

body{font-family: 'Noto Sans Japanese', YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; line-height: 1.5; font-size: 0.8em; color: #432; 
background:url("../img/bg_k3.svg") 0 0 no-repeat, linear-gradient(180deg, rgba(112,178,198,.2), rgba(31,90,108,.2)); background-size:auto 100%,100%; background-attachment:fixed,fixed;}
body * {
  box-sizing : border-box;
overflow-x:hidden;
}
/* -----TEXT COLOR LINK----- */
h2{font-size:1.4em;}
h2.title{font-size:2.8em;font-family: 'Outfit', sans-serif; margin: 0 0 20px 0; color: #787878; letter-spacing: 0.02em;}
h2.title2{font-size:2em;font-family: 'Outfit', sans-serif; margin: 0 0 20px 0; color: #787878;}
span.green{color:#99CC00;}
span.blue{color:#0099CC;}
span.orange{color:#FF9933;}

h3{font-size:1em; padding-bottom: 10px;}
h4{font-size:0.8em;}
h4.eng{color:#999;}
p{padding-bottom: 2em;}

/* -----WEB FONT Material----- */
.material-icons,.material-icons-outlined {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  
  display: inline-flex;
  vertical-align: middle;
	padding-bottom: 2px;
}
a{text-decoration: none;}

/* -----common----- */
section{width:100%; display: flex; justify-content: center;}
.container{width:90%; padding:40px 20px;}

/* -----background----- */
#web{background:url("../img/bg_i.svg") left bottom no-repeat,rgba(255,240,220,.8); background-size:auto 100%; box-shadow: 1px 1px 5px 3px #ccc; border-bottom: #fff 40px solid; border-top: #fff 40px solid; overflow: hidden;}
#contact{ overflow: hidden;}
#access{background: rgba(250,255,230,0.80); box-shadow: 0px -3px 3px #ccc,0px 0px 0px 0px; border-top: #fff 40px solid; overflow: hidden;}

/* -----background-img----- */
.bg-green{background:url("../img/logo_green.svg") center center no-repeat; display: flex; background-size: 60%}
#access .container{padding:40px 20px;background:url("../img/map_item.png") bottom center no-repeat; background-size:75%;}


/* -----box----- */
.half-box{display: flex; flex-direction: column; align-content: space-around;}	/* Media queries md,lg */
.access-box{display: flex; flex-direction: column-reverse; justify-content: space-around; align-items:stretch;}
.access-box-container,.half-box-container{width: 100%;}
.address-box{align-self: center;}
.works_list{display: flex; justify-content: space-around; flex-wrap: wrap;}
.works_item{flex-basis: 45%; margin:0 0 20px 0; font-size: 0.6em; background: #fff; border-radius: 5px; box-shadow: 0px 0px 5px 1px #ccc;}
.works_item p{padding-bottom: 1em;}
.works_item img{width: 100%; border-radius: 5px 5px 0 0; }
.works_text{display: flex; justify-content: space-between; padding: 5px 10px;}

/* -----TOP----- */
.hero-area{width: 100%; margin:40px 0 0 0; padding: 20px; display: flex; align-items:center; justify-content: center;}
h2.catch-copy{font-family: 'Murecho', sans-serif; font-size: 2em; color: #788878;}
.logomark{height:30px; width:auto;}
.dept-box{display: flex; flex-direction: column; align-content: space-around; align-items: stretch;}
.dept-box-item{background: rgba(255,255,255,.8); margin:10px; padding: 10px; border-radius: 5px; box-shadow: 0px 0px 5px 1px #ccc;}
.dept-title{display: flex; justify-content: space-between; align-items: center;}
.dept-title-box{padding-left: 10px;}
.dept-title-box h3{ padding-bottom: 0;}
.green_line{border-left:#8cd5a5 6px solid; margin-bottom:10px; }
.blue_line{border-left:#0099CC 6px solid; margin-bottom:10px;}
.orange_line{border-left:#FF9933 6px solid; margin-bottom:10px;}
a.new-win{ padding: 5px 20px; margin: 10px auto; color: #fff; font-size: 1.2em; background:linear-gradient(180deg, rgba(0,153,204,.8), rgba(0,101,135,.8)); border-radius: 50px; }
a.new-win:hover{background:rgba(0,101,135,.8); }
.link-part{display: flex; justify-content: center;}

/* -----FORM----- */
.form_container {padding-right: 30px;}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: rgba(255,255,255,.5);
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px);
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}
.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}
.badge{font-size:0.5em; color:#fff; padding: 1px 5px; background-color: #FF6666; border-radius: 3px; }
label{line-height: 1.5em;}
.submit_btn{display: block;  padding: 5px 20px; margin: 10px auto; color: #fff; font-size: 1.2em; background:linear-gradient(180deg, rgba(0,153,204,.8), rgba(0,101,135,.8)); border-radius: 50px; }
.submit_btn:hover{background:rgba(0,101,135,.8); }
/* -----ACCESS----- */
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
padding-left: 30px;
margin-bottom: 20px;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
a.mail_link{text-decoration: none; color: #432;}
a.mail_link:hover{text-decoration: underline;}
/* -----FOOTER----- */
footer{ background:#C1DD90; padding:20px 0; text-align:center; color:#fff; font-size:0.7em;}


/* -----アニメーションに関する設定----- */

.delay-time02{animation-delay: 0.5s;}
.delay-time03{animation-delay: 0.7s;}
.delay-time04{animation-delay: 0.9s;}
.delay-time05{animation-delay: 2s;}
.delay-time06{animation-delay: 3s;}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
.box{opacity: 0;}

/*==================================================
ふわっ
===================================*/
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fadeUp2 {
animation-name:fadeUpAnime2;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime2{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeDown {
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadeIn {
animation-name:fadeInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fadeIn2 {
animation-name:fadeInAnime2;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeInAnime2{
  from {
    opacity: 0;
	transform: scale(0.8);
  }

  to {
    opacity: 1;
	transform:  scale(1);
  }
}

/* -----流体に関する設定----- */
.fluidS {
  width:40vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:url("../img/s.svg")0 0 no-repeat; background-size: 90%;
  animation: rotateS 30s ease 0s infinite;/*アニメーションの設定*/
	position: absolute;
	top:10%;
	right:5%;
	z-index: -10;
}
@keyframes rotateS {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.fluid {
  width:30vh;/*横幅*/
  height: 30vh;/*縦幅*/
  background:rgba(253,187,97,.9);/*背景色*/
  animation: fluidrotate 20s ease 0s infinite;/*アニメーションの設定*/
	position: absolute;
	left:10%;
	top:25%;
	z-index: -10;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
@media (max-width: 768px) {
.fluid {
  width:25vh;/*横幅*/
  height: 25vh;/*縦幅*/
}
}
/* ----浮遊物に関する設定----- */
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/* ----浮遊物に関する設定ここまで----- */

/* Media queries */

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {	
	.display_lg{display:none;}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
body{background:url("../img/bg_k2.svg") 0 0 no-repeat, linear-gradient(180deg, rgba(112,178,198,.2), rgba(31,90,108,.2)); background-size:auto 100%,100%; background-attachment:fixed,fixed;}
h2.title,h2.title2{font-size:3em;}
	/* -----box----- */
.half-box{display: flex; flex-direction: row; align-content: space-around;}
.access-box{display: flex; flex-direction: row; justify-content: space-around; align-items:stretch;}
.access-box-container,.half-box-container{width: 50%;}
.half-box-container p{padding-right: 20px; line-height: 2em;}
/* -----TOP----- */
h2.catch-copy{font-size: 4em;}
.dept-box{display: flex; flex-direction: row; align-content: space-around; align-items: stretch;}
.dept-box-item p{font-size:0.75em;}
#access .container{background:url("../img/map_item.png") bottom left no-repeat; background-size:45%;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.dept-box-item p{font-size:0.9em;}
.half-box{align-items: center;}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body{background:url("../img/bg_k.svg") 0 0 no-repeat, linear-gradient(180deg, rgba(112,178,198,.2), rgba(31,90,108,.2)); background-size:auto 100%,100%; background-attachment:fixed,fixed;}
.container{width:80%;}
.dept-box-item{padding: 20px;}
h2.catch-copy{font-size: 5em;}
h3{font-size:1.2em;}
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
		.display_lg{display: block;}
}