/* 
 *Theme　Name：Ball-sen company LLC HP
 *Author: Ball-sen company LLC
 *Description:Ball-sen company LLC
 *Version:1.0
*/

@charset "UTF-8";

body {
  font-family: "Noto Sans JP", sans-serif;
}
.wrap {
  overflow: hidden;
}
.section-wrap {
  margin-top: 60px;
}
.section-inner {
  width: 80%;
  margin: 0 auto;
  max-width: 2300px;
}
.section-inner2 {
  width: 60%;
  margin: 0 auto;
  max-width: 2300px;
}
.section-inner3 {
  width: 80%;
  margin: 0 auto;
  max-width: 2300px;
}
/*
Header
*/
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  z-index: 10;
  top: 0;
  left: 0;
}
.header-logo-box {
  width: 250px;
  margin: 0;
}
.header-logo {
  margin: 0;
  width: 100%;
}
.header-logo > a {
  display: block;
}
.header-logo:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.header-nav {
}
.header-nav-list {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-navitem {
}
.header-navitem2 > a {
  display: block;
  padding: 20px 30px;
  margin-left: 15px;
  color: #fff;
  background-color: #c3b867;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}
.header-navitem > a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s;
}
.header-navitem > a:hover {
  border-bottom: 2px solid #333;
}
.header-navitem2 > a:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.sp-nav {
  display: none;
}

@media screen and (max-width: 980px) {
  .header-logo-box {
    width: 40vw;
    margin-top: 20px;
  }
  .header-nav {
    display: none;
  }
  .sp-nav {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease-in-out;
    opacity: 0;
    transform: translateY(-100%);
  }
  #hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 25px;
    margin: 20px 7% 0 auto;
  }
  #hamburger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: translateY(-50%);
  }
  #hamburger::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
  }
  #hamburger::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 2px;
    background-color: #333;
  }

  .sp-nav ul {
    padding: 0;
    height: 100vh;
  }
  .sp-nav li {
    margin: 0 auto;
    padding: 0;
  }
  .sp-nav li span {
    font-size: 15px;
    color: #fff;
  }
  .sp-nav li a,
  .sp-nav li span {
    display: block;
    padding: 20px 0;
    text-align: center;
    color: #fff;
    text-decoration: none;
  }
  /*基準となるli要素*/
  .sp-nav .close {
    position: relative;
    padding-left: 20px;
  }
  /*バツ印線1*/
  .sp-nav .close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 40%;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate(45deg);
  }
  /*バツ印線2*/
  .sp-nav .close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 40%;
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    transform: rotate(-45deg);
  }
  .toggle {
    transform: translateY(0);
    opacity: 1;
  }
}

