@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Shippori+Mincho+B1:wght@400;500;600;700&display=swap");
* {
  box-sizing: border-box;
}

body {
  width: 100%;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-weight: 400;
  font-size: 3.8vw;
  color: #1F1F1F;
  font-feature-settings: "palt";
  line-height: 1.8em;
  letter-spacing: 0;
  overflow-x: hidden;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  background-size: 100% 5400px;
  background-position: top;
  background-repeat: repeat;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
    width: 100%;
    position: relative;
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.smp-block {
  display: block;
}
@media screen and (min-width: 768px) {
  .smp-block {
    display: none;
  }
}

.pc-block {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc-block {
    display: block;
  }
}

.pc-large-block {
  display: none;
}
@media screen and (min-width: 1280px) {
  .pc-large-block {
    display: block;
  }
}

div.all-wrap {
  width: 100%;
  overflow: hidden;
  background: url(../myimg/bg.png) repeat #EF845C;
}

/*******header***************/
header {
  padding: 8% 0 0 0;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 768px) {
  header {
    padding: 20px 0 0 0;
  }
}
header .logo-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
}
@media screen and (min-width: 768px) {
  header .logo-list {
    width: 470px;
    margin-left: auto;
    margin-right: 3%;
    gap: 60px;
  }
}
header .logo-list a {
  display: block;
  line-height: 1;
  padding: 0;
  position: relative;
}
header .logo-list a::after {
  content: " ";
  display: block;
  width: 1px;
  height: 22px;
  background: #222;
  position: absolute;
  left: -5vw;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  header .logo-list a::after {
    width: 1px;
    height: 22px;
    background: #222;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
header .logo-list a.okhiroshima {
  width: 17%;
}
header .logo-list a.okhiroshima::after {
  display: none;
}
header .logo-list a.hiroshimanosake {
  width: 21%;
}
header .logo-list a.oishiihiroshima {
  width: 9.6%;
}
header .logo-list a.setouchisakana {
  width: 14%;
}
header .logo-list {
  /*a*/
}

/*背景の楕円*/
@keyframes openDown {
  from {
    transform: translate(-50%, -60%) scaleY(0);
  }
  to {
    transform: translate(-50%, -60%) scaleY(1);
  }
}
/*酒樽*/
@keyframes bounceDown {
  0% {
    opacity: 0;
    transform: translateY(-140%) scale(0.75, 1.25);
  }
  25% {
    opacity: 1;
    transform: translateY(30%) scale(1.14, 0.84);
  }
  40% {
    transform: translateY(-18%) scale(0.94, 1.08);
  }
  55% {
    transform: translateY(11%) scale(1.06, 0.94);
  }
  70% {
    transform: translateY(-5%) scale(0.985, 1.025);
  }
  84% {
    transform: translateY(2%) scale(1.01, 0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0%) scale(1, 1);
  }
}
/**ガタガタ揺れる**/
@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  3% {
    transform: translate(-4px, 2px) rotate(-2deg) scale(1.2);
  }
  6% {
    transform: translate(4px, -2px) rotate(2deg) scale(1.2);
  }
  9% {
    transform: translate(-3px, -2px) rotate(-1deg) scale(1.1);
  }
  12% {
    transform: translate(0, 0) rotate(0deg) scale(1.2);
  }
  15% {
    transform: translate(-4px, 2px) rotate(-2deg) scale(1.1);
  }
  18% {
    transform: translate(4px, -2px) rotate(2deg) scale(1.1);
  }
  21% {
    transform: translate(-3px, -2px) rotate(-1deg) scale(1);
  }
  24% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes shake-txt {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  2% {
    transform: translate(-4px, 2px) rotate(-2deg) scale(1.2);
  }
  4% {
    transform: translate(4px, -2px) rotate(2deg) scale(1);
  }
  6% {
    transform: translate(-3px, -2px) rotate(-1deg) scale(1.2);
  }
  8% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  10% {
    transform: translate(-4px, 2px) rotate(-2deg) scale(1.2);
  }
  12% {
    transform: translate(4px, -2px) rotate(2deg) scale(1);
  }
  14% {
    transform: translate(-3px, -2px) rotate(-1deg) scale(1.2);
  }
  16% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
/***************hero-wrap***************/
.hero-wrap {
  width: 100%;
  position: relative;
  z-index: 0;
}
.hero-wrap::before {
  content: " ";
  display: block;
  width: 270%;
  aspect-ratio: 87/73;
  background: #FFF;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -60%);
  transform-origin: top center;
  animation: openDown 0.8s cubic-bezier(0.13, 0.75, 0.53, 0.98) forwards;
}
@media screen and (min-width: 768px) {
  .hero-wrap::before {
    display: block;
    width: 111%;
    aspect-ratio: 134/125;
    background: #FFF;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -60%);
    transform-origin: top center;
    animation: openDown 0.8s cubic-bezier(0.13, 0.75, 0.53, 0.98) forwards;
  }
}
.hero-wrap .hero-box {
  width: 100%;
  margin-top: 20%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .hero-wrap .hero-box {
    margin-top: 30px;
  }
}
.hero-wrap .hero-box div.hero-image {
  width: 62%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-120%) scale(0.7, 1.3);
  transform-origin: center bottom;
  animation: bounceDown 1.45s 0.4s ease-out forwards, shake 4s 3s infinite;
}
@media screen and (min-width: 768px) {
  .hero-wrap .hero-box div.hero-image {
    width: 32%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(-120%) scale(0.7, 1.3);
    transform-origin: center bottom;
    animation: bounceDown 1.45s 0.4s ease-out forwards, shake 4s 3s infinite;
  }
}
.hero-wrap .hero-box .hero-copy {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.hero-wrap .hero-box .hero-copy span {
  display: block;
  position: absolute;
  top: -13%;
}
@media screen and (min-width: 768px) {
  .hero-wrap .hero-box .hero-copy span {
    top: 5.4%;
  }
}
.hero-wrap .hero-box .hero-copy span.hero-txt01 {
  width: 11%;
  right: 4.6%;
}
@media screen and (min-width: 768px) {
  .hero-wrap .hero-box .hero-copy span.hero-txt01 {
    width: 4.5%;
    right: 22.4%;
    animation: shake-txt 6s 2s infinite;
  }
}
.hero-wrap .hero-box .hero-copy span.hero-txt02 {
  width: 11%;
  left: 4.6%;
}
@media screen and (min-width: 768px) {
  .hero-wrap .hero-box .hero-copy span.hero-txt02 {
    width: 4.2%;
    left: 23%;
    animation: shake-txt 6s 2.4s infinite;
  }
}
.hero-wrap div.hero-bg-tai {
  width: 140%;
  position: absolute;
  left: 50%;
  top: -11%;
  transform: translate(-50%, 0);
}
@media screen and (min-width: 768px) {
  .hero-wrap div.hero-bg-tai {
    width: 98%;
    position: absolute;
    left: 50%;
    top: 6%;
    transform: translate(-50%, 0);
    opacity: 0.5;
  }
}
.hero-wrap {
  /**雲***/
}
.hero-wrap span.hero-cloud {
  display: block;
  position: absolute;
}
.hero-wrap span.hero-cloud.hero-cloud01 {
  width: 74%;
  left: 0;
  top: -63%;
  animation: cloudFloat01 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .hero-wrap span.hero-cloud.hero-cloud01 {
    width: 30%;
    left: 3%;
    top: -28%;
  }
}
.hero-wrap span.hero-cloud.hero-cloud02 {
  width: 28%;
  left: -16%;
  top: -10%;
  animation-delay: 0.4s;
  animation: cloudFloat02 3.5s 2s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .hero-wrap span.hero-cloud.hero-cloud02 {
    width: 10%;
    left: -5%;
    top: 8%;
    animation: cloudFloat02 3.5s 3s ease-in-out infinite alternate;
  }
}
.hero-wrap span.hero-cloud.hero-cloud03 {
  width: 21%;
  right: -4%;
  top: 30%;
  animation-delay: 0.8s;
  animation: cloudFloat03 3.5s 1s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .hero-wrap span.hero-cloud.hero-cloud03 {
    width: 10%;
    right: -2%;
    top: 25%;
  }
}
.hero-wrap span.hero-cloud.hero-cloud04 {
  width: 66%;
  right: -50%;
  top: 50%;
  animation-delay: 0.2s;
  animation: cloudFloat04 3.5s 2s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .hero-wrap span.hero-cloud.hero-cloud04 {
    width: 33%;
    right: -15%;
    top: 38%;
  }
}
.hero-wrap span.hero-cloud.hero-cloud05 {
  width: 50%;
  right: -20%;
  top: 72%;
  animation: cloudFloat05 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .hero-wrap span.hero-cloud.hero-cloud05 {
    width: 20%;
    right: 10%;
    top: 58%;
  }
}
.hero-wrap {
  /*span.hero-cloud*/
}
.hero-wrap div.hero-roop-box {
  width: 100%;
  aspect-ratio: 275/34;
  overflow: hidden;
  position: relative;
  margin-top: 10%;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .hero-wrap div.hero-roop-box {
    margin-top: 0;
  }
}
.hero-wrap div.hero-roop-box::before, .hero-wrap div.hero-roop-box::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../myimg/hero-slide-txt.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  animation: heroLoop 20s linear infinite;
  mix-blend-mode: multiply;
}
.hero-wrap div.hero-roop-box::before {
  left: 0;
}
.hero-wrap div.hero-roop-box::after {
  left: 100%;
}
.hero-wrap {
  /*hero-roop-box*/
} /*hero-wrap*/
@keyframes cloudFloat01 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(10px, -18px) rotate(1deg);
  }
}
@keyframes cloudFloat02 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-14px, -12px) rotate(-1.2deg);
  }
}
@keyframes cloudFloat03 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(8px, -24px) rotate(0.8deg);
  }
}
@keyframes cloudFloat04 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-10px, -16px) rotate(1.4deg);
  }
}
@keyframes cloudFloat05 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(16px, -10px) rotate(-0.8deg);
  }
}
@keyframes heroLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.content {
  width: 100%;
  position: relative;
  padding: 30% 0 10% 0;
}
@media screen and (min-width: 768px) {
  .content {
    padding: 90PX 0 100px 0;
  }
}
.content span.cloud {
  display: block;
  position: absolute;
}
.content span.cloud.cloud01 {
  width: 29%;
  left: 15%;
  top: 70%;
  animation: cloudFloat01 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .content span.cloud.cloud01 {
    width: 10.5%;
    left: 12%;
    top: 46%;
  }
}
.content span.cloud.cloud02 {
  width: 29%;
  left: -2%;
  top: 15%;
  animation: cloudFloat02 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .content span.cloud.cloud02 {
    width: 17.2%;
    left: 11%;
    top: 64%;
  }
}
.content span.cloud.cloud03 {
  width: 32%;
  right: -19%;
  top: 35%;
  animation: cloudFloat03 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .content span.cloud.cloud03 {
    width: 13.6%;
    right: 10.6%;
    top: 54%;
  }
}
.content span.cloud.cloud04 {
  width: 24%;
  right: 5%;
  top: 85%;
  animation: cloudFloat04 3.5s ease-in-out infinite alternate;
}
@media screen and (min-width: 768px) {
  .content span.cloud.cloud04 {
    width: 10.6%;
    right: 17%;
    top: 73%;
  }
}

