@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&family=Noto+Sans+JP:wght@100..900&display=swap');


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

  .sp {
    display:none;
  }

}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", serif;
  font-weight: 700;
  font-style: normal;
}

html { 
  font-size: 62.5%; 
}

p  { 
  font-size: 1.6rem; 
}

a {
  text-decoration: none;
  font-weight: bold;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}



        /* フェードイン（ページ読み込み時） */
        body.loaded {
          opacity: 1;
      }

      /* フェードアウト（クリック時） */
      .fade-out {
          opacity: 0;
      }

.wrapper {
  width: 95%;
  margin: 0 auto;
}

header {
  display: flex;  
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}

h1 {
  padding: 1rem 1rem 1rem 0;
  font-size: 4rem;
  color:#ef810b;
  width: 70%;
}

h1 a {
  color:#ef810b;
}

h2 {
  font-size: 6rem;
}

h3 {
  font-size:4rem;
}

nav a {
  background:#181818;
  color: #fafafa;
  border-radius: 10px;
  padding: 1rem;
  margin: 0;
  width: 30%;
}

.boxflex {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 40px);
  max-width: calc(100% - 40px);
  min-height: 1000px;
  justify-content: flex-start;
  margin: 0px 20px 20px 20px;
  overflow-x: visible;
  overflow-y: visible;
  gap:1rem;
}
  

.left-box {
  width: 80%;
  margin: 0 2rem;
}

.right-box {
  width: 25%;
}

.right-box-img {
  width: 100%;
  height: 30px;
}

.box {
  background: #ccc;
  color: #181818;
  padding: 2rem 4rem;
  border-radius: 15px;
  height: 94%;
  position: relative;
}


.shadow {
  transition: .2s;
  }

.shadow:hover {
box-shadow: 1px 1px 5px #54545468;
}

.box a {
  font-size:6rem;
  color: #181818;
}

.center-box {
  width: 70%;
}

/* .top-profile-images {
  height: 450px;
  border-radius: 15px;
  background-image: url(../images/profile.JPG);
  background-size: 106%;
  background-repeat: no-repeat;
  background-position: top;
} */

.top-profile-images img{
  border-radius: 15px;
}

.top-profile-text {
  color: #373737;
}

.center-box-lp { 
  background: #ccc;
  margin: 0rem auto 1rem;
  padding: 2rem 2rem;
  border-radius: 15px;
  height: 55%;
  background-image: url(../images/top-lp-image.png);
  background-size: 66%;
  background-repeat: no-repeat;
  background-position: center;
}

.center-box-banner {
  background: #ccc;
  margin: 0rem auto 1rem;
  padding: 2rem;
  height: 19%;
  border-radius: 15px;
  background-image: url(../images/top-banner-image.png);
  background-size: 51%;
  background-repeat: no-repeat;
  background-position: center;
}

.center-box-movie {
  background: #ccc;
  margin: 0rem auto 1rem;
  padding: 2rem;
  height: 18.5%;
  border-radius: 15px;
  background-image: url(../images/top-movie-image.png);
  background-size: 39%;
  background-repeat: no-repeat;
  background-position: center;
}


.center-box-title {
  font-size: 3rem;
  color: #181818;
  position:relative;
}

.design-section {
  margin: 3rem auto;
}

.lp-list-in {
  background: #ccc;
  color: #373737;
  margin: 1rem;
  padding: 2rem 2rem;
  border-radius: 15px;
  max-width: 440px;
  position: relative;
}

.lp-in-title {
  font-weight: bold;
  font-size:2rem;
  margin: 2rem 0 0 0;
  background: #e9e9e9;
  padding: 1rem;
  border-radius: 8px;
}

.lp-in-date {
  color:#757575;
  text-align: right;
}

.lp-list {
  display: flex;
}

.cotent-box {
  background: #efefef;
  border-radius: 15px;
}

.explain-section {
  margin: 0 0 2rem;
  padding: 2rem 1rem;
  background: #e9e9e9;
  padding: 1rem;
  border-radius: 8px;
}

.page-click {
  text-align: center;
  align-items: center;
  background: #fafafa;
  border-radius: 8px;
  bottom: 20px;
  height: 45px;
  justify-content: center;
  left: auto;
  margin: 0 0 0 0;
  position: absolute;
  right: 19px;
  top: auto;
  width: 54px;
  max-width: 100%;
  color: #ef810b;
  font-size: 3rem;
  font-weight: bold;
}

footer {
  margin: 2rem 0 0 0;
  padding: 2rem;
  text-align: right;
  background: #6f6f6f;
  color: #ef810b;
  width: 100%;
  bottom: 0;
}

footer nav a{
  background:none;
  color: #ededed;
  padding: 1rem 0 0 1rem;
}

.abs {
  position:absolute;
}

/* LPsection */

.lp-section {
  margin: 3rem 0 0 0;
}

