@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* =============================================================

_settings.scss

============================================================= */
/*--------------------------------------------------------------
colors
--------------------------------------------------------------*/
/*Grey colors*/
/*--------------------------------------------------------------
text colors
--------------------------------------------------------------*/
a, a:hover {
  color: #EB76AF; }

/*--------------------------------------------------------------
bg colors
--------------------------------------------------------------*/
.bg-base {
  background-color: #F2F2F2; }

.bg-key {
  background-color: #EB76AF; }

.bg-w {
  background-color: #fff; }

.bg-grey-extra-dark {
  background-color: #3b3b3b; }

.bg-grey-dark {
  background-color: #999999; }

.bg-grey-light {
  background-color: #e6e6e6; }

.bg-grey-extra-light {
  background-color: white; }

/*--------------------------------------------------------------
sp-size
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Media Queries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
col-width
--------------------------------------------------------------*/
/*--------------------------------------------------------------
content-max-width
--------------------------------------------------------------*/
/*--------------------------------------------------------------
fontsize
--------------------------------------------------------------*/
/*--------------------------------------------------------------
z-index
--------------------------------------------------------------*/
/* =============================================================

_textstyle.scss

============================================================= */
/*--------------------------------------------------------------
font
--------------------------------------------------------------*/
.en {
  font-family: 'Josefin Sans', sans-serif; }

body {
  font-family: YakuHanJP,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  line-height: 1.7;
  color: #000; }

/*--------------------------------------------------------------
material-icons
--------------------------------------------------------------*/
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* 推奨サイズ */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  vertical-align: middle;
  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;
  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;
  /* IEサポート */
  font-feature-settings: 'liga'; }

/* アイコンサイズ */
.material-icons.fs-sm {
  font-size: 1.125rem; }

.material-icons.fs-md {
  font-size: 1.5rem; }

.material-icons.fs-lg {
  font-size: 2.5rem; }
  @media screen and (min-width: 768px) {
    .material-icons.fs-lg {
      font-size: 3rem; } }

.material-icons.fs-xl {
  font-size: 3.5rem; }
  @media screen and (min-width: 768px) {
    .material-icons.fs-xl {
      font-size: 4rem; } }

/* 背景が明るいとき用のアイコン色 */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54); }

.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26); }

/* 背景が暗いとき用のアイコン色 */
.material-icons.md-light {
  color: white; }

.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3); }

/*--------------------------------------------------------------
a, .no-btn-link
--------------------------------------------------------------*/
a {
  border: none;
  outline: none;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

.no-btn-link {
  font-size: 1.5rem;
  font-weight: bold; }
  .no-btn-link a {
    display: inline-block; }
    .no-btn-link a .icm, .no-btn-link a .far {
      color: #EB76AF; }

/*--------------------------------------------------------------
mv_arrow_r, mv_arrow_l
--------------------------------------------------------------*/
.mv_arrow_r .icm, .mv_arrow_r .far {
  margin-right: 0.25em;
  transition: all 300ms 0s ease;
  color: #EB76AF; }
.mv_arrow_r a:hover .icm, .mv_arrow_r a:hover .far {
  margin-right: 0;
  margin-left: 0.25em; }

.mv_arrow_l .icm, .mv_arrow_l .far {
  margin-left: 0.25em;
  transition: all 300ms 0s ease;
  color: #EB76AF; }
.mv_arrow_l a:hover .icm, .mv_arrow_l a:hover .far {
  margin-left: 0;
  margin-right: 0.25em; }

a .mv_arrow_r .icm, a .mv_arrow_r .far {
  margin-right: 0.25em;
  transition: all 300ms 0s ease;
  color: #EB76AF; }
a .mv_arrow_l .icm, a .mv_arrow_l .far {
  margin-left: 0.25em;
  transition: all 300ms 0s ease;
  color: #EB76AF; }

a:hover .mv_arrow_r .icm, a:hover .mv_arrow_r .far {
  margin-right: 0;
  margin-left: 0.25em; }
a:hover .mv_arrow_l .icm, a:hover .mv_arrow_l .far {
  margin-left: 0;
  margin-right: 0.25em; }

/*--------------------------------------------------------------
.breadcrumb
--------------------------------------------------------------*/
.breadcrumb ul li {
  list-style-type: none;
  display: inline; }
.breadcrumb ul li:after {
  content: " > "; }
.breadcrumb ul li:last-child::after {
  content: ""; }

/*--------------------------------------------------------------
h1~h4
--------------------------------------------------------------*/
.ttl-en-ja {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold; }
  .ttl-en-ja .en {
    font-size: 2.5rem;
    display: block;
    line-height: 1.0em; }
    @media screen and (min-width: 768px) {
      .ttl-en-ja .en {
        font-size: 3rem; } }
    @media screen and (min-width: 992px) {
      .ttl-en-ja .en {
        font-size: 3.5rem; } }
  @media screen and (min-width: 992px) and (min-width: 768px) {
    .ttl-en-ja .en {
      font-size: 4rem; } }

h3.ttl-en-ja {
  font-size: 1.125rem;
  display: block; }
  h3.ttl-en-ja .en {
    font-size: 2.5rem;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      h3.ttl-en-ja .en {
        font-size: 3rem; } }

.ttl-style1 {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 20px; }
  .ttl-style1 .en {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
    line-height: 1.0em; }
    @media screen and (min-width: 768px) {
      .ttl-style1 .en {
        font-size: 3rem; } }

.ttl-style2 {
  font-size: 1.5rem;
  margin-bottom: 40px; }
  .ttl-style2 .en {
    font-size: 1.125rem;
    display: block;
    line-height: 1.0em;
    font-weight: normal; }

.ttl-style3 {
  text-align: center; }
  .ttl-style3 span {
    font-size: 1.5rem;
    border-bottom: 2px solid #3b3b3b;
    margin-bottom: 40px;
    display: inline-block; }

/*--------------------------------------------------------------
p, ul, ol, dl
--------------------------------------------------------------*/
p, ul, ol, dl {
  font-size: 1.125rem; }

.caption {
  font-size: 1rem; }

/*--------------------------------------------------------------
fontweight
--------------------------------------------------------------*/
.fw-b {
  font-weight: bold; }

/* =============================================================

_layout.scss

============================================================= */
* {
  box-sizing: border-box; }

/*--------------------------------------------------------------
html,body
--------------------------------------------------------------*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  background-color: #F2F2F2; }

/*--------------------------------------------------------------
float
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .float-right {
    float: right; } }

@media screen and (min-width: 768px) {
  .float-left {
    float: left; } }

/*--------------------------------------------------------------
flex-wrapper 
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .flex-wrapper.mq-md {
    display: flex;
    flex-wrap: wrap; } }
@media screen and (min-width: 992px) {
  .flex-wrapper.mq-lg {
    display: flex;
    flex-wrap: wrap; } }

/*--------------------------------------------------------------
clf
--------------------------------------------------------------*/
.clf:after {
  content: "";
  clear: both;
  display: block; }

/*--------------------------------------------------------------
margin, padding
--------------------------------------------------------------*/
.margin--xs {
  margin: 5px; }

.margin-t-xs {
  margin-top: 5px; }

.margin-r-xs {
  margin-right: 5px; }

.margin-b-xs {
  margin-bottom: 5px; }

.margin-l-xs {
  margin-left: 5px; }

.margin--s {
  margin: 10px; }

.margin-t-s {
  margin-top: 10px; }

.margin-r-s {
  margin-right: 10px; }

.margin-b-s {
  margin-bottom: 10px; }

.margin-l-s {
  margin-left: 10px; }

.margin--m {
  margin: 20px; }

.margin-t-m {
  margin-top: 20px; }

.margin-r-m {
  margin-right: 20px; }

.margin-b-m {
  margin-bottom: 20px; }

.margin-l-m {
  margin-left: 20px; }

.margin--l {
  margin: 40px; }

.margin-t-l {
  margin-top: 40px; }

.margin-r-l {
  margin-right: 40px; }

.margin-b-l {
  margin-bottom: 40px; }

.margin-l-l {
  margin-left: 40px; }

.margin--xl {
  margin: 80px; }

.margin-t-xl {
  margin-top: 80px; }

.margin-r-xl {
  margin-right: 80px; }

.margin-b-xl {
  margin-bottom: 80px; }

.margin-l-xl {
  margin-left: 80px; }

.padding--xs {
  padding: 5px; }

.padding-t-xs {
  padding-top: 5px; }

.padding-r-xs {
  padding-right: 5px; }

.padding-b-xs {
  padding-bottom: 5px; }

.padding-l-xs {
  padding-left: 5px; }

.padding--s {
  padding: 10px; }

.padding-t-s {
  padding-top: 10px; }

.padding-r-s {
  padding-right: 10px; }

.padding-b-s {
  padding-bottom: 10px; }

.padding-l-s {
  padding-left: 10px; }

.padding--m {
  padding: 20px; }

.padding-t-m {
  padding-top: 20px; }

.padding-r-m {
  padding-right: 20px; }

.padding-b-m {
  padding-bottom: 20px; }

.padding-l-m {
  padding-left: 20px; }

.padding--l {
  padding: 40px; }

.padding-t-l {
  padding-top: 40px; }

.padding-r-l {
  padding-right: 40px; }

.padding-b-l {
  padding-bottom: 40px; }

.padding-l-l {
  padding-left: 40px; }

.padding--xl {
  padding: 80px; }

.padding-t-xl {
  padding-top: 80px; }

.padding-r-xl {
  padding-right: 80px; }

.padding-b-xl {
  padding-bottom: 80px; }

.padding-l-xl {
  padding-left: 80px; }

/*--------------------------------------------------------------
img
--------------------------------------------------------------*/
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.img-wrap {
  position: relative; }

.img-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/common/images/spacer.gif);
  background-position: top left;
  background-size: 100% 100%; }

.img-wrap img {
  display: block; }

/*--------------------------------------------------------------
ul, ol
--------------------------------------------------------------*/
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0; }

/*--------------------------------------------------------------
.btn
--------------------------------------------------------------*/
.btn {
  border-radius: 30px;
  background: #3b3b3b;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  height: 56px;
  margin: 0 auto;
  box-shadow: 4px 4px 6px #DCDCDC, -4px -4px 6px #FFFFFF; }
  .btn p {
    margin: auto;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.0; }
    .btn p .material-icons {
      margin-right: 10px;
      margin-left: 0;
      transition: margin 0.1s ease-in; }

.btn:hover {
  background-color: #EB76AF;
  color: #fff;
  text-decoration: none; }
  .btn:hover p .material-icons {
    margin-right: 0;
    margin-left: 10px;
    transition: margin 0.1s ease-out; }

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

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

/*--------------------------------------------------------------
mainBg
--------------------------------------------------------------*/
#mainBg {
  width: 66.67%;
  position: absolute;
  right: -5%;
  top: 20%;
  position: fixed;
  z-index: -1000; }
  @media screen and (min-width: 768px) {
    #mainBg {
      width: 50%; } }

/*--------------------------------------------------------------
#progressSet
--------------------------------------------------------------*/
#progressSet {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  text-align: center;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F2F2F2;
  overflow: hidden; }
  #progressSet #progress {
    width: 250px;
    height: auto;
    text-align: center;
    /*#logo {
    	width: 100%;
    	height: auto;
    	z-index:1111;
    	
    	#logoparts {
    		animation: logo_animaiton 2s ease-in forwards;
    	}
    	
    	#logoparts path {
    		fill: #F2F2F2;
    		stroke: transparent;
    	}
    }*/ }
    @media screen and (min-width: 768px) {
      #progressSet #progress {
        width: 400px; } }
    #progressSet #progress #logoImg {
      animation: logo_animaiton 2s ease-in forwards; }

