html {
  max-width: 1980px;
  margin: 0 auto;
}

body {
  /* font-family: 'M PLUS Rounded 1c', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  /* background: url("../images/bg02_2.jpg"); */
}

h1 {
  /* font-family: 'M PLUS 1p', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.6em;
  /* color: #242424; */
}
h2 {
  /* font-family: 'M PLUS 1p', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 2em;
  color: #242424;
}
h3 {
  /* font-family: 'M PLUS 1p', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  color: #242424;
}
h4, h5, h6 {
  /* font-family: 'M PLUS 1p', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 1em;
  color: #242424;
}
p {
  /* font-family: 'M PLUS Rounded 1c', sans-serif; */
  font-family: 'Noto Serif JP', serif;
  color: #242424;
  font-size: 0.8em;
  text-align: left;
}
a {
    color: rgb(71, 71, 71);
}
a:hover{
    color: black;
    text-decoration: underline;
}
.section-heading {
    text-align: left;
    margin-bottom: 20px;
}
.animation {
	opacity : 0;
	visibility: hidden;
	transition: 2.5s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

header { 
  position:relative;
  top: 0;
  /* background: url("../images/bg01_wide2.png") no-repeat; */
  background-size: 100%;
  width: 100%;
  /* height: 110vh; */
  /* transition:all .4s; */
}

#content {
  /* top: 0;
  padding: 60px; */
}
.title-section {
    padding: 40px;
    background-color: #131313;
    color: #fff;
}
.menu-section {
    padding: 40px;
    background-color: #b1b1b1;
}
.schedule {
    margin: 30px auto;
}
.container-fluid {
    padding: 3% 5%;
}
.container-fluid a {
    width: 100%;
    text-align: left;
}

header h2 {
  color: #fff;
}

@media screen and (max-width:850px){
  /* header { height: 8vh;} */
  #content {
    top: 0;
  }
  #contact {
    padding: 30px 0;
  }
  h1 {
    font-size: 220%;
  }
  h2 {
    font-size: 130%;
    margin: 20px;
  }
  h3 {
    font-size: 100%;
  }
  h4 {
    font-size: 85%;
  }
  #contents span {
    /* top: -5px; */
    position: absolute;
    left: 50%;
    padding: 1rem 2rem;
    border-left: 1px solid #000;
  }
  #contents h2 {
    margin-top: 40px;
  }
  #projects span {
    /* top: -5px; */
    position: absolute;
    left: 50%;
    padding: 1rem 2rem;
    border-left: 1px solid rgb(255, 255, 255);
  }
  #projects h2 {
    margin-top: 40px;
  }
  #profile span {
    /* top: -5px; */
    position: absolute;
    left: 50%;
    padding: 1rem 2rem;
    border-left: 1px solid #000;
  }
  #profile h2 {
    margin-top: 40px;
  }
  .profile-img {
    margin-top: 10%;
  }

  #contact span {
    /* top: -5px; */
    position: absolute;
    left: 50%;
    padding: 1rem 2rem;
    border-left: 1px solid #000;
  }
  #contact h2 {
    margin-top: 40px;
  }
  div.mail {
    margin: 40px auto 100px;
  }
  .n-head {
    display: none;
  }
  .n-icon {
    display: none;
  }
  /* .n-con {
    display: none;
  } */
  .m-head {
    position: absolute;
    text-align: center;
    margin: 0 auto;
    display: block;
    width: 100%;
    margin-top: 3vh;
  } 
  .m-icon {
    position: absolute;
    top: 80%;
    right: 10%;
    width: 30%;
    height: auto;
  } 
  .kuji {
    width: 280px;
    padding-top: 50px;
    margin: 0 auto;
  }
  .kuji-image {
    float: left;
  }
  .kuji-cap {
  
    color: #fff;
    font-size: 12px;
  }
  .button {
    position: fixed;
    bottom: 0;
    height: 80px;
    background-color: #231815;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  .btn-dark {
    color: #fff;
    background-color: #231815;
    border-color: #ffffff;
    width: 200px;
    font-family: M PLUS Rounded 1c;
  }
  .describe-wrapper {
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 50px 0;
  }
  .youtube {
      padding-bottom: 60%;
      margin-top: 3%;
  }
  .content-img {
    width: 100%;
    margin-bottom: 8%;
  }
  header h2 {
    margin: 8%;
    font-size: 110%;
  }
}

.content-img {
    margin-top: 3%;
    /* width: 85%; */
}

/* sections */
.colored-section {
  background-color: #241D10;
  color: #ffffff;

}

.white-section {
  background-color: #fff;
}

.gray-section  {
    background-color: #ebebeb;
}

/* Navigation Bar */
#global-nav {
  width: 100%;
  height: 60px;
  margin: 85vh -48%;
  padding:20px;
  background: #ffffff;
  /* -webkit-border-radius:30px; */
  /* border-radius:30px; */
  position: fixed;
  top: 0; 
  left: 50%;
  z-index: 10;
}


