@charset "UTF-8";
/*
Theme Name: 
Author: 川元綾子(Designer) / 田中勇輔(Developer)
Description: 
Version: 1.10 (2022/12/20)
*/
/***************************************************************
 *
 * sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css
 *
***************************************************************/
pre, textarea {
  overflow: auto;
}

[hidden], audio:not([controls]), template {
  display: none;
}

details, main, summary {
  display: block;
}

input[type=number] {
  width: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

progress {
  display: inline-block;
}

small {
  font-size: 75%;
}

textarea {
  resize: vertical;
}

[unselectable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

*, ::after, ::before {
  box-sizing: inherit;
  border-style: solid;
  border-width: 0;
}

* {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

::after, ::before {
  text-decoration: inherit;
  vertical-align: inherit;
}

:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  box-sizing: border-box;
  cursor: default;
  font: 20px/1.5 sans-seri f;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
}

audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

button, input, select, textarea {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
}

ol, ul {
  list-style: none;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::-moz-selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

::selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

@media screen {
  [hidden~=screen] {
    display: inherit;
  }
  [hidden~=screen]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
  }
}
/***************************************************************
 *
 * layout and etc...
 *
***************************************************************/
img {
  max-width: 100%;
  height: auto;
}

html {
  overflow: hidden;
}

body {
  overflow: hidden;
  margin: 0;
}

/* 
			Scroll and Show
*********************************************/
.ssb {
  transform: translateY(3em);
  transition: all 0.8s ease;
  opacity: 0;
}

.sso {
  transition: all 2s ease;
  opacity: 0;
}

.ssr {
  transform: translate(0.3em, -0.2em) rotate(1.8deg) skew(1.2deg, -1.4deg);
  transition: all 2s ease-in-out;
  opacity: 0;
}

.ssr2 {
  transform: translate(-0.2em, -0.3em) rotate(-2.2deg) skew(-0.9deg, 1.2deg);
  transition: all 2s ease-in-out;
  opacity: 0;
}

.ssr3 {
  transform: translate(0.2em, 0.3em) rotate(-2.2deg) skew(0.9deg, -1.8deg);
  transition: all 2s ease-in-out;
  opacity: 0;
}

.ssr4 {
  transform: translate(-0.3em, 0.2em) rotate(1.2deg) skew(-1.9deg, 1.4deg);
  transition: all 2s ease-in-out;
  opacity: 0;
}

.ss_on.sso,
.ss_on.ssr,
.ss2_on.ssr,
.ss3_on.ssr,
.ss_on.ssr2,
.ss2_on.ssr2,
.ss3_on.ssr2,
.ss_on.ssr3,
.ss2_on.ssr3,
.ss3_on.ssr3,
.ss_on.ssr4,
.ss2_on.ssr4,
.ss3_on.ssr4,
.ss_on.ssb,
.ss2_on.ssb,
.ss3_on.ssb {
  transform: none;
  opacity: 1;
}

/* 
			eachTextAnime
*********************************************/
.eachTextAnime span,
.eachTextAnime2 span,
.eachTextAnime3 span {
  opacity: 0;
}

.eachTextAnime.appeartext span,
.eachTextAnime2.appeartext span,
.eachTextAnime3.appeartext span {
  animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 
			slick hack
*********************************************/
#member .slick-prev {
  width: 8em;
  height: 8em;
  left: 0;
  font-size: 1em;
  z-index: 2;
}
#member .slick-prev::before {
  content: "＜";
  font-size: 8em;
}
#member .slick-next {
  width: 8em;
  height: 8em;
  right: 0;
  font-size: 1em;
}
#member .slick-next::before {
  content: "＞";
  font-size: 8em;
}

/***************************************************************
 *
 * sass media query
 *
***************************************************************/
/***************************************************************
 *
 * Stylesheet for LP
 *
***************************************************************/
/*
			Font
*********************************************/
body {
  font-size: 20px;
  line-height: 1.4em;
  color: #292828;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", "Meiryo", serif;
  overflow: hidden;
}

body a {
  color: #292828;
  text-decoration: none;
}

