/*
"Paper Plane Animation (CSS)" by CODEPEN
Copyright (c) 2014 Jon Q (@_ItsJonQ)

"Learning SVG animation" by CODEPEN
Copyright (c) 2017 Fabio (@FabioG)

Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/

html {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #bbb;
  vertical-align: middle;
  overflow: hidden;
}
body {
  position: absolute;
  top: 0px;
  left: 0px;
  width: max(100vw, 340px);
  height: max(100vh, 550px);
  vertical-align: middle;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #61a9dc, #ffffff, #ffffff);
  background-size: 100% 140%;
  background-position:50% 0%;
  animation: fadein-all 2s ease 0s 1 normal;
  font-family: "Sawarabi Mincho", sans-serif;
  color: #fff;
  -webkit-text-size-adjust: 100%;
}
@keyframes fadein-all {
  0% {opacity: 0}
  100% {opacity: 1}
}


/*-----logo&subtitle-----*/

.logopic > img {
  position: absolute;
  top: 30%;
	left: calc(50% - 25px);
  width: 50px;
  padding: 5px 4px 3px 5px;
	border: 1px solid #ffffff;
	border-radius: 10px 10px 10px 10px;
}


/*-----PR-calligraphy-----*/

.PR-calligraphy {
  position: absolute;
  top: 38%;
	left: 0px;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.PR-calligraphy > p::first-letter {
  font-size: 40px;
  vertical-align: -16px;
}
.PR-calligraphy > h1 {
  position: relative;
  top: -22px;
	left: 20px;
  text-shadow: 
		0 0 0.05em #ffffff,
		0 0 0.10em #ffffff,
		0 0 0.15em #ffffff,
		0 0 0.30em #ffffff;
  filter: saturate(80%);
  z-index: 50;
}
.PR-calligraphy-deco {
  font-size: 0px;
  letter-spacing: 0px;
}
.PR-calligraphy-deco span {
  position: relative;
  top: -43px;
  left: 20px;
  height: 21px;
  width: 18px;
	border: 1px solid rgb(208, 171, 23);
	border-radius: 10px 10px 10px 10px;
  background-color: rgb(208, 171, 23);
  display: inline-block;
}



/*-----partition01-----*/

.partition01 {
  position: absolute;
  top: 50%;
	left: calc(50% - 10px);
  width: 20px;
  height: 0px;
  border: 2px solid rgba(0, 0, 0, 0.3);
	border-radius: 1px 1px 1px 1px;
}


/*-----PR-sentence-----*/

.PR-sentence {
  position: absolute;
  top: 53%;
	left: calc(50% - 173px);
  width: 346px;
  text-align: center;
  padding: 15px 2px 15px 2px;
  font-weight: bold;
  /*
  background-color: rgba(0, 0, 0, 0.5);
	border-radius: 20px 20px 20px 20px;
  */
}
.PR-sentence > h2 {
  margin-bottom: 5px;
  color: #ECB802;
  background: -webkit-linear-gradient(-45deg, #dcdc44, #DA8E00, #EDAC06, #dcdc44, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #dcdc44, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.PR-sentence > p {
  color: #ECB802;
  background: -webkit-linear-gradient(-45deg, #fefeb2, #DA8E00, #EDAC06, #dcdc44, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #dcdc44, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*-----partition02-----*/

.partition02 {
  position: absolute;
  top: 68%;
	left: 0px;
  width: 100%;
  text-align: center;
}
.partition02 > p {
  color: rgba(0, 0, 0, 0.5);
}


/*-----content01-----*/

.c1-btn:hover {
  opacity: 0.6;
}
#c1-btn-check {
  display: none;
}

.c1-btn,
.c1-btn span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
  z-index: 80;
}
.c1-btn {
  position: absolute;
  top: 75%;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border: 2px solid rgb(12, 6, 2);
  border-radius: 5px;
  animation: fadein-c1-btn 4s ease 0s 1 normal forwards;
}
@keyframes fadein-c1-btn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.c1-btn span {
  position: absolute;
  left: 6px;
  width: 24px;
  height: 4px;
  background-color: rgb(12, 6, 2);
  border-radius: 4px;
}
.c1-btn::after {
  position: absolute;
  left: -17px;
  bottom: 38px;
  content: '事業者情報';
  color: rgb(12, 6, 2);
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.4s;
}
.c1-btn span:nth-of-type(1) {
  top: 6px;
}
.c1-btn span:nth-of-type(2) {
  top: 16px;
}
.c1-btn span:nth-of-type(3) {
  bottom: 6px;
}
#c1-btn-check {
  display: none;
}

#c1-btn-check:checked ~ .c1-btn::after {
  left: -7px;
  color: #fff;
  content: 'CLOSE';
}
#c1-btn-check:checked ~ .c1-btn {
  top: 16%;
  left: 84%;
  background-color: #fff;
  border-radius: 20px;
}
#c1-btn-check:checked ~ .c1-btn span:nth-of-type(1) {
  top: 1px;
  transform: translateY(15px) rotate(-45deg);
}
#c1-btn-check:checked ~ .c1-btn span:nth-of-type(2) {
  opacity: 0;
}
#c1-btn-check:checked ~ .c1-btn span:nth-of-type(3) {
  bottom: 1px;
  transform: translateY(-15px) rotate(45deg);
}