/*
kv
*/
.main {
  margin: 0 auto;
}
.kv {
  width: 100%;
}
.kv-image {
  width: 100%;
}
@media screen and (max-width: 980px) {
  .kv-image {
    margin-top: 20px;
    height: 60vh;
    object-fit: cover;
  }
}
/*
Campaign
*/
.campaign {
  background-size: cover;
  position: relative;
  width: 100%;
  height: 470px;
  margin: 0 auto;
}
.campaign2 {
  background-color: #c3b867;
}
.campaign::before {
  /* 透過した白を重ねる */
  background-color: rgba(254, 254, 254, 0.815);
  /* どの範囲に重ねるかを指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
}
.campaign-text-box {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 30%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.campaign-subttl {
  font-size: 25px;
  color: #c3b867;
  margin: 0 auto;
}
.campaign-ttl {
  margin: 0 auto 70px;
  font-size: 50px;
  color: #333;
}
.campaign-list {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 67%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
@media screen and (max-width: 980px) {
  .campaign {
    width: 100vw;
    height: 90vh;
  }
  .campaign-text-box {
    top: 11%;
  }
  .campaign-list {
    display: block;
    top: 52%;
  }
  .campaign-ttl {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .campaign-subttl {
    font-size: 20px;
  }
  .campaign-image {
    width: 70vw;
    height: 20vh;
    margin-top: 20px;
  }
}

/*
NEWS
*/
.news-ttx {
  text-align: center;
  font-size: 15px;
  color: #c3b867;
  font-weight: bold;
  margin: 0 auto;
}
.news-tag {
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto 40px auto;
}
.news-wrap {
  margin-top: 100px;
  padding-top: 8px;
}
.news-list {
  width: 100%;
  padding: 0;
  list-style: none;
}
.article-box {
  display: flex;
  padding: 30px;
  font-size: 21px;
}
.article-box + .article-box {
  border-top: 2px solid #333;
}
.article-date {
  margin: 0 auto 0 0;
}
.article-ttl {
  width: 80%;
}
.article-link {
  text-decoration: none;
  color: #333;
}

.article-box:hover {
  color: #c0c0c0;
  transition: 0.3s;
}
.all-news-link {
  text-decoration: none;
  display: block;
  width: 380px;
  margin: 40px auto 0 auto;
  padding: 10px 40px;
  text-align: center;
  font-size: 30px;
  color: #c3b867;
  border: 1px solid #c3b867;
  border-radius: 35px;
}
.all-news-link:hover {
  color: #c0c0c0;
  border: 1px solid #c0c0c0;
  transition: 0.25s;
}
.news-error {
  text-align: center;
  font-size: 20px;
  margin-top: 100px;
}
.pagenation-btn {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 980px) {
  .news-wrap {
    margin-top: 40px;
  }
  .news-tag {
    font-size: 40px;
    font-weight: bold;
    margin: 0 auto;
  }
  .news-ttx {
    font-size: 12px;
  }
  .article-date {
    font-size: 15px;
    width: 100px;
  }
  .article-box {
    padding: 20px;
  }
  .article-ttl {
    font-size: 15px;
  }
  .all-news-link {
    font-size: 15px;
    padding: 10px 10px;
    width: 40vw;
    margin: 30px auto 0 auto;
  }
  .section-inner3 {
    width: 90%;
  }
}
/*
form
*/
.form {
  margin-top: 150px;
  padding: 60px 0;
  background-color: #000;
  color: #fff;
}
.form-ttx {
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
}
.form-ttl {
  font-size: 60px;
  text-align: center;
  margin: 0 auto;
}
.btn-box {
  margin: 40px auto;
}
.btn2-box {
  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line-link {
  background-color: #c0c0c0;
  border-radius: 18px;
}
.line-image {
  border-radius: 18px;
}
.line-image:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.form-link {
  margin: 0px 20px;
  border-radius: 40px;
}
.form-btn {
  background-color: #c1ab05;
  border: none;
  width: 100%;
  padding: 12px 60px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
}
.form-btn2 {
  background-color: #06c755;
  border: none;
  width: 100%;
  padding: 12px 60px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
}
.form-btn3 {
  background-color: #06c755;
  border: none;
  width: 100%;
  padding: 12px 60px;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
}
.btn-bgbox {
  background: #fff;
  border-radius: 40px;
}
.form-btn:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.btn2-bgbox {
  background: #fff;
  border-radius: 40px;
}
.form-btn2:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.form-btn3:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.btn-ttx {
  font-size: 20px;
  text-align: center;
}
.btn-ttx2 {
  text-align: center;
}
@media screen and (max-width: 980px) {
  .form {
    margin-top: 60px;
  }
  .form-ttx {
    font-size: 20px;
  }
  .form-ttl {
    font-size: 26px;
  }
  .form-btn {
    font-size: 20px;
    width: 100%;
  }
  .form-btn2 {
    font-size: 20px;
    width: 100%;
  }
  .btn-ttx {
    font-size: 14px;
    text-align: start;
  }
  .btn-ttx2 {
    font-size: 14px;
    text-align: start;
  }
  .form-btn3 {
    font-size: 18px;
  }
  .line-link {
  }
  .line-image {
    height: 55px;
    width: 55px;
    object-fit: cover;
  }
  .btn-box {
    margin: 20px 0;
  }
  .btn-ttx2 {
    text-align: start;
  }
}

/*
youtube 
*/
.youtube {
  margin: 100px auto;
}
.youtube-ttx {
  font-size: 25px;
  text-align: center;
}
.br-sp {
  display: none;
}
@media screen and (max-width: 980px) {
  .youtube {
    margin: 40px auto;
  }
  .youtube-ttx {
    font-size: 15px;
  }
}
/*
work
*/
.work {
  margin: 40px auto;
}
.work-ttx {
  text-align: center;
  font-size: 25px;
}
.work-image-box {
  list-style: none;
  display: flex;
  justify-content: center;
}
.work-img + .work-img {
  margin-left: 20px;
}
.work-link {
}
@media screen and (max-width: 980px) {
  .work-ttx {
    font-size: 15px;
  }
  .work-image-box {
    display: block;
  }
  .work-img {
    margin-top: 20px;
    width: 100%;
    height: auto;
  }
  .work-img + .work-img {
    margin-left: 0;
  }
}
/*
single
*/
.single-tag {
  margin: 100px 0 0 0;
  color: #c3b867;
}
.single-main-box {
}
.single-ttl {
  font-size: 50px;
}
.single-discription {
}
/* 
concept
*/
.concept {
  background: url(https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw2MzQ2fDB8MXxzZWFyY2h8MXx8bXVzY2xlfGVufDB8fHx8MTY2NzM3MDgwNA&ixlib=rb-4.0.3&q=80&w=1080);
  background-size: cover;
  position: relative;
  width: 100%;
  height: 1600px;
  margin: 100px auto 0 auto;
}
.concept::before {
  /* 透過した黒を重ねる */
  background-color: rgba(0, 0, 0, 0.7);
  /* どの範囲に重ねるかを指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
}
.concept-text-box {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.cencept-subttl {
  font-size: 25px;
  color: #fff;
  margin: 0 auto;
}
.concept-ttl {
  margin: 0 auto 70px;
  font-size: 50px;
  color: #fff;
}
.concept-ttx {
  font-size: 25px;
  color: #fff;
  width: 60%;
  margin: 0 auto;
  text-align: left;
}

@media screen and (max-width: 980px) {
  .concept-ttl {
    font-size: 35px;
  }
  .cencept-subttl {
    font-size: 15px;
  }
  .concept-ttx {
    font-size: 15px;

    width: 90vw;
  }
}

/*
feature
*/
.feature {
  margin-top: 100px;
}
.feature-headbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.number {
  font-size: 150px;
  font-family: "Anton", sans-serif;
  font-style: italic;
  margin: 0 0;
}
.head-ttxbox {
  margin-left: 50px;
}
.feature-subttx {
  color: #c3b867;
  margin: 0 0;
}
.feature-ttl {
  font-size: 40px;
  font-weight: bold;
  margin: 0 0;
}
.feature01-imagebox {
  margin: 0 0 0 5%;
  width: 90%;
}
.feature01-image {
  display: block;
  width: 100%;
}
@media screen and (max-width: 980px) {
  .feature {
    margin-top: 40px;
  }
  .number {
    font-size: 100px;
  }
  .feature-ttl {
    font-size: 25px;
  }
  .head-ttxbox {
    margin-left: 30px;
  }
  .feature01-image {
    width: 100vw;
  }
  .feature01-imagebox {
    margin: 0 0 20px 0;
  }
}
/*
feature02
*/
.feature02 {
  background-color: #eeeeee;
  margin-top: 100px;
  padding: 100px 0;
}
.feature02-ttxbox {
  position: relative;
  z-index: 0;
}
.feature02-ttl {
  padding: 80px 0 50px 0;
}
.feature02-ttl::before {
  content: "POINT";
  color: #fff;
  position: absolute;
  font-size: 180px;
  font-weight: bold;
  transform: translateY(-60%) translateX(-5%);
  z-index: -1;
}
.feature02-featurebox {
  display: flex;
  justify-content: center;
  width: 1050px;
  margin: 100px auto;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092), 0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
}
.feature02-imagebox {
  background-color: #fff;
  width: 350px;
  height: 500px;
}
.feature02-imagebox + .feature02-imagebox {
  border-left: 2px solid #c3b867;
}
.feature02-image {
  width: 100%;
  height: 45%;
  object-fit: cover;
}
.feature02-imagettl {
  font-size: 30px;
  margin: 0;
  padding: 30px 10px;
  text-align: center;
}
.feature02-description {
  font-size: 20px;
  margin: 0;
  padding: 10px 10px;
  text-align: center;
}
.feature03 {
  margin: 100px 0;
}
@media screen and (max-width: 980px) {
  .feature02 {
    margin-top: 40px;
    padding: 40px 0;
  }
  .feature02-ttl::before {
    font-size: 60px;
    transform: translateY(-50%) translateX(-5%);
  }
  .feature02-ttl {
    padding: 40px 0 30px 0;
  }
  .feature02-featurebox {
    display: block;
    margin: 80px auto;
    width: 100vw;
    box-shadow: none;
  }
  .feature02-imagebox {
    height: 400px;
    margin: 20px auto 0 auto;
  }
  .feature02-image {
    height: 60%;
  }
  .feature02-imagettl {
    font-size: 20px;
    padding: 20px 0;
  }
  .feature02-description {
    font-size: 15px;
    padding: 0;
  }
  .feature02-imagebox {
    border-left: 2px solid #c3b867;
  }
  .feature03 {
    margin: 40px 0;
  }
}

/*
trainer
*/
.trainer {
  margin-top: 100px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.trainer-infobox {
}
.trainer-info {
  text-align: center;
}
.trainer-num {
  margin-bottom: 10px;
}
.trainer-namebox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.trainer-name {
  font-size: 50px;
  font-weight: bold;
  margin: 0;
  padding-bottom: 5px;
}
.trainer-sns {
  width: 50px;
  height: 50px;
  margin-left: 20px;
}
.youtube-sns {
  height: 70px;
}
.trainer-sns:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.youtube-snsbox {
  height: 50px;
}
.youtube-sns:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.trainer-ttl {
  font-size: 20px;
  margin-top: 0px;
}
.result {
  border: 1px solid #000;
  width: 500px;
}
.result-ttl {
  background-color: #000;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}
.result-box {
  padding: 15px 20px 15px 40px;
}
.year {
  position: relative;
}
.year::before {
  font-size: 17px;
  content: "★";
  color: #c3b867;
  position: absolute;
  transform: translateY(-8%) translateX(-120%);
}
.result-info {
}
.trainer-imagebox {
  margin-left: 40px;
}
.trainer-image {
  object-fit: cover;
  height: 100%;
}
@media screen and (max-width: 980px) {
  .trainer {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  .trainer + .trainer {
    margin-top: 60px;
  }
  .trainer-num {
    margin-bottom: 0;
  }
  .trainer-name {
    font-size: 30px;
    padding-bottom: 2px;
  }
  .trainer-ttl {
    font-size: 15px;
  }
  .trainer-imagebox {
    margin: 0 auto;
    text-align: center;
    order: 2;
  }
  .trainer-infobox {
    display: flex;
    flex-direction: column;
  }
  .trainer-image {
    width: 90vw;
  }
  .trainer-sns {
    width: 35px;
    height: 35px;
    margin-left: 12px;
  }
  .youtube-sns {
    height: 45px;
  }
  .result {
    width: 90vw;
    margin: 0 auto;
    order: 3;
  }
  .trainer-info {
    order: 1;
  }
}
/*
demo
*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
  padding: 0;
}

.d-demo__list--left {
  animation: infinity-scroll-left 100s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}
.d-demo__item > img {
  width: 100%;
}
.d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
}
@media screen and (max-width: 980px) {
  .d-demo__item {
    width: calc(100vw / 3);
  }
}

/* 
Trial
*/
.trial {
  margin-top: 150px;
}
.trial-flowbox {
  display: flex;
  align-items: center;
  border: 1px solid #333;
  margin-top: 30px;
  box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092);
}
.trial-image {
  height: 100%;
}
.trial-textbox {
  margin: auto 30px;
}
.trial-ttl {
  font-weight: bold;
  font-size: 30px;
}
.trial-ttx {
  font-size: 20px;
}
@media screen and (max-width: 980px) {
  .trial {
    margin-top: 40px;
  }
  .trial-flowbox {
    display: block;
  }
  .trial-image {
    width: 100%;
  }
  .trial-ttl {
    font-size: 20px;
  }
  .trial-ttx {
    font-size: 15px;
    margin-bottom: 30px;
  }
}
/*
Price
*/
.price {
  padding: 150px 0;
  background-color: #eeeeee;
}
.course-box {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.course-minibox {
  background-color: #fff;
  width: 370px;
  border-radius: 30px;
  margin-left: 20px;
  padding: 80px 0;
}
.course-ttl {
  color: #c3b867;
  margin: 0;
  font-size: 25px;
}
.price-box {
  display: flex;
  align-items: baseline;
  margin: 20px 0;
}
.en-mark {
}
.price-ttx {
  font-weight: bold;
  font-size: 60px;
}
.times {
}
.course-ttl-ttx {
  margin: 0;
}
.course-ttx {
  margin-top: 30px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: bold;
}
.sub-price {
  font-size: 18px;
  margin: 0 0 0 20px;
}
.course-minibox-inner {
  margin: 0 30px;
}
.course-content {
  position: relative;
  margin-left: 20px;
}
.course-content::before {
  font-size: 17px;
  content: "✓";
  color: #333;
  position: absolute;
  transform: translateY(-8%) translateX(-150%);
}
.enter-price-box {
  text-align: center;
  padding-top: 40px;
  margin-left: 30px;
}
.enter-price {
}
@media screen and (max-width: 980px) {
  .price {
    padding: 40px 0;
  }
  .course-box {
    display: block;
    width: 100%;
  }
  .course-minibox {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 50px 0;
  }
  .price-ttx {
    font-size: 40px;
  }
  .enter-price-box {
    text-align: start;
    padding-top: 10px;
    margin-left: 8px;
  }
}
/*
access
*/
.access {
  margin: 150px 0;
}
.access-box {
  display: flex;
  justify-content: space-around;
}
.access-minibox {
  width: 400px;
}
.access-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.access-ttl {
  text-align: center;
  font-size: 25px;
}
.access-ttx {
  height: 500px;
}
@media screen and (max-width: 980px) {
  .access {
    margin: 40px 0;
  }
  .access-box {
    display: block;
  }
  .access-image {
    max-width: -webkit-fill-available;
  }
  .access-ttx {
    height: auto;
    margin-bottom: 40px;
  }
  .access-minibox + .access-minibox {
    margin-top: 60px;
  }
  .access-minibox {
    margin-top: 20px;
    width: auto;
  }
}
/*
faq
*/
.faq {
  padding: 120px 0;
  background-color: #eeeeee;
}
.faq-box {
  margin-top: 70px;
}
.faq-ttl {
  font-size: 25px;
}
.faq-ttx {
}
@media screen and (max-width: 980px) {
  .faq {
    padding: 40px 0;
  }
  .section-inner2 {
    width: 80%;
  }
  .faq-box {
    margin-top: 40px;
  }
  .faq-ttx {
    margin-top: 0;
    font-size: 15px;
  }
  .faq-ttl {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

/*
youtube2
*/
.youtube2 {
  margin-top: 70px;
}
.youtube2-box {
  display: flex;
  justify-content: space-between;
}
.youtube2-ttxbox {
  width: 55%;
}
.youtube2-subttl {
  margin: 0;
  font-size: 22px;
}
.youtube2-ttl {
  font-size: 60px;
  margin: 0 0 30px 0;
}
.youtube2-ttx {
}
.youtube2-accessbox {
  margin-top: 60px;
  display: flex;
  width: 90%;
}
.youtube2-access-minibox + .youtube2-access-minibox {
  margin-left: 30px;
}
.youtube2-access {
  font-size: 55px;
  margin: 0;
}
.youtube2-access-ttx {
  margin: 0;
}
.youtube2-access-minibox {
}
.youtube2-access {
}
.youtube2-access-ttx {
}
.youtube2-link {
  display: block;
  width: 150px;
}
.youtube2-btn {
  display: block;
  width: 150px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  padding: 12px 0;
  margin-top: 60px;
  text-decoration: none;
  color: #fff;
  background-color: #000000;
}
.youtube2-btn:hover {
  opacity: 0.6;
  filter: brightness(110%);
  transition: 0.3s;
}
.youtube2-moviebox {
  margin-left: 80px;
}
@media screen and (max-width: 980px) {
  .youtube2-box {
    flex-direction: column-reverse;
  }
  .youtube2-ttxbox {
    width: 100%;
    margin: 0 auto;
  }
  .youtube2-ttx {
    font-size: 15px;
  }
  .youtube2-subttl {
    font-size: 15px;
    margin-top: 20px;
  }
  .youtube2-ttl {
    font-size: 40px;
  }
  .youtube2-access {
    font-size: 32px;
  }
  .youtube2-link {
    display: none;
  }
  .youtube2-moviebox {
    margin-left: 0px;
    width: 100%;
  }
  .youtube2-movie {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
  }
  .youtube2-accessbox {
    margin-top: 30px;
    width: 100%;
  }
}

/*
footer
 */
.footer {
  margin-top: 100px;
  padding-top: 70px;
  border-top: 3px solid #eeeeee;
}
.fotter-subttl {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #c3b867;
  margin: 0;
}
.footer-logo {
  width: 400px;
  display: block;
  margin: 0 auto;
}
.footer-nav {
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 80px;
}
.footer-link {
  text-decoration: none;
  padding: 0 7px;
}
.footer-link + .footer-link {
  border-left: 1px solid #333;
  margin: 0;
}
.footer-menu {
  color: #c3b867;
  font-size: 18px;
  margin: 0;
}
.footer-menu:hover {
  color: #c0c0c0;
  transition: 0.3s;
}
.footer-copyright {
  margin-bottom: 50px;
  display: block;
  text-align: center;
}
@media screen and (max-width: 980px) {
  .footer-logo {
    width: 80vw;
  }
}