.song {
  overflow: visible;
  position: relative;
  width: 100%;
}
.song .song-inner {
  display: block;
  padding-right: 10%;
  padding-left: 10%;
  display: flex;
}
@media screen and (min-width: 768px) {
  .song .song-inner {
    width: 90%;
    max-width: 820px;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
    justify-content: center;
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .song .song-inner p.song-txt01 {
    margin-left: 40px;
  }
}
@media screen and (min-width: 768px) {
  .song .song-inner p.song-txt02 {
    margin-left: 40px;
  }
}
.song .song-inner p.song-ani {
  animation: song-ani 4s ease;
}

@keyframes song-ani {
  0% {
    transform: scale(1);
  }
  3% {
    transform: scale(1.08);
  }
  4% {
    transform: translate(5px, 4px) rotate(2deg) scale(1.08);
  }
  5% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  6% {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.081);
  }
  7% {
    transform: translate(0, 0) rotate(0deg) scale(1.081);
  }
  8% {
    transform: translate(5px, 4px) rotate(2deg) scale(1.08);
  }
  9% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  10% {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.08);
  }
  11% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  12% {
    transform: translate(5px, 4px) rotate(2deg) scale(1.08);
  }
  13% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  14% {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.08);
  }
  15% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  16% {
    transform: translate(5px, 4px) rotate(2deg) scale(1.08);
  }
  17% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  18% {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.08);
  }
  19% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  20% {
    transform: translate(5px, 4px) rotate(2deg) scale(1.08);
  }
  21% {
    transform: translate(0, 0) rotate(0deg) scale(1.08);
  }
  22% {
    transform: translate(-5px, -4px) rotate(-2deg) scale(1.08);
  }
  30% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (min-width: 768px) {
  @keyframes song-ani {
    0% {
      transform: scale(1);
    }
    3% {
      transform: scale(1.2);
    }
    4% {
      transform: translate(5px, 4px) rotate(2deg) scale(1.2);
    }
    5% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    6% {
      transform: translate(-5px, -4px) rotate(-2deg) scale(1.2);
    }
    7% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    8% {
      transform: translate(5px, 4px) rotate(2deg) scale(1.2);
    }
    9% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    10% {
      transform: translate(-5px, -4px) rotate(-2deg) scale(1.2);
    }
    11% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    12% {
      transform: translate(5px, 4px) rotate(2deg) scale(1.2);
    }
    13% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    14% {
      transform: translate(-5px, -4px) rotate(-2deg) scale(1.2);
    }
    15% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    16% {
      transform: translate(5px, 4px) rotate(2deg) scale(1.2);
    }
    17% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    18% {
      transform: translate(-5px, -4px) rotate(-2deg) scale(1.2);
    }
    19% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    20% {
      transform: translate(5px, 4px) rotate(2deg) scale(1.2);
    }
    21% {
      transform: translate(0, 0) rotate(0deg) scale(1.2);
    }
    22% {
      transform: translate(-5px, -4px) rotate(-2deg) scale(1.2);
    }
    30% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }
}
@media screen and (max-width: 767px) {
  .song {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4% 0;
  }
  .song-inner {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: 16px;
    width: -moz-max-content;
    width: max-content;
  }
  .song-inner p {
    flex: 0 0 auto;
    width: 205px;
  }
}
@keyframes about-roop-txt {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes about-roop-txt-sp {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
section.about {
  padding-top: 35%;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.about {
    padding-top: 15%;
    overflow-y: hidden;
  }
}
section.about div.about-bg01 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  section.about div.about-bg01 > picture {
    display: block;
    width: 100%;
    height: a;
  }
  section.about div.about-bg01 > picture > img {
    display: block;
    width: 100%;
    height: auto;
  }
}
section.about div.about-bg01 span.illust {
  display: block;
  width: 5vw;
  position: absolute;
  right: 9.7vw;
  top: 29.8vw;
  opacity: 0.4;
}
@media screen and (min-width: 620px) {
  section.about div.about-bg01 span.illust {
    right: 9vw;
    top: 29.8vw;
  }
}
@media screen and (min-width: 768px) {
  section.about div.about-bg01 span.illust {
    width: 6%;
    right: auto;
    left: 72.8%;
    top: 8.8%;
  }
  section.about div.about-bg01 span.illust img {
    width: 100%;
    max-width: none;
  }
}
section.about {
  /*
  &::before{
  	content: " ";
  	display: block;
  	width: 100%;
  	height: 100%;
  	background: url(../myimg/about-bg_sp.png) no-repeat center top;
  	background-size: 100%;
  	position: absolute;
  	left: 0;
  	top: 0;
  	transform: translate( 0, 0);
  	@include mq(pc) {
  		background: url(../myimg/about-bg.webp) no-repeat center top;
  		background-size: 100%;
  		position: absolute;
  		left: 0;
  		top: 0;
  		transform: translate( 0, 0);
  	}
  }
  	*/
}
section.about::after {
  content: " ";
  display: block;
  width: 100%;
  height: 15%;
  background: url(../myimg/about-repeat-bg.jpg) repeat-y center top;
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  section.about::after {
    height: 30%;
    background: url(../myimg/about-repeat-bg.jpg) repeat-y center top;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1280px) {
  section.about::after {
    height: 15%;
    background: url(../myimg/about-repeat-bg.jpg) repeat-y center top;
    background-size: 100%;
  }
}
section.about {
  /*
  span.illust{
  	display: block;
  	width: 5vw;
  	position: absolute;
  	right: 9.7vw;
  	top: 29.8vw;
  	opacity: 0.4;
  	@include mq(sp-large) {
  		right: 9vw;
  		top: 29.8vw;
  	}
  	@include mq(pc) {
  		width: 6vw;
  		right: 21.2vw;
  		top: 12.8vw;
  	}
  	@include mq(pc-xlarge) {

  	}
  }
  	*/
}
section.about div.about-title-box {
  position: relative;
}
section.about div.about-title-box h2 {
  width: 60%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  section.about div.about-title-box h2 {
    width: 23.4%;
  }
}
section.about div.about-title-box h2.ani {
  opacity: 0;
  transform: translate(0, 20%);
}
section.about div.about-title-box h2.ani.animation {
  animation: title-fade 0.6s 0.2s ease-in forwards;
}
section.about div.about-title-box span.about-illust {
  display: block;
  width: 160%;
  position: absolute;
  left: 50%;
  top: -6%;
  transform: translate(-50%, 30%);
}
@media screen and (min-width: 768px) {
  section.about div.about-title-box span.about-illust {
    width: 69%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 30%);
  }
}
section.about div.about-cont {
  padding-top: 15%;
  padding-bottom: 15%;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  section.about div.about-cont {
    padding-top: 15%;
    padding-bottom: 120px;
  }
}
section.about div.about-cont-inner {
  position: relative;
  z-index: 8;
}
section.about div.about-cont-inner div.about-cont-txt {
  width: 86%;
  height: 55vh;
  margin: 0 auto;
  margin-top: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  section.about div.about-cont-inner div.about-cont-txt {
    height: 410px;
    margin-top: 82px;
  }
}
section.about div.about-cont-inner div.about-cont-txt p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100%;
  max-width: 100%;
  padding: 0.5em 1em;
  margin: 0;
  box-sizing: border-box;
  font-size: clamp(12.4px, 3.31vw, 16px);
  line-height: 1.9;
  -moz-column-count: auto;
       column-count: auto;
  -moz-column-gap: normal;
       column-gap: normal;
  text-align: justify;
}
@media screen and (min-width: 400px) {
  section.about div.about-cont-inner div.about-cont-txt p {
    font-size: clamp(12px, 3vw, 16px);
  }
}
@media screen and (min-width: 768px) {
  section.about div.about-cont-inner div.about-cont-txt p {
    -moz-column-count: auto;
         column-count: auto;
    -moz-column-gap: normal;
         column-gap: normal;
  }
}
section.about div.about-cont-inner div.about-cont-txt p span.bold {
  font-weight: bold;
}
section.about div.about-cont-inner div.about-cont-txt p span.red {
  color: #E35321;
}
section.about div.about-cont-inner div.about-cont-txt p.ani {
  opacity: 0;
}
section.about div.about-cont-inner div.about-cont-txt p.ani.animation {
  animation: txt-fade 0.6s 0.4s ease forwards;
}
section.about {
  /*about-cont-inner*/
}
section.about div.about-img {
  width: 80%;
  max-width: 975px;
  margin: 0 auto;
  margin-top: 7%;
}
section.about div.about-bg {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, -100%);
}
section.about div.about-bg04 {
  width: 100%;
  overflow: hidden;
}
section.about div.about-bg04 span {
  display: flex;
  flex-direction: row;
  width: 200%;
  animation: about-roop-txt-sp 10s linear infinite;
}
section.about div.about-bg04 picture {
  display: block;
  width: 50%;
  flex-shrink: 0;
  line-height: 0;
}
section.about div.about-bg04 img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  section.about div.about-bg04 {
    width: 9%;
    height: 82%;
    position: absolute;
    right: 0;
    top: -2%;
    overflow: hidden;
    z-index: 0;
  }
  section.about div.about-bg04 span {
    display: block;
    width: 100%;
    height: auto;
    animation: none;
    /*
    flex-direction: column;
    animation: about-roop-txt 10s linear infinite;
    */
  }
  section.about div.about-bg04 picture {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    line-height: 0;
  }
  section.about div.about-bg04 picture:last-of-type {
    display: none;
  }
  section.about div.about-bg04 img {
    display: block;
    width: 100%;
    height: auto;
  }
}
section.about .taiginjo-link-wrap {
  display: block;
  width: 88%;
  margin: 0 auto;
  margin-top: 15%;
  margin-bottom: 10%;
  padding: 25px 0;
  background: #EF845C;
  border: solid 5px #D6B063;
  border-radius: 30px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  section.about .taiginjo-link-wrap {
    width: 96%;
    max-width: 975px;
    margin: 0 auto;
    margin-top: 82px;
    padding: 70px 0;
    transition: all 0.6s;
  }
}
section.about .taiginjo-link-wrap::after, section.about .taiginjo-link-wrap::before {
  content: " ";
  display: block;
  width: 34%;
  height: 112%;
  background: url(../myimg/taiginjo-link-illust-left.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-10%, 0%);
}
section.about .taiginjo-link-wrap::after {
  background: url(../myimg/taiginjo-link-illust-right.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  transform: translate(10%, 0%);
}
section.about .taiginjo-link-wrap span.arrow {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFF;
  position: absolute;
  right: 5%;
  top: 58%;
  transform: translate(0, -50%);
  z-index: 2;
  overflow: hidden;
  transition: all 0.4s;
}
@media screen and (min-width: 768px) {
  section.about .taiginjo-link-wrap span.arrow {
    width: 50px;
    height: 50px;
    right: 5%;
    top: 50%;
    transform: translate(0, -50%);
  }
}
section.about .taiginjo-link-wrap span.arrow::after, section.about .taiginjo-link-wrap span.arrow::before {
  content: " ";
  display: block;
  width: 68%;
  height: 100%;
  background: url(../myimg/taiginjo-link-arrow.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}
section.about .taiginjo-link-wrap span.arrow::after {
  transform: translate(-200%, 0);
}
section.about .taiginjo-link-wrap p {
  color: #F3F997;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 3;
}
section.about .taiginjo-link-wrap p.taiginjo-link-txt01 {
  color: #FFF;
  line-height: 1.4;
}
section.about .taiginjo-link-wrap p.taiginjo-link-txt02 {
  font-size: 10.6vw;
  margin-top: 4%;
}
@media screen and (min-width: 768px) {
  section.about .taiginjo-link-wrap p.taiginjo-link-txt02 {
    font-size: 80px;
    line-height: 1;
    margin-top: 0.1em;
    margin-bottom: 12px;
  }
}
section.about .taiginjo-link-wrap p.taiginjo-link-txt02 span.small-txt {
  font-size: 0.6em;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 768px) {
  section.about .taiginjo-link-wrap p.taiginjo-link-txt02 span.small-txt {
    font-size: 62px;
  }
}
section.about .taiginjo-link-wrap p.taiginjo-link-txt03 {
  font-size: 2.93vw;
  line-height: 1.4;
  margin-top: 3%;
}
@media screen and (min-width: 768px) {
  section.about .taiginjo-link-wrap p.taiginjo-link-txt03 {
    font-size: 16px;
    line-height: 1;
    margin-top: 0;
  }
}
section.about .taiginjo-link-wrap:hover {
  transition: all 0.6s;
  background: #D06D47;
  /*			animation: bg-loopani 1.4s ease infinite alternate;*/
}
section.about .taiginjo-link-wrap:hover::before {
  transform: translate(-10%, 0%);
  animation: gatagatabefore 0.12s infinite;
}
section.about .taiginjo-link-wrap:hover::after {
  transform: translate(10%, 0%);
  animation: gatagataafter 0.12s infinite;
}
section.about .taiginjo-link-wrap:hover span.arrow {
  transition: all 0.4s;
  transform: translate(0, -50%) scale(1.1);
}
section.about .taiginjo-link-wrap:hover span.arrow::before {
  transform: translate(-50%, 0);
  animation: arrow-before-loopani 0.8s infinite;
}
section.about .taiginjo-link-wrap:hover span.arrow::after {
  transition: all 0.4s;
  animation: arrow-after-loopani 0.8s infinite;
}
section.about .taiginjo-link-wrap:hover {
  /*arrow*/
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .autospan {
  display: inline-block;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .autospan span {
  display: inline-block;
  animation: txt-wave 2s infinite ease-in-out;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .small-txt span:nth-child(1) {
  animation-delay: 0s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .small-txt span:nth-child(2) {
  animation-delay: 0.12s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .small-txt span:nth-child(3) {
  animation-delay: 0.24s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .small-txt span:nth-child(4) {
  animation-delay: 0.36s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .small-txt span:nth-child(5) {
  animation-delay: 0.48s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .large-txt span:nth-child(1) {
  animation-delay: 0.6s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .large-txt span:nth-child(2) {
  animation-delay: 0.72s;
}
section.about .taiginjo-link-wrap:hover p.taiginjo-link-txt02 .large-txt span:nth-child(3) {
  animation-delay: 0.84s;
}
section.about .taiginjo-link-wrap.ani {
  opacity: 0;
  transform-origin: center center;
  transform: translate(0, 20%) scale(0);
}
section.about .taiginjo-link-wrap.animation {
  animation: scale-up 0.8s 0.2s ease-in forwards;
}
section.about {
  /*.taiginjo-link-wrap{*/
}

.loop-image-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
}
@media screen and (min-width: 768px) {
  .loop-image-wrap {
    margin-top: 115px;
  }
}
.loop-image-wrap .loop-image-box {
  display: flex;
  flex-shrink: 0;
  animation: loop-slide 20s linear infinite;
}
@media screen and (min-width: 768px) {
  .loop-image-wrap .loop-image-box {
    animation: loop-slide 30s linear infinite;
  }
}
.loop-image-wrap .loop-image-box img {
  display: block;
  width: 34vw;
}
@media screen and (min-width: 768px) {
  .loop-image-wrap .loop-image-box img {
    width: 25vw;
    height: auto;
    flex-shrink: 0;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@keyframes scale-up {
  0% {
    opacity: 0;
    transform: translate(0, 18%) scale(0.8);
    transform-origin: center center;
  }
  65% {
    opacity: 1;
    transform: translate(0, 0) scale(1.06);
    transform-origin: center center;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
  }
}
@keyframes title-fade {
  0% {
    opacity: 0;
    transform: translate(0, 20%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0%);
  }
}
@keyframes txt-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loop-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes gatagatabefore {
  0% {
    transform: translate(-10%, 0%) rotate(0deg);
  }
  20% {
    transform: translate(calc(-10% - 2px), 2px) rotate(-2deg);
  }
  40% {
    transform: translate(calc(-10% + 2px), -2px) rotate(2deg);
  }
  60% {
    transform: translate(calc(-10% - 2px), -1px) rotate(-1deg);
  }
  80% {
    transform: translate(calc(-10% + 2px), 1px) rotate(1deg);
  }
  100% {
    transform: translate(-10%, 0%) rotate(0deg);
  }
}
@keyframes gatagataafter {
  0% {
    transform: translate(10%, 0%) rotate(0deg);
  }
  20% {
    transform: translate(calc(10% - 2px), 2px) rotate(-2deg);
  }
  40% {
    transform: translate(calc(10% + 2px), -2px) rotate(2deg);
  }
  60% {
    transform: translate(calc(10% - 2px), -1px) rotate(-1deg);
  }
  80% {
    transform: translate(calc(10% + 2px), 1px) rotate(1deg);
  }
  100% {
    transform: translate(10%, 0%) rotate(0deg);
  }
}
@keyframes arrow-before-loopani {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}
@keyframes arrow-after-loopani {
  0% {
    transform: translate(-200%, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes bg-loopani {
  0% {
    background: #EF845C;
  }
  100% {
    background: #D06D47;
  }
}
@keyframes txt-wave {
  0% {
    transform: scale(1) translateY(0);
  }
  10% {
    transform: scale(1.4) translateY(-0.1em);
  }
  20% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
section.chart {
  padding: 15% 0;
  background: url(../myimg/about-bg02.png) repeat;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.chart {
    padding: 95px 0 115px 0;
    z-index: 2;
  }
}
section.chart h2 {
  font-size: clamp(20px, 6.4vw, 30px);
  text-align: center;
  line-height: 1.54;
  font-weight: 500;
  margin-bottom: 5%;
}
@media screen and (min-width: 768px) {
  section.chart h2 {
    font-size: 38px;
    line-height: 1;
  }
}
section.chart h2 span.adjustment {
  display: inline-block;
  transform: translate(-0.48em, 0);
}
@media screen and (min-width: 768px) {
  section.chart h2 span.adjustment {
    transform: translate(0em, 0);
  }
}
section.chart {
  /*h2*/
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap {
    max-width: 975px;
    display: flex;
    margin: 0 auto;
    margin-top: 80px;
  }
}
section.chart div.chart-link-wrap a.chart-link-box {
  display: block;
  width: 88%;
  margin: 0 auto;
  border: solid 3px #D6B063;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box {
    width: 49.2%;
    display: flex;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover figure {
    overflow: hidden;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover figure img {
    transform: scale(1.2);
    transition: all 0.4s;
    opacity: 0.6;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover .chart-link-txt::before {
    transition: all 0.6s;
    transform: translate(-20%, -35%) scale(3);
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover .chart-link-txt div.link-btn span.txt {
    transition: all 0.6s;
    font-weight: bold;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover .chart-link-txt div.link-btn span.arrow {
    overflow: hidden;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover .chart-link-txt div.link-btn span.arrow::before {
    animation: linkbtn-before-loopani 1s ease infinite;
  }
  section.chart div.chart-link-wrap a.chart-link-box:hover .chart-link-txt div.link-btn span.arrow::after {
    animation: link-btn-after-loopani 1s ease infinite;
  }
  section.chart div.chart-link-wrap a.chart-link-box {
    /**/
  }
}
section.chart div.chart-link-wrap a.chart-link-box figure {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box figure {
    width: 40%;
    order: 2;
  }
  section.chart div.chart-link-wrap a.chart-link-box figure img {
    transition: all 0.4s;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt {
  padding: 8%;
  position: relative;
  z-index: 1;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt {
    width: 60%;
    padding: 30px;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt::before {
  content: " ";
  display: block;
  width: 58%;
  aspect-ratio: 1/1;
  background: #CCC;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-20%, -35%);
  z-index: -1;
  transition: all 0.6s;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt::before {
    width: 100%;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt h3 {
  position: relative;
  font-size: 3.73vw;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt h3 {
    font-size: 14px;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt h4 {
  font-size: 5vw;
  letter-spacing: -0.01em;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt h4 {
    font-size: 20px;
  }
}
@media screen and (min-width: 1000px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt h4 {
    font-size: 28px;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn {
  margin-top: 8%;
  background: #FFF;
  border-radius: 60px;
  position: relative;
  padding: 3% 0 3% 5%;
  letter-spacing: -0.01em;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn {
    width: 86%;
    font-size: 16px;
    margin: 0;
    padding: 0.2em 0 0.2em 1em;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 0);
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn span.txt {
  transition: all 0.6s;
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn span.arrow {
  display: block;
  width: 1.6em;
  height: auto;
  aspect-ratio: 1/1;
  background: #F00;
  border-radius: 50%;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn span.arrow {
    width: 1.4em;
  }
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn span.arrow::before {
  content: " ";
  display: block;
  width: 60%;
  height: 50%;
  background: url(../myimg/arrow.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt div.link-btn span.arrow::after {
  content: " ";
  display: block;
  width: 60%;
  height: 50%;
  background: url(../myimg/arrow.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-200%, -50%);
}
section.chart div.chart-link-wrap a.chart-link-box .chart-link-txt {
  /*div.link-btn{*/
}
section.chart div.chart-link-wrap a.chart-link-box.green {
  background: url(../myimg/chart-link-bg01.png) repeat;
  background-size: 130%;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box.green {
    margin-bottom: 0;
  }
}
section.chart div.chart-link-wrap a.chart-link-box.green .chart-link-txt::before {
  background: #81AB87;
}
section.chart div.chart-link-wrap a.chart-link-box.green .chart-link-txt div.link-btn {
  color: #81AB87;
}
section.chart div.chart-link-wrap a.chart-link-box.green .chart-link-txt div.link-btn span.arrow {
  background: #81AB87;
}
section.chart div.chart-link-wrap a.chart-link-box {
  /*green*/
}
section.chart div.chart-link-wrap a.chart-link-box.blue {
  background: url(../myimg/chart-link-bg02.png) repeat;
  background-size: 130%;
  margin-bottom: 10%;
}
@media screen and (min-width: 768px) {
  section.chart div.chart-link-wrap a.chart-link-box.blue {
    margin-bottom: 0;
  }
}
section.chart div.chart-link-wrap a.chart-link-box.blue .chart-link-txt::before {
  background: #72A2D9;
}
section.chart div.chart-link-wrap a.chart-link-box.blue .chart-link-txt div.link-btn {
  color: #72A2D9;
}
section.chart div.chart-link-wrap a.chart-link-box.blue .chart-link-txt div.link-btn span.arrow {
  background: #72A2D9;
}
section.chart div.chart-link-wrap a.chart-link-box {
  /*green*/
}
section.chart div.chart-link-wrap {
  /*a.chart-link-box{*/
}
section.chart {
  /**/
}
section.chart span.chart-bg01 {
  display: block;
  width: 70%;
  mix-blend-mode: multiply;
  position: absolute;
  left: -17%;
  top: 0;
}
@media screen and (min-width: 768px) {
  section.chart span.chart-bg01 {
    width: 33.6%;
    left: -8%;
    top: 11%;
  }
}
section.chart span.chart-bg02 {
  display: block;
  width: 66.4%;
  mix-blend-mode: multiply;
  position: absolute;
  right: -11%;
  top: 8%;
}
@media screen and (min-width: 768px) {
  section.chart span.chart-bg02 {
    width: 33.6%;
  }
}

/*
@keyframes linkbtn-circleani {
  0% {  transform: translate( -20%, -35%);}
  100% { transform: translate( -20%, -35%) scale(3); }
}
  */
@keyframes linkbtn-before-loopani {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(200%, -50%);
  }
}
@keyframes link-btn-after-loopani {
  0% {
    transform: translate(-200%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
section.hourouki {
  padding: 30% 0;
  position: relative;
}
@media screen and (min-width: 768px) {
  section.hourouki {
    padding: 190px 0 0 0;
  }
}
section.hourouki div.hourouki-wrap {
  width: 92%;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-wrap {
    max-width: 1010px;
    margin: 0 auto;
  }
}
section.hourouki div.hourouki-wrap div.hourou-img {
  width: 33%;
  position: absolute;
  right: -6%;
  top: 6%;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-wrap div.hourou-img {
    max-width: 230px;
    right: 3%;
    top: -8%;
  }
}
section.hourouki div.hourouki-wrap p.commingsoon {
  width: 48%;
  position: absolute;
  left: -3%;
  top: -8%;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-wrap p.commingsoon {
    width: 28%;
    max-width: 278px;
  }
}
section.hourouki div.hourouki-wrap p.illust {
  display: block;
  width: 68%;
  position: absolute;
  left: 5%;
  top: 0%;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-wrap p.illust {
    max-width: 282px;
    left: 13%;
    top: -3%;
  }
}
section.hourouki div.hourouki-cont {
  background: url(../myimg/hourou-bg02_sp.png) repeat-y;
  background-size: 100%;
  padding-bottom: 5%;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont {
    background: url(../myimg/hourou-bg02_pc.png) repeat-y;
    background-size: 100%;
    padding-top: 20px;
  }
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner {
  width: 80%;
  margin-left: 10%;
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner h2 {
  width: 60%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont div.hourouki-cont-inner h2 {
    max-width: 510px;
  }
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner p.hourouki-txt01 {
  text-align: center;
  line-height: 1.6;
  margin-top: 5%;
  margin-bottom: 5%;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont div.hourouki-cont-inner p.hourouki-txt01 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 35px;
  }
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile {
  width: 100%;
  position: relative;
  padding: 4% 0;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile {
    max-width: 650px;
    margin: 0 auto;
    padding: 0;
  }
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-left {
  display: block;
  width: 1px;
  height: 100%;
  background: #CFCFCF;
  position: absolute;
  left: 0;
  top: 0;
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-left::before {
  content: " ";
  width: 16px;
  height: 1px;
  background: #CFCFCF;
  position: absolute;
  left: 0;
  top: 0;
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-left::after {
  content: " ";
  width: 16px;
  height: 1px;
  background: #CFCFCF;
  position: absolute;
  left: 0;
  bottom: 0;
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-right {
  display: block;
  width: 1px;
  height: 100%;
  background: #CFCFCF;
  position: absolute;
  right: 0;
  top: 0;
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-right::before {
  content: " ";
  width: 16px;
  height: 1px;
  background: #CFCFCF;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0);
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile span.border-right::after {
  content: " ";
  width: 16px;
  height: 1px;
  background: #CFCFCF;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-100%, 0);
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile h3 {
  width: 80%;
  margin: 0 auto;
  font-size: 4vw;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile h3 {
    width: 88%;
    font-size: 18px;
  }
}
section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile p.hourouki-txt01 {
  width: 80%;
  margin: 0 auto;
  margin-top: 3%;
  font-size: 2.9vw;
  text-align: left;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  section.hourouki div.hourouki-cont div.hourouki-cont-inner div.profile p.hourouki-txt01 {
    width: 88%;
    margin: 0;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 13px;
  }
}
section.hourouki div.hourouki-cont {
  /**/
}
section.hourouki span.hourouki-cloud01,
section.hourouki span.hourouki-cloud02,
section.hourouki span.hourouki-cloud03,
section.hourouki span.hourouki-cloud04 {
  display: block;
  position: absolute;
  z-index: 1;
}
section.hourouki span.hourouki-cloud01 {
  width: 57%;
  left: -23%;
  top: 5%;
}
@media screen and (min-width: 768px) {
  section.hourouki span.hourouki-cloud01 {
    width: 31%;
    left: -9%;
    top: 10%;
  }
}
section.hourouki span.hourouki-cloud02 {
  width: 16%;
  left: 30%;
  top: 4.6%;
}
@media screen and (min-width: 768px) {
  section.hourouki span.hourouki-cloud02 {
    left: auto;
    width: 144px;
    right: -0.2%;
    top: 72%;
  }
}
section.hourouki span.hourouki-cloud03 {
  width: 25%;
  right: -2%;
  top: 7%;
}
@media screen and (min-width: 768px) {
  section.hourouki span.hourouki-cloud03 {
    right: auto;
    left: -12%;
    top: 45%;
  }
}
section.hourouki span.hourouki-cloud04 {
  width: 39%;
  right: -8%;
  bottom: 9%;
}
@media screen and (min-width: 768px) {
  section.hourouki span.hourouki-cloud04 {
    width: 34%;
    z-index: 5;
    right: -14%;
    bottom: -3%;
  }
}

footer {
  margin-top: 14%;
  padding-bottom: 5%;
  position: relative;
}
footer::before {
  content: " ";
  display: block;
  width: 230%;
  aspect-ratio: 518/463;
  background: #FFA989;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -7%);
  transform-origin: top center;
}
@media screen and (min-width: 768px) {
  footer::before {
    content: " ";
    display: block;
    width: 110%;
    aspect-ratio: 134/125;
    background: #FFA989;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -10%);
    transform-origin: top center;
  }
}
footer .logo-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
}
@media screen and (min-width: 768px) {
  footer .logo-list {
    width: 470px;
    margin: 0 auto;
    gap: 60px;
  }
}
footer .logo-list a {
  display: block;
  line-height: 1;
  padding: 0;
  position: relative;
}
footer .logo-list a::after {
  content: " ";
  display: block;
  width: 1px;
  height: 22px;
  background: #222;
  position: absolute;
  left: -5vw;
  top: 50%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 768px) {
  footer .logo-list a::after {
    width: 1px;
    height: 22px;
    background: #222;
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translate(0, -50%);
  }
}
footer .logo-list a.okhiroshima {
  width: 17%;
}
footer .logo-list a.okhiroshima::after {
  display: none;
}
footer .logo-list a.hiroshimanosake {
  width: 21%;
}
footer .logo-list a.oishiihiroshima {
  width: 9.6%;
}
footer .logo-list a.setouchisakana {
  width: 14%;
}
footer .logo-list {
  /*a*/
}/*# sourceMappingURL=style.css.map */