.c1-wrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgb(0, 15, 45);
  opacity: 0;
  z-index: 50;
  transition: 0.4s;
  visibility: hidden;
}
#c1-btn-check:checked ~ .c1-wrap {
  visibility: visible;
  opacity: 0.5;
}

.c1-detail {
  position: absolute;
  top: 56%;
  left: 5%;
  width: 90%;
  height: 80%;
  color: #000;
  overflow: auto;
  transition: all 0.5s ease-out;
  opacity: 0;
  z-index: 60;
}
#c1-btn-check:checked ~ .c1-detail {
  top: 15%;
  opacity: 1;
}
.c1-detail > table {
  margin-top: 5%;
  margin-left: 5%;
  width: 90%;
  font-size: min(14px,3.5vw);
}
.c1-detail > table > tbody > tr > td {
  border: 1px solid #000;
  padding: 5px;
}
.c1-detail > table > tbody > tr > td > img {
  width: 200px;
}
.c1-detail > table > tbody > tr > td:nth-child(1) {
  text-align: center;
}
.c1-detail > table > tbody > tr:nth-child(2n+1) {
  background: #fff;
}
.c1-detail > table > tbody > tr:nth-child(2n) {
  background: rgb(240, 240, 240);
}
.c1-detail > table > tbody > tr:nth-child(4) > td:nth-child(2) {
  font-size: min(13px,3.25vw);
}
.c1-detail > p:nth-of-type(1) {
  margin-top: 0%;
  margin-left: 4%;
  width: 92%;
  line-height: 150%;
  color: #fff;
  font-size: min(12px,3vw);
}

/*-----contents_common-----*/

@keyframes fadein-btn-text1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadein-btn-text2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


/*-----contents_news

.news {
  position: absolute;
  top: 18.75%;
  left: calc(50% - 177px);
  width: 354px;
  padding: 5px 8px 8px 8px;
  background-color: rgba(237,134,134,0.3);
  border-radius: 10px;
  color: rgb(226, 226, 247);
  text-align: left;
  line-height: 1.5;
  font-size: 12px;
  transition: all 0.5s;
  opacity: 1;
}
#c1-btn-check:checked ~ .news {
  opacity: 0;
}
#c2-btn-check:checked ~ .news {
  opacity: 0;
}
#c3-btn-check:checked ~ .news {
  opacity: 0;
}
#c4-btn-check:checked ~ .news {
  opacity: 0;
}
#c5-btn-check:checked ~ .news {
  opacity: 0;
}
-----*/


/*-----footer&etc-----*/

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 22px;
  background: linear-gradient(180deg, #5c8941, #5c8941, #888);
  font-size: 12px;
  color : rgb(233, 222, 200);
  text-align: center;
  line-height: 24px;
  z-index: 40;
}