.lp-current {
  background: #a7a7a7;
}

.lp-flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  align-items: stretch;
  margin: 2rem auto;
}

.text-box-a {
  color: #7b7a7a;
  font-size: 1.3rem;
  margin: 0 2rem 0 0;
}

.lp-img-ma {
  margin: 2rem auto;
}

.lp-in-text {
  width: 70%;
  margin: 1rem 2rem 0 0;
}

.lp-text-box {
  background: #ccc;
  color: #373737;
  margin: 0rem auto 1rem;
  padding: 2rem 2rem;
  border-radius: 15px;
}

.lp-text-box-in {
  color: #343434;
  font-size: 2rem;
  margin: 0 2rem 0 0;
  padding: 0rem 3rem;
}

.lp-title {
  font-size: 2rem;
  font-weight: bold;
}

.lp-in-img {
  background: #ccc;
  width: 100%;
  margin: 1rem 0rem;
  padding: 2rem 4rem;
  border-radius: 15px;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.lp-in-img img {
  width: 100%;
  margin: 0 auto;
}

.lp-second-box {
  background: #ccc;
  color: #373737;
  margin: 0rem auto 1rem;
  padding: 2rem 2rem;
  border-radius: 15px;
  display: flex;
}

.lp-second-text {
  width: 70%;  
}

.lp-second-img {
  overflow-y: scroll;
  height: 300px;;
}

.lp-second-tools-a {
  color: #7b7a7a;
  font-size: 1.3rem;
  margin: 0 2rem 0 0;
  margin: 2rem 0 0 0;
}

.lp-second-tools {
  margin: 0 2rem 0 0;
  padding: 0rem 3rem;
}

.lp-second-tools span{
  background:#575757;
  color: #fafafa;
  border-radius: 3px;
  padding: 0 1rem;
  margin: 0 1rem ;
}

.page-click-lp {
  text-align: center;
  align-items: center;
  background: #fafafa;
  border-radius: 8px;
  bottom: 32px;
  height: 26px;
  justify-content: center;
  left: auto;
  margin: 0 0 0 0;
  position: absolute;
  right: 27px;
  top: auto;
  width: 48px;
  max-width: 100%;
  color: #ef810b;
}

/* Bannersection */

.banner-section {
  margin: 3rem 0 0 0;
}

.banner-flex {
  display: flex;
}

.banner-in {
  margin: 2rem auto;
  background: #ccc;
  color: #373737;
  margin: 1rem;
  padding: 1rem 4rem;
  border-radius: 15px;
  max-width: 640px;
}

.banner-in-img {
  width: 500px;
  min-height: 180px;
  display: flex;
  align-items: center;
}

/* Videosection */

.video-section {
  margin: 3rem 0 0 0;
}

.video-iframe {
  width:560px; 
  height:315px;
  margin: 1rem;
  border-radius: 13px;

}


/* Profilesection */

.profile-box {
  display: flex;
}

.profile-left {

}

.profile-contents {
  background: #ccc;
  margin: 0 0 1rem 0;
  padding: 7rem 3rem;
  border-radius: 15px;
}

.profile-image {
  background: #ccc;
  margin: 0rem 0 1rem 1rem;
  width: 50%;
  height: 585px;
  border-radius: 15px;
  background-image: url(../images/profile.JPG);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}

.text-box-profile {
  color: #7b7a7a;
  font-size: 2rem;
  margin: 0 2rem 2rem 0;
}

.text-box-in {
  color: #343434;
  font-size: 2rem;
  margin: 0 2rem 0 0;
  padding: 0rem 3rem;
}

.text-box-name {
  color: #343434;
  font-size: 3rem;
  font-weight: bold;
  margin: 0 2rem 0 0;
  padding: 0rem 3rem;
}

.profile-skills {
  line-height: 5rem;
}

.profile-skills span{
  background: #dddddd;
  font-size: 3rem;
  font-weight: bold;
  color: #343434;
  padding: 0rem 1rem;
  border-radius: 5px;
}

.profile-skills p{
  margin: 0 0 1rem 2rem;
  color: #343434;
  font-size: 1.5rem;
}

.schedule-arc {
  margin: 2rem 0 1rem;
}

.schedule-arc span{
  background: #222222;
  font-size: 2rem;
  font-weight: bold;
  color: #d6d6d6;
  padding: 0rem 1rem;
  border-radius: 5px;
}

.likes-flex {
  display: flex;
  align-items: flex-start;
  margin: 4rem 0 0 0;
}

.likes-text {
  width: 67%;
}

.likes-text-in {
  color: #343434;
  font-size: 2rem;
  margin: 2rem 2rem 0 0;
  padding: 0rem 3rem;
}

.likes-img {
  width: 470px;
}

.likes-img img {
  border-radius: 15px;
}

.mail {
  font-size:4rem;
  font-weight:bold;
  padding: 2rem 4rem;
}