/* 
Theme Name: dcc-renewal
Theme URI: https://dccnet.info
Description: 同志社サイクリングクラブ公式ホームページ
Version: 1.0
Author: shimonaka
Author URI: https://shimonaka.site
*/

@charset "utf-8";

body {
  font-family: "Noto sans JP";

}
.pink{
  color: pink;
}
.blue{
  color: skyblue;
}
.sp__br{
  display: none;
}
@media screen and (max-width:620px){
  .sp__br{
    display: inline;
  }
}

/* ヘルプ */

.heading {
  font-size: 35px;
  font-family: 'Libre Baskerville';
  text-align: center;
}

.lead {
  font-size: 14px;
  font-family: 'Noto Sans JP';
  text-align: center;
  margin-top: 5px;
}

/* ヘッダー */

.header {
  width: 100%;
  box-shadow: 2px 2px 5px grey;
  background-color: transparent;
  position: fixed;
  z-index: 50;
  background-color: white;
}
.header-white{
  width: 100%;
  box-shadow: 2px 2px 5px grey;
  background-color: transparent;
  position: fixed;
  z-index: 1;
  color: white;
}
.header__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 100px;
}

.header__g-nav {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.header__heading {
  font-size: 30px;
}
.dcc-logo{
  width: 60px;
  margin-right: 10px;
}
.open-btn {
  width: 50px;
  height: 50px;
}
.open__img{
  width: 50px;
  height: 50px;
}

.close-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}

.sp-g-nav__off {
  position: fixed;
  top: 0;
  right: -70vw;
  width: 70vw;
  height: 100vh;
  font-size: 20px;
  padding-left: 10vw;
  background-color: #f5f5f5;
  transition: right 0.5s;
  z-index: 200;
  margin-left: 0;
}

.sp-g-nav__on {
  position: fixed;
  top: 0;
  right: 0vw;
  width: 70vw;
  height: 100vh;
  font-size: 20px;
  background-color: #f5f5f5;
  transition: right 0.5s;
  z-index: 200;
}

.sp-g-nav__inner {
  margin-top: 30px;
  margin-left: 30px;
}

.sp-heading {
  font-size: 30px;
  font-family: 'Libre Baskerville';
}

.sp-g-nav__item {
  margin-top: 20px;
}

@media screen and (max-width:1280px) {
  .header__inner {
    gap: 50px;
    padding: 25px 50px;
  }

  .header__g-nav {
    gap: 15px;
  }

  .header__heading {
    font-size: 25px;
  }
}

@media screen and (max-width:1024px) {
  .header__inner {
    justify-content: space-around;
  }

  .header__heading {
    font-size: 40px;
  }

  .header__g-nav {
    display: none;
  }
.dcc-logo{
  width: 80px;
}
  .open-btn {
    display: block;
  }
}