.font_a {
  font-family: "游ゴシック", "YuGothic", "open sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "メイリオ", "Meiryo", sans-serif;
}

/*
			PC通話発信無効化
*********************************************/
@media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/* 
			Responsive
*********************************************/
.res {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2.77em;
}

.lg_show,
.md_show,
.sm_show,
.xs_show,
.lg_showin,
.md_showin,
.sm_showin,
.xs_showin {
  display: none;
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 20px;
    font-size: 1.5384615385vw;
    line-height: 1.4em;
  }
  .lg_hide {
    display: none;
  }
  .lg_show {
    display: block;
  }
  .lg_showin {
    display: inline;
  }
  .res {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  body {
    font-size: 15.75px;
    font-size: 1.5384615385vw;
    line-height: 1.4em;
  }
}
@media screen and (max-width: 768px) {
  .md_hide {
    display: none;
  }
  .md_show {
    display: block;
  }
  .md_showin {
    display: inline;
  }
  body {
    font-size: 20px;
    font-size: 2.6041666667vw;
    line-height: 1.4em;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 15.6px;
    font-size: 2.6041666667vw;
    line-height: 1.4em;
  }
  .sm_hide {
    display: none;
  }
  .sm_show {
    display: block;
  }
  .sm_showin {
    display: inline;
  }
}
@media screen and (max-width: 414px) {
  body {
    font-size: 10.76px;
    font-size: 2.6041666667vw;
    line-height: 1.4em;
  }
  .xs_hide {
    display: none;
  }
  .xs_show {
    display: block;
  }
  .xs_showin {
    display: inline;
  }
}
/* 
			drawer
*********************************************/
#gm {
  display: none;
}

span#gmb_close {
  cursor: pointer;
}

/***************************************************************
 *
 * 				 LP
 *
***************************************************************/
header {
  position: relative;
  height: 63.9em;
  background: url("img/11.jpg") no-repeat center top;
}
@media screen and (max-width: 1300px) {
  header {
    background: url("img/11m.jpg") no-repeat center top;
  }
}
@media screen and (max-width: 768px) {
  header {
    background: url("img/11s.jpg") no-repeat center top/100% auto;
    height: 60.3em;
  }
}
header > span {
  position: absolute;
  display: block;
  width: 71.9em;
  height: 22.35em;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 1500px) {
  header > span {
    width: 95.8666666667%;
  }
}
@media screen and (max-width: 768px) {
  header > span {
    transform: translateY(18em);
  }
}
header > h2 {
  padding: 4em 0 0;
  margin: 0 auto 14em;
  width: 11.425em;
}
@media screen and (max-width: 768px) {
  header > h2 {
    padding: 2.5em 0 0;
  }
}
header > a {
  position: absolute;
  display: block;
  width: 0.825em;
  height: 12.8875em;
  left: 2em;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  header > a {
    display: none;
  }
}
header > h3 {
  position: absolute;
  display: block;
  width: 1.2625em;
  height: 29.4em;
  right: 2em;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  header > h3 {
    display: none;
  }
}
header > h1 {
  width: 34.675em;
  margin: 0 auto;
}
header > h1 > span:nth-child(1) {
  display: block;
  width: 18.575em;
  margin: 0 auto 2em;
  opacity: 0;
  transition: ease 1s all;
}
header > h1 > span:nth-child(1).action {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  header > h1 > span:nth-child(1) {
    margin: 0 auto;
  }
}
header > h1 > span:nth-child(2) {
  display: block;
  width: 31.55em;
  margin: 0 auto 1em;
  opacity: 0;
  transition: ease 1s all;
}
header > h1 > span:nth-child(2).action {
  opacity: 1;
}
header > h1 > span:nth-child(3) {
  display: block;
  width: 34.675em;
  margin: 0 auto;
  opacity: 0;
  transition: ease 1s all;
}
header > h1 > span:nth-child(3).action {
  opacity: 1;
}
header > h5 {
  position: relative;
  width: 50.55em;
  margin: 0 auto;
  top: -2em;
  opacity: 0;
  transform: translate(0, 2em);
  transition: ease 1s all;
}
header > h5.action {
  opacity: 1;
  transform: translate(0, 0);
}
header > p {
  position: relative;
  width: 5.75em;
  margin: 0 auto;
}
header > p > img {
  margin-bottom: 1em;
}
header > p > span {
  position: relative;
  display: block;
  width: 1px;
  height: 5em;
  margin: 0 auto;
  overflow: hidden;
}
header > p > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background: #FFFFFF;
  transform: translateY(-100%);
  animation: scrolldown 4s infinite ease-out;
}
@keyframes scrolldown {
  0% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}
