@charset "UTF-8";


/* ===============================================
●リセット用CSS
=============================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, .contactTitle,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

ol, ul {
  list-style: none; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, .contactTitle, menu, nav, section, summary {
  display: block; }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box; }
  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none; }
  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px; }

/* ===============================================
 common (共通項目)
=============================================== */
html {
  font-size: 62.5%;
  /*10px*/
  margin: 0;
  padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: "Roboto Condensed", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  line-height: 2.0;
  font-weight: 500;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  background: #ffffff;
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph;
  /* テキスト選択不可 */ }

/* 画像もドラッグ操作禁止 */
body {
  font-size: 14px;
  font-size: 1.4rem;
  position: relative; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 14px;
      font-size: 1.4rem; } }
  @media screen and (max-width: 640px) {
    body {
      font-size: 12px;
      font-size: 1.2rem; } }

#wrapper, #wrap {
  margin: 0;
  padding: 0; }

/* 見出しの行間 */
h1, h2, h3 {
  line-height: 1.4;
  font-weight: 400; }

h4, h5, h6 {
  line-height: 1.4;
  font-weight: 400; }

/* ===============================================
imgレスポンシブ
=============================================== */
.img-max {
  max-width: 100%;
  width: 100%;
  height: auto; }

.clearfix:after {
  content: "";
  clear: both;
  display: block; }

/* ===============================================
font (フォント)
=============================================== */
.notosansJa100 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100; }

.notosansJa300 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300; }

.notosansJa400 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400; }

.notosansJa500 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500; }

.notosansJa700 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700; }

.notosansJa900 {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900; }

.RobotoCondensed300 {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: normal;
  font-weight: 300; }

.RobotoCondensed300i {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 300; }

.RobotoCondensed400 {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: normal;
  font-weight: 400; }

.RobotoCondensed400i {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 400; }

.RobotoCondensed700 {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: normal;
  font-weight: 700; }

.RobotoCondensed700i {
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 700; }