@media screen and (max-width:768px) {
  .header__heading {
    font-size: 30px;
  }
.dcc-logo{
  width: 60px;
}
  .open-btn {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width:620px) {
  .header__inner {
    justify-content: center;
    gap: 3vw;
     padding: 25px 5px;
  }

  .header__heading {
    font-size: 22px;
  }
.dcc-logo{
  width: 45px;
  margin-right: 5px;
}
.open__img{
  width: 25px;
  height: 25px;
}
  .open-btn {
    width: 30px;
    height: 30px;
  }
}

/* お問い合わせ */

.contactsec {
  display: none;
}

.contact__heading {
  font-size: 35px;
  font-family: 'Libre Baskerville';
  text-align: center;
}

.contact__lead {
  font-size: 18px;
  font-family: 'Noto Sans JP';
  text-align: center;
  margin-top: 5px;
}

.contact__text {
  font-size: 16px;
  font-family: 'Noto Sans JP';
  text-align: center;
  line-height: 1.8;
  padding: 50px 0;
  margin-left: 200px;
  margin-right: 200px;
}

.contact__btn {
  width: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 30px auto;
  border: black 1px solid;
  text-align: center;
  background-color: white;
  font-size: 14px;
  border-radius: 20px;
}

.contact__btn:hover {
  background-color: navy;
  color: white;
  transition-duration: 0.5s;
}

.contact__modal {
  display: none;
}

.contact__modal__on {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
}

.contact__form {
  width: 40vw;
  height: 90vh;
  background-color: white;
  margin: auto;
  margin-top: 30px;
  position: relative;
}

.modal__heading {
  font-size: 35px;
  font-family: 'Libre Baskerville';
  text-align: center;
  padding-top: 30px;
}

.modal__lead {
  font-size: 18px;
  font-family: 'Noto Sans JP';
  text-align: center;
  margin-top: 5px;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
}

input,
textarea {
  border: rgba(0, 0, 0, 0.2) 1px solid;
  border-radius: 5px;
  width: 100%;
  margin-top: 5px;
  background-color: #f8f8f8f8;
  padding: 2px;
}

textarea {
  height: 20vh;
}

.form__main {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.form__inner1,
.form__inner2,
.form__inner3,
.form__inner4,
.form__inner5 {
  margin-top: 20px;
}

.submit {
  width: 8vw;
  padding: 50px auto;
  text-align: center;
  background-color: navy;
  color: white;
  border: 1px black solid;
}

.form__submit {
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width:1280px) {
  .contact__text {
    margin-left: 8%;
    margin-right: 8%;
  }

  .contact__form {
    width: 50vw;
  }
}

@media screen and (max-width:1024px) {
  .contact__text {
    font-size: 14px;
  }

  .form__main {
    width: 90%;
  }

  .submit {
    width: 15vw;
  }

  .contact__form {
    width: 60vw;
  }
}

@media screen and (max-width:768px) {
  .contact__text {
    font-size: 14px;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 2;
  }

  .modal__heading {
    font-size: 25px;
    padding-top: 50px;
  }

  .contact__form {
    width: 70vw;
  }

  .form__submit {
    margin-top: 20px;
  }

  textarea {
    height: 16vh;
  }
}

/* ファーストビュー */

/* .fv {
  background: url(img/top/fv.jpg);
  background-size: cover;
  background-position: 35%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
} */
.slide-img{
  width: 100%;
  height: 80vh;
  position: relative;
  z-index: -10;
  object-fit: cover;
}
.fv-text{
  font-weight: bold;
  color: white;
  font-size: 40px;
  margin-top: 30vh;
  text-align: center;
  font-family:  'Libre Baskerville';
  position: absolute;
  left: 50%;
  transform:translateX(-50%) ;
  z-index: 100;
}

.fv__scroll {
  position: absolute;
  bottom: 65px;
  left: 50%;
  translate: -50%;
  font-family: 'Libre Baskerville';
  color: white;
  z-index: 100;
}

.fv__scroll-bar {
  width: 1px;
  height: 60px;
  border: 1px solid white;
  position: absolute;
  bottom: 0;
  left: 50%;
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
  z-index: 100;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  70%,
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* アバウト */

.about {
  width: 100%;
  overflow: hidden;
}

.about__inner {
  margin-top: 200px;
}

.about__text {
  font-size: 16px;
  font-family: 'Noto Sans JP';
  margin-top: 40px;
  line-height: 1.8;
  text-align: center;
  background-color: white;
  padding: 50px 0;
  margin-left: 200px;
  margin-right: 200px;
}

.about__more {
  width: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  border: black 1px solid;
  text-align: center;
  background-color: white;
  font-size: 14px;
}

.about__more:hover {
  background-color: navy;
  color: white;
  transition-duration: 0.5s;
}

.about__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 50px;
}

.about__twitter,
.about__insta {
  width: 80px;
}

@media screen and (max-width:620px) {
  .about__text {
    margin-left: 50px;
    margin-right: 50px;
  }
}

/* dccでできること */

.dcc-can__inner {
  margin-top: 200px;
}

.dcc-can__item__inner1,
.dcc-can__item__inner2,
.dcc-can__item__inner3 {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.dcc-can__item__inner1 {
  margin-top: 100px;
}

.dcc-can__item__inner2,
.dcc-can__item__inner3 {
  margin-top: 40px;
}

.dcc-can__item1,
.dcc-can__item2,
.dcc-can__item3,
.dcc-can__item4,
.dcc-can__item5,
.dcc-can__item6 {
  position: relative;
  max-width: 590px;
}

.dcc-can__item_heading1 {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 40px;
  color: white;
  font-weight: bold;
}

.dcc-can__item_lead1 {
  position: absolute;
  top: 80px;
  left: 30px;
  font-size: 14px;
  color: white;
  font-weight: bold;
}

@media screen and (max-width:1280px) {
  .dcc-can__img {
    width: 400px;
  }
}

@media screen and (max-width:1024px) {

  .dcc-can__item__inner1,
  .dcc-can__item__inner2,
  .dcc-can__item__inner3 {
    display: block;
  }

  .dcc-can__item2,
  .dcc-can__item4,
  .dcc-can__item6 {
    position: absolute;
    right: 0;
    margin-top: 20px;
  }

  .dcc-can__item__inner2,
  .dcc-can__item__inner3 {
    margin-top: 340px;
  }

  .dcc-can__img {
    width: 590px;
  }
}

@media screen and (max-width:768px) {
  .dcc-can__img {
    width: 500px;
  }

  .dcc-can__item2,
  .dcc-can__item4,
  .dcc-can__item6 {
    margin-top: 22px;
  }

  .dcc-can__item__inner2,
  .dcc-can__item__inner3 {
    margin-top: 300px;
  }
}

@media screen and (max-width:620px) {
  .dcc-can__img {
    width: 350px;
  }

  .dcc-can__item__inner2,
  .dcc-can__item__inner3 {
    margin-top: 223px;
  }
}

/* フロントブログ */
.front-blog{
  margin-bottom: 200px;
}
.front-blog__heading {
  font-size: 35px;
  font-family: 'Libre Baskerville';
  text-align: center;
  margin-top: 200px;
}
.front-blog__lead {
  font-size: 18px;
  font-family: 'Noto Sans JP';
  text-align: center;
  margin-top: 5px;
}
.front-blog__wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
  margin-top: 50px;
}

@media screen and (max-width:1024px) {
  .front-blog__heading {
  margin-top: 500px;
}
.front-blog__wrapper{
  gap: 30px;
}
}
@media screen and (max-width:768px) {
  .front-blog__heading {
    margin-top: 400px;
  }
}
/* 年間行事 */

.event{
  margin-bottom: 400px;
}
.event__heading {
  font-size: 35px;
  font-family: 'Libre Baskerville';
  text-align: center;
  margin-top: 200px;
}

.event__lead {
  font-size: 18px;
  font-family: 'Noto Sans JP';
  text-align: center;
  margin-top: 5px;
}

.event__content {
  margin-top: 100px;
  margin-bottom: 100px;
}

.event__item__wrapper {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

.event__question1 {
  width: 1000px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 30px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  font-weight: 700;
  text-align: center;
  gap: 20px;
}

.border-top {
  border: 1px solid black;
}

.event__answer1 {
  width: 1000px;
  margin: 0 auto;
  opacity: 0;
  align-items: center;
  height: auto;
  position: absolute;
  transition: 0.5s;
  z-index: -1;
  top: -1000px;
}

.event__answer1__on {
  position: static;
  width: 1000px;
  margin: 0 auto;
  opacity: 1;
  transition: 0.5s;
  height: auto;
  transform: translateX(0);
}

.event__img1 {
  width: 450px;
}

.event__title {
  font-size: 30px;
  font-weight: bold;
  margin-top: 30px;
}

.event__text {
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
}

.event__answer__inner {
  background-color: #803DD7;
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 30px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.row-reverse {
  flex-direction: row-reverse
}

.event__answer__inner1 {
  margin-top: 0;
}

@media screen and (max-width:1280px) {

  .event__item__wrapper,
  .event__question1,
  .event__answer1,
  .event__answer1__on {
    width: 800px;
  }

  .event__img1 {
    width: 370px;
  }
}

@media screen and (max-width:1024px) {

  .event__item__wrapper,
  .event__question1,
  .event__answer1,
  .event__answer1__on {
    width: 600px;
  }

  .event__img1 {
    width: 250px;
  }

  .event__title {
    font-size: 25px;
    margin-top: 10px;
  }

  .event__text {
    font-size: 16px;
    margin-top: 15px;
  }

  .event__answer__inner {
    gap: 10px;
    padding: 20px;
  }
}

@media screen and (max-width:768px) {
.event__heading {
  
  margin-top: 200px;
}
  .event__item__wrapper,
  .event__question1,
  .event__answer1,
  .event__answer1__on {
    width: 400px;
  }

  .event__answer__inner {
    display: block;
  }

  .event__img__wrapper {
    text-align: center;
  }
}

@media screen and (max-width:624px) {

  .event__item__wrapper,
  .event__question1,
  .event__answer1,
  .event__answer1__on {
    width: 300px;
  }
}

/* dccでできること */
.can-main{
  position: relative;
  margin-bottom: 400px;
}
.pan-list{
  position: absolute;
  top: 50px;
  left: 100px;
  opacity: 0.5;
  z-index: 40;
}
.pota-fv {
  background: url(img/pota/pota-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.tour-fv {
  background: url(img/tour/tour-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.camp-fv {
  background: url(img/camp/camp-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.race-fv {
  background: url(img/race/race-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.mtb-fv {
  background: url(img/mtb/mtb-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.tanken-fv {
  background: url(img/tanken/tanken-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.can-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.can-fv-text{
  font-weight: bold;
  font-size: 22px;
  margin-top: 5px;
  margin-left: 9vw;
  color: white;
}
.can-main__inner{
  text-align: center;
}
.can-main__text{
  max-width: 650px;
  font-size: 20px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.can-img__wrapper1{
  padding-top: 150px;
}
.can-img__wrapper2{
  margin-top: 80px;
}
@media screen and (max-width:768px) {
  .can-fv-title{
    font-size: 60px;
  }
  .can-fv-text{
    font-size: 20px;
  }
  .can-main__text{
    max-width: 350px;
  }
  .can-img{
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  .can-fv-title{
    font-size: 40px;
    margin-left: 5vw;
  }
  .can-fv-text{
    font-size: 18px;
    margin-left: 5vw;
  }
}
@media screen and (max-width:620px){
  .pan-list{
    left: 20px;
  }
}

/* 活動紹介 */

.about-fv {
  background: url(img/dcc/about-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.about-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.keyword{
  position: relative;
}
.keyword__inner{
  padding-top: 200px;
}
.keyword__heading{
  font-size: 60px;
  font-weight: bold;
  text-align: center;
}
.keyword__item__wrapper{
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: 100px;
}
.keyword__reverse{
  flex-direction:row-reverse
}
.keyword__content{
  max-width: 500px;
}
.keyword__name{
  font-size: 40px;
  font-weight: bold;
}
.keyword__text{
  font-size: 20px;
  line-height: 1.6;
  margin-top: 40px;
}
@media screen and (max-width:1280px){
  .keyword__content{
    max-width: 400px;
  }
  .keyword__img{
    width: 400px;
  }
}
@media screen and (max-width:1024px){
  .keyword__item__wrapper{
    display: block;
    text-align: center;
  }
  .keyword__content{
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }
  .keyword__text{
    text-align: left;
  }.keyword__img{
    margin-top: 50px;
  }
}
@media screen and (max-width:620px){
  .keyword__img{
    width: 300px;
  }
  .keyword__heading{
    font-size: 40px;
  }
  .keyword__content{
    padding-left: 30px;
    padding-right: 30px;
  }
  .keyword__text{
    font-size: 16px;
  }
}

/* 部員紹介 */
.member-fv {
  background: url(img/dcc/member-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.member-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.member{
  position: relative;
}
.member__item__wrapper,.member__item__wrapper2{
  display: flex;
  gap: 100px;
  justify-content: center;
}
.member__item__wrapper2{
  margin-top: 100px;
  margin-bottom: 200px;
}
.member__profile{
  width: 500px;
  height: 300px;
  background-color: #d0d0d0;
  padding:20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.member__heading{
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding-top: 200px;
  margin-bottom: 100px;
}
.m58{
  background: url(img/dcc/58.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.m59{
  background: url(img/dcc/59.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.m60{
  background: url(img/dcc/60.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.m61{
  background: url(img/dcc/61.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

.coming-soon{
  text-align: center;
  font-size: 50px;
  padding-top: 300px;
  margin-bottom: 10px;
}
.back{
  font-size: 20px;
  margin-bottom: 300px;
  text-align: center;
}
@media screen and (max-width:1280px){
  .member__profile{
    width: 400px;
  }
}
@media screen and (max-width:768px){
  .member__item__wrapper,.member__item__wrapper2{
    gap: 50px;
  }
  .member__profile{
    width: 300px;
    height: 250px;

  }
}
@media screen and (max-width:620px){
  .member__item__wrapper,.member__item__wrapper2{
    display: block;
  }
  .member__profile{
    margin-left: auto;
    margin-right: auto;
  }
  .member__item__wrapper2{
    margin-top: 50px;
  }
  .mt-e50{
    margin-top: 50px;
  }
}

/* 新入生の方へ */

.freshman-fv {
  background: url(img/dcc/fresh-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.freshman-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.fresh-schedule{
  position: relative;
}
.fresh__inner{
  padding-top: 200px;
}
.fresh__heading{
  font-size: 60px;
  font-weight: bold;
  text-align: center;
}
.fresh__item__wrapper{
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: 100px;
}
.fresh__reverse{
  flex-direction:row-reverse
}
.fresh__content{
  max-width: 500px;
}
.fresh__name{
  font-size: 40px;
  font-weight: bold;
}
.fresh__text{
  font-size: 20px;
  line-height: 1.6;
  margin-top: 40px;
}
.introduction{
  padding: 100px 150px;
}
.intro__lead{
  font-size: 25px;
  font-weight: medium;
  line-height: 1.6;
}
.intro__faq{
  margin-top: 50px;
}
.intro__question{
  font-size: 25px;
  font-weight: medium;
}
.intro__answer{
  font-size: 20px;
  margin-top: 25px;
}
.intro-cta{
  margin-top: 50px;
  font-size: 20px;
  text-decoration: underline;
}
@media screen and (max-width:1280px){
  .fresh__content{
    max-width: 400px;
  }
  .fresh__img{
    width: 400px;
  }
}
@media screen and (max-width:1024px){
  .fresh__item__wrapper{
    display: block;
    text-align: center;
  }
  .fresh__content{
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }
  .fresh__text{
    text-align: left;
  }.fresh__img{
    margin-top: 50px;
  }
}
@media screen and (max-width:768px){
  .introduction{
    padding: 100px 75px;
  }
  .intro__lead{
    font-size: 25px;
    font-weight: medium;
    line-height: 1.2;
  }
}
@media screen and (max-width:620px){
  .fresh__img{
    width: 300px;
  }
  .fresh__heading{
    font-size: 40px;
  }
  .fresh__content{
    padding-left: 30px;
    padding-right: 30px;
  }
  .fresh__text{
    font-size: 16px;
  }
  .introduction{
    padding: 100px 20px;
  }
}
/* OB・OGの方へ */
.to-ob{
  position: relative;
}
.ob-fv {
  background: url(img/dcc/ob-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.ob-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.to-ob{
  padding: 50px 150px;
}
.ob__lead{
  margin-top: 150px;
  font-size: 30px;
}
.ob__text{
  margin-top: 20px;
  font-size: 30px;
  line-height: 1.3;
}
.ob__facebook{
  margin-top: 80px;
  font-size: 30px;
}
.ob__facebook__text{
  margin-top: 20px;
  margin-bottom: 100px;
  font-size: 20px;
}

@media screen and (max-width:768px){
  .to-ob{
    padding: 50px 50px;
  }
}
@media screen and (max-width:620px){
  .to-ob{
    padding: 50px 20px;
  }
  .ob-fv-title{
    font-size: 60px;
  }
}

/* Q&A */

.faq{
  position: relative;
}
.faq-fv {
  background: url(img/dcc/faq-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.faq-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.faq__heading{
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding-top: 150px;
}
.faq__content__wrapper{
  margin-top: 100px;
  margin-bottom: 200px;
  position: relative;
}
.faq__item__wrapper{
  margin: 0 auto;
  position: relative;
}
.faq__question1{
  display: flex;
  gap: 20px;
  border: 1px black solid;
  margin-left: 10vw;
  margin-right: 10vw;
  padding: 5px 20px;
  align-items: center;
}
.faq__answer1{
  position: absolute;
  display: flex;
  gap: 20px;
  border: 1px black solid;
  opacity: 0;
  margin-left: 10vw;
  margin-right: 10vw;
  padding: 5px 20px;
  align-items: center;
  background-color: plum;
}
.faq__answer1__on{
  position: static;
  display: flex;
  gap: 20px;
  border: 1px black solid;
  opacity: 1;
  align-items: center;
}
.faq__question__img,.faq__answer__img{
  width: 40px;
  height: 40px;
}
@media screen and (max-width:620px){
  .faq__heading{
    font-size: 40px;
  }
}

/* DCC用語集 */

.word{
  position: relative;
  margin-bottom: 200px;
}
.word-fv {
  background: url(img/dcc/word-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.word-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.word__heading{
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding-top: 150px;
}
.word__line{
  margin-top: 100px;
  font-size: 30px;
  font-weight: bold;
  margin-left: 170px;
  margin-right: 170px;
  padding: 10px 20px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.word__word{
  margin-top: 50px;
  margin-left: 170px;
  margin-right: 170px;
  font-size: 28px;
  font-weight: 600;
}
.word__text{
  margin-top: 40px;
  margin-left: 170px;
  margin-right: 170px;
  font-size: 20px;
}
@media screen and (max-width:1024px){
  .word-fv-title{
    font-size: 50px;
  }
  .word__heading{
    font-size: 30px;
  }
}
@media screen and (max-width:768px){
  .word__line{
    margin-left: 50px;
    margin-right: 50px;
  }
  .word__word{
    margin-left: 50px;
    margin-right: 50px;
   
  }
  .word__text{
    margin-left: 50px;
    margin-right: 50px;
  }
}

/* ブログ投稿ページ */

.blog{
  position: relative;
  padding-bottom: 200px;
}
.blog-fv {
  background: url(img/dcc/word-fv.jpg);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 85vh;
  position: relative;
  overflow: hidden;
}
.blog-fv-title{
  font-weight: bold;
  font-size: 80px;
  margin-top: 25vh;
  margin-left: 9vw;
  color: white;
}
.blog__heading{
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  padding-top: 150px;
}
.article__wrapper{
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  width: 650px;
  position: relative;
}
.post__img{
  width: 300px;
  height: 200px;
  object-fit: cover;
}
.article{
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 100px;
}

/* シングル */

.post__links{
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
  margin-bottom: 50px;
}
.article__title{
  font-size: 40px;
  font-weight: bold;
  margin-left: 50px;
  margin-right: 50px;
}
.single__pan-list{
  position: absolute;
  top: 20px;
  left: 0px;
  opacity: 0.5;
}

.article__category__time__wrapper{
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 100px;
  margin-left: 50px;
  margin-right: 50px;
}
.article__category{
  margin-right: 20px;
  padding: 3px 5px;
  border: 1px solid black;
  border-radius: 20px;
}
.article__eyecatch__img{
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
}
.article__content{
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}
.arrow{
  font-size: 25px;
  font-weight: bold;
  color: blue;
}
/* サイドバー */

.blog__sidebar{
  width: 300px;
  height: 100%;
  margin-bottom: 100px;
}
.blog__inner{
  display: flex;
  position: relative;
}
.blog__category{
  font-size: 20px;
  font-weight: 500;
  border: 1px solid black;
  width: 250px;
  padding: 10px;
  margin-top: 5px;
}
.blog__archive1{
  font-size: 20px;
  font-weight: 500;
  border: 1px solid black;
  width: 250px;
  padding: 10px;
  margin-top: 20px;
}
.archive__list li,.category__list li{
  font-size: 20px;
  font-weight: 500;
  border: 1px solid black;
  width: 250px;
  padding: 10px;
  margin-top: 5px;
}
.category__list li:hover{
  transform: translateY(-2px);
  transition: all .5s;
  box-shadow: #f5f5f5;
}
.archive__list li:hover{
  transform: translateY(-2px);
  transition: all .5s;
  box-shadow: #f5f5f5;
}
.sidebar__wrapper{
  margin-top: 250px;
}

/* ブログ系のレスポンシブ全部まとめてます */

@media screen and (max-width:768px){
  .blog__inner{
    display: block;
  }
  .blog__sidebar{
    margin-left: auto;
    margin-right: auto;
  }
  .article__wrapper{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    padding-top: 100px;
  }
  .article__category__time__wrapper{
    margin-left: 10px;
    margin-right: 10px;
  }
  .blog__category{
    width: 300px;
  }
  .blog__archive1{
    width: 300px;
  }
  .archive__list li,.category__list li{
    width: 300px;
  }
  .article{
    width: 350px;
  }
  .article__title{
    margin-left: 25px;
    margin-right: 25px;
  }
  .article__eyecatch__img{
    width: 300px;
    height: 200px;
    margin-left: 25px;
    margin-right: 25px;
  }
  .article__content{
    margin-left: 25px;
    margin-right: 25px;
  }
  .l-wrapper_01 {
    margin-left: auto;
    margin-right: auto;
  }
}

/*--------------------------------------
  カード型_01
--------------------------------------*/
.l-wrapper_01 {
  width: 300px;
  padding-top: 50px;
}

.l-wrapper_01:hover {
  transform: translateY(-5px);
  transition: all .5s;
  box-shadow: #f5f5f5;
}

.card_01 {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;
}


.card__title_01 {
  padding: 1rem 1.5rem 0;
  font-size: 1.6rem;
  order: 1;
  margin-bottom: 0.6rem;
  font-weight: bold;
  text-decoration: none;
}

.card__thumbnail_01 {
  margin: 0;
  order: 0;
  width: 300px;
  height: 200px;
}

.card__image_01 {
  width: 100%;
}

.card__body_01 {
  padding: 0 20px;
  height: 210px;
  position: relative;
}
.card__category{
  font-size: 16px;
  margin-top: 10px;
}
.card__time{
  position: absolute;
  top: 0px;
  right: 10px;
  opacity: 0.5;
}
.card__title{
  font-size: 20px;
  font-weight: bold;
  margin-top: 7px;
}
.card__text{
  font-size: 4px;
  margin-top: 7px;
}
.card__text_01{
  text-align: center;
}
.card__footer_01 {
  padding: 1rem;
  border-top: 1px solid #ddd;
}

.button_01 {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
  text-align: center;
}

.button_01 a {
  text-decoration: none;
}

.button_01.-compact {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #803DD7;
  color: #fff;
  font-weight: bold;
	text-decoration: none;
}

.button_01.-compact:hover,
.button_01.-compact:focus {
  background-color: #803DD7;
  color: black;
  transition: 0.5s;
}

/* ページナビ */

.page-nav{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: -100px;
}
.post__links{
  font-weight: bold;
}
.post__link{
display: flex;
align-items: center;
}
/* フッター */

.footer{
  background-color: #f5f5f5;
  padding: 50px 0;
}
.footer__inner{
  display: flex;
  justify-content: center;
  gap: 60px;
}
.footer__content{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}
.footer__heading{
  font-size: 40px;
  font-weight: bold;
  font-family: Libre Baskerville;
}
.footer__lead{
  font-size: 20px;
  margin-bottom: 30px;
}
.footer__footer{
  text-align: center;
  padding-top: 30px;
}

@media screen and (max-width:1024px){
  
  .footer__inner{
  display: flex;
  justify-content: center;
  gap: 30px;
}
}
@media screen and (max-width:768px){
  .footer{
    padding-left: 100px;
    padding-right: 100px;
  }
  .footer__inner{
    display: block;
  }
  .footer__content1,.footer__content2,.footer__content3{
    display: none;
  }
  .footer__heading{
    margin-bottom: 30px;
  }
  .footer__content1__on,.footer__content2__on,.footer__content3__on{
      display: block;
  }
}
@media screen and (max-width:620px){
  .footer{
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* デバック */

/* * { 
  outline: magenta solid 1px;
}  */