@charset "UTF-8";
/* Scss Document */
* {
  margin: 0;
  padding: 0; }

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

::selection {
  color: #fff;
  background: #9E7B37; }

/*------------------------------------------------------------*/
html {
  overflow: auto; }

body {
  width: 100%;
  overflow: hidden;
  min-width: 100%;
  background-color: #ffffff;
  font-family: 'ten-mincho-text','YuMincho','Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;
  font-weight: normal;
  font-style: normal;
  color: #221815;
  letter-spacing: 0.1em; }

a, p {
  font-size: 17px;
  text-decoration: none; }

@media screen and (min-width: 560px) {
  .hv {
    transition: 0.3s; }

  .hv:hover {
    opacity: 0.7; }

  .hv2 {
    transition: 0.3s; }

  .hv2:hover {
    opacity: 0.7;
    transform: scale(1.1);
    transition-duration: 0.3s; } }
@media screen and (max-width: 559px) {
  p {
    font-size: 16px; } }
.small {
  font-size: 16px; }

h1 {
  font-size: 30px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

h2 {
  font-size: 26px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

h3 {
  font-size: 20px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

h5 {
  font-size: 15px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

h6 {
  font-size: 13.5px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

h7 {
  font-size: 12px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

.tenwhite {
  color: #fff;
  background: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .tenwhite {
    background: none; } }
.tenblack {
  color: #221815;
  background: #221815;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .tenblack {
    background: none; } }
.tengold {
  color: #9E7B37;
  background: #9E7B37;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .tengold {
    background: none; } }
.tenred {
  color: #FF3700;
  background: #FF3700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .tenred {
    background: none; } }
#wrap {
  width: 100%; }

.inner {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto; }

#sidemenu {
  background-color: none;
  z-index: 100;
  width: 100px;
  height: 100vh;
  position: fixed; }
  #sidemenu #sidelogo {
    width: 50px;
    margin: 25px;
    position: fixed;
    top: 0; }
  @media screen and (max-width: 559px) {
    #sidemenu #sidelogo {
      width: 40px;
      margin: 10px;
      position: fixed;
      top: 0; } }
  #sidemenu #sidebtns {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  #sidemenu img {
    display: block;
    margin: 20px auto; }

#sidemenusp {
  z-index: 100;
  position: fixed;
  top: 0;
  right: 0;
  margin: 10px; }

#fv {
  height: 100vh;
  position: relative; }

@media screen and (max-width: 559px) {
  #fv {
    height: 70vh; } }
.scroll {
  display: inline-block;
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 0 110px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none; }

.scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #fff; }

.scroll::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite; }

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0; }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0; }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%; }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%; } }
.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none; }

#slider li {
  height: 100vh;
  background: center / cover no-repeat; }

@media screen and (max-width: 559px) {
  #slider li {
    height: 70vh; } }
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto;
  border: none;
  box-shadow: none; }

.bx-wrapper img {
  display: block;
  margin: 0px auto; }

.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0; }

@media screen and (max-width: 559px) {
  .full div {
    height: 70vh; } }
.full div.img01 {
  background-image: url("../img/FV01.jpg"); }

.full div.img02 {
  background-image: url("../img/FV02.jpg"); }

.full div.img03 {
  background-image: url("../img/FV03.jpg"); }

.full div.img04 {
  background-image: url("../img/FV04.jpg"); }

.full div.img05 {
  background-image: url("../img/FV05.jpg"); }

.full .slick-dots {
  bottom: 4%;
  z-index: +1; }

.headerlogopc {
  position: absolute;
  width: 170px;
  margin-left: 100px;
  z-index: 50000; }

.headerlogosp {
  position: absolute;
  width: 130px;
  margin-left: 10px;
  z-index: 50000; }

.title {
  color: #9E7B37;
  writing-mode: vertical-rl;
  margin: 50px auto 50px;
  text-align: center; }
  .title h5 {
    text-align: center; }

@media screen and (max-width: 559px) {
  .title {
    margin: 40px auto; } }
#sentoha {
  margin-bottom: 100px; }