header > div {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
header > div > svg {
  display: block;
  width: 100%;
  height: 100%;
}
header > h4 {
  position: absolute;
  width: 11.1em;
  height: 11.1em;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(25em);
}
@media screen and (max-width: 768px) {
  header > h4 {
    left: auto;
    right: 1em;
    transform: translateX(0);
    width: 8em;
    height: 8em;
  }
}

/* -------------------------- */
#lead {
  position: relative;
  padding-bottom: 7em;
}
#lead > h2 {
  position: relative;
  width: 50em;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #lead > h2 {
    width: 100%;
  }
}
#lead > h2 > img {
  position: relative;
}
@media screen and (max-width: 768px) {
  #lead > h2 > img {
    transform: scale(1.02);
  }
}
#lead > h2::before {
  content: "";
  display: block;
  position: absolute;
  width: 50em;
  height: 50em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: radial-gradient(circle closest-corner at left 60%, #40adf4 0%, #40adf4 55%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle closest-corner at right 60%, #f74a7c 0%, #f74a7c 55%, rgba(255, 255, 255, 0) 100%), linear-gradient(to top, #b88ac5 0%, #b88ac5 50%, rgba(255, 255, 255, 0) 60%) #eaced4;
  animation: gradient-animation 12s ease infinite;
}
@keyframes gradient-animation {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0);
  }
}
#lead > div {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 0 15em;
  display: flex;
}
@media screen and (max-width: 768px) {
  #lead > div {
    display: block;
  }
}
#lead > div > div {
  width: 50%;
  padding: 6em 0 0 8em;
}
@media screen and (max-width: 768px) {
  #lead > div > div {
    width: 100%;
    padding: 17em 0 0;
  }
}
@media screen and (max-width: 768px) {
  #lead > div > div > div {
    padding: 0 16em 0 2em;
  }
}
#lead > div > div > div > p {
  font-size: 0.9em;
  line-height: 2.2em;
}
@media screen and (max-width: 768px) {
  #lead > div > div > div > p {
    font-size: 1.5em;
  }
}
#lead > div > div > span {
  display: block;
  width: 5.675em;
  margin: 0 auto;
  padding: 7.5em 0 0;
}
@media screen and (max-width: 768px) {
  #lead > div > div > span {
    transform: translateX(7em);
    padding: 4em 0 0;
  }
}
#lead > div > span {
  display: block;
  width: 50%;
  padding: 0 1em 0 4em;
}
@media screen and (max-width: 768px) {
  #lead > div > span {
    width: 58%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: -2em;
    padding: 1em 0 0 0;
  }
}
#lead > span:nth-child(3) {
  position: absolute;
  width: 19.45em;
  height: 29.2em;
  left: 0;
  right: 0;
  bottom: 9em;
  margin: auto;
  transform: translateX(-30em);
}
@media screen and (max-width: 768px) {
  #lead > span:nth-child(3) {
    bottom: 3em;
    transform: translateX(-11em);
  }
}
#lead > span:nth-child(4) {
  position: absolute;
  width: 30.55em;
  height: 11.15em;
  left: 0;
  right: 0;
  bottom: 7em;
  margin: auto;
  transform: translateX(9em);
}
@media screen and (max-width: 768px) {
  #lead > span:nth-child(4) {
    transform: translateX(2em);
  }
}