.gothic {
  font-family: "Roboto Condensed", "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-weight: 400; }

.cormorant300 {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 300; }

.cormorant300i {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 300; }

.cormorant400 {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 400; }

.cormorant400i {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 400; }

.cormorant500 {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 500; }

.cormorant500i {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 500; }

.cormorant600 {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 600; }

.cormorant600i {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 600; }

.cormorant700 {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 700; }

.cormorant700i {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 700; }

.mincho {
  font-family: "Cormorant", "游明朝", YuMincho, "yu-mincho-pr6", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
  font-weight: 500;
  font-weight: 400; }

.base {
  color: #333333; }

.black {
  color: #191919; }

.white {
  color: #ffffff; }

.bg {
  color: #f5f5f5; }

.red {
  color: #ff4646; }

.green {
  color: #78bd36; }

.green10 {
  color: #b8bfb1; }

.greenGry01 {
  color: #f7faf7; }

.greenGry02 {
  color: #ebedeb; }

.greenGry03 {
  color: #e3e6e3; }

/* 入力必須------------------ */
.asterisk {
  font-size: 1.4rem;
  color: #fa4a4a;
  padding: 0.5rem;
  background: none; }

/* text-align====================================== */
.align_center {
  text-align: center; }

.align_left {
  text-align: left; }

.align_right {
  text-align: right; }

.underline {
  text-decoration: underline; }

/* text-weight====================================== */
.fw_bold {
  font-weight: bold; }

.fw_normal {
  font-weight: normal; }

.fw_thin {
  font-weight: 100; }

.fw_light {
  font-weight: 300; }

.fw_regular {
  font-weight: 400; }

.fw_medium {
  font-weight: 500; }

.fw_bold {
  font-weight: 700; }

.fw_black {
  font-weight: 900; }

/* fontsize====================================== */
.fz9 {
  font-size: 9px;
  font-size: 0.9rem; }

.fz10 {
  font-size: 10px;
  font-size: 1.0rem; }

.fz11 {
  font-size: 11px;
  font-size: 1.1rem; }

.fz12 {
  font-size: 12px;
  font-size: 1.2rem; }

.fz13 {
  font-size: 13px;
  font-size: 1.3rem; }

.fz14 {
  font-size: 14px;
  font-size: 1.4rem; }

.fz15 {
  font-size: 15px;
  font-size: 1.5rem; }

.fz16 {
  font-size: 16px;
  font-size: 1.6rem; }

.fz17 {
  font-size: 17px;
  font-size: 1.7rem; }

.fz18 {
  font-size: 18px;
  font-size: 1.8rem; }

.fz19 {
  font-size: 19px;
  font-size: 1.9rem; }

.fz20 {
  font-size: 20px;
  font-size: 2rem; }

.fz22 {
  font-size: 22px;
  font-size: 2.2rem; }

.fz24 {
  font-size: 24px;
  font-size: 2.4rem; }

.fz26 {
  font-size: 26px;
  font-size: 2.6rem; }

.fz28 {
  font-size: 28px;
  font-size: 2.8rem; }

.fz30 {
  font-size: 30px;
  font-size: 3rem; }

.fz32 {
  font-size: 32px;
  font-size: 3.2rem; }

.fz34 {
  font-size: 34px;
  font-size: 3.4rem; }

.fz36 {
  font-size: 36px;
  font-size: 3.6rem; }

.fz38 {
  font-size: 38px;
  font-size: 3.8rem; }

.fz40 {
  font-size: 40px;
  font-size: 4.0rem; }

.fz42 {
  font-size: 42px;
  font-size: 4.2rem; }

.fz44 {
  font-size: 44px;
  font-size: 4.4rem; }

.fz46 {
  font-size: 46px;
  font-size: 4.6rem; }

.fz48 {
  font-size: 48px;
  font-size: 4.8rem; }

.fz50 {
  font-size: 50px;
  font-size: 5.0rem; }

.fz52 {
  font-size: 52px;
  font-size: 5.2rem; }

.fz60 {
  font-size: 60px;
  font-size: 6.0rem; }

.fz70 {
  font-size: 70px;
  font-size: 7.0rem; }

.fz80 {
  font-size: 80px;
  font-size: 8.0rem; }

.fz90 {
  font-size: 90px;
  font-size: 9.0rem; }

.fz100 {
  font-size: 100px;
  font-size: 10rem; }

/* ===============================================
●レスポンシブ デバイス表示切り替え
=============================================== */
.sp {
  display: none; }

/* only SP */
.tab {
  display: none; }

/* only TAB */
.pad {
  display: none; }

/* only Pad */
.pc960 {
  display: none; }

/* 960pxで分岐*/
.pc1080 {
  display: none; }

/* 1080pxで分岐*/
.pc {
  display: block; }

/* only PC */
@media screen and (max-width: 1080px) {
  .sp {
    display: none; }
  .tab {
    display: none; }
  .pad {
    display: block; }
  .pc960 {
    display: block; }
  .pc1080 {
    display: block; }
  .pc {
    display: block; } }

@media screen and (max-width: 960px) {
  .pc1080 {
    display: none; }
  .pc960 {
    display: block; } }

@media screen and (max-width: 768px) {
  .sp {
    display: none; }
  .pc {
    display: none; }
  .pc1080 {
    display: none; }
  .pc960 {
    display: none; }
  .pad {
    display: block; }
  .tab {
    display: block; } }

@media screen and (max-width: 640px) {
  .tab {
    display: none; }
  .pc {
    display: none; }
  .pc1080 {
    display: none; }
  .pc960 {
    display: none; }
  .pad {
    display: none; }
  .sp {
    display: block; } }

.none {
  display: none; }

/* ===============================================
余白と背景の設定
=============================================== */
section {
  padding: 80px 0;
  overflow: hidden; }
  @media screen and (max-width: 1080px) {
    section {
      padding: 60px 0; } }
  @media screen and (max-width: 960px) {
    section {
      padding: 40px 0; } }
  @media screen and (max-width: 768px) {
    section {
      padding: 25px 0; } }

.container100 {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 3%; }
  @media screen and (max-width: 768px) {
    .container100 {
      padding: 0 5%; } }

.container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto; }

.container960 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3%; }
  @media screen and (max-width: 768px) {
    .container960 {
      padding: 0 5%; } }

.container1080 {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3%; }
  @media screen and (max-width: 768px) {
    .container1080 {
      padding: 0 5%; } }

.container1200 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3%; }
  @media screen and (max-width: 768px) {
    .container1200 {
      padding: 0 5%; } }

.container1440 {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3%; }
  @media screen and (max-width: 768px) {
    .container1440 {
      padding: 0 5%; } }

.container680 {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 15%; }
  @media screen and (max-width: 960px) {
    .container680 {
      padding: 0 10%; } }
  @media screen and (max-width: 768px) {
    .container680 {
      padding: 0 8%; } }

/* table-cell インライン横並設定 */
.inline {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%; }

.inline .inline-box,
.inline .in-cell,
.inline li {
  display: table-cell;
  vertical-align: middle;
  text-align: center; }

/* inline-block インライン横並設定 */
.inblock {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%; }

.inblock .inline-block,
.inblock .in-block,
.inblock li {
  display: inline-block;
  vertical-align: top; }

/* flexbox ----------------------------------- */
.flexbox {
  display: flex;
  flex-wrap: wrap; }

.indent {
  padding-left: 1em;
  text-indent: -1em; }

.markerpen {
  background-image: linear-gradient(to top, #ffff00 40%, transparent 40%); }

/*--ドラッグで選択した背景色変更--*/
::selection {
  background: rgba(51, 51, 51, 0.7);
  color: #ffffff;
  /* Safari */ }

::-moz-selection {
  background: rgba(51, 51, 51, 0.7);
  color: #ffffff;
  /* Firefox */ }

::-ms-selection {
  background: rgba(51, 51, 51, 0.7);
  color: #ffffff;
  /* IE */ }

.mg_B05em {
  margin-bottom: 0.5em; }

.mg_B1em {
  margin-bottom: 1em; }

.mg_B2em {
  margin-bottom: 2em; }

.mg_B3em {
  margin-bottom: 3em; }

.mg_B4em {
  margin-bottom: 4em; }

.mg_T1em {
  margin-top: 1em; }

.mg_T2em {
  margin-top: 2em; }

.mg_T3em {
  margin-top: 3em; }

.mg_T4em {
  margin-top: 4em; }

.mg_L05em {
  margin-left: 0.5em; }

.mg_L1em {
  margin-left: 1em; }

.mg_L2em {
  margin-left: 2em; }

.mg_L3em {
  margin-left: 3em; }

.mg_L4em {
  margin-left: 4em; }

.mg_R05em {
  margin-right: 0.5em; }

.mg_R1em {
  margin-right: 1em; }

.mg_R2em {
  margin-right: 2em; }

.mg_R3em {
  margin-right: 3em; }

.mg_R4em {
  margin-right: 4em; }

.pg_B1em {
  padding-bottom: 1em; }

.pg_B2em {
  padding-bottom: 2em; }

.pg_B3em {
  padding-bottom: 3em; }

.pg_B4em {
  padding-bottom: 4em; }

.pg_T1em {
  padding-top: 1em; }

.pg_T2em {
  padding-top: 2em; }

.pg_T3em {
  padding-top: 3em; }

.pg_T4em {
  padding-top: 4em; }

.pg_L1em {
  padding-left: 1em; }

.pg_L2em {
  padding-left: 2em; }

.pg_L3em {
  padding-left: 3em; }

.pg_L4em {
  padding-left: 4em; }

.pg_R1em {
  padding-right: 1em; }

.pg_R2em {
  padding-right: 2em; }

.pg_R3em {
  padding-right: 3em; }

.pg_R4em {
  padding-right: 4em; }

.pg_1vw {
  padding-right: 1vw;
  padding-left: 1vw; }

.pg_2vw {
  padding-right: 2vw;
  padding-left: 2vw; }

.pg_3vw {
  padding-right: 3vw;
  padding-left: 3vw; }

.pg_4vw {
  padding-right: 4vw;
  padding-left: 4vw; }

.pg_5vw {
  padding-right: 5vw;
  padding-left: 5vw; }

.pg_6vw {
  padding-right: 6vw;
  padding-left: 6vw; }

.pg_7vw {
  padding-right: 7vw;
  padding-left: 7vw; }

.pg_8vw {
  padding-right: 8vw;
  padding-left: 8vw; }

.pg_9vw {
  padding-right: 9vw;
  padding-left: 9vw; }

.pg_10vw {
  padding-right: 10vw;
  padding-left: 10vw; }

/* ===============================================
●リンク
=============================================== */
a {
  text-decoration: none;
  color: #333333;
  transition: 0.3s; }

/* ===============================================
●googlemap api
=============================================== */
.stripe {
  display: block;
  background-color: none;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, #333333), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #333333), color-stop(0.75, #333333), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, #333333 25%, transparent 25%, transparent 50%, #333333 50%, #333333 75%, transparent 75%, transparent);
  -webkit-background-size: 4px 4px;
  -moz-background-size: 4px 4px;
  background-size: 4px 4px; }

.moreR {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 3em 0em 1em; }
  .moreR a {
    position: absolute;
    right: 20px; }
    .moreR a:after {
      content: "";
      width: 100%;
      height: 100%;
      border-bottom: #cccccc solid 1px;
      position: absolute;
      bottom: -0.5em;
      right: 0; }
    .moreR a .fz14 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #191919;
      font-size: 1.4rem; }
      .moreR a .fz14:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #191919 1px solid;
        border-bottom: #191919 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreR a .fz14:hover::after {
        width: 42px; }

.moreL {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 3em 0em 1em; }
  .moreL a {
    position: absolute;
    left: 0px; }
    .moreL a:after {
      content: "";
      width: 100%;
      height: 100%;
      border-bottom: #cccccc solid 1px;
      position: absolute;
      bottom: -0.5em;
      right: 0; }
    .moreL a .fz14 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #333333;
      font-size: 1.4rem; }
      .moreL a .fz14:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #333333 1px solid;
        border-bottom: #333333 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreL a .fz14:hover::after {
        width: 42px; }

.moreC {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 3em auto 1em; }
  .moreC a {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0%, 0);
    display: inline-block; }
    @media screen and (max-width: 768px) {
      .moreC a {
        width: 190px; } }
    .moreC a:after {
      content: "";
      width: 100%;
      height: 100%;
      border-bottom: #cccccc solid 1px;
      position: absolute;
      bottom: -0.5em;
      right: 0; }
    .moreC a .fz14 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #333333;
      font-size: 1.4rem; }
      .moreC a .fz14:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #333333 1px solid;
        border-bottom: #333333 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreC a .fz14:hover::after {
        width: 42px; }
    .moreC a .fz12 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #333333;
      font-size: 1.2rem;
      letter-spacing: 0em;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .moreC a .fz12 {
          font-size: 1.0rem; } }
      .moreC a .fz12:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #333333 1px solid;
        border-bottom: #333333 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreC a .fz12:hover::after {
        width: 42px; }

.moreC_btn {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 3em auto 1em; }
  .moreC_btn a {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: #cccccc solid 1px;
    padding: 0.5em 1.5em;
    display: inline-block; }
    .moreC_btn a:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      right: 0; }
    .moreC_btn a .fz14 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #333333;
      font-size: 1.4rem; }
      .moreC_btn a .fz14:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #333333 1px solid;
        border-bottom: #333333 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreC_btn a .fz14:hover::after {
        width: 42px; }
    .moreC_btn a .fz12 {
      position: relative;
      z-index: 5;
      padding: 10px 60px 10px 10px;
      color: #333333;
      font-size: 1.2rem; }
      @media screen and (max-width: 768px) {
        .moreC_btn a .fz12 {
          font-size: 1.0rem; } }
      .moreC_btn a .fz12:after {
        content: "";
        display: block;
        position: absolute;
        left: calc(100% - 50px);
        top: calc(50% - 5px);
        width: 32px;
        height: 8px;
        border-right: #333333 1px solid;
        border-bottom: #333333 1px solid;
        -webkit-transform: skew(45deg);
        transform: skew(45deg);
        -webkit-transition: width .15s ease-in-out;
        transition: width .15s ease-in-out; }
      .moreC_btn a .fz12:hover::after {
        width: 42px; }