#about {
  width: 100%;
  margin: 0 auto; }
  #about img {
    width: 100%; }

@media screen and (min-width: 560px) {
  #aboutset {
    width: 100%;
    margin: 0;
    padding: 100px 0;
    background-image: url("../img/ill_intro_pc.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center; } }
@media screen and (max-width: 559px) {
  #aboutset {
    background-image: url("../img/chiba.jpg");
    background-size: auto 300px;
    background-position: center;
    background-repeat: no-repeat; } }
@media screen and (max-width: 559px) {
  .onlypc {
    display: none; } }
/*SPサイズで非表示*/
@media screen and (min-width: 560px) {
  .onlysp {
    display: none; } }
/*PCサイズで非表示*/
.bm20 {
  margin-bottom: 20px; }

.tm40 {
  margin-top: 40px; }

.talk {
  line-height: 250%; }

@media screen and (max-width: 559px) {
  .talk {
    line-height: 200%; } }
.btn {
  color: #fff;
  width: 240px;
  height: 50px;
  position: relative;
  margin: 50px auto 0;
  border-radius: 10px;
  background: #9E7B37; }
  .btn p {
    font-size: 14px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 14px; }
  .btn img {
    height: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -240px;
    margin: auto; }

#concept {
  margin: 100px auto 0; }
  #concept.inner {
    box-sizing: border-box;
    max-width: 1680px;
    padding-left: 5%;
    padding-right: 5%; }
    #concept.inner .movieBox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 60px; }
    #concept.inner .youtube {
      width: 49%; }
      #concept.inner .youtube .titlebox {
        margin-bottom: 20px; }
        #concept.inner .youtube .titlebox h2 {
          font-size: 17px;
          padding: 10px 0; }
        #concept.inner .youtube .titlebox .bg1 {
          background: url(../img/title_bg1.svg) 50% 50%;
          background-size: cover; }
        #concept.inner .youtube .titlebox .bg2 {
          background: url(../img/title_bg2.svg) 50% 50%;
          background-size: cover; }

@media screen and (min-width: 1200px) {
  #concept.inner .youtube .titlebox h2 .pc {
    display: none; } }
@media screen and (max-width: 820px) {
  #concept.inner .movieBox {
    flex-wrap: wrap;
    margin-bottom: 0; }
  #concept.inner .youtube {
    margin-bottom: 60px;
    width: 100%; } }
@media screen and (max-width: 559px) {
  #concept.inner .youtube {
    margin-bottom: 30px; }
    #concept.inner .youtube .titlebox {
      margin-bottom: 12px; }
      #concept.inner .youtube .titlebox h2 {
        font-size: 16px; } }
.thumbox {
  position: relative; }

.pvthum img {
  width: 100%; }

.pvplay {
  width: 300px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%); }
  .pvplay p {
    font-size: 16px;
    color: #fff; }
  .pvplay img {
    width: 75px; }

#modal-content {
  width: 80%;
  margin: 0;
  padding: 0;
  background: #fff;
  position: fixed;
  display: none;
  z-index: 99999; }

#modal-content .inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden; }

#modal-content .inner #player {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%; }

#modal-overlay {
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75); }

/*
.conmv{
	margin:100px auto;
  overflow: hidden;
  position: relative;
  width:80%;
  &:after {
    padding-top: 56.25%;
    display: block;
    content: '';  
  }
  &>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}*/
