@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* COLOR */
/* ============================================ */
/*  font set
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Oswald', sans-serif;
*/
/* ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Oswald:wght@400;600;700&display=swap");
/* breakpoints */
/* ============================================ */
/* mixin */
/* ============================================ */
/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.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);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*==================================================
パタッ
===================================*/
/* 下へ */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* 左へ */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 左上へ */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* 右へ */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 右上へ */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0;
}

/*==================================================
くるっ
===================================*/
/* X 軸（縦へ） */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/*　Y軸（横へ） */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* Z 軸（左へ） */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/*　Z 軸（右へ） */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/
/* 拡大 */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* 縮小 */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0;
}

/*==================================================
じわっ
===================================*/
/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0;
}

/*==================================================
にゅーん
===================================*/
/* 滑らかに変形して出現 */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative;
  /* 枠線が書かれる基点*/
  opacity: 0;
}

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime 0.5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 0.5s linear 0.5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime 0.5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 0.5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime 0.5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
/*背景色が伸びて出現（共通）*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*右から*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/*下から*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/*上から*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*========= レイアウトのためのCSS ===============*/
.wrapper {
  overflow: hidden;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing: border-box;
}

.bgextend,
.lineTrigger {
  width: 220px;
  padding: 20px;
  margin: 0 20px 20px 20px;
  box-sizing: border-box;
}

/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2;
  /*この数字を必要回数分に変更*/
}

.countinfinite {
  animation-iteration-count: infinite;
  /*無限ループ*/
}

/* テンポのよい200ms(0.2秒)刻みのディレイ設定 */
.delay-time02.animate__animated {
  animation-delay: 0.2s;
}

.delay-time04.animate__animated {
  animation-delay: 0.4s;
}

.delay-time06.animate__animated {
  animation-delay: 0.6s;
}

.delay-time08.animate__animated {
  animation-delay: 0.8s;
}

.delay-time10.animate__animated {
  animation-delay: 1s;
}

.delay-time12.animate__animated {
  animation-delay: 1.2s;
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s;
}

.delay-time1 {
  animation-delay: 1s;
}

.delay-time15 {
  animation-delay: 1.5s;
}

.delay-time2 {
  animation-delay: 2s;
}

.delay-time25 {
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s;
}

.change-time1 {
  animation-duration: 1s;
}

.change-time15 {
  animation-duration: 1.5s;
}

.change-time2 {
  animation-duration: 2s;
}

.change-time25 {
  animation-duration: 2.5s;
}

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