@keyframes logo_animaiton {
  100% {
    filter: drop-shadow(8px 8px 8px #ccc) drop-shadow(-8px -8px 8px #fff); } }
/*--------------------------------------------------------------
.content-inner
--------------------------------------------------------------*/
.content-inner {
  max-width: 1200px;
  padding: 0 20px 40px 20px;
  margin: 0 auto; }

/*--------------------------------------------------------------
header
--------------------------------------------------------------*/
@keyframes navLineDown {
  0% {
    width: 18px;
    bottom: 3em;
    left: -23px; }
  50% {
    width: 18px;
    bottom: -1em;
    left: -23px; }
  100% {
    width: 0;
    bottom: -1em;
    left: 0; } }
@keyframes navLineWidth {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
header {
  position: fixed;
  width: 100%;
  padding: 20px 20px;
  z-index: 1030;
  	/*
      .cl-w
      --------------------------------------------------------------*/ }
  @media screen and (min-width: 992px) {
    header {
      justify-content: space-between;
      /*background: linear-gradient($cl-base, rgba(242, 242, 242, 0.8));*/
      background: linear-gradient(to bottom, #f2f2f2, #f2f2f2 30%, rgba(242, 242, 242, 0.8) 80%, rgba(242, 242, 242, 0)); } }
  header #headerLogo {
    fill: #000;
    height: 30px;
    width: auto; }
    @media screen and (min-width: 768px) {
      header #headerLogo {
        height: 50px; } }
  header nav {
    display: none; }
    @media screen and (min-width: 992px) {
      header nav {
        display: block;
        position: relative; } }
    @media screen and (min-width: 992px) {
      header nav ul:first-child {
        display: flex; } }
    @media screen and (min-width: 992px) {
      header nav ul:first-child li {
        position: relative;
        margin-right: calc(20px + 23px);
        text-align: center;
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.0em; } }
    @media screen and (min-width: 992px) {
      header nav ul:first-child li:not(.current)::before {
        content: '';
        height: 4px;
        border-radius: 2px;
        position: absolute;
        width: 18px;
        bottom: 3em;
        left: -23px;
        background-color: #3b3b3b; } }
    header nav ul:first-child li:last-child {
      margin-right: 0; }
    @media screen and (min-width: 992px) {
      header nav ul:first-child li:hover::before {
        animation: navLineDown .2s ease-in-out .0s forwards; } }
    header nav ul:first-child li:not(.current) a {
      display: block;
      color: #000;
      text-decoration: none !important; }
      @media screen and (min-width: 992px) {
        header nav ul:first-child li:not(.current) a:before {
          content: '';
          width: 0;
          height: 4px;
          border-radius: 2px;
          position: absolute;
          bottom: -1em;
          left: 0;
          background-color: #EB76AF; } }
      header nav ul:first-child li:not(.current) a:hover {
        color: #EB76AF !important; }
        @media screen and (min-width: 992px) {
          header nav ul:first-child li:not(.current) a:hover::before {
            animation: navLineWidth .1s ease-out .2s forwards; } }
    header nav ul:first-child li.current a {
      display: block;
      color: #000;
      text-decoration: none !important; }
      @media screen and (min-width: 992px) {
        header nav ul:first-child li.current a:before {
          content: '';
          width: 100%;
          height: 4px;
          border-radius: 2px;
          position: absolute;
          bottom: -1em;
          left: 0;
          background-color: #EB76AF; } }
    @media screen and (min-width: 768px) {
      header nav ul:first-child li .en {
        font-size: 1.125rem; } }
    @media screen and (min-width: 992px) {
      header nav ul:first-child li .en {
        font-size: 1.5rem;
        display: block;
        line-height: 1.0em;
        margin-bottom: 10px; } }
    header nav ul:first-child li.current::before {
      bottom: 0;
      background-color: #EB76AF; }
    header nav ul:first-child li.current a {
      color: #EB76AF; }
    header nav ul.drawer-sns {
      display: none; }
  @media screen and (min-width: 992px) {
    header.cl-w {
      justify-content: space-between;
      background: none; } }
  header.cl-w #headerLogo {
    fill: #fff; }
  @media screen and (min-width: 992px) {
    header.cl-w nav ul:first-child li::before {
      background-color: #fff; } }
  @media screen and (min-width: 992px) {
    header.cl-w nav ul:first-child li:hover::before {
      background-color: #fff; } }
  @media screen and (min-width: 992px) {
    header.cl-w nav ul:first-child li a, header.cl-w nav ul:first-child li a:hover {
      color: #fff !important; } }
  @media screen and (min-width: 992px) {
    header.cl-w nav ul:first-child li a:before, header.cl-w nav ul:first-child li a:hover:before {
      background-color: #fff; } }

/*--------------------------------------------------------------
.drawer
--------------------------------------------------------------*/
header .drawer-hamburger {
  right: 0; }
  @media screen and (min-width: 992px) {
    header .drawer-hamburger {
      display: none !important; } }

.drawer header {
  position: relative;
  margin-bottom: -80px; }
  @media screen and (min-width: 768px) {
    .drawer header {
      position: fixed;
      margin-bottom: 0; } }
  .drawer header .drawer-hamburger.cl-w .drawer-hamburger-icon,
  .drawer header .drawer-hamburger.cl-w .drawer-hamburger-icon:after,
  .drawer header .drawer-hamburger.cl-w .drawer-hamburger-icon:before {
    background-color: #fff; }
.drawer.drawer-open .drawer-hamburger-icon {
  background-color: transparent !important; }
.drawer.drawer-open nav {
  color: #000; }
  .drawer.drawer-open nav ul:first-child li {
    font-size: 1rem; }
    .drawer.drawer-open nav ul:first-child li .en {
      font-size: 1.125rem;
      font-weight: bold;
      margin-right: 5px;
      display: block; }
  .drawer.drawer-open nav ul.drawer-sns {
    display: flex; }
    .drawer.drawer-open nav ul.drawer-sns li .fab {
      font-size: 1.5rem; }
    .drawer.drawer-open nav ul.drawer-sns li a:hover .fab {
      color: #EB76AF; }

/*--------------------------------------------------------------
aside
--------------------------------------------------------------*/
aside #bnrArea {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0; }
  @media screen and (min-width: 768px) {
    aside #bnrArea {
      /*justify-content: space-between;*/
      justify-content: center; } }
  aside #bnrArea li {
    padding: 20px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      aside #bnrArea li {
        width: 33.33%;
        max-width: none;
        margin: 0; } }
    aside #bnrArea li a img {
      opacity: 1;
      transition: opacity 0.1s ease-in; }
    aside #bnrArea li a:hover img {
      opacity: 0.8;
      transition: opacity 0.1s ease-in; }

/*--------------------------------------------------------------
footer
--------------------------------------------------------------*/
footer {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  /*@include mq(lg){
  	padding-bottom: $sp-xl;
  }*/ }
  @media screen and (min-width: 768px) {
    footer {
      justify-content: space-between;
      flex-flow: row-reverse;
      margin-bottom: 0; } }
  footer:before {
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: white;
    position: absolute;
    top: 0;
    right: auto;
    left: auto; }
  footer:after {
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #CCCCCC;
    position: absolute;
    top: 0;
    right: auto;
    left: auto; }
  @media screen and (min-width: 768px) {
    footer #logoAddress {
      width: 50%; } }
  footer #footerLogo {
    width: 76px;
    margin: 0 auto 20px; }
    @media screen and (min-width: 768px) {
      footer #footerLogo {
        margin-left: 0;
        margin-right: 20px; } }
  footer address {
    font-style: normal;
    text-align: center; }
    @media screen and (min-width: 768px) {
      footer address {
        text-align: left; } }
    @media screen and (min-width: 768px) {
      footer address span {
        display: block; } }
    @media screen and (min-width: 992px) {
      footer address span {
        display: inline; } }
  footer nav {
    margin-bottom: 40px; }
    @media screen and (min-width: 768px) {
      footer nav {
        width: 50%; } }
    footer nav ul {
      display: flex;
      flex-wrap: wrap; }
      @media screen and (min-width: 768px) {
        footer nav ul {
          margin-bottom: 40px;
          justify-content: flex-end; } }
      @media screen and (min-width: 992px) {
        footer nav ul {
          display: inline-block; } }
      footer nav ul li {
        display: inline-block;
        font-weight: bold;
        width: 50%; }
        @media screen and (min-width: 768px) {
          footer nav ul li {
            width: 33.33%;
            margin-right: 40px;
            display: inline-block; } }
        @media screen and (min-width: 992px) {
          footer nav ul li {
            width: auto; } }
        footer nav ul li a {
          color: #000; }
          footer nav ul li a:hover {
            text-decoration: none; }
        footer nav ul li:last-child {
          margin-right: 0; }

/*--------------------------------------------------------------
copyright
--------------------------------------------------------------*/
#copyright {
  position: relative;
  padding-bottom: 20px;
  text-align: center;
  font-size: 0.75rem; }
  @media screen and (min-width: 992px) {
    #copyright {
      position: fixed;
      left: 20px;
      bottom: 20px;
      padding: 0;
      text-align: left; } }
  #copyright.cl-w {
    color: #fff; }

/*--------------------------------------------------------------
snsNav
--------------------------------------------------------------*/
#snsNav {
  display: none; }
  @media screen and (min-width: 992px) {
    #snsNav {
      display: block;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 20px; } }
  #snsNav > ul {
    /*margin-bottom: $sp-l;*/
    position: absolute;
    bottom: 10em; }
    #snsNav > ul li {
      text-align: center;
      margin-bottom: 20px; }
      #snsNav > ul li a {
        color: #000; }
        #snsNav > ul li a .fab {
          font-size: 1.5rem;
          color: #000; }
        #snsNav > ul li a:hover .fab {
          color: #EB76AF; }
  #snsNav #scrollDownUp {
    /*writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    text-orientation: sideways;
    margin-bottom: 100px;*/
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    line-height: 1.0em;
    right: -2.6em;
    bottom: 80px;
    position: fixed;
    width: 8em; }
    #snsNav #scrollDownUp #arrowScroll {
      stroke: #000;
      /*height: 8px;*/
      height: 10px;
      width: auto;
      vertical-align: middle;
      /*margin-bottom: $sp-m;*/ }
    #snsNav #scrollDownUp span {
      height: 10em; }
    #snsNav #scrollDownUp.arrow_down #arrowScroll {
      /*transform:rotate(90deg); 
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);*/ }
    #snsNav #scrollDownUp.arrow_up #arrowScroll {
      transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg); }
  #snsNav.cl-w > ul li a {
    color: #fff; }
    #snsNav.cl-w > ul li a .fab {
      color: #fff; }
  #snsNav.cl-w #scrollDownUp {
    color: #fff; }
    #snsNav.cl-w #scrollDownUp #arrowScroll {
      stroke: #fff; }

main > .ttl-icon {
  padding-top: 80px;
  text-align: center; }
  @media screen and (min-width: 992px) {
    main > .ttl-icon {
      padding-top: 160px; } }
  main > .ttl-icon h2 {
    font-size: 1.125rem; }
    main > .ttl-icon h2 .en {
      font-size: 3.5rem;
      font-weight: bold; }
      @media screen and (min-width: 768px) {
        main > .ttl-icon h2 .en {
          font-size: 4rem; } }

/*--------------------------------------------------------------
#news
--------------------------------------------------------------*/
#newsSub .category, #newsIndex .category, #newsDetails .category {
  border-radius: 15px;
  width: 140px;
  height: 30px;
  color: #fff;
  vertical-align: baseline;
  text-align: center;
  display: block; }
  #newsSub .category a, #newsIndex .category a, #newsDetails .category a {
    display: block;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    vertical-align: baseline; }
    #newsSub .category a:hover, #newsIndex .category a:hover, #newsDetails .category a:hover {
      text-decoration: none; }
  #newsSub .category.management, #newsIndex .category.management, #newsDetails .category.management {
    background-color: #575A88; }
  #newsSub .category.produce, #newsIndex .category.produce, #newsDetails .category.produce {
    background-color: #f1a3c9; }
    #newsSub .category.produce a, #newsIndex .category.produce a, #newsDetails .category.produce a {
      color: #000; }
  #newsSub .category.announcement, #newsIndex .category.announcement, #newsDetails .category.announcement {
    background-color: #F55F44; }
  #newsSub .category.other, #newsIndex .category.other, #newsDetails .category.other {
    background-color: #3b3b3b; }

#newsSub, #newsIndex {
  position: relative;
  margin: 0 auto; }
  #newsSub .ttl-style1, #newsIndex .ttl-style1 {
    text-align: center;
    padding-left: 140px;
    width: 100%;
    box-sizing: border-box; }
    @media screen and (min-width: 768px) {
      #newsSub .ttl-style1, #newsIndex .ttl-style1 {
        text-align: left; } }
  #newsSub .img-block, #newsIndex .img-block {
    display: block;
    overflow: hidden;
    width: 25%;
    position: absolute;
    top: -40px;
    left: 10px;
    z-index: -10;
    height: calc(100% + 40px); }
    @media screen and (min-width: 768px) {
      #newsSub .img-block, #newsIndex .img-block {
        width: 92px; } }
  #newsSub #newsList.type-text li, #newsIndex #newsList.type-text li {
    margin-bottom: 20px;
    overflow: hidden; }
    #newsSub #newsList.type-text li .date, #newsIndex #newsList.type-text li .date {
      width: 6em; }
    #newsSub #newsList.type-text li .category, #newsIndex #newsList.type-text li .category {
      margin-right: 10px; }
    #newsSub #newsList.type-text li .news-text, #newsIndex #newsList.type-text li .news-text {
      position: relative;
      color: #000;
      display: block;
      padding: 0;
      width: calc(100% - 2em); }
      @media screen and (min-width: 768px) {
        #newsSub #newsList.type-text li .news-text, #newsIndex #newsList.type-text li .news-text {
          margin-top: 0;
          width: calc(100% - 7em - 140px); } }
    #newsSub #newsList.type-text li .material-icons, #newsIndex #newsList.type-text li .material-icons {
      position: absolute;
      right: 0.5em;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transition: right 0.2s linear;
      /* 追加 */ }
    #newsSub #newsList.type-text li a, #newsIndex #newsList.type-text li a {
      color: #000;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-decoration: none;
      position: relative;
      display: flex; }
      @media screen and (min-width: 768px) {
        #newsSub #newsList.type-text li a, #newsIndex #newsList.type-text li a {
          margin-top: 0; } }
      #newsSub #newsList.type-text li a:hover, #newsIndex #newsList.type-text li a:hover {
        text-decoration: none; }
        #newsSub #newsList.type-text li a:hover .news-text, #newsIndex #newsList.type-text li a:hover .news-text {
          color: #EB76AF; }
        #newsSub #newsList.type-text li a:hover .material-icons, #newsIndex #newsList.type-text li a:hover .material-icons {
          right: 0;
          color: #EB76AF;
          transition: right 0.1s linear;
          /* 追加 */ }
  #newsSub #newsList.type-image, #newsIndex #newsList.type-image {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    #newsSub #newsList.type-image li.news-block, #newsIndex #newsList.type-image li.news-block {
      width: 100%;
      padding: 0 10px 20px;
      box-sizing: border-box;
      margin-bottom: 20px; }
      @media screen and (min-width: 768px) {
        #newsSub #newsList.type-image li.news-block, #newsIndex #newsList.type-image li.news-block {
          width: 50%;
          padding: 0 20px 40px; } }
      #newsSub #newsList.type-image li.news-block figure, #newsIndex #newsList.type-image li.news-block figure {
        height: 50%;
        overflow: hidden;
        margin-bottom: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center; }
        @media screen and (min-width: 768px) {
          #newsSub #newsList.type-image li.news-block figure, #newsIndex #newsList.type-image li.news-block figure {
            height: 200px; } }
        #newsSub #newsList.type-image li.news-block figure .img-wrap, #newsIndex #newsList.type-image li.news-block figure .img-wrap {
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          overflow: hidden; }
        @media screen and (min-width: 768px) {
          #newsSub #newsList.type-image li.news-block figure img, #newsIndex #newsList.type-image li.news-block figure img {
            transform: scale(1);
            /*画像の拡大率*/
            transition: transform 0.2s linear;
            /* 追加 */
            opacity: 1; } }
      #newsSub #newsList.type-image li.news-block .text-block, #newsIndex #newsList.type-image li.news-block .text-block {
        padding: 0 20px 20px; }
        #newsSub #newsList.type-image li.news-block .text-block .date-category, #newsIndex #newsList.type-image li.news-block .text-block .date-category {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px; }
        #newsSub #newsList.type-image li.news-block .text-block .date, #newsIndex #newsList.type-image li.news-block .text-block .date {
          width: 6em;
          color: #999999; }
          @media screen and (min-width: 768px) {
            #newsSub #newsList.type-image li.news-block .text-block .date, #newsIndex #newsList.type-image li.news-block .text-block .date {
              margin-bottom: 0; } }
        #newsSub #newsList.type-image li.news-block .text-block .category.produce, #newsIndex #newsList.type-image li.news-block .text-block .category.produce {
          color: #000; }
        #newsSub #newsList.type-image li.news-block .text-block .tag-list, #newsIndex #newsList.type-image li.news-block .text-block .tag-list {
          margin-top: 20px; }
          #newsSub #newsList.type-image li.news-block .text-block .tag-list li, #newsIndex #newsList.type-image li.news-block .text-block .tag-list li {
            display: inline-block;
            background-color: #e6e6e6;
            border-radius: 10px;
            color: #3b3b3b;
            padding: 5px 10px;
            font-size: 1rem;
            margin-right: 10px;
            margin-bottom: 10px;
            z-index: 100;
            transition: background-color 0.2s linear; }
            #newsSub #newsList.type-image li.news-block .text-block .tag-list li:before, #newsIndex #newsList.type-image li.news-block .text-block .tag-list li:before {
              content: "#"; }
            #newsSub #newsList.type-image li.news-block .text-block .tag-list li:hover, #newsIndex #newsList.type-image li.news-block .text-block .tag-list li:hover {
              background-color: #EB76AF;
              cursor: pointer; }
      #newsSub #newsList.type-image li.news-block a, #newsIndex #newsList.type-image li.news-block a {
        background-color: #fff;
        color: #000;
        display: block;
        overflow: hidden;
        height: 100%; }
        #newsSub #newsList.type-image li.news-block a .text-block .date, #newsIndex #newsList.type-image li.news-block a .text-block .date {
          color: #999999; }
        #newsSub #newsList.type-image li.news-block a .text-block .category.produce, #newsIndex #newsList.type-image li.news-block a .text-block .category.produce {
          color: #000; }
        #newsSub #newsList.type-image li.news-block a:hover, #newsIndex #newsList.type-image li.news-block a:hover {
          text-decoration: none;
          color: #EB76AF; }
          @media screen and (min-width: 768px) {
            #newsSub #newsList.type-image li.news-block a:hover figure img, #newsIndex #newsList.type-image li.news-block a:hover figure img {
              transform: scale(1.1);
              /*画像の拡大率*/
              opacity: 0.8;
              transition: opacity transform 0.1s linear;
              /* 追加 */ } }
  #newsSub .no-news, #newsIndex .no-news {
    width: calc(100% - 140px);
    margin: 0 auto 40px 140px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #newsSub .no-news, #newsIndex .no-news {
        text-align: left; } }
  #newsSub .btn, #newsIndex .btn {
    width: calc(100% - 20px);
    margin: 0 10px 40px; }
    @media screen and (min-width: 768px) {
      #newsSub .btn, #newsIndex .btn {
        width: 50%;
        margin: 0 auto; } }
  #newsSub.news-sub-l, #newsIndex.news-sub-l {
    width: 100%; }
    #newsSub.news-sub-l .img-block, #newsIndex.news-sub-l .img-block {
      margin-left: 40px; }
    #newsSub.news-sub-l .ttl-style1, #newsIndex.news-sub-l .ttl-style1 {
      padding-left: 0;
      width: 75%;
      margin-left: auto; }
    #newsSub.news-sub-l #newsList, #newsIndex.news-sub-l #newsList {
      width: 100%;
      margin-right: auto; }
      @media screen and (min-width: 768px) {
        #newsSub.news-sub-l #newsList, #newsIndex.news-sub-l #newsList {
          margin-right: 0;
          margin-left: auto;
          width: 75%; } }
    #newsSub.news-sub-l a.btn, #newsIndex.news-sub-l a.btn {
      margin-right: calc(25%/2); }

