<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

/* =============================
  デフォルト
============================= */
html {
  font-size: 18px;
}

body {
  font-family: "Yu Gothic Medium",
    "游ゴシック Medium",
    YuGothic,
    "游ゴシック体",
    "ヒラギノ角ゴ Pro W3",
    "メイリオ",
    "Meiryo",
    sans-serif;
  line-height: 1.8;
  color: #001b22;
  text-rendering: optimizeLegibility;
  background: #eee;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

#wrap {
  max-width: 800px;
  padding: 0 3em 3em;
  margin: 0 auto;
  background: #fff;
  word-wrap: break-word;
  position: relative;
  box-sizing: border-box;
}

header {
  max-width: 800px;
  margin: auto 0;
  padding: 1em 0 0.5em;
}

#contents {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.mb1 {margin-bottom: 1em;}
.mb2 {margin-bottom: 2em;}
.mb3 {margin-bottom: 3em;}
.mb4 {margin-bottom: 4em;}
.mb5 {margin-bottom: 5em;}
.mb6 {margin-bottom: 6em;}
.mb7 {margin-bottom: 7em;}
.mb8 {margin-bottom: 8em;}
.mb9 {margin-bottom: 9em;}
.mb10 {margin-bottom: 10em;}

.cv {
  padding: 4em 0;
}
.cv:hover {
	opacity: 0.7 ;
}

.com_txt{
  line-height: 3;
}

footer {
  background-color: #ccc;
  width: 100%;
  position: absolute;
  text-align:center;
}

footer &gt; div{
  display: inline-block;
  margin: 0 auto;
}

.footer_txt {
  color: #ffffff;
  padding: 1em 2em;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
}

.footer_txt a{
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
html {
  font-size: 4vw;
}

#wrap {
  max-width:100%;
  padding: 0 0 10vw;
}

#contents {
  max-width:100%;
  padding: 0 5vw;
}

header {
  max-width:100%;
  margin: 0 auto;
  padding: 3vw 5vw 0.5vw;
}

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .mb1 {margin-bottom: 2vw;}
  .mb2 {margin-bottom: 4vw;}
  .mb3 {margin-bottom: 6vw;}
  .mb4 {margin-bottom: 8vw;}
  .mb5 {margin-bottom: 10vw;}
  .mb6 {margin-bottom: 12vw;}
  .mb7 {margin-bottom: 14vw;}
  .mb8 {margin-bottom: 16vw;}
  .mb9 {margin-bottom: 18vw;}
  .mb10 {margin-bottom: 20vw;}
}



/* IE表示用のCSS　*/
@media all and (-ms-high-contrast: none) {
  body {
    font-family: "メイリオ", Meiryo, sans-serif;
  }
}


/* =============================
  画像
============================= */
#contents img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  padding: 1em 0;
  vertical-align: bottom;
}

#contents video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  padding: 1em 0;
  vertical-align: bottom;
}