@keyframes fadeLeftLittleAnime {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
html {
  font-size: 14px;
  line-height: 1.15;
}

body {
  color: #333333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  margin: 0;
}

html,
body {
  height: 100%;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

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

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  color: #fff;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo svg {
  width: 300px;
}

/*動きのきっかけの起点となるクラス名 はじめは非表示に*/
.fadeInUpTrigger,
.fadeInDownTrigger,
.fadeInUpTriggerOnce,
.fadeInLeftTriggerOnce {
  opacity: 0;
}

/***************************************************
 * Generated by SVG Artista on 1/18/2023, 1:45:58 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 332.253112793px;
    stroke-dasharray: 332.253112793px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 332.253112793px;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 332.253112793px;
    stroke-dasharray: 332.253112793px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 332.253112793px;
  }
}
#svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1.5s ease-in-out 0.2s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  animation: animate-svg-stroke-1 1.5s ease-in-out 0.2s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 18.1856594086px;
    stroke-dasharray: 18.1856594086px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 18.1856594086px;
  }
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 18.1856594086px;
    stroke-dasharray: 18.1856594086px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 18.1856594086px;
  }
}
@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1.5s ease-in-out 0.32s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  animation: animate-svg-stroke-2 1.5s ease-in-out 0.32s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 36.200012207px;
    stroke-dasharray: 36.200012207px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 36.200012207px;
  }
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 36.200012207px;
    stroke-dasharray: 36.200012207px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 36.200012207px;
  }
}
@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1.5s ease-in-out 0.44s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  animation: animate-svg-stroke-3 1.5s ease-in-out 0.44s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 53.1177101135px;
    stroke-dasharray: 53.1177101135px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1177101135px;
  }
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 53.1177101135px;
    stroke-dasharray: 53.1177101135px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1177101135px;
  }
}
@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1.5s ease-in-out 0.56s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
  animation: animate-svg-stroke-4 1.5s ease-in-out 0.56s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 43.2849502563px;
    stroke-dasharray: 43.2849502563px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 43.2849502563px;
  }
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 43.2849502563px;
    stroke-dasharray: 43.2849502563px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 43.2849502563px;
  }
}
@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 1.5s ease-in-out 0.68s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
  animation: animate-svg-stroke-5 1.5s ease-in-out 0.68s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 11.9056615829px;
    stroke-dasharray: 11.9056615829px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.9056615829px;
  }
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 11.9056615829px;
    stroke-dasharray: 11.9056615829px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 11.9056615829px;
  }
}
@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 1.5s ease-in-out 0.8s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
  animation: animate-svg-stroke-6 1.5s ease-in-out 0.8s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 68.6254043579px;
    stroke-dasharray: 68.6254043579px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 68.6254043579px;
  }
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 68.6254043579px;
    stroke-dasharray: 68.6254043579px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 68.6254043579px;
  }
}
@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 1.5s ease-in-out 0.92s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
  animation: animate-svg-stroke-7 1.5s ease-in-out 0.92s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 34.8610076904px;
    stroke-dasharray: 34.8610076904px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 34.8610076904px;
  }
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 34.8610076904px;
    stroke-dasharray: 34.8610076904px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 34.8610076904px;
  }
}
@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 1.5s ease-in-out 1.04s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
  animation: animate-svg-stroke-8 1.5s ease-in-out 1.04s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 44.0379486084px;
    stroke-dasharray: 44.0379486084px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.0379486084px;
  }
}
@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 44.0379486084px;
    stroke-dasharray: 44.0379486084px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 44.0379486084px;
  }
}
@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 1.5s ease-in-out 1.16s both, animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
  animation: animate-svg-stroke-9 1.5s ease-in-out 1.16s both, animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 58.5008392334px;
    stroke-dasharray: 58.5008392334px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 58.5008392334px;
  }
}
@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 58.5008392334px;
    stroke-dasharray: 58.5008392334px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 58.5008392334px;
  }
}
@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 1.5s ease-in-out 1.28s both, animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s both;
  animation: animate-svg-stroke-10 1.5s ease-in-out 1.28s both, animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 57.1501083374px;
    stroke-dasharray: 57.1501083374px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 57.1501083374px;
  }
}
@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 57.1501083374px;
    stroke-dasharray: 57.1501083374px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 57.1501083374px;
  }
}
@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 1.5s ease-in-out 1.4s both, animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
  animation: animate-svg-stroke-11 1.5s ease-in-out 1.4s both, animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 53.1174926758px;
    stroke-dasharray: 53.1174926758px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1174926758px;
  }
}
@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 53.1174926758px;
    stroke-dasharray: 53.1174926758px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1174926758px;
  }
}
@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 1.5s ease-in-out 1.52s both, animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
  animation: animate-svg-stroke-12 1.5s ease-in-out 1.52s both, animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 63.7199630737px;
    stroke-dasharray: 63.7199630737px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.7199630737px;
  }
}
@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 63.7199630737px;
    stroke-dasharray: 63.7199630737px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.7199630737px;
  }
}
@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 1.5s ease-in-out 1.64s both, animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
  animation: animate-svg-stroke-13 1.5s ease-in-out 1.64s both, animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 63.5931015015px;
    stroke-dasharray: 63.5931015015px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.5931015015px;
  }
}
@keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 63.5931015015px;
    stroke-dasharray: 63.5931015015px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.5931015015px;
  }
}
@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-14 {
  -webkit-animation: animate-svg-stroke-14 1.5s ease-in-out 1.76s both, animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
  animation: animate-svg-stroke-14 1.5s ease-in-out 1.76s both, animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 35.6000061035px;
    stroke-dasharray: 35.6000061035px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 35.6000061035px;
  }
}
@keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 35.6000061035px;
    stroke-dasharray: 35.6000061035px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 35.6000061035px;
  }
}
@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-15 {
  -webkit-animation: animate-svg-stroke-15 1.5s ease-in-out 1.88s both, animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
  animation: animate-svg-stroke-15 1.5s ease-in-out 1.88s both, animate-svg-fill-15 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s both;
}

@-webkit-keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 53.1406745911px;
    stroke-dasharray: 53.1406745911px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1406745911px;
  }
}
@keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 53.1406745911px;
    stroke-dasharray: 53.1406745911px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.1406745911px;
  }
}
@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-16 {
  -webkit-animation: animate-svg-stroke-16 1.5s ease-in-out 2s both, animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
  animation: animate-svg-stroke-16 1.5s ease-in-out 2s both, animate-svg-fill-16 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s both;
}

@-webkit-keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 58.4912643433px;
    stroke-dasharray: 58.4912643433px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 58.4912643433px;
  }
}
@keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 58.4912643433px;
    stroke-dasharray: 58.4912643433px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 58.4912643433px;
  }
}
@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-17 {
  -webkit-animation: animate-svg-stroke-17 1.5s ease-in-out 2.12s both, animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
  animation: animate-svg-stroke-17 1.5s ease-in-out 2.12s both, animate-svg-fill-17 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s both;
}

@-webkit-keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 62.7066497803px;
    stroke-dasharray: 62.7066497803px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.7066497803px;
  }
}
@keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 62.7066497803px;
    stroke-dasharray: 62.7066497803px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 62.7066497803px;
  }
}
@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(35, 24, 21);
  }
}
.svg-elem-18 {
  -webkit-animation: animate-svg-stroke-18 1.5s ease-in-out 2.24s both, animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
  animation: animate-svg-stroke-18 1.5s ease-in-out 2.24s both, animate-svg-fill-18 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s both;
}

header {
  position: absolute;
  top: 30px;
  left: 30px;
}
@media screen and (max-width: 767px) {
  header {
    top: 20px;
    left: 15px;
  }
}
header img {
  width: 195px;
}

.wrapper {
  display: none;
}

#my-background {
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #my-background {
    height: 670px;
  }
}
#my-background h1 {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 10rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: absolute;
  left: 50px;
  bottom: 70px;
}
@media screen and (max-width: 767px) {
  #my-background h1 {
    font-size: 5rem;
    left: 20px;
    bottom: 38%;
  }
}

.cookie-consent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 0.86rem;
  line-height: 1.75em;
  color: #aaaaaa;
  background: rgba(0, 0, 0, 0.7);
  padding: 1.2em;
  box-sizing: border-box;
  visibility: hidden;
  z-index: 10;
}

.cookie-consent.is-show {
  visibility: visible;
}

.cookie-consent a {
  color: #aaaaaa !important;
  text-decoration: underline;
}

.cookie-agree {
  font-size: 0.86rem;
  line-height: 1em;
  color: #fff;
  border: solid 1px #ffffff;
  padding: 0.8em 1.5em;
}
@media screen and (max-width: 767px) {
  .cookie-agree {
    padding: 0.8em 4.5em;
  }
}

.cookie-agree:hover {
  cursor: pointer;
}

/* パッと消える */
.cc-hide1 {
  display: none;
}

/* ゆっくり消える */
.cc-hide2 {
  animation: hide 1s linear 0s;
  animation-fill-mode: forwards;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* メディアクエリ */
@media screen and (max-width: 600px) {
  .cookie-consent {
    flex-direction: column;
  }
  .cookie-text {
    margin-bottom: 1em;
  }
}
.gnav {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 2;
  transition: 0.2s all;
  mix-blend-mode: plus-lighter;
}
@media screen and (max-width: 767px) {
  .gnav {
    top: 10px;
    right: 10px;
  }
}
.gnav.active {
  transform: scale(0.8) translate(20px, -30px);
  mix-blend-mode: plus-lighter;
}
@media screen and (max-width: 767px) {
  .gnav.active {
    transform: scale(0.8) translate(10px, -20px);
  }
}
.gnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnav ul li {
  text-align: right;
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  margin-top: 10px;
  transition: 0.2s all;
}
.gnav ul li:first-of-type {
  margin-top: 0;
}
.gnav ul li:hover {
  font-size: 1.8rem;
  margin: 5px 0;
}
.gnav ul li a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

.l-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 180px;
}
@media screen and (max-width: 767px) {
  .l-wrapper {
    padding: 130px 15px 0;
  }
}

footer {
  font-family: "Oswald", sans-serif;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  padding: 10px;
}
@media screen and (max-width: 767px) {
  footer {
    padding: 10px 15px;
  }
}

.about__wrap {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .about__wrap {
    height: initial;
    padding: 50px 15px;
    display: block;
  }
}
.about__inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .about__inner {
    flex-direction: column;
  }
}
.about__inner div {
  max-width: 440px;
}
.about__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.about__head img {
  width: 112px;
  height: auto;
  flex: 0 0 112px;
}
.about__head h2 {
  font-size: 1.28rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex: 0 0 70%;
}
.about__head h2:before {
  content: "";
  width: 70%;
  height: 1px;
  background-color: #D4D4D4;
  display: inline-block;
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  .about__head h2:before {
    width: 65%;
  }
}
.about__contents {
  padding-top: 30px;
  line-height: 1.5em;
}
.about__contents p {
  padding-top: 10px;
}
.about__img {
  margin-left: 50px;
}
@media screen and (max-width: 767px) {
  .about__img {
    margin-left: 0;
    padding-top: 40px;
  }
}
.about__img ul {
  position: relative;
  list-style: none;
  width: 440px;
  height: 440px;
  margin: 0px auto 0;
  padding: 0;
  animation: rotate 100s linear infinite;
}
@media screen and (max-width: 767px) {
  .about__img ul {
    width: 320px;
    height: 320px;
    animation: initial;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.about__img li {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 240px;
  height: 240px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: #2980F2;
  text-align: center;
  box-sizing: border-box;
  animation: rotate-elm 100s linear infinite;
  background: #EFFAFF;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 767px) {
  .about__img li {
    width: 172px;
    height: 172px;
    animation: fuwafuwa 3s infinite ease-in-out 0.8s alternate;
  }
  @keyframes fuwafuwa {
    0% {
      transform: translate(0, 0) rotate(-7deg);
    }
    50% {
      transform: translate(0, -7px) rotate(0deg);
    }
    100% {
      transform: translate(0, 0) rotate(7deg);
    }
  }
}
.about__img li:nth-child(1) {
  top: 0;
  left: 102px;
}
@media screen and (max-width: 767px) {
  .about__img li:nth-child(1) {
    left: 75px;
  }
}
.about__img li:nth-child(2) {
  top: 180px;
  left: 0px;
}
@media screen and (max-width: 767px) {
  .about__img li:nth-child(2) {
    top: 130px;
    left: 0px;
  }
}
.about__img li:nth-child(3) {
  top: 180px;
  right: 0px;
}
@media screen and (max-width: 767px) {
  .about__img li:nth-child(3) {
    top: 130px;
    right: 0;
  }
}
@keyframes rotate-elm {
  100% {
    transform: rotate(-360deg);
  }
}
.about__img .fa {
  font-size: 26px;
}
.about__img p {
  display: block;
  font-size: 1.28rem;
}
@media screen and (max-width: 767px) {
  .about__img p {
    font-size: 1rem;
  }
}

.solution {
  padding: 160px 0;
}
@media screen and (max-width: 767px) {
  .solution {
    padding: 60px 0;
  }
}
.solution__wrapper {
  background: -moz-linear-gradient(left, #99dbe8, #CBEDEA);
  background: -webkit-linear-gradient(left, #99dbe8, #CBEDEA);
  background: linear-gradient(to right, #99dbe8, #CBEDEA);
}
.solution__wrap {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .solution__wrap {
    flex-direction: column;
    padding: 0 15px;
  }
}
.solution__head {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  color: #333;
  flex: 0 0 30%;
}
.solution__head h2 {
  font-size: 1.5rem;
}
.solution__head p {
  padding-top: 10px;
  font-size: 1.07rem;
}
.solution__body {
  flex: 0 0 65%;
  color: #333;
}
@media screen and (max-width: 767px) {
  .solution__body {
    padding-top: 34px;
  }
}
.solution__body h3 {
  font-size: 1.14rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.solution__body h3:after {
  content: "";
  width: 65%;
  height: 1px;
  background-color: #333;
  display: inline-block;
  margin-left: 10px;
}
@media screen and (max-width: 767px) {
  .solution__body h3:after {
    width: 38%;
  }
}
.solution__body h3.short:after {
  width: 72%;
}
@media screen and (max-width: 767px) {
  .solution__body h3.short:after {
    width: 51%;
  }
}
.solution__body li {
  padding-top: 60px;
}
@media screen and (max-width: 767px) {
  .solution__body li {
    padding-top: 36px;
  }
}
.solution__body li span {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 1.07rem;
  padding-right: 10px;
}
.solution__body li h4 {
  font-size: 1.07rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.solution__body li h4:before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: #333;
  display: inline-block;
  margin-right: 5px;
}
.solution__body li p {
  line-height: 1.5em;
  padding-top: 10px;
}
.solution__lead {
  padding-top: 52px;
  line-height: 1.5em;
}
@media screen and (max-width: 767px) {
  .solution__lead {
    padding-top: 32px;
  }
}

.evening .solution__wrapper {
  background: -moz-linear-gradient(left, #F19854, #f3b178);
  background: -webkit-linear-gradient(left, #F19854, #f3b178);
  background: linear-gradient(to right, #F19854, #f3b178);
}

.morning h1 {
  mix-blend-mode: color-burn;
}

.night .header .my-background img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(37%) saturate(3646%) hue-rotate(0deg) brightness(104%) contrast(103%);
}
.night h1 {
  color: #fff;
  mix-blend-mode: soft-light;
}
.night .solution__wrapper {
  background: -moz-linear-gradient(left, #1A3453, #748BB3);
  background: -webkit-linear-gradient(left, #1A3453, #748BB3);
  background: linear-gradient(to right, #1A3453, #748BB3);
}
.night .solution__head {
  color: #fff;
}
.night .solution__body {
  color: #fff;
}
.night .solution__body h3:after {
  background-color: #fff;
}
.night .solution__body h4:before {
  background-color: #fff;
}

.portfolio {
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .portfolio {
    padding: 60px 0;
  }
}
.portfolio__wrap {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .portfolio__wrap {
    padding: 0 15px;
  }
}
.portfolio__head {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}
.portfolio__head h2 {
  font-size: 1.5rem;
}
.portfolio__head p {
  padding-top: 10px;
  font-size: 1.07rem;
}
.portfolio__body {
  padding-top: 54px;
}
@media screen and (max-width: 767px) {
  .portfolio__body {
    padding-top: 34px;
  }
}
.portfolio__body h3 {
  font-size: 1.14rem;
  font-weight: 600;
  position: relative;
}
.portfolio__body h3:after {
  content: "";
  position: absolute;
  width: 150%;
  height: 1px;
  background-color: #D4D4D4;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  right: -620px;
}
.portfolio__inner {
  padding-top: 65px;
  display: flex;
  overflow: scroll;
}
@media screen and (max-width: 767px) {
  .portfolio__inner {
    padding-top: 32px;
  }
}
.portfolio__inner figure img {
  width: 250px;
  height: auto;
}
.portfolio__inner li {
  padding-bottom: 10px;
}
.portfolio__inner li:not(:first-child) {
  padding-left: 50px;
}
.portfolio__inner p {
  padding-top: 10px;
  color: #707070;
  font-size: 0.9rem;
}
.portfolio__inner p.title {
  font-weight: 600;
  padding-top: 25px;
  font-size: 1rem;
  color: #333333;
}

.profile {
  padding: 160px 0;
}
@media screen and (max-width: 767px) {
  .profile {
    padding: 60px 0;
  }
}
.profile__wrapper {
  background: -moz-linear-gradient(left, #0074E9, #009FE8);
  background: -webkit-linear-gradient(left, #0074E9, #009FE8);
  background: linear-gradient(to right, #0074E9, #009FE8);
}
.profile__wrap {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .profile__wrap {
    flex-direction: column;
    padding: 0 15px;
  }
}
.profile__head {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  color: #fff;
  flex: 0 0 26%;
}
.profile__head h2 {
  font-size: 1.5rem;
}
.profile__body {
  flex: 0 0 70%;
  color: #fff;
}
.profile__body ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px 40px;
}
@media screen and (max-width: 767px) {
  .profile__body ul {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .profile__body li {
    padding-top: 30px;
  }
}
.profile__body li h4 {
  font-size: 1.14rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.profile__body li p {
  line-height: 1.5em;
  padding-top: 10px;
}
.profile__body li p .address {
  display: inline-block;
  position: relative;
}
.profile__body li p .address:after {
  content: "";
  position: absolute;
  background: url("../image/address.svg") no-repeat;
  width: 11px;
  height: 14px;
  top: 50%;
  transform: translateY(-50%);
  right: -15px;
}

.privacy p {
  margin: 0;
}
.privacy__ttl {
  font-size: 2rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
}
.privacy__inner {
  line-height: 1.6em;
  padding-top: 30px;
}
.privacy__inner .ttl {
  font-size: 1.2rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-top: 30px;
  color: #469DE2;
}
.privacy__inner .ttl:before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: #469DE2;
  display: inline-block;
  margin-right: 5px;
}
.privacy__inner .txt {
  padding-top: 20px;
}
.privacy__inner ul {
  margin: 0;
  padding: 10px 0 0 15px;
}
.privacy__inner ul li {
  list-style: none;
  display: flex;
  align-items: center;
}
.privacy__inner ul li:before {
  content: "";
  width: 5px;
  height: 2px;
  background-color: #333;
  display: inline-block;
  margin-right: 5px;
}
.privacy__inner a {
  text-decoration: underline;
  color: #469DE2;
}
.privacy__footer {
  margin-top: 50px;
  border-top: 1px solid #333;
}/*# sourceMappingURL=style.css.map */