/* #title #global-nav { width: 100%; height: 60px; margin: 0 -495px; padding: 0 45px; position: fixed; top: 0; left: 50%; }
#title #global-nav ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-items: center; -webkit-box-pack: justify; justify-content:space-between; width: 100%; margin: auto;}
#title #global-nav ul li { list-style-type:none; display: -webkit-box; display:flex; flex-direction:column; justify-content:center; align-items:center; height: 80px;}
#title #global-nav ul li a { color: rgb(121, 121, 121); display: block; text-align: center; overflow:hidden;}
#title #global-nav ul li a:hover {color: black;}
#title #global-nav ul li:nth-of-type(1)  a { width: 70px; background-size: contain; -webkit-box-align: center; box-align: center; position: relative;}
#title #global-nav ul li:nth-of-type(1)  a:hover {color: black;}
#title #global-nav ul li:nth-of-type(2)  a { width: 70px; background-size: contain; -webkit-box-align: center; box-align: center;}
#title #global-nav ul li:nth-of-type(3)  a { width: 160px; background-size: contain; -webkit-box-align: center; box-align: center;}
#title #global-nav ul li:nth-of-type(4)  a { width: 160px; background-size: contain; -webkit-box-align: center; box-align: center;}
#title #global-nav ul li:nth-of-type(5)  a { width: 140px; background-size: contain; -webkit-box-align: center; box-align: center;}
#title #global-nav ul li:nth-of-type(6)  a { width: 120px; height:100%; line-height: 4; left: 0%; background:#000000 no-repeat; color: rgb(255, 255, 255); background-size: contain;} */
@media screen and (min-width: 550px){
  h1 {
    font-size: 400%;
  }
  h2 {
    font-size: 250%;
  }
  h3 {
    font-size: 180%;
  }
  h4 {
    font-size: 120%;
  }
  p {
    font-size: 120%;
  }
  th {
    font-size: 150%;
  }
  td {
    font-size: 150%;
  }
}
@media screen and (min-width: 851px){
  h1 {
    font-size: 300%;
  }
  h2 {
    font-size: 150%;
  }
  h3 {
    font-size: 120%;
  }
  h4 {
    font-size: 80%;
  }
  p {
    font-size: 100%;
  }
  th {
    font-size: 100%;
  }
  td {
    font-size: 100%;
  }
  #title #global-nav { width: 100%; height: 80px; margin: 0 -50%;}
  #contact {
    padding: 100px;
  }
  .wrapper {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .top {
    margin-top: 80px;
  }
  
  .youtube {
    flex: 1;
  }
  .project-detail {
    flex: 1;
  }
  .describe-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 5vh;
  }
  .describe {
    /* flex: 2; */
    width: 350px;
  }
  .flex-item{
    width: 330px;
    height: auto;
}
  .free {
    /* flex: 1; */
    width: 150px;
    height: auto;
  }
  .m-head {
    display: none;
  } 
  .m-icon {
    display: none;
  }
  .m-con {
    display: none;
  }
  .kuji {
    width: 100%;
    padding-top: 50px;
    margin: 0 auto;
  }
  .kuji-image {
    /* float: left; */
    vertical-align:middle;
  }
  .profile-heading {
    text-align: left;
  }

  .pro-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .pro-flex-item {
    width: 1000px;
  }
  .pro-column-img {
    width: 500px;
    height: auto;
  
  }
  .pro-column-txt {
    width: 700px;
  
  }
  .name-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  .name{
    width: 300px;
  }
  .career {
    flex: 500px;
  }
  .youtube {
      padding-bottom: 25%;
      margin: 3%;
  }
  .content-img {
      width: 85%;
  }
  header h2 {
    margin: 5%;
  }

}
@media screen and (min-width: 1050px){

  .describe-wrapper {
    margin-top: 10vh;
  }
  h1 {
    /* font-family: 'M PLUS 1p', sans-serif; */
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 3.6em;
    color: #ffffff;
  }
  h2 {
    /* font-family: 'M PLUS 1p', sans-serif; */
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 2em;
    color: #242424;
  }
  h3 {
    /* font-family: 'M PLUS 1p', sans-serif; */
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #242424;
  }
  h4, h5, h6 {
    /* font-family: 'M PLUS 1p', sans-serif; */
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 1em;
    color: #242424;
  }
  .free {
    /* flex: 1; */
    width: 200px;
    height: auto;
  }
  .profile-img {
    /* margin-top: 10%; */
    width: 95%;
}

}
@media screen and (min-width:1800px){
  h1 {
    font-size: 600%;
  }
  h2 {
    font-size: 350%;
  }
  h3 {
    font-size: 300%;
  }
  h4 {
    font-size: 150%;
  }
  p {
    font-size: 150%;
  }
  th {
    font-size: 200%;
  }
  td {
    font-size: 200%;
  }
  .describe {
    /* flex: 2; */
    width: 350px;
  }
  .flex-item{
    width: 580px;
    height: auto;
}
  .free {
    /* flex: 1; */
    width: 280px;
    height: auto;
  }
.name-wrapper {
  font-size: 70%;
}
}