/*--------------------------------------------------------------
#twitter
--------------------------------------------------------------*/
#twitter {
  padding: 40px 20px;
  position: relative; }
  @media screen and (min-width: 768px) {
    #twitter {
      padding-top: 0; } }
  #twitter h3 {
    text-align: left; }
  #twitter .img-block {
    width: 25%;
    position: absolute;
    right: 20px;
    top: 20px; }
    @media screen and (min-width: 768px) {
      #twitter .img-block {
        left: 10em;
        right: auto;
        top: -20px; } }

/*--------------------------------------------------------------
#newsTwitter
--------------------------------------------------------------*/
#newsTwitter {
  padding-right: 10px;
  padding-left: 10px; }
  #newsTwitter .content-inner {
    padding-right: 0;
    padding-left: 0; }
    @media screen and (min-width: 768px) {
      #newsTwitter .content-inner #newsSub {
        width: 66.67%; } }
    @media screen and (min-width: 768px) {
      #newsTwitter .content-inner #twitter {
        width: 33.33%;
        padding-left: 20px; } }

/*--------------------------------------------------------------
#newsYouTube
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  #newsYouTube .content-inner.flex-wrapper #newsSub {
    width: 50%; } }
@media screen and (min-width: 768px) {
  #newsYouTube .content-inner.flex-wrapper #youTube {
    width: 50%;
    padding-left: 20px; } }
#newsYouTube .content-inner.flex-wrapper #youTube .dummy {
  height: 250px;
  background-color: #CCCCCC; }

/*--------------------------------------------------------------
.nmphic
--------------------------------------------------------------*/
.nmphic {
  background: #f2f2f2;
  border-radius: 20px;
  box-shadow: 4px 4px 6px #DCDCDC, -4px -4px 6px #FFF; }
  @media screen and (min-width: 768px) {
    .nmphic {
      border-radius: 40px;
      box-shadow: 5px 5px 15px #DCDCDC, -5px -5px 15px #FFF; } }

/*--------------------------------------------------------------
.modal
--------------------------------------------------------------*/
.modal-wrapper {
  z-index: 1050;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 60px 10px;
  text-align: center; }
  .modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s; }
  .modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s; }
  .modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""; }
  .modal-wrapper .modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 1050;
    position: relative;
    width: 80%;
    max-width: 600px;
    padding: 30px 30px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    vertical-align: middle; }
    .modal-wrapper .modal-window .modal-content {
      max-height: 80vh;
      overflow-y: auto; }
  .modal-wrapper .modal-close {
    z-index: 1050;
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    color: #95979c !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0; }
    .modal-wrapper .modal-close:hover {
      color: #2b2e38 !important; }

.modal-overlay {
  z-index: 1050;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); }

/*--------------------------------------------------------------
.animate__animated
--------------------------------------------------------------*/
.animate__animated {
  opacity: 0; }

/* =============================================================

_animate_move_min.scss

============================================================= */
@-webkit-keyframes fadeInDownSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInDownSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
.animate__fadeInDownSmall {
  -webkit-animation-name: fadeInDownSmall;
  animation-name: fadeInDownSmall; }

@-webkit-keyframes fadeInLeftSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInLeftSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
.animate__fadeInLeftSmall {
  -webkit-animation-name: fadeInLeftSmall;
  animation-name: fadeInLeftSmall; }

@-webkit-keyframes fadeInRightSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInRightSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
.animate__fadeInRightSmall {
  -webkit-animation-name: fadeInRightSmall;
  animation-name: fadeInRightSmall; }

@-webkit-keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
@keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); } }
.animate__fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
  animation-name: fadeInUpSmall; }