h1.TL {
  position: absolute;
  display: inline-block;
  left: 80px;
  bottom: 80px;
  background: rgba(184, 191, 177, 0.8);
  padding: 20px;
  z-index: 999;
  color: #ffffff; }
  @media screen and (max-width: 768px) {
    h1.TL {
      position: absolute;
      left: 0%;
      bottom: auto;
      top: 50%;
      -ms-transform: translate(0%, -50%);
      -webkit-transform: translate(0%, -50%);
      transform: translate(0%, -50%); } }
  h1.TL .fz60 {
    padding-bottom: 0.1em;
    line-height: 1.2;
    display: block; }
    @media screen and (max-width: 768px) {
      h1.TL .fz60 {
        font-size: 3.6rem; } }
  h1.TL .fz14 {
    padding-bottom: 0.1em;
    line-height: 1.2;
    display: block; }
    @media screen and (max-width: 768px) {
      h1.TL .fz14 {
        font-size: 1.2rem; } }

#U_title {
  background: #f7faf7;
  text-align: center; }
  #U_title h2 {
    padding-bottom: 1.5em; }
  #U_title .tx_read {
    text-align: center; }
    #U_title .tx_read .gothic {
      text-align: left; }

h2.copy .TLen {
  display: block; }

h2.copy .TLja {
  display: block; }