/*ハンバーガーメニュー*/
#navbar-toggle { display: none; }
@media screen and (max-width:850px){
  #global-nav { display: none; }
	#navbar-toggle { position: fixed; top:8px; right:10px; z-index:5; font-size: 12px; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; }
	#navbar-toggle div { display: inline-block;text-align: center; }
	#navbar-toggle #wrapper { position: relative; display: block; width: 48px; height: 48px; text-align: center; padding: 0; }
	#navbar-toggle span { display: block; width: 24px; height: 3px; background:#131313; position: absolute; left:calc(50% - 12px); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }
	#navbar-toggle span:nth-child(1) { top: 18px; }
	#navbar-toggle span:nth-child(2) { top: 24px; }
	#navbar-toggle span:nth-child(3) { top: 30px; }
	.open #navbar-toggle span:nth-child(1) { top: 23px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); }
	.open #navbar-toggle span:nth-child(2) { width: 0; left: 50%; }
	.open #navbar-toggle span:nth-child(3) { top: 23px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
	#title.open #global-nav { margin:0; height: auto; -webkit-border-radius:0; border-radius:0; position:fixed; width:100%; z-index:2; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; padding-top:80px; background: #ffffff; }
  #title.open #global-nav ul { display:block; margin: 0;}
}




.sche-wrapper {
  position: relative;
  /* display: flex; */
  margin-bottom: 20px;
}

.sche1 {
  /* flex: 1; */
}
.sche2 {
  /* flex: 3; */
}
.sche-wrapper .sche2 {
  position: absolute;
  /* left: 50%; */
  padding: 1rem 2rem;
  border-left: 1px solid #000;
}
.l-chara{
  font-size: 150%;
  font-weight: 500;
}
.s-chara{
  font-size: 50%;
  font-weight: 100;
}
th {
  font-weight: 700;
  text-align: left;
  vertical-align: top;
  padding: 10px;
  }
td {
  text-align: left;
  vertical-align: top;
  /* border-left: solid 1px #2b2b2b; */
  padding: 10px;
  }


/* Title */
header .container-fluid {
  padding: 7% 15% 7%;
  text-align: center;
}
.column {
  height: 100%;
  width: 100%;
}
.main-wrapper{
  position: relative;
}
/* .main-img {
  height: auto;
  min-height: 400px;
  width: 100%;
} */
.cb-slideshow,
.cb-slideshow:after {
    width: 100%;
    height: 850px;
    z-index: 0;
    list-style-type: none;

}
/*
.cb-slideshow:after {
    content: '';
    background: transparent url(../Resources/pattern.png) repeat top left;
}
*/

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 12s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/main1.png)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/main2.png);
    animation-delay: 5s;
}
.cb-slideshow li:nth-child(2) div {
    animation-delay: 3s;
}

.title-img {
  /* height: 50vh; */
  width: 100%;
  /* background: url("../images/title.png") no-repeat top center; */
  background-size: contain;
}
.schedule-img {
  height: 50vh;
  width: 100%;
  /* background: url("../images/schedule.png") no-repeat top center; */
  background-size: contain;
}

/*top*/


/* contents */
#contents {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 50px 20px;
}

/* projects */
#projects {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 50px 20px;
}

.project-detail p {
  margin: 50px;
}


.youtube {
  position: relative;
  /* padding-bottom: 25%; アスペクト比 16:9の場合の縦幅*/
  /* margin: 3%; */
  /* width: 100%; */
  height: 0;
  overflow: hidden;

  /* position:relative;
  width:100%;
  height:0;
  padding-top:75%; */
}

.youtube iframe{
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
  /* max-width:840px;
  max-height: 473px; */
}

#projects h2 {
    color: #ffffff;
  }
#projects p {
    color: #ffffff;
  }


/* profile */
#profile {
    width: 100%;
    margin: 0 auto;
    padding: 50px 20px;
  }

#profile a {text-decoration: none; color: rgb(121, 121, 121);}
#profile a:hover {
  color: #000; text-decoration: underline;

}
.profile-img {
    /* margin-top: 10%; */
    width: 85%;
}
.name{
  margin: 30px;
}
.career {
  margin: 30px;
}


.container-fluid h3 {
  z-index: 10;
}

/* contact */

#contact p {
  font-size: 1.0rem;
}

.mail {
  position:relative;
  margin: 100px auto;
  width:95%;
}
.phone {
  margin-top: 100px;
}
.phone p {
  text-align: center;
}


/* footer */
#footer {
  background-color: #111111;
  padding-bottom: 50px;
}

#footer p {
  color: #fff;
  text-align: center;
}

.footer-icons {
  padding-bottom: 15px;
}
.icon-link {
  color: #000;
  margin: 20px 10px;
}

#pagetop { display: none; width: 80px; height: 80px; background: url( "../images/button_pagetop.png") no-repeat; background-size:100% 100%; text-indent:-9999px; font-size:1%; line-height:1%; text-decoration:none; overflow:hidden; position: fixed; right:2%; bottom:10%; z-index: 10;}

.slider {
  max-width: 400px;
  margin: 3% auto;
}
.slick-prev:before,
.slick-next:before {
  color: #666;
}