/* -------------------------- */
#phyco {
  background: url("img/52.jpg") no-repeat center center/cover;
}
#phyco > p {
  margin-bottom: 5em;
}
#phyco > p > svg {
  width: 100%;
}
#phyco > p:first-child {
  transform: rotate(180deg);
}
#phyco > h2 {
  width: 39.925em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #phyco > h2 {
    width: 24.975em;
  }
}
#phyco > div {
  margin: 0 auto 3em;
}
#phyco > div > p {
  font-size: 0.9em;
  line-height: 2.2em;
  margin-bottom: 2em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #phyco > div > p {
    font-size: 1.5em;
  }
}
#phyco > span {
  display: block;
  width: 30.125em;
  margin: 0 auto 5em;
}
#phyco > ul {
  padding-bottom: 5em;
}
#phyco > ul li.slick-slide {
  padding: 0 1.5em;
}

/* -------------------------- */
#works {
  padding-bottom: 5em;
}
#works > h2 {
  position: relative;
  width: 50em;
  margin: 0 auto 3em;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #works > h2 {
    width: 100%;
  }
}
#works > h2 > img {
  position: relative;
}
@media screen and (max-width: 768px) {
  #works > h2 > img {
    transform: scale(1.02);
  }
}
#works > h2::before {
  content: "";
  display: block;
  position: absolute;
  width: 50em;
  height: 50em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: radial-gradient(circle closest-corner at left 60%, #40adf4 0%, #40adf4 55%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle closest-corner at right 60%, #f74a7c 0%, #f74a7c 55%, rgba(255, 255, 255, 0) 100%), linear-gradient(to top, #b88ac5 0%, #b88ac5 50%, rgba(255, 255, 255, 0) 60%) #eaced4;
  animation: gradient-animation 12s ease infinite;
}
#works > h3 {
  text-align: center;
  margin: 0 0 4em;
}
#works > h3 > span {
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.8em;
}
#works > div {
  padding: 0 0 0 10em;
}
@media screen and (max-width: 768px) {
  #works > div {
    padding: 0;
  }
}
#works > div > ul li.slick-slide {
  padding: 0 1.5em;
}

/* slick hack */
#works_slide .slick-list {
  padding: 0 30% 0 0 !important;
}
@media screen and (max-width: 768px) {
  #works_slide .slick-list {
    padding: 0 !important;
  }
}