/* ------ #loader-bg ------*/
.move_before_up {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  transition: 1.2s; }

.move_after {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

/*インビュー ======================================*/
/*----- フェードイン -----*/
.inviewfadeIn {
  opacity: 0;
  transition: 2.0s; }

.fadeIn {
  opacity: 1.0; }

/*----- 上へスライド -----*/
.inviewUp {
  transform: translate(0, 100px);
  -webkit-transform: translate(0, 100px);
  transition: 2.0s; }

.Up {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

/*----- ズームイン -----*/
.inviewzoomIn {
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transition: 2.0s; }

.zoomIn {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1); }

/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
  opacity: 0;
  transform: translate(0, 80px);
  -webkit-transform: translate(0, 80px);
  transition: 4.0s ease-in; }

.fadeInUp {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

header.Header {
  width: 80px;
  height: 100%;
  position: fixed;
  z-index: 999999990;
  top: 0;
  background: #ffffff; }
  @media screen and (max-width: 768px) {
    header.Header {
      width: 100%;
      height: 60px; } }
  header.Header header .Header_in {
    width: 80px;
    height: 100%; }
    @media screen and (max-width: 768px) {
      header.Header header .Header_in {
        width: 100%;
        height: 60px; } }
  header.Header #logo {
    padding: 20px 10px 20px 10px;
    position: fixed; }
    @media screen and (max-width: 768px) {
      header.Header #logo {
        padding: 10px; } }
    header.Header #logo img {
      max-width: 60px;
      width: 100%;
      height: auto; }
      @media screen and (max-width: 768px) {
        header.Header #logo img {
          max-width: 100%;
          width: auto;
          height: 40px; } }
  header.Header .contactIcon_sp {
    display: none; }
    @media screen and (max-width: 768px) {
      header.Header .contactIcon_sp {
        display: block;
        margin-bottom: 15px;
        position: absolute;
        top: 15px;
        right: 65px;
        left: auto;
        z-index: 999; }
        header.Header .contactIcon_sp a {
          height: 30px;
          width: 30px;
          background-color: #78bd36;
          border-radius: 50%;
          display: flex;
          align-items: center; }
          header.Header .contactIcon_sp a img {
            margin: 0 auto;
            max-width: 14px; } }