@media screen and (min-width: 560px) {
  .bigbtn {
    color: #fff;
    width: 80%;
    padding: 50px 0px;
    margin: 0px auto;
    border-radius: 10px;
    display: table;
    background: #9E7B37; }
    .bigbtn p {
      font-size: 20px;
      margin: 10px 0 20px 0; } }
@media screen and (max-width: 559px) {
  .bigbtn {
    color: #fff;
    width: 90%;
    padding: 20px 0px 18px;
    margin: 0px auto 10px;
    border-radius: 10px;
    display: table;
    background: #9E7B37; }
    .bigbtn img {
      width: 10px; }
    .bigbtn p {
      font-size: 16px;
      line-height: 1.5em;
      margin: 10px 0 20px 0; } }
.migi {
  width: 80%;
  padding-left: 10%;
  display: table-cell;
  vertical-align: middle; }

.hidari {
  width: 10%;
  display: table-cell;
  vertical-align: middle; }

@media screen and (max-width: 559px) {
  .migi {
    width: 80%;
    padding-left: 10%; }

  .hidari {
    width: 10%; } }
.sen1 {
  color: #9E7B37; }

#nintei {
  width: 100%;
  background: #E2D7C3; }

.line {
  width: 100%;
  vertical-align: bottom;
  line-height: 1.0em; }

.whitebox {
  margin: 0 auto 100px;
  width: 90%; }

@media screen and (max-width: 559px) {
  .whitebox {
    margin: 0 auto 50px; } }
.white1 {
  margin: 0 auto 20px;
  padding: 10px 0;
  width: 90%;
  background: no-repeat;
  background: url("../img/white1.svg");
  background-size: auto 100%;
  background-position: center; }

.white2 {
  margin: 0 auto 20px;
  padding: 10px 0;
  width: 90%;
  background: no-repeat;
  background: url("../img/white2.svg");
  background-size: auto 100%;
  background-position: center; }

#movie {
  width: 90%;
  margin: 0 5%; }

#movie01 {
  width: 100%;
  display: table;
  margin: 0 0 100px 0; }

#movie01sp {
  width: 100%;
  margin: 0 0 50px 0; }

#movie02 {
  width: 100%;
  display: table;
  margin: 0 0 100px 0; }

#movie02sp {
  width: 100%;
  margin: 0 0 50px 0; }

.mvimgbox {
  width: 67%;
  display: table-cell;
  vertical-align: middle; }
  .mvimgbox img {
    width: 100%; }

.mvimgboxsp {
  width: 100%; }
  .mvimgboxsp img {
    width: 100%; }

.mvnavibox {
  width: 33%;
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

.mvnaviboxsp {
  width: 96%;
  margin: 0 2%;
  position: relative; }
  .mvnaviboxsp .pl {
    position: absolute;
    left: 0;
    bottom: 0; }
  .mvnaviboxsp .pr {
    position: absolute;
    right: 0;
    bottom: 0; }

.mvtitle {
  margin: 0 0 20px 0; }

@media screen and (max-width: 559px) {
  .mvtitle {
    margin: 0; } }
.h122 {
  height: 122px; }

.h142 {
  height: 142px; }

.play {
  font-size: 12px;
  color: #9E7B37;
  letter-spacing: 0.05em;
  margin-top: 5px; }

.fl {
  float: left; }

.fr {
  float: right; }

#seat {
  width: 100%;
  position: relative;
  margin: 100px auto 20px; }
  #seat img {
    width: 80%; }

@media screen and (max-width: 559px) {
  #seat img {
    width: 90%; } }
.seattext {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%); }

#rule {
  width: 80%;
  margin: 0 auto 100px;
  text-align: left; }

#rule_r {
  width: 10%;
  float: left; }

#rule_l {
  width: 90%;
  float: left;
  margin: 10px 0 0 0;
  font-size: 13.5px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal; }

.kijyun {
  text-align: center;
  margin: 0 0 20px; }

@media screen and (max-width: 559px) {
  #rule {
    text-align: justify;
    text-justify: inter-ideograph; }

  #rule_r {
    float: none;
    margin: 0 auto; }

  #rule_l {
    float: none;
    margin: 0 auto; } }
.sen1 {
  color: #9E7B37;
  display: inline; }

#flow {
  width: 100%;
  margin: 0 auto 50px;
  text-align: center; }

#flowset {
  width: 90%;
  margin: 30px 5%; }

@media screen and (max-width: 559px) {
  #flowset {
    width: 80%;
    margin: 30px 10%; } }
@media screen and (min-width: 560px) {
  .flows {
    width: 11.5%;
    height: 300px;
    float: left; }
    .flows h6 {
      color: #9E7B37;
      margin: 10px 0 0; } }
