body {
  font-family: "Montserrat","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 15px;
  letter-spacing: .05em;
  color: #333333;
}

a {
  transition: opacity .3s;
  text-decoration: none;
  color: #F19071;
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}

.center{
  text-align: center;
  }

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}


.bold02{
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    text-align: center;
}


/* フェードイン */

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/* フェードイン */


/* スライドイン */
.slideinLeft {
  animation: slideinLeft 1.6s;
}

@keyframes slideinLeft {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 上に戻るボタン */
.pagetop {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    width: 3.3rem;
    height: 3.3rem;
    line-height: 3.3rem;
    border-radius: 3.3rem;
    text-align: center;
    cursor: pointer;
}

.pagetop:hover {
    color: #fff !important;
    background-color: #CF3838b3;
    text-decoration: none;
}


.bold {
    font-weight: bold;
}

/*--------------------------------
 マージン
---------------------------------*/

.mb-3 {margin-bottom: -3px;}
.mb-5 {margin-bottom: -5px;}
.mb5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb45 {margin-bottom: 45px;}
.mb50 {margin-bottom: 50px;}
.mb55 {margin-bottom: 55px;}
.mb60 {margin-bottom: 60px;}
.mb65 {margin-bottom: 65px;}
.mb70 {margin-bottom: 70px;}
.mb75 {margin-bottom: 75px;}
.mb80 {margin-bottom: 80px;}
.mb85 {margin-bottom: 85px;}
.mb90 {margin-bottom: 90px;}
.mb95 {margin-bottom: 95px;}
.mb100 {margin-bottom: 100px;}
.mb105 {margin-bottom: 105px;}
.mb110 {margin-bottom: 110px;}
.mb115 {margin-bottom: 115px;}
.mb120 {margin-bottom: 120px;}
.mb125 {margin-bottom: 125px;}
.mb130 {margin-bottom: 130px;}
.mb135 {margin-bottom: 135px;}
.mb200 {margin-bottom: 200px;}
.mb250 {margin-bottom: 250px;}
.mb300 {margin-bottom: 300px;}

.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mt65 {margin-top: 65px;}
.mt70 {margin-top: 70px;}
.mt75 {margin-top: 75px;}
.mt80 {margin-top: 80px;}
.mt85 {margin-top: 85px;}
.mt90 {margin-top: 90px;}
.mt95 {margin-top: 95px;}
.mt100 {margin-top: 100px;}
.mt110 {margin-top: 110px;}
.mt115 {margin-top: 115px;}
.mt120 {margin-top: 120px;}
.mt125 {margin-top: 125px;}
.mt130 {margin-top: 130px;}
.mt135 {margin-top: 135px;}
.mt140 {margin-top: 140px;}

.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.mt35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.ml45 {margin-left: 45px;}
.ml50 {margin-left: 50px;}
.ml55 {margin-left: 55px;}
.ml60 {margin-left: 60px;}
.ml65 {margin-left: 65px;}
.ml70 {margin-left: 70px;}
.ml75 {margin-left: 75px;}
.ml80 {margin-left: 80px;}
.ml85 {margin-left: 85px;}
.ml90 {margin-left: 90px;}
.ml95 {margin-left: 95px;}
.ml150 {margin-left: 150px;}
.ml155 {margin-left: 155px;}
.ml160 {margin-left: 160px;}
.ml165 {margin-left: 165px;}
.ml170 {margin-left: 170px;}
.ml175 {margin-left: 175px;}
.ml180 {margin-left: 180px;}
.ml185 {margin-left: 185px;}
.ml190 {margin-left: 190px;}
.ml195 {margin-left: 195px;}
.ml200 {margin-left: 200px;}
.ml205 {margin-left: 205px;}
.ml210 {margin-left: 210px;}
.ml215 {margin-left: 215px;}
.ml220 {margin-left: 220px;}
.ml225 {margin-left: 225px;}
.ml230 {margin-left: 230px;}
.ml235 {margin-left: 235px;}
.ml240 {margin-left: 240px;}
.ml245 {margin-left: 245px;}
.ml250 {margin-left: 250px;}
.ml255 {margin-left: 255px;}

.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mr35 {margin-right: 35px;}
.mr40 {margin-right: 40px;}
.mr45 {margin-right: 45px;}
.mr50 {margin-right: 50px;}
.mr55 {margin-right: 55px;}
.mr60 {margin-right: 60px;}
.mr65 {margin-right: 65px;}
.mr70 {margin-right: 70px;}
.mr75 {margin-right: 75px;}
.mr80 {margin-right: 80px;}
.mr85 {margin-right: 85px;}
.mr90 {margin-right: 90px;}
.mr95 {margin-right: 95px;}
.mr150 {margin-right: 150px;}
.mr155 {margin-right: 155px;}
.mr160 {margin-right: 160px;}
.mr165 {margin-right: 165px;}
.mr170 {margin-right: 170px;}
.mr175 {margin-right: 175px;}
.mr180 {margin-right: 180px;}
.mr185 {margin-right: 185px;}
.mr190 {margin-right: 190px;}
.mr195 {margin-right: 195px;}
.mr200 {margin-right: 200px;}
.mr205 {margin-right: 205px;}
.mr210 {margin-right: 210px;}
.mr215 {margin-right: 215px;}
.mr220 {margin-right: 220px;}
.mr225 {margin-right: 225px;}
.mr230 {margin-right: 230px;}
.mr235 {margin-right: 235px;}
.mr240 {margin-right: 240px;}
.mr245 {margin-right: 245px;}
.mr250 {margin-right: 250px;}
.mr255 {margin-right: 255px;}
.mr260 {margin-right: 260px;}
.mr265 {margin-right: 265px;}
.mr270 {margin-right: 270px;}
.mr275 {margin-right: 275px;}
.mr280 {margin-right: 280px;}


.pb10 {
    padding-bottom: 10px;
}

.pt135{padding-top: 135px;}



.m10 {margin: 10px;}
.m15 {margin: 15px;}
.m20 {margin: 20px;}
.m30 {margin: 30px;}

.w360 {width: 360px;}
.w720 {width: 720px;
       margin: auto;}




/*--------------------------------
 文字色
---------------------------------*/

.white{
 color: #ffffff;
}


/*--------------------------------
 文字サイズ
---------------------------------*/



.size11{
 font-size: 11px;
}

.size12{
 font-size: 12px;
  line-height:200%;
}

.size13{
 font-size: 13px;
  line-height:200%;
}

.size1305{
 font-size: 13.5px;
  line-height:200%;
}

.size1306{
 font-size: 13.6px;
  line-height:200%;
}

.size14{
 font-size: 14px;
  line-height:160%;
}


.size15{
 font-size: 15px;
  line-height:150%;
}

.size16{
 font-size: 16px;
line-height:150%;
}

.size17{
 font-size: 17px;
  line-height:250%;
}

.size1702{
 font-size: 17px;
  line-height:150%;
}

.size1703{
 font-size: 17px;
  line-height:100%;
}

.size18{
 font-size: 18px;
 line-height:200%;
}


.size1802{
 font-size: 18px;
 line-height:180%;
}

.size19{
 font-size: 19px;
 line-height:150%;
}

.size1902{
 font-size: 19px;
 line-height:200%;
}


.size20{
 font-size: 20px;
 line-height:150%;
}

.size2005{
 font-size: 20px;
 line-height:200%;
}

.size21{
 font-size: 21px;
 line-height:200%;
}

.size22{
 font-size: 22px;
 line-height:200%;
}

.size23{
 font-size: 23px;
}

.size2302{
 font-size: 23px;
  line-height:180%;
}

.size24{
 font-size: 24px;
 line-height: 100%;
}

.size2402{
 font-size: 24px;
 line-height: 200%;
}

.size25{
 font-size: 25px;
 line-height: 180%;
}

.size28{
 font-size: 28px;
 line-height: 100%;
}


.size2802{
 font-size: 28px;
 line-height: 200%;
}

.size29{
 font-size: 29px;
 line-height: 100%;
}


.size30{
 font-size: 30px;
 line-height: 100%;
}

.size3002{
 font-size: 30px;
 line-height: 150%;
}

.size3003{
 font-size: 30px;
 line-height: 200%;
}

.size31{
 font-size: 31px;
 line-height: 100%;
}


.size32{
 font-size: 32px;
 line-height: 100%;
}


.size33{
 font-size: 33px;
 line-height: 100%;
}


.size34{
 font-size: 34px;
 line-height: 100%;
}




/*--------------------------------
 レイアウト
---------------------------------*/
/*.wrapper {
  padding-top: 73px;
}*/

.section {
  padding: 50px 0;
}

.section:nth-of-type(even) {
  /*background-color: #FF710533;*/
  background-color: #07569e;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}

h2 span {
    display: block;
    font-size: 1.1rem;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-top: 10px;
}

/*--------------------------------
 見出し
---------------------------------*/
.title {
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: .05em;
  color: #07569e;
}

.lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px -6px rgba(0,0,0,.1);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 40px;
  max-width: 1320px;
}

.header-logo {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
  margin-right: 20px;
  letter-spacing: .05em;
}

.header-logo a {
  color: #333;
}

.gnav-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  align-items: center;
}