div#wrapper {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  margin-left: 80px; }
  @media screen and (max-width: 768px) {
    div#wrapper {
      margin-left: 0px; } }

.navigation-is-open div#wrapper {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%); }

.navi-trigger {
  position: fixed;
  z-index: 999999993;
  left: 10px;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(0px) translateY(-50%);
  -moz-transform: translateX(0px) translateY(-50%);
  -ms-transform: translateX(0px) translateY(-50%);
  -o-transform: translateX(0px) translateY(-50%);
  transform: translateX(0px) translateY(-50%);
  height: 60px;
  width: 60px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s; }
  @media screen and (max-width: 768px) {
    .navi-trigger {
      left: auto;
      top: 0%;
      bottom: auto;
      right: 10px;
      -webkit-transform: translateX(0px) translateY(-50%);
      -moz-transform: translateX(0px) translateY(0%);
      -ms-transform: translateX(0px) translateY(0%);
      -o-transform: translateX(0px) translateY(0%);
      transform: translateX(0px) translateY(0%); } }

.navi-trigger .navi-icon {
  /* Nav icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 2px;
  background-color: #191919; }

.navi-trigger .navi-icon::before, .navi-trigger .navi-icon:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #191919;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s; }

.navi-trigger .navi-icon::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px); }

.navi-trigger .navi-icon::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px); }

.no-touch .navi-trigger:hover .navi-icon::after {
  top: 2px; }

.no-touch .navi-trigger:hover .navi-icon::before {
  top: -2px; }

.navi-trigger svg {
  position: absolute;
  top: 0;
  left: 0; }

.navigation-is-open .navi-trigger {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); }

.navigation-is-open .navi-trigger .navi-icon::after,
.navigation-is-open .navi-trigger .navi-icon::before {
  /* fFrom Hamburger to Arrow */
  width: 50%;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s;
  -moz-transition: -moz-transform 0.5s, width 0.5s;
  transition: transform 0.5s, width 0.5s;
  background-color: #FFF; }

.navigation-is-open .navi-trigger .navi-icon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #FFF; }

.navigation-is-open .navi-trigger .navi-icon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #FFF; }

.navigation-is-open .navi-trigger .navi-icon {
  background-color: #FFF; }

.no-touch .navigation-is-open .navi-trigger:hover .navi-icon::after, .no-touch .navigation-is-open .navi-trigger:hover .navi-icon::before {
  top: 0; }

.navi {
  position: fixed;
  z-index: 999999991;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(25, 25, 25, 0.9);
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s; }

.navi .navigation-wrapper {
  /* Navigation content */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 5% 40px calc(2% + 80px);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); }
  @media screen and (max-width: 768px) {
    .navi .navigation-wrapper {
      padding: 40px 5% 40px 5%; } }

.navigation-is-open .navi {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s; }

.navigation-is-open .navi .navigation-wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); }

