@charset "UTF-8";
*, ::before, ::after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
html {
    font-size: 62.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
    width: 100%;
}
body {
    background-color: #FFFFFF;
    font-size: 1.3rem;
    line-height: 1.7;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
h2  {
    text-align: left;
    padding-bottom: 10px;
    padding-right: 5%;
}
.center  {
    padding-top: 30px;
    /* [disabled]padding-right: 30px; */
    /* [disabled]padding-left: 30px; */
    text-align: center;
}
.strong {
    font-size: large;
    font-weight: bold;
    padding-bottom: 20px;
}
nav ul li {
    list-style-type: none;
}

/*========= LoadingのためのCSS ==============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#333;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
    max-width: 100px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}

/*========= LoadingのためのCSSここまで ===============*/

.container {
    margin: 0 auto;
    max-width: 430px;
    background-color: rgba(255,255,255,1.00);
}
.bg {
    /* [disabled]font-size: 140px; */
    z-index: -1;
    position: fixed;
    background-color: #F3F3F3;
    /* [disabled]max-width: 100%; */
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.bg_menu {
    font-size: 1.8rem;
    display: block;
    position: fixed;
    right: 5%;
    align-items: flex-end;
    /* [disabled]max-width: 200px; */
    bottom: 10%;
    text-decoration: none;
    list-style-type: none;
    padding-bottom: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    width: calc((100% - 520px) / 2);
    text-align: right;
}
.bg_menu .mokuji {
    font-weight: 900;
}
.bg_menu a {
    font-weight: 200;
    padding-top: 20px;
    cursor: pointer;
    display: inline-block;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: medium;
    text-decoration: none;
    text-shadow: 0px 0px;
    text-transform: none;
    letter-spacing: 4px;
}
.bg_menu a:hover {
    transition: ease-in 0.3s;
    color: #35B6D1;
}
.bg_shoukai {
    font-size: 1.4rem;
    display: block;
    position: fixed;
    align-items: flex-start;
    bottom: 10%;
    text-decoration: none;
    list-style-type: none;
    padding-bottom: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    width: calc((100% - 500px) / 2);
    text-align: left;
    left: 5%;
}
.bg_shoukai .mokuji {
    font-weight: 400;
    font-size: small;
    margin-top: 20px;
}
.bg_shoukai ul {
    list-style-type: none;
    font-weight: 200;
    display: inline-block;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-style: normal;
    font-size: medium;
    text-decoration: none;
    text-shadow: 0px 0px;
    text-transform: none;
    letter-spacing: 4px;
}
.bg_shoukai ul li {
    padding-top: 20px;
    text-indent: 10px;
    font-size: small;
}
.sec0 {
    position: relative;
    width: 100%;
    height: 90vh;
    background-image: url(img/top02.png);
    background-attachment: fixed;
    object-fit: cover;
}
.title {
    position: absolute;
    bottom: 55%;
    left: 0px;
    color: #EBEAEA;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.12em;
}
.title_portfolio {
    position: absolute;
    bottom: 50%;
    left: 0px;
    color: #EBEAEA;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 2rem;
    letter-spacing: 0.12em;
    font-weight: bold;
}
.sec_intro {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 15%;
    position: relative;
}
.sec_intro p {
    padding-top: 1em;
}
.sec_intro a {
    text-decoration: none;
    color: #827D79;
    overflow-wrap: break-word;
}
.sec_intro a:hover {
    text-decoration: underline;
    color: #35B6D1;
    overflow-wrap: break-word;
    transition: ease-in 0.3s;
}
.sec_intro .icon {
    border-radius: 50%;
    width: 110px;
    position: absolute;
    left: 64%;
    top: -9%;
    border: 8px solid #FFFFFF;
}
.sec_intro .box-area img {
    display: block;
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.sec_intro .box-area img:hover {
    transform: rotateZ(360deg);
    transition: ease-in-out 1s;
}
.sec_intro h2 {
    font-weight: bold;
    font-size: 2.8rem;
    line-height: 2;
    padding-top: 20px;
}
.pr {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
    position: relative;
}
.pr h2 {
    margin-top: 10%;
}
.pr h3 {
    margin-top: 30px;
}
.pr p {
    padding-top: 1em;
    padding-left: 5px;
    padding-right: 5px;
}
.main-pr {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
    position: relative;
}
.main-pr img {
    width: 100px;
}
.main-pr h3 {
    text-align: center;
    position: relative;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-bottom: 2rem;
    font-size: large;
}
.main-pr h3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: -o-linear-gradient(0deg,rgba(35,159,164,1.00) 0%,rgba(168,217,215,1.00) 100%);
    background-image: -webkit-linear-gradient(0deg,rgba(35,159,164,1.00) 0%,rgba(168,217,215,1.00) 100%);
    background-image: -moz-linear-gradient(0deg,rgba(35,159,164,1.00) 0%,rgba(168,217,215,1.00) 100%);
    background-image: linear-gradient(90deg,rgba(35,159,164,1.00) 0%,rgba(168,217,215,1.00) 100%);
    margin-top: 10px;
    margin-bottom: 10px;
}
.main-pr span {
    background-color: #FFFA00;
    font-weight: bold;
}
.main-pr p {
    padding-bottom: 20px;
}
.img-wrap {
    margin-left: auto;
    display: block;
    text-align: center;
    padding-top: 20px;
}
.work {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
}
.work img {
    border: 4px solid #A3A3A3;
}
.work h3 {
    margin-top: 5%;
    margin-bottom: 3%;
}
.work-box   {
    margin-top: 5%;
}

.btn--orange,
a.btn--orange {
    color: #fff;
    background-color: #35B6D1;
    margin-bottom: 5%;
    margin-top: 5%;
}
.btn--orange:hover,
a.btn--orange:hover {
    color: #1E2A41;
    background: #02A3B2;
}

.btn,
a.btn,
button.btn {
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding-top: 1rem;
    padding-right: 3rem;
    padding-left: 3rem;
    padding-bottom: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    border-radius: 0.5rem;
}
.url a {
    text-decoration: none;
    color: #AFA8A3;
    overflow-wrap: break-word;
}
.url a:hover {
    text-decoration: underline;
}
.shosai  {
    display: block;
    text-align: right;
    margin-top: 10px;
}
.face {
    display: block;
    text-align: center;
}
/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
    position: absolute;
    bottom: 20px;
    left: 10%;
    right: auto;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
    position: absolute;
    left: 10px;
    bottom: 5px;
    /*テキストの形状*/
    color: #eee;
    font-size: 1rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#eee;
}

.effect-brightness {
  transition: filter 0.3s ease;
  filter: brightness(
    1
  ); /* デフォルト値なのでこの一行は省略してもOK */
}

.effect-brightness:hover {
    filter: brightness(1.1); /* 明るくする */
}
.about {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
}
.about h3 {
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 10px;
}
.about p {
    padding-top: 1em;
}
.about .contents {
    text-indent: 5px;
}
.about .contents-2  {
    text-indent: 15px;
}
.skills {
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 0px;
    padding-bottom: 10%;
}
.skills .box-area p {
    font-size: 0.8em;
}
.skills img {
    display: block;
    text-align: center;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}
.skills h2 {
    padding: 0;
    margin: 0px;
}
.skills h3 {
    text-align: center;
    padding-top: 0.8rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 0.8rem;
    background: #f4f4f4;
    display: block;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 30px;
    font-size: small;
}

.box-area {
    display: flex;
    justify-content: center;
    padding-top: 8%;
    /* [disabled]padding-bottom: 10%; */
}
.box {
    width: 200px;
    max-width: 200px;
}
.box p {
    text-align: center;
}
.box img {
    display: block;
    text-align: center;
}
.works {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 15%;
}
.last {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 15%;
}
.last p {
    padding-top: 20px;
}
.copyright {
    padding: 1rem 0;
    font-size: 1em;
    text-align: center;
}

/*　ハンバーガーメニューボタン　*/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 20px;
    top   : 20px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px;
    left    : 6px;
    background : #BBBBBB;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.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;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #FFFFFF;
    background-color: rgba(53,182,209,0.90);
    text-align: center;
    width: 100%;
    transform: translateX(100%);
    transition: all 0.6s;
    height: 100%;
}

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;
    font-weight: bold;
}

nav.globalMenuSp ul li:first-child {
    padding-bottom: 0;
    margin-top: 30%;
}

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: 2em 0;
    text-decoration : none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}

@media (min-width:431px){
.hamburger {
    visibility: hidden;
}
}

@media (max-width:430px){
.bg_menu {
    visibility: hidden;
}
.bg_shoukai {
    visibility: hidden;
}
}