@media screen and (max-width: 559px) {
  .flows {
    width: 100%; }
    .flows h6 {
      color: #9E7B37;
      margin: 10px 0 0; } }
.flowbox {
  width: 100%;
  background: #fff;
  border-radius: 10px; }

@media screen and (min-width: 560px) {
  .flowbox {
    height: 250px;
    position: relative; } }
@media screen and (max-width: 559px) {
  .flowbox {
    height: 80px;
    display: table;
    border-collapse: separate;
    border-spacing: 20px; } }
@media screen and (min-width: 560px) {
  .tate {
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl; } }
@media screen and (max-width: 559px) {
  .tate {
    vertical-align: middle;
    display: table-cell;
    text-align: left; } }
.table {
  text-align: right; }

@media screen and (min-width: 560px) {
  .arrow {
    height: 250px;
    width: 2.1%;
    margin: 0 2%;
    float: left; }
    .arrow img {
      margin: 120px 0; } }
@media screen and (max-width: 559px) {
  .arrow {
    margin: 5px 0; } }
.nuts {
  width: 100%;
  text-align: right; }

#gallary {
  width: 100%;
  margin: 100px auto 0; }
  #gallary img {
    width: 100%;
    position: relative; }
  #gallary p {
    margin: 50px 0 0 50px;
    text-align: left;
    position: relative;
    z-index: 10; }

footer {
  width: 100%;
  margin: 100px 0 0 0;
  height: 1200px;
  background: no-repeat;
  background-image: url("../img/footer.jpg");
  background-size: cover; }

@media screen and (max-width: 559px) {
  footer {
    height: 900px; } }
#footerbox {
  width: 100%;
  text-align: center; }
  #footerbox img {
    margin: 0 20px; }

.f1 {
  margin: 120px 0 0 0;
  margin: 0 auto; }
  .f1 .hv2 {
    display: inline; }
  .f1 img {
    vertical-align: middle; }

.f2 {
  margin: 80px 0; }
  .f2 img {
    width: 90px; }

@media screen and (max-width: 559px) {
  .f2 {
    margin: 50px 0; }
    .f2 img {
      width: 60px; } }
.f3 {
  color: #9E7B37;
  margin: 80px 0; }
  .f3 p {
    margin-bottom: 20px; }

.copy {
  font-size: 12px;
  margin: 40px 0 0 0; }

.mail p {
  font-size: 13.5px;
  line-height: 1.4em;
  font-weight: normal;
  font-style: normal;
  color: #9E7B37; }
.mail img {
  width: 10px; }
.mail p, .mail img {
  display: inline; }

/*-------------------------*/
#aboutfv {
  width: 100%;
  position: relative; }
  #aboutfv img {
    width: 100%; }
  #aboutfv h1 {
    color: #9E7B37; }

@media screen and (min-width: 560px) {
  .pagetitle {
    position: absolute;
    padding: 3px 10px;
    background-color: #fff;
    bottom: 100px;
    margin-left: 10%; } }