.img_center {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.img_voice {
  max-width: 560px;
  margin: 0 auto;
}

.youtube {
  text-align: center;
  margin: 3em 0;
}

.youtube iframe {
  max-width: 560px;
}

@media only screen and (max-width: 641px) {
  .youtube iframe {
    width: 100%;
  }
}
/* =============================
  口コミコンテンツ用
============================= */
.voice_box {
  padding: 2em;
  margin: 1.5em 0 0.5em;
  border: solid 1px #ccc;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.txt_voice {
  max-width: 560px;
  margin: 1em auto 0;
}

.txt_voice_right{
  max-width: 560px;
  text-align: right;
  margin: 0 auto;
}

/* =============================
  文字装飾
============================= */
hr {
  color: #CCCCCC;
}

.date {
  text-align: right;
}

.txt_note {
  text-align: right;
  font-size: 0.7em;
  padding-bottom: 2em;
}

.pr{
  font-size: 0.7em;
  text-align: right;
}

/* =============================
  h1〜h6
============================= */
h1 {
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  padding: 0.2em 0;
  margin: 0 0 1em 0;
}

h3 {
  font-size: 1.3em;
  line-height: 1.4;
  margin: 2em 0 0;
  padding: 0.5em 0.5em 0.5em 1em;
}

h4 {
  position: relative;
  overflow: hidden;
  padding: 1.5em 2em 1.5em 6em;
  border-radius: 10px;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1.2;
  margin: 2em 0 1em;
}

h4:before {
  position: absolute;
  top: -150%;
  left: -112px;
  width: 10em;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

h4 span {
  font-size: 1.5em;
  position: absolute;
  z-index: 1;
  top: 0.6em;
  left: 0.6em;
  display: block;
  line-height: 1.5;
}

h5 {
  border-radius: 10px;
  margin: 0.5em 0;
  padding: 1em 0;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.txt_s {
  font-size: 0.8em;
}

.txt_m{
  font-size: 1.2em;
  font-weight: bold;
}

.txt_l , .txt_big{
  font-size: 1.5em;
  font-weight: bold;
}

b {
  font-weight: bold;
}

.txt_pink_bold , .txt_orange_bold , .txt_red_bold , .txt_green_bold ,.txt_blue_bold{
  font-weight: bold;
}

.txt_pink_big , .txt_orange_big , .txt_red_big , .txt_green_big , .txt_blue_big{
  font-weight: bold;
  font-size: 1.5em;
}

/* ライン_本文と同一 */
.txt_line {
  text-decoration: underline;
}

/* エリア */
.gray_area{
  border-radius: 1em;
  padding: 1em 1em 1em 3em;
  margin: 1em 0;
}

.yellow_area{
  border-radius: 1em;
  padding: 1em 1em 1em 3em;
  margin: 1em 0;
}

.color_area{
  border-radius: 1em;
  padding: 1em 1em 1em 3em;
  margin: 1em 0;
}

@media only screen and (max-width: 767px) {
  .date {
    font-size: 2vw;
  }

  .pr {
    font-size: 2vw;
  }

  .txt_note {
    font-size: 3vw;
    padding-bottom: 6vw;
  }

  h1 {
    line-height: 1.3;
    font-weight: bold;
    margin-bottom: 3vw;
  }

  h2 {
    font-size: 5vw;
  }

  h3 {
    font-size: 4vw;
  }

  h4 {
    padding: 4vw 2vw 4vw 19vw;
    border-radius: 3vw;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.2;
    margin: 1vw 0;
  }

  h4:before {
    top: -150%;
    left: -21vw;
    width: 40vw;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  h4 span {
    font-size: 5vw;
    top: 3vw;
    left: 3vw;
  }

  h5 {
    font-size: 4vw;
    margin: 0;
    padding: 1vw 0;
  }

  .txt_s {
    font-size: 3vw;
  }

  .txt_m{
    font-size: 4.5vw;
  }

  .txt_l , .txt_big{
    font-size: 5vw;
  }

  .txt_pink_big , .txt_orange_big , .txt_red_big , .txt_green_big , .txt_blue_big{
    font-weight: bold;
    font-size: 5vw;
  }

}

/* =============================
  配置
============================= */
.txt_right{
  text-align: right;
}
.txt_center {
  text-align: center;
}

/* =============================
  CV
============================= */
.default-btn{
  font-weight: bold;
  text-align: center;
  border-radius: 9999px;
  text-decoration: none;
  padding: 0.5em 3em;
  display: block;
}

@media screen and (max-width: 767px) {
  .default-btn{
    padding: 4vw 0;
  }
}

/* 光らせるstyle */
.shiny-btn{
  font-weight: bold;
  text-align: center;
  border-radius: 9999px;
  text-decoration: none;
  padding: 0.5em 3em;
  display: block;
}

@media screen and (max-width: 767px) {
  .shiny-btn{
    padding: 4vw 0;
  }
}

/* 光らせるためのstyle */
.shine{
  position: relative;
  overflow: hidden;
}
/* 光の疑似要素 */
.shine::before{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
/* 光の動き */
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/* ふわふわさせるstyle */
.float-btn {
  font-weight: bold;
  text-align: center;
  border-radius: 9999px;
  text-decoration: none;
  padding: 0.5em 3em;
  display: block;
}

@media screen and (max-width: 767px) {
  .float-btn{
    padding: 4vw 0;
  }
}

.float-btn.float {
  -webkit-animation: float 2s ease-in-out infinite alternate;
          animation: float 2s ease-in-out infinite alternate;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.3em, 0);
            transform: translate3d(0, 0.3em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.3em, 0);
            transform: translate3d(0, 0.3em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
}</pre></body></html>