@media screen and (max-width: 640px) {
  .slider {
    width: 100%;
  }
}
/* -------------------------- */
#feature {
  overflow: hidden;
  padding: 5em 0;
  background: url("img/33.png") no-repeat center center;
}
@media screen and (max-width: 1300px) {
  #feature {
    background: url("img/33m.png") no-repeat center center;
  }
}
#feature > h2 {
  position: relative;
  width: 50em;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #feature > h2 {
    width: 100%;
  }
}
#feature > h2 > img {
  position: relative;
}
@media screen and (max-width: 768px) {
  #feature > h2 > img {
    transform: scale(1.02);
  }
}
#feature > h2::before {
  content: "";
  display: block;
  position: absolute;
  width: 50em;
  height: 50em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: radial-gradient(circle closest-corner at left 60%, #40adf4 0%, #40adf4 55%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle closest-corner at right 60%, #f74a7c 0%, #f74a7c 55%, rgba(255, 255, 255, 0) 100%), linear-gradient(to top, #b88ac5 0%, #b88ac5 50%, rgba(255, 255, 255, 0) 60%) #eaced4;
  animation: gradient-animation 12s ease infinite;
}
#feature > div {
  position: relative;
}
#feature > div > div {
  position: relative;
  z-index: 1;
  width: 23.075em;
  margin: 0 auto;
}
#feature > div > div > h3 {
  margin: 0 auto 3em;
}
#feature > div > div > p {
  padding: 0 3em;
}
@media screen and (max-width: 768px) {
  #feature > div > div > p {
    padding: 0;
  }
}
#feature > div > div > p > span {
  font-size: 0.9em;
  line-height: 2.2em;
}
@media screen and (max-width: 768px) {
  #feature > div > div > p > span {
    font-size: 1.1em;
  }
}
#feature > div > span {
  position: absolute;
  display: block;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#feature > div:nth-child(2) > div {
  padding: 7em 0 0;
  transform: translateX(0);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(2) > div {
    padding: 7em 0 43em;
  }
}
#feature > div:nth-child(2) > div > h3 {
  width: 18.35em;
}
#feature > div:nth-child(2) > span {
  width: 20.8em;
  height: 31.2em;
  transform: translate(-30em, 0);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(2) > span {
    transform: translate(-13em, 3em);
  }
}
#feature > div:nth-child(3) > div {
  padding: 11em 0 0;
  transform: translateX(-11em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(3) > div {
    padding: 0;
    transform: translateX(0);
    margin: 0 auto 9em;
  }
}
#feature > div:nth-child(3) > div > h3 {
  width: 15.95em;
}
#feature > div:nth-child(3) > span:nth-child(2) {
  width: 18.5em;
  height: 27.75em;
  transform: translate(-33em, 5em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(3) > span:nth-child(2) {
    transform: translate(10em, 25em);
  }
}
#feature > div:nth-child(3) > span:nth-child(3) {
  width: 24.75em;
  height: 37.1em;
  transform: translate(27em, -3em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(3) > span:nth-child(3) {
    transform: translate(14em, -29em);
  }
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(4) {
    margin-bottom: 38em;
  }
}
#feature > div:nth-child(4) > div {
  padding: 9em 0 0;
  transform: translateX(10em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(4) > div {
    transform: translate(-5em, 0);
  }
}
#feature > div:nth-child(4) > div > h3 {
  width: 19.7em;
}
#feature > div:nth-child(4) > span {
  width: 21.3em;
  height: 31.9em;
  transform: translate(-21em, 7em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(4) > span {
    transform: translate(9em, 31em);
  }
}
#feature > div:nth-child(5) {
  padding-bottom: 17em;
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(5) {
    padding-bottom: 6em;
  }
}
#feature > div:nth-child(5) > div {
  padding: 13em 0 0;
  transform: translateX(0);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(5) > div {
    padding: 0;
  }
}
#feature > div:nth-child(5) > div > h3 {
  width: 23.075em;
}
#feature > div:nth-child(5) > span:nth-child(2) {
  width: 21.15em;
  height: 31.7em;
  transform: translate(-28em, 11em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(5) > span:nth-child(2) {
    display: none;
  }
}
#feature > div:nth-child(5) > span:nth-child(3) {
  width: 20.25em;
  height: 30.4em;
  transform: translate(29em, -4em);
}
@media screen and (max-width: 768px) {
  #feature > div:nth-child(5) > span:nth-child(3) {
    transform: translate(-13em, -31em);
  }
}

/* -------------------------- */
#plan {
  background: url("img/53.jpg") no-repeat center center/cover;
}
#plan > p {
  margin-bottom: 5em;
}
#plan > p > svg {
  width: 100%;
}
#plan > p:first-child {
  transform: rotate(180deg);
}
#plan > h2 {
  width: 19.125em;
  margin: 0 auto 1em;
}
#plan > span:nth-child(3) {
  display: block;
  width: 53.35em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #plan > span:nth-child(3) {
    width: 96%;
  }
}
#plan > span:nth-child(4) {
  display: block;
  width: 53.3em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #plan > span:nth-child(4) {
    width: 96%;
  }
}

/* -------------------------- */
#artist > h2 {
  width: 40.3em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #artist > h2 {
    width: 27.325em;
  }
}
#artist > ul li.slick-slide {
  padding: 0 1.5em;
}
#artist > p {
  padding: 11em 0 0;
}
#artist > p > svg {
  width: 100%;
}