@-webkit-keyframes fadeOutDownSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); } }
@keyframes fadeOutDownSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0); } }
.animate__fadeOutDownSmall {
  -webkit-animation-name: fadeOutDownSmall;
  animation-name: fadeOutDownSmall; }

@-webkit-keyframes fadeOutLeftSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); } }
@keyframes fadeOutLeftSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0); } }
.animate__fadeOutLeftSmall {
  -webkit-animation-name: fadeOutLeftSmall;
  animation-name: fadeOutLeftSmall; }

@-webkit-keyframes fadeOutRightSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0); } }
@keyframes fadeOutRightSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0); } }
.animate__fadeOutRightSmall {
  -webkit-animation-name: fadeOutRightSmall;
  animation-name: fadeOutRightSmall; }

@-webkit-keyframes fadeOutUpSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0); } }
@keyframes fadeOutUpSmall {
  0% {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0); } }
.animate__fadeOutUpSmall {
  -webkit-animation-name: fadeOutUpSmall;
  animation-name: fadeOutUpSmall; }

.animate__animated.animate__delay-0_2s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-delay: calc(var(--animate-delay)*0.2);
  animation-delay: calc(var(--animate-delay)*0.2); }

.animate__animated.animate__delay-0_4s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-delay: calc(var(--animate-delay)*0.4);
  animation-delay: calc(var(--animate-delay)*0.4); }

.animate__animated.animate__delay-0_6s {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  -webkit-animation-delay: calc(var(--animate-delay)*0.6);
  animation-delay: calc(var(--animate-delay)*0.6); }

.animate__animated.animate__delay-0_8s {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-delay: calc(var(--animate-delay)*0.8);
  animation-delay: calc(var(--animate-delay)*0.8); }