.navi h2.open_logo {
  position: relative;
  margin-bottom: 1.7em;
  font-size: 1.3rem;
  text-transform: uppercase; }
  .navi h2.open_logo a {
    display: block; }
    .navi h2.open_logo a img {
      max-width: 220px;
      height: auto; }
      @media screen and (max-width: 768px) {
        .navi h2.open_logo a img {
          max-width: 160px; } }

.navi .primary-navi > li {
  margin: 1.6em 0; }
  @media screen and (max-width: 768px) {
    .navi .primary-navi > li {
      margin: 1.2em 0; } }

.navi .primary-navi a {
  font-family: 'Cormorant', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 2.4rem;
  color: #ffffff;
  display: inline-block; }
  @media screen and (max-width: 768px) {
    .navi .primary-navi a {
      font-size: 1.8rem; } }

.navi .primary-navi a.selected {
  color: #ffffff; }

.no-touch .navi .primary-navi a:hover {
  color: #ffffff; }

.no-js div#wrapper {
  overflow: visible; }

.no-js .navi {
  visibility: visible; }

.no-js .navi .navigation-wrapper {
  height: auto;
  overflow: visible;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.navi .primary-navi > li > a {
  color: #ffffff;
  position: relative;
  line-height: 1.0; }
  .navi .primary-navi > li > a:before {
    position: absolute;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    bottom: -0.2em;
    display: inline-block;
    height: 1px;
    width: 0%;
    content: "";
    background-color: #78bd36;
    left: 0; }
  .navi .primary-navi > li > a:hover:before {
    opacity: 1;
    width: 100%; }

.open_sns p {
  display: inline-block;
  margin: 10px; }
  @media screen and (max-width: 768px) {
    .open_sns p {
      width: 5px; } }
  .open_sns p img {
    width: 22px;
    height: auto; }
    @media screen and (max-width: 768px) {
      .open_sns p img {
        width: 15px; } }

.link_btn {
  position: absolute;
  bottom: 10px;
  left: 20px; }
  .link_btn ul li a {
    line-height: 1.0; }
  .link_btn ul .contactIcon {
    margin-bottom: 15px; }
    .link_btn ul .contactIcon a {
      height: 40px;
      width: 40px;
      background-color: #78bd36;
      border-radius: 50%;
      display: flex;
      align-items: center; }
      .link_btn ul .contactIcon a img {
        margin: 0 auto;
        max-width: 18px; }
  .link_btn ul .snsIcon {
    text-align: center; }
    .link_btn ul .snsIcon a {
      padding: 10px;
      display: block; }
      .link_btn ul .snsIcon a img {
        max-width: 22px; }
  @media screen and (max-width: 768px) {
    .link_btn {
      display: none; } }

/*

Media Queries Mobile Devices

*/
@media only screen and (min-width: 1170px) {
  .navi .navigation-wrapper::after {
    clear: both;
    content: "";
    display: table; }
  .navi .half-block {
    width: 50%;
    float: left; }
  .navi .primary-navi {
    margin-top: 0; }
  .navi h2 {
    font-size: 1.5rem;
    margin-bottom: 5.6em; }
  .navi .primary-navi li {
    margin: 2em 0; }
  .navi .primary-navi a {
    font-size: 2.0rem; } }

footer {
  position: relative;
  z-index: 5; }
  footer .footer_in {
    background: #f7faf7;
    padding: 2em;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 768px) {
      footer .footer_in {
        padding: 2em 1.5em; } }
    footer .footer_in .f_add {
      font-weight: 400;
      line-height: 1.8; }
    footer .footer_in .f_link {
      max-width: 200px; }
      footer .footer_in .f_link a.f_mail {
        padding: 0.3em;
        width: 100%;
        max-width: 160px;
        display: inline-block;
        margin: 5px auto 20px;
        position: relative;
        text-align: center;
        background-color: #78bd36; }
        @media screen and (max-width: 768px) {
          footer .footer_in .f_link a.f_mail {
            max-width: 100%; } }
        footer .footer_in .f_link a.f_mail:before {
          position: absolute;
          -webkit-transition: all 0.35s ease;
          transition: all 0.35s ease;
          bottom: 0;
          display: inline-block;
          height: 100%;
          width: 0%;
          content: "";
          background-color: #ffffff;
          left: 0;
          z-index: 0; }
        footer .footer_in .f_link a.f_mail:hover:before {
          opacity: 1;
          width: 100%; }
        footer .footer_in .f_link a.f_mail span.fz12 {
          line-height: 1.0;
          position: relative;
          z-index: 2; }
      footer .footer_in .f_link .f_sns li a {
        padding: 5px; }
        footer .footer_in .f_link .f_sns li a img {
          width: 20px;
          height: auto; }
          @media screen and (max-width: 768px) {
            footer .footer_in .f_link .f_sns li a img {
              width: 15px; } }
  footer .copyright {
    padding: 4em 2em;
    background: #333333;
    text-align: right;
    color: #ffffff;
    letter-spacing: 0.05em;
    font-size: 1.0rem; }
    @media screen and (max-width: 768px) {
      footer .copyright {
        padding: 2em 1em; } }

.gototop {
  position: fixed;
  right: 10px;
  bottom: 45px;
  z-index: 99999999999; }
  @media screen and (max-width: 768px) {
    .gototop {
      bottom: 40px;
      right: 4px; } }
  .gototop a {
    -ms-writing-mode: tb-rl;
    /* for MS IE11 */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    padding-top: 0px;
    color: #333333;
    padding: 1em 0.2em;
    display: block;
    height: 4em;
    width: 30px;
    display: flex;
    align-items: center;
    text-align: right;
    position: relative; }
    .gototop a:hover {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box; }
    .gototop a:hover span.Line::before {
      top: -40px;
      -webkit-animation: sdbGT 1s infinite;
      animation: sdbGT 1s infinite;
      box-sizing: border-box; }

@-webkit-keyframes sdbGT {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0; }
  40% {
    -webkit-transform: translate(0, 20px);
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes sdbGT {
  0% {
    transform: translate(0, 0);
    opacity: 0; }
  40% {
    transform: translate(0, 20px);
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .gototop a span.Line::before {
    position: absolute;
    top: -40px;
    left: 50%;
    content: '';
    width: 1px;
    height: 50px;
    background-color: #333333; }

div#wrapper {
  padding: 0;
  height: 100vh;
  width: 100%;
  position: relative;
  margin: 0 0 0 auto;
  z-index: 999;
  background: none; }
  @media screen and (max-width: 768px) {
    div#wrapper {
      height: 100vh;
      width: 100%; } }

article#hero {
  padding: 0;
  height: 100vh;
  width: 50%;
  position: fixed;
  top: 0;
  z-index: 9; }
  @media screen and (max-width: 768px) {
    article#hero {
      display: none; } }
  article#hero .hero_in {
    width: 100%;
    height: 100vh; }
    @media screen and (max-width: 768px) {
      article#hero .hero_in {
        height: 300px;
        width: 100%; } }
    article#hero .hero_in .hero_img {
      width: 100%;
      height: 100vh;
      margin-left: 40px;
      margin-top: 100px;
      overflow: hidden;
      background-image: url(../../img/qa/main_qa_pc.jpg);
      /* 画像ファイルの指定 */
      background-position: center center;
      /* 画像を常に天地左右の中央に配置 */
      background-repeat: no-repeat;
      /* 画像をタイル状に繰り返し表示しない */
      background-size: cover;
      /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
      z-index: 2;
      margin: 0; }
      @media screen and (max-width: 768px) {
        article#hero .hero_in .hero_img {
          height: 300px;
          width: 100vw; } }