.gnav-item:not(:last-child) {
  margin-right: 20px;
}

.gnav-item a {
  position: relative;
  font-size: 13.5px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 0;
  transition: .3s;
  letter-spacing: .05em;
  color: #07569e;
}
/*.gnav-item a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  content: "";
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #07569e;
}
.gnav-item a:hover:after {
  width: 100%;
}*/



.gnav-item a:hover
 {
  opacity: 0.5;
}


.Form-Btn:hover
 {
  opacity: 0.7;
}

a:hover{
    opacity: 0.7;
}

/*--------------------------------
 ボタン
---------------------------------*/

.button019 a {
    background: #FFF;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #F19071;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    border: 1.5px solid #F19071;
}
.button019 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button019 a:hover {
  background: #f7bba2;
  color: #FFF;
}
.button019 a:hover:after {
  right: 1.4rem;
}


/*--------------------------------
 メインビジュアル
---------------------------------*/
.mv {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  /*height: 85vh;*/
  text-align: center;
  margin-top: 100px;
  max-width: 100%;
  position: relative;
}

.mv-container {
  padding: 0 40px;
}

.mv-title {
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 5px;
  letter-spacing: .1em;
}
.mv-subtitle {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 40px;
  letter-spacing: .08em;
}

.mv-text {
  font-size: 16px;
  line-height: 1.8;
}