@media screen and (max-width: 559px) {
  .pagetitle {
    width: 70%;
    text-align: center;
    display: inline-block;
    padding: 1px 5px;
    text-align: center;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .pagetitle h1 {
      font-size: 24px; } }
.aboutlogo {
  width: 15%;
  padding: 100px 0; }

.abouttxt {
  width: 80%;
  margin: 0 auto; }
  .abouttxt h3 {
    line-height: 2.5em;
    margin: 20px 0 0 0; }
  .abouttxt p {
    font-size: 16px;
    line-height: 2em;
    font-weight: normal;
    font-style: normal; }
  .abouttxt ul {
    list-style: none;
    display: inline-block; }
  .abouttxt ul li {
    font-size: 16px;
    line-height: 2em;
    font-weight: normal;
    padding: 8px 0 8px 20px;
    font-style: normal;
    background: url("../img/dot.png") left 0px top 16px no-repeat;
    background-size: 15px auto; }

@media screen and (max-width: 559px) {
  .abouttxt p {
    letter-spacing: 0.01em; }
  .abouttxt ul li {
    letter-spacing: 0.01em; }

  h3 {
    font-size: 20px;
    line-height: 2em;
    margin: 20px 0 0 0; } }
.abbox {
  width: 80%;
  margin: 0 10% 10%;
  height: auto; }
  .abbox img {
    width: 100%; }

@media screen and (max-width: 559px) {
  .abbox {
    width: 100%;
    margin: 0 auto 30%;
    height: auto; } }
@media screen and (min-width: 560px) {
  .atitle {
    width: 100%;
    margin: 0 0 3% 0;
    text-align: left; }
    .atitle h2 {
      color: #9E7B37;
      text-align: left; } }
@media screen and (max-width: 559px) {
  .atitle {
    margin: 0 0 8% 0%;
    text-align: left;
    float: none; }
    .atitle h2 {
      font-size: 24px;
      color: #9E7B37;
      text-align: left; } }
.atxt {
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 0 auto; }

@media screen and (max-width: 559px) {
  .atxt {
    text-align: justify;
    text-justify: inter-ideograph;
    width: 100%;
    float: none; } }
.ml20 {
  margin: 0 0 10% 20%; }

@media screen and (max-width: 559px) {
  .ml20 {
    margin: 0 0 30% 0; } }
.abimg {
  margin-top: 15%; }

.mission {
  margin: 100px 0 120px 0; }

.fg {
  margin-top: 200px; }

@media screen and (max-width: 559px) {
  .fg {
    margin-top: 100px; } }
/*-------------------------*/
#productspage {
  width: 100%;
  background: #E2D7C3; }

#productsfv {
  width: 100%;
  position: relative; }
  #productsfv img {
    width: 100%; }
  #productsfv h1 {
    color: #9E7B37; }

@media screen and (min-width: 560px) {
  .pagetitle2 {
    position: absolute;
    text-align: center;
    padding: 10px 40px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); } }