.is-eventNone {
  pointer-events: none;
  cursor: default;
  color: #fff;
  text-decoration: none;
}


/*-----animation-----*/

svg {
  max-width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}


.clouds {
  position: absolute;
  top: 0%;
  left: 0px;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateZ(0);
}
.cloud {
  position: absolute;
  top: 0%;
  left: calc(50% - 250px);
  right: 0;
  opacity: 1;
}

.cloud.smaller {
  width: 75px;
  margin-top: 70px;
  margin-left: 50px;
}
.cloud.small {
  width: 90px;
  margin-top: 90px;
  margin-left: 0px;
}
.cloud.standard {
  width: 150px;
  margin-top: 40px;
  margin-left: 0px;
}
.cloud.big {
  width: 250px;
  margin-top: 50px;
  margin-left: 50px;
}
.cloud.massive {
  width: 300px;
  margin-top: 40px;
  margin-left: 0px;
}

.cloud {
  -webkit-animation-name: cloud-movement;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: cloud-movement;
  -moz-animation-timing-function: linear;
  -moz-animation-direction: forwards;
  -moz-animation-iteration-count: infinite;

  animation-name: cloud-movement;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-iteration-count: infinite;
}
.little-slow {
  -webkit-animation-duration: 8.5s;
  -moz-animation-duration: 8.5s;
  animation-duration: 8.5s;
}
.slow {
  -webkit-animation-duration: 9.5s;
  -moz-animation-duration: 9.5s;
  animation-duration: 9.5s;
}
.slower {
  -webkit-animation-duration: 11.2s;
  -moz-animation-duration: 11.2s;
  animation-duration: 11.2s;
}
.slowest {
  -webkit-animation-duration: 13.5s;
  -moz-animation-duration: 13.5s;
  animation-duration: 13.5s;
}
.super-slow {
  -webkit-animation-duration: 20.5s;
  -moz-animation-duration: 20.5s;
  animation-duration: 20.5s;
}

@keyframes cloud-movement {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(400px);
    -moz-transform: translateX(400px);
    transform: translateX(400px);
  }
}

.plane_and_text {
  position: absolute;
  top: 7%;
  left: calc(50% - 180px);
}
.svg-plane {
  width: 360px;
  transform: scale(-1,1);
}
.planePath {
  /*
  stroke: #D9DADA;
  stroke-width: .1%;
  stroke-width: .5%;
  stroke-dasharray: 1% 2%;
  stroke-linecap: round;
  */
  fill: none;
}
.fil1 {
  fill: #D9DADA;
}
.fil2 {
  fill: #C5C6C6;
}
.fil4 {
  fill: #9D9E9E;
}
.fil3 {
  fill: #AEAFB0;
}

.plane {
  opacity: 0;
  animation: fade-motion 10s infinite ease 0s normal;
}
.ch01 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 0.7s normal;
}
.ch02 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 1.1s normal;
}
.ch03 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 1.5s normal;
}
.ch04 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 1.9s normal;
}
.ch05 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 2.3s normal;
}
.ch06 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 2.7s normal;
}
.ch07 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 3.1s normal;
}
.ch08 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 3.5s normal;
}
.ch09 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 3.9s normal;
}
.ch10 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 4.3s normal;
}
.ch11 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 4.7s normal;
}
.ch12 {
  opacity: 0;
  animation: fade-motion 10s infinite ease 5.1s normal;
}
@keyframes fade-motion {
  0% {opacity: 0}
  10% {opacity: 1}
  90% {opacity: 1}
  100% {opacity: 0}
}



@media (min-width: 600px) {

  .c1-detail {
    left: calc(50% - 270px);
    width: 540px;
  }

  .clouds {
    top: -5%;
  }
  
  #c1-btn-check:checked ~ .c1-btn {
    left: calc(50% + 220px);
  }
  
  footer {
    height: 22px;
  }

}
/*
@media (min-height: 812px) {
  body {
    top: calc(50% - 406px);
    height: 812px;
    border-top: solid 18px #073061;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.4);
  }
}
*/