/*--------------------------------
 Works
---------------------------------*/
.works {
    text-align: center;
  }

.works-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -40px;
  justify-content: space-between;
}

.works-item {
  width: 30%;
  /*width: 31.74603%;*/
  /*width: 48%;*/
  /*margin-right: 1.58730%;*/
  margin-bottom: 40px;
  color: #333;
}

.works-img {
overflow:hidden;
}

.works-item img:hover {
  /*opacity: .9;*/
  transform:scale(1.1);
  transition:0.3s;
}

.works-item:nth-of-type(3n) {
  margin-right: 0;
}

.works-img img {
  border: 0px solid #e6e6e6;
  
}

.works-name {
  font-size: 14px;
  font-weight: bold;
  margin-top: 8px;
}

.works-info {
  font-size: 13px;
  margin-top: 5px;
}

/*--------------------------------
 Skill
---------------------------------*/

.skill {
  text-align: center;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -50px;
}

.skill-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 33%;
  margin-bottom: 50px;
}

.skill-img {
  width: 60px;
  height: auto;
  margin-right: 20px;
}

.skill-body {
  flex: 1;
}

.skill-name {
  margin-bottom: 10px;
}

.skill-text {
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}


.ul-sptext
 {
  padding: 0 20px;
  line-height: 1.8;
  margin-left: 2.5rem
}


/*--------------------------------
 About
---------------------------------*/

.about{
  text-align: center;
}

.profile {
  display: flex;
  flex-wrap: wrap;
  /*max-width: 800px;*/
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;

}
.profile-img {
  width: 20%;
  margin-right: 30px;
  border-radius: 50%;
}
.profile-img img {
  border-radius: 50%;
}
.profile-body {
  flex: 1;
}

.profile-body p {
  font-size: 15px;
  line-height: 1.8;
}

.profile-body p:not(:last-child) {
  margin-bottom: 30px;
}

/*--------------------------------
 Contact
---------------------------------*/
.contact {
  text-align: center;
}

.contact-item:not(:last-child) {
  margin-right: 10px;
}