/* -------------------------- */
#voice {
  background-color: #f4f4f4;
  padding: 0 0 5em;
}
#voice > h2 {
  position: relative;
  width: 50.05em;
  margin: 0 auto -8em;
  top: -11em;
}
@media screen and (max-width: 768px) {
  #voice > h2 {
    width: 90%;
    top: -7em;
    margin: 0 auto -4em;
  }
}
#voice > div {
  max-width: 1300px;
  padding: 0 7.5em;
  margin: 0 auto 2em;
}
@media screen and (max-width: 768px) {
  #voice > div {
    width: 90%;
    padding: 0;
    margin: 0 auto;
  }
}
#voice > div p {
  font-size: 0.9em;
  line-height: 2em;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #voice > div p {
    font-size: 1.4em;
  }
}
#voice > div:nth-child(2) {
  display: flex;
}
#voice > div:nth-child(2) > div {
  width: 62%;
  padding: 0 2em 0 0;
}
@media screen and (max-width: 768px) {
  #voice > div:nth-child(2) > div {
    width: 100%;
    margin: 0 auto;
  }
}
#voice > div:nth-child(2) > div > h3 {
  width: 17.6375em;
  margin-bottom: 3em;
}
@media screen and (max-width: 768px) {
  #voice > div:nth-child(2) > div > h3 {
    width: 33.275em;
  }
}
#voice > div:nth-child(2) > div > span {
  display: none;
}
@media screen and (max-width: 768px) {
  #voice > div:nth-child(2) > div > span {
    display: block;
    width: 65%;
    margin: 0 auto 2em;
  }
}
#voice > div:nth-child(2) > span {
  width: 38%;
}
@media screen and (max-width: 768px) {
  #voice > div:nth-child(2) > span {
    display: none;
  }
}

/* -------------------------- */
#guarant {
  background: url("img/43.jpg") no-repeat center center/cover;
  padding: 6.5em 0;
}
#guarant > h2 {
  height: 13.25em;
  margin-bottom: 2em;
  background: url("img/44.png") no-repeat center center/contain;
  display: flex;
  align-items: center;
  justify-content: center;
}
#guarant > h2 > span {
  display: block;
  width: 20.0125em;
  height: 2.1em;
}
#guarant > p {
  width: 34.2em;
  margin: 0 auto;
}

/* -------------------------- */
#message {
  padding: 8em 0;
}
#message > h2 {
  width: 56.975em;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #message > h2 {
    width: 96%;
  }
}
#message > div {
  width: 26em;
  margin: 0 auto;
  padding: 4em 0;
}
@media screen and (max-width: 768px) {
  #message > div {
    width: 90%;
  }
}
#message > div > p {
  font-size: 0.9em;
  line-height: 2.5em;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #message > div > p {
    font-size: 1.4em;
  }
}
#message li.slick-slide {
  padding: 0 1.5em;
}
#message li.slick-slide > span {
  display: block;
  border: 1px solid #999;
}

/* -------------------------- */
#access {
  max-width: 1300px;
  padding: 5em 2.5em;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #access {
    padding: 4em 1em;
  }
}
#access > h2 {
  width: 49.45em;
  margin: 0 auto 3em;
}
@media screen and (max-width: 768px) {
  #access > h2 {
    width: 96%;
  }
}
#access > div {
  display: flex;
  margin-bottom: 5em;
}
@media screen and (max-width: 768px) {
  #access > div {
    display: block;
  }
}
#access > div > span {
  display: block;
  width: 55%;
  height: 29em;
  background-color: #FFF;
  border-radius: 0.5em;
  padding: 0.7em;
}
@media screen and (max-width: 768px) {
  #access > div > span {
    width: 85%;
    margin: 0 auto 4em;
  }
}
#access > div > span > iframe {
  width: 100%;
  height: 100%;
}
#access > div > div {
  width: 45%;
  padding: 0 0 0 2em;
}
@media screen and (max-width: 768px) {
  #access > div > div {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }
}
#access > div > div > h2 {
  padding-right: 4em;
  margin: 0 0 3em;
}
@media screen and (max-width: 768px) {
  #access > div > div > h2 {
    padding: 0;
  }
}
#access > div > div > h2 > span {
  display: block;
  width: 7.25em;
  margin: 0 auto;
}
#access > div > div > p {
  font-size: 1.3em;
  line-height: 2em;
  margin-bottom: 1em;
}
#access > div > div > h3 {
  font-size: 1.5em;
  font-weight: 400;
}
#access > div > div > h3 > strong {
  font-size: 1.5em;
  font-weight: 400;
}
#access > a {
  display: block;
  width: 35.6em;
  margin: 0 auto 3em;
}/*# sourceMappingURL=style.css.map */