@media screen and (max-width: 559px) {
  .pagetitle2 {
    width: 70%;
    padding: 12px;
    text-align: center;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .pagetitle2 h1 {
      font-size: 24px; } }
.inner2 {
  width: 90%;
  max-width: 1280px;
  text-align: center;
  margin: 0 auto; }

.producttitle {
  margin: 50px auto;
  padding-top: 50px; }
  .producttitle h2 {
    font-size: 36px; }

.productlist {
  width: 100%;
  margin: 0 auto; }

.product {
  float: left;
  width: 29%;
  margin: 2.16%;
  text-align: left;
  font-feature-settings: "palt"; }
  .product img {
    width: 100%; }
  .product h1, .product h2, .product h3, .product h4, .product h5, .product p {
    line-height: 1em;
    margin: 0 auto 12px; }
  .product p {
    line-height: 1.4em;
    text-align: justify; }
  .product h2 {
    font-size: 16pt;
    line-height: 1.2em; }
  .product h3 {
    font-size: 10pt; }
  .product h4 {
    font-size: 10pt; }
  .product p {
    font-size: 10pt; }
    .product p.small {
      font-size: 9pt; }

.product p.pd51 {
  text-align: left; }

@media screen and (max-width: 559px) {
  .product {
    float: none;
    width: 100%;
    margin: 0 auto 60px; }
    .product h2 {
      font-size: 20pt; }
    .product p {
      font-size: 12pt; }
      .product p.small {
        font-size: 10pt; } }
.producttext {
  width: 100%;
  margin: 0 auto;
  padding-top: 10px; }

.productlink a {
  font-size: 12pt; }
.productlink img {
  width: 12px; }

.productlink:hover {
  opacity: 0.7; }

.white3 {
  width: 100%;
  margin: 50px 0 -10px; }

.chiba {
  margin: 0 30px;
  line-height: 1.4em; }
  .chiba p, .chiba img {
    font-size: 16px;
    display: inline; }
  .chiba img {
    width: 12px; }

.chiba:hover {
  opacity: 0.7; }

.kugiri {
  margin: 50px 0 0 0;
  text-align: center; }
  .kugiri img {
    width: 60px; }

.anker_area {
  width: 100%;
  margin: 50px 0 0 0;
  text-align: center; }

.anker {
  width: 200px;
  display: inline-block;
  margin: 20px;
  padding: 20px 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;
  letter-spacing: 0em;
  border-radius: 5px;
  background-color: #9E7B37; }
  .anker p {
    font-size: 22px;
    color: white; }
  .anker img {
    width: 30px;
    margin: 10px 0 0 5px; }

@media screen and (max-width: 559px) {
  .anker {
    float: inherit;
    width: 90%;
    padding: 10px 0;
    margin: 0 5% 10px 5%; }
    .anker img {
      width: 16px; } }
.anker:hover {
  opacity: 0.7; }

.mini {
  font-size: 16px;
  margin: 0 0 0 10px; }

/*　ハンバーガーボタン　*/
.header_entry {
  position: fixed;
  z-index: 99998;
  top: 20px;
  right: 80px; }

.c-hamburger {
  display: inline-block;
  text-decoration: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  position: fixed;
  z-index: 99999;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #9E7B37;
  background-color: rgba(0, 0, 255, 0); }

@media screen and (max-width: 559px) {
  .header_entry {
    top: 10px;
    right: 60px; }

  .c-hamburger {
    top: 10px;
    right: 10px; } }
.c-hamburger__line {
  width: 22px;
  height: 2px;
  background-color: #9E7B37;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s; }
  .c-hamburger__line::before, .c-hamburger__line::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #9E7B37;
    position: absolute;
    transition: all .3s; }
  .c-hamburger__line::before {
    top: -6px; }
  .c-hamburger__line::after {
    top: 6px; }

.c-drawer {
  position: fixed;
  z-index: 99998;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  background-color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  display: flex;
  justify-content: center;
  align-items: center; }

@media screen and (max-width: 559px) {
  .c-drawer {
    width: 100%; } }
.c-drawer nav {
  display: inline-block;
  text-align: center; }

.c-drawer nav li {
  padding: 20px; }

.is-drawer-active .c-hamburger__line {
  background-color: transparent; }
  .is-drawer-active .c-hamburger__line::before, .is-drawer-active .c-hamburger__line::after {
    top: 0;
    background-color: #9E7B37; }
  .is-drawer-active .c-hamburger__line::before {
    transform: rotate(45deg); }
  .is-drawer-active .c-hamburger__line::after {
    transform: rotate(-45deg); }
.is-drawer-active .c-drawer {
  visibility: visible;
  opacity: 1;
  transition: .3s; }

.menusns {
  margin: 0 auto; }
  .menusns .hv2 {
    display: inline; }
  .menusns img {
    vertical-align: middle;
    padding: 5px; }

#onlinelesson {
  margin: 0 auto;
  padding-top: 100px;
  box-sizing: border-box; }
  #onlinelesson h2 {
    margin-bottom: 0.5em;
    padding: 0 5%; }
  #onlinelesson .talk {
    padding: 0 5%; }
  #onlinelesson .movie {
    margin: 40px auto 60px;
    width: 90%; }
    #onlinelesson .movie a .pvthum {
      position: relative; }
      #onlinelesson .movie a .pvthum::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2); }

@media screen and (max-width: 559px) {
  #onlinelesson .movie {
    margin-bottom: 30px; }

  #class h2 .small {
    display: block;
    line-height: 1.8em;
    margin-top: 1em; } }
#instagram {
  margin: 100px auto; }
  #instagram ul.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px; }
    #instagram ul.list li {
      display: block;
      list-style: none;
      margin-bottom: 2%;
      position: relative;
      width: 32%;
      max-width: 333px; }
      #instagram ul.list li::before {
        content: "";
        display: block;
        padding-top: 100%; }
      #instagram ul.list li img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover; }

@media screen and (max-width: 559px) {
  #instagram ul.list {
    padding: 0 5%; }
    #instagram ul.list li {
      width: 49%; } }