.contact-text {
  margin-top: 10px;
}
/*--------------------------------
 ページトップ
---------------------------------*/
.page-top {
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  background-color: #4c4c4c;
}

.page-top .material-icons-outlined {
  vertical-align: bottom;
  color: #fff;
}

/*--------------------------------
 フッター
---------------------------------*/
.footer {
  padding: 30px;
  /*background-color: #333;*/
  /*background-color: #07569e;*/
  background-color: #07569e;
}

.copyright {
  font-size: 11px;
  text-align: center;
  /*color: #797979;*/
  color: #fff;


}

/*--------------------------------
 下層：Worksページ
---------------------------------*/
.article {
  padding: 80px 0;
}

.article-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.article-title {
  margin-bottom: 30px;
  text-align: center;
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 80px;
}

.article-body h3 {
  /*position: relative;*/
  font-size: 18px;
  margin-bottom: 5px;
  padding-left: 1em;
  font-weight: 600;
  background: linear-gradient(transparent 60%, #07569e33 20%);

}

.article-body h3:not(:first-child) {
  margin-top: 50px;
}

.article-body h3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  border-radius: 3px;
  /*background-color: #333;*/
}

.container h3 {
  position: relative;
  font-size: 18px;
  margin-bottom: 10px;
  padding-left: 1em;
  font-weight: bold;
  text-align: left;
}

.container h3:not(:first-child) {
  margin-top: 50px;＃07569e
}

.container h3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  border-radius: 3px;
  /*background-color: #6bb6ff;*/
  /*background-color: #CF3838;*/
  background-color: #F19071;
}


.container h4 {
  position: relative;
  /*padding-left: 1.5em;*/
}

.container h4:before {
  /*position: absolute;*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 1em;
  /*color: #CF3838;*/
  color: #F19071;
}