section#hero_sp {
  padding: 0;
  z-index: 999;
  display: none; }
  @media screen and (max-width: 768px) {
    section#hero_sp {
      display: block;
      position: relative;
      height: 300px;
      width: 100vw;
      left: 0px;
      top: 0;
      margin-top: 60px; } }
  @media screen and (max-width: 768px) {
    section#hero_sp .hero_in {
      height: 300px;
      width: 100%; } }
  @media screen and (max-width: 768px) {
    section#hero_sp .hero_in > div {
      height: 300px;
      width: 100%; } }
  @media screen and (max-width: 768px) {
    section#hero_sp .hero_in .hero_img {
      overflow: hidden;
      background-image: url(../../img/qa/main_qa.jpg);
      /* 画像ファイルの指定 */
      background-position: center center;
      /* 画像を常に天地左右の中央に配置 */
      background-repeat: no-repeat;
      /* 画像をタイル状に繰り返し表示しない */
      background-size: cover;
      /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
      z-index: 2;
      margin: 0;
      height: 300px;
      width: 100vw; } }

#R_content {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  padding: 0 0 0 50vw;
  z-index: 999; }
  @media screen and (max-width: 768px) {
    #R_content {
      padding: 0; } }

#question {
  width: 100%;
  background: #e3e6e3; }
  #question .container680 .copy {
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
    margin-bottom: 2.0em;
    font-weight: 400; }
    #question .container680 .copy .TLen {
      color: #333333; }
  #question .container680 .accordion {
    margin-top: 20px; }
    #question .container680 .accordion h5 .inline-box {
      text-align: left;
      line-height: 1.4;
      vertical-align: top; }
      @media screen and (max-width: 768px) {
        #question .container680 .accordion h5 .inline-box {
          font-size: 1.4rem; } }
      #question .container680 .accordion h5 .inline-box:nth-child(2) {
        padding-right: 50px;
        padding-top: 0.2em; }
    #question .container680 .accordion h5 .inline-box.ques {
      max-width: 2em;
      width: 2em; }
      @media screen and (max-width: 768px) {
        #question .container680 .accordion h5 .inline-box.ques {
          font-size: 2.0rem; } }
  #question .container680 .accordion ul {
    width: 100%;
    padding: 0;
    margin-top: 40px; }
  #question .container680 .accordion li {
    position: relative;
    border-bottom: 1px solid #cccccc;
    list-style: none; }
  #question .container680 .accordion li:first-child {
    border-top: 1px solid #cccccc; }
  #question .container680 .accordion > ul > li > a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    padding: 1.5em 1em;
    position: relative; }
  #question .container680 .accordion > ul > li > a h5:hover {
    color: #666666;
    text-decoration: none; }
  #question .container680 .accordion > ul > li > p.OpenPage {
    display: none;
    text-align: left;
    padding: 1.5em 1em;
    line-height: 1.8;
    color: #333333;
    background: #ffffff;
    border-top: 1px solid #cccccc;
    margin-bottom: 1em; }
    #question .container680 .accordion > ul > li > p.OpenPage .ques {
      max-width: 2em;
      width: 2em; }
      @media screen and (max-width: 768px) {
        #question .container680 .accordion > ul > li > p.OpenPage .ques {
          font-size: 2.0rem; } }
    #question .container680 .accordion > ul > li > p.OpenPage .inline-box {
      text-align: left;
      vertical-align: top; }
    #question .container680 .accordion > ul > li > p.OpenPage .fz14 {
      text-align: left;
      line-height: 1.8;
      vertical-align: top;
      padding-top: 0.3em; }
      @media screen and (max-width: 768px) {
        #question .container680 .accordion > ul > li > p.OpenPage .fz14 {
          font-size: 1.2rem; } }
  #question .container680 .accordion li .accordion_icon,
  #question .container680 .accordion li .accordion_icon span {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box; }
  #question .container680 .accordion li .accordion_icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    right: 10px; }
    @media screen and (max-width: 640px) {
      #question .container680 .accordion li .accordion_icon {
        width: 35px;
        height: 35px;
        top: 12px; } }
  #question .container680 .accordion li .accordion_icon span {
    position: absolute;
    width: 60%;
    left: 20%;
    top: 45%;
    height: 1px;
    background-color: #333333; }
  #question .container680 .accordion li .accordion_icon span:nth-of-type(1) {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg); }
  #question .container680 .accordion li .accordion_icon span:nth-of-type(2) {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg); }
  #question .container680 .accordion li .accordion_icon.active span:nth-of-type(1) {
    display: none; }
  #question .container680 .accordion li .accordion_icon.active span:nth-of-type(2) {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg); }