.article-body p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.home-link {
  text-align: center;
}

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  /* 見出し */
  .title {
    font-size: 24px;
    margin-bottom: 40px;
  }

  .lead {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  /* レイアウト */
  /*.wrapper {
    padding-top: 57px;
  }*/

  .section {
    padding: 0 0 60px 0;
  }

  .container {
    padding: 20px 20px 0 20px;
  }

  /* ヘッダー */
  .header .container {
    padding: 20px;
  }

  .header-logo {
    font-size: 15px;
    margin-right: 15px;
  }

  .gnav-item:not(:last-child) {
    margin-right: 10px;
  }

  .gnav-item a {
    font-size: 10px;
  }

  .gnav-item a:after {
    display: none;
  }

  /*  メインビジュアル */
  .mv {
    /*height: 75vh;*/
    margin-top: 80px;
  }

  .mv-container {
    padding: 0 20px;
  }

  .mv-title {
    font-size: 30px;
  }
  .mv-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .mv-text {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Works */

  .works-name {
    font-size: 14px;
  }

  .works-info {
    margin-top: 3px;
  }

  .works-list {
    justify-content: space-between;
  }

  .works-item {
    flex: 0 0 100%;
    /*flex: 0 0 48%;*/
    margin-right: 0;
    margin-bottom: 30px;
  }

  /* Skill */
  .skill-list {
    display: block;
    margin-bottom: 0;
  }

  .skill-item {
    width: 100%;
    margin-bottom: 35px;
  }

  .skill-item:last-child {
    margin-bottom: 0;
  }

  .skill-name {
    margin-bottom: 5px;
  }

  .skill-text {
    font-size: 14px;
    line-height: 1.7;
    padding: 0 20px;
    /*text-align: center;*/
  }

  /* About */
  .profile {
    display: block;
  }
  .profile-img {
    width: 150px;
    margin: 0 auto;
    margin-bottom: 25px;
  }





    /*左から右テキストエフェクト*/
  .leftAnime {
    opacity: 0;
    overflow: hidden;
    display: inline-block;
  }
 
  .leftAnimeInner {
    display: inline-block;
  }
 
//次章で追加するクラス
  .slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
 
  @keyframes slideTextX100 {
    from {
      transform: translateX(-100%);
      /*要素を左の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }
 
//次章で追加するクラス
  .slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
 
 
  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);
      /*要素を右の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

  .profile-body p {
    font-size: 14px;
    line-height: 1.7;
  }

  .profile-body p:not(:last-child) {
    margin-bottom: 20px;
  }

  /* フッター */
  .footer {
    padding: 20px;
  }

  /* 下層ページ */
  .article {
    padding: 50px 0;
  }

  .article-body h3 {
    font-size: 16px;
    padding-left: .8em;
  }

  .article-body h3:not(:first-child) {
    margin-top: 30px;
  }

  .article-body p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
}



/*--------------------------------
 レスポンシブ
---------------------------------*/

@media screen and (min-width: 769px) {
/*PC*/
.sp_navi {
  display:none;}

}


@media screen and (max-width: 768px) {
/*スマホ*/
.pc_navi { 
  display:none;}
}



/* ハンバーガーボタン下 */
.hamburger02 {
    display: block;
    position: fixed;
    z-index: 10;
    right: 22px;
    top: 43px;
    width: 42px;
    height: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}



/* ハンバーガーボタン */
.hamburger {
  display : block;
  position: fixed;
  z-index : 40;
  right : 22px;
  top   : 5px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #07569e;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */

.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  width: 24px;
    background : #fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: active-btn17-bar02 .8s forwards;
  animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
.hamburger.active span:nth-child(3) {
  top: 16px;
  width: 24px;
  background : #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}


.hamburger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  width: 55px;
  height: 55px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  margin: -32px 0 0 -32px;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: all .75s;
}
.hamburger.active::after {
  border: 2px solid #fff;
}

nav.globalMenuSp {
  position: fixed;
  z-index : 35;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(7,86,158,0.9);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  visibility: hidden;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible;

}



/* 上に戻るボタン */
.pagetop {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    width: 3.3rem;
    height: 3.3rem;
    line-height: 3.3rem;
    border-radius: 3.3rem;
    text-align: center;
    cursor: pointer;
}

.pagetop:hover {
    color: #fff !important;
    background-color: #CF3838b3;
    text-decoration: none;
}


/* リンクボタン */
.button019 a {
    background: #FFF;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #F19071;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button019 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.button019 a:hover {
  background: #F19071;
  color: #FFF;
}
.button019 a:hover:after {
  right: 1.4rem;
}



/* note */
#message {
display: flex;
justify-content: space-between
}
#message p img {
display: none;
}
#message a.btn {
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0
}
#message .mu {
width: 23%;
position: relative
}
#message .mu img {
width: 100%;
height: auto
}
#message .mu h3 {
margin-bottom: 1em;
font-size: 1.3rem;
text-align: left;
font-weight: normal
}
#message .mu small {
display: block
}







  /*左から右テキストエフェクト*/
  .leftAnime {
    opacity: 0;
    overflow: hidden;
    display: inline-block;
  }
 
  .leftAnimeInner {
    display: inline-block;
  }
 
//次章で追加するクラス
  .slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
 
  @keyframes slideTextX100 {
    from {
      transform: translateX(-100%);
      /*要素を左の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }
 
//次章で追加するクラス
  .slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
 
 
  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);
      /*要素を右の枠外に移動*/
      opacity: 0;
    }
 
    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }




/*--------------------------------
 タブ
---------------------------------*/

.note-embed{
    height: 200px;
}

.tab-blog {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;
}

.tab-blog > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #ffffff;
    color: #07569e;
    font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}


.tab-blog > label:hover,
.tab-blog label:has(:checked) {
    background-color: #07569e;
    color: #fff;
}

.tab-blog label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #07569e;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-blog input {
    display: none;
}

.tab-blog > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}

.tab-blog label:has(:checked) + div {
    /*display: block;*/
    display: flex;
}




/*--------------------------------
 サービスFLEX
---------------------------------*/
  
@media screen and (min-width: 769px) {
/*PC*/
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
}


@media screen and (max-width: 768px) {
/*スマホ*/
.flex {
    /*display: flex;*/
    flex-wrap: wrap;
    justify-content: space-between;
}
}



/*--------------------------------
 沿革
---------------------------------*/
  


.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 130px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #07569e33 solid;
    padding-left: 20px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #07569e;
    position: absolute;
    left: 125.3px;
    top: 24px;
    border-radius: 100%;
  }
}