@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
 font-size:100%;
 margin: 0;
 padding: 0;
 font-weight: normal;
 }
li {
 list-style-type: none;
 }
 /*===============================
 　　　各ページ共通
 =================================*/

body {
 font-size: 100%;/* =16px */
 font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-feature-settings : "palt" 1;
 margin: 0;  padding: 0;
 color: #333333;
 -webkit-text-size-adjust: 100%;
　text-align: center;
 }
a {
 text-decoration: none;
 color: #333333;
 }
a:hover { color: #aaaaaa; }

#logo {
 font-size: 22px;
 font-family: 'Bebas Neue', sans-serif;
 letter-spacing: 0.5px;
 position: absolute;
 top: 22px;
 left: 42px;
 z-index: 100;
}

#logo span {
 position: absolute;
 top: 6.5px;
 font-size: 10px;
 letter-spacing: 1.5px;
 -webkit-transform:scale(0.7);
 -moz-transform:scale(0.7);
 -ms-transform:scale(0.7);
 -o-transform:scale(0.7);
 transform:scale(0.7);
}
#logo a:hover {
 transition: 0.3s;
}

header {
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 border-bottom: 1px solid #151515;
 height: 70px;
 }

nav {
 width: 100%;
 font-family: 'Oswald', sans-serif;
 font-size: 12px;
 }

nav ul li {
 list-style-type: none;
 display: inline-flex;
}
nav ul li a {
 margin: 0 15px;
 color: #333333;
}
nav ul li a:hover {
 color: #aaaaaa;
 transition: 0.3s;
}
nav ul li span {
 color: #aaaaaa;
}

/*ページトップへの矢印*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 10px;
 width: 30px;
 height: 30px;
 border: solid 1px #2a2a2a;
 z-index: 100;
 }

.pagetop a {
 display: block;
 width: 15px;
 height: 15px;
 background: transparent;
 border-top: 1px solid #333333;
 border-left: 1px solid #333333;
 transform: rotate(45deg);
 margin: 11px auto;
 }

.pagetop a:hover {
 opacity : 0.3;
 }

.wrap {
 font-size: 0.75rem;
 max-width: 900px;
 margin: 80px auto;
 padding: 40px;
 }


/*===============================
　　　トップページ　WORKページ　
=================================*/
.work_thumbnail {
 background: ;
 margin: 20px 20px 200px;
}

.container {
 margin: 0 auto;
 background:;
 padding: 20px 10px 0;
 display: flex;
 justify-content: center;
}

.work_box,.work_blankbox {
 overflow: hidden;/*ズーム時にハミ出させない*/
 margin: 0 10px;
}

.work_box img {
 display: block;
 transition: 1s;
 object-fit: cover;
}
.work_box img:hover {
 transform: scale(1.2);
 transition: 1s;
}

/* WORK 個別ページ　*/
.work-wrap {
 max-width: 1050px;
 margin: 0 auto 100px;;
 padding: 0 40px;
}

h1.work {
 padding: 30px 0;
 font-size: 13px;
}

h2 {
 font-family: 'Oswald', sans-serif;
 font-size: 12px;
 padding-top: 20px;
 }

.work_title {
 font-family: 'Oswald', "游ゴシック", "Yu Gothic", "YuGothic", sans-serif;
 font-size: 11px;
 }

 .work_coment {
 font-family: 'Oswald', "游ゴシック", "Yu Gothic", "YuGothic", sans-serif;
 font-size: 11px;
 margin: 0;
 }

.work_text{
 font-family: 'Oswald', "游ゴシック", "Yu Gothic", "YuGothic", sans-serif;
 font-size: 11px;
 max-width: 500px;
 margin: 0;
 }


/*===============================
　　　  プロフィールページ　　
=================================*/
.pro-flexbox {
 display: flex;
}
.pro-photo img {
 max-width:400px;
}
.pro_name {
 font-family: 'Oswald', sans-serif;
 padding: 0;
 margin: 0;
}
.pro_text {
 margin: 0 0 0 40px;
 position: relative;
}
.location {
 position: absolute;
 bottom: 0;
}
.address {
 padding: 0;
 margin: 0;
}


/*===============================
　　　  お問い合わせページ　　
=================================*/
/* メールフォーム */
.form_flex {
 display: flex;
 margin-bottom: 10px;
}

.form_label {
 width: 200px;
 text-align: right;
 vertical-align: top;
 padding: 10px 15px 10px 0;
}

.form_send {
 text-align: center;
 padding: 30px;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"] {
 padding: 10px;
 font-family : inherit;
 width: 55%;
 border: none;
 border-bottom: 1px solid;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 }

textarea {
 padding: 10px;
 font-family : inherit;
 width: 55%;
 height: 200px;
 border: none;
 border-bottom: 1px solid;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 }

input[type="submit"] {
 font-family : inherit;
 font-size:0.75rem;
 padding: 10px 13px;
 border: solid 1px;
 background: #FFF;
 color: #333333;
 -webkit-appearance: none;/*iOSで丸くデフォ表示させない*/
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 }

input[type="submit"]:hover {
 color: #FFF;
 background: ;
 transition: 0.5s;
 }

input:focus, textarea:focus {
 border-bottom: 2px solid;
 outline: none;
 }

h1.mail_complete {
  font-size: 16px;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
h1.mail_complete:before {
 content: '';
 position: absolute;
 bottom: -15px;
 display: inline-block;
 width: 100px;
 height: 1px;
 background-color: black;
}

.click_back {
 width: 150px;
 text-align: center;
 margin-top: 50px;
 padding: 10px 13px;
 border: solid 1px;
 background: #FFF;
 color: #333333;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 }
.click_back:hover{
 color: #FFF;
 background: #333333;
 transition: 0.5s;
 }



 /*=========================================
　レスポンシブ-スタイル　スマホ・タブレット共通
  ==========================================*/
/*==  1024px以上なら  ここから==*/
@media screen and (min-width:1024px) {
  .gblnv_box {
   display: none;
   }
 /*1024px以上なら　ここまで*/ }


/*==  1023px以下なら  ここから==*/
@media screen and (max-width: 1023px) {
  nav {
   display: none;
   }

/* ハンバーガーメニュー */
.gblnv_box{
 position: fixed;
 top: 10px;
 right: 0;
 z-index: 100;
 text-align: right;
 font-family: 'Oswald', sans-serif;
 background: rgba(255,255,255, 0);
 }
.gblnv_box span { color: #aaaaaa; }
.gblnv_box a {margin: 15px 20px 10px;}
.gblnv_block{
  background-color: rgba(255,255,255, 0.8);
  color: #333333;
  height:100vh; width: 100vw;
  display: none;
  text-align: right;
  margin-top: -100px;
 padding-top: 100px;
  padding-right: 20px; }
.gblnv_block ul{padding: 5px;}
.gblnv_block ul li{line-height: 180%;}
.gblnv_block ul li a{color: #333333; line-height: 260%; }
.gblnv_block ul li a:hover{color: #aaaaaa;}
.onanimation{display: block;}

.menu-trigger,
.menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger {position: relative; width: 30px; height: 23px;}
.menu-trigger span {
 position: absolute;
 left: 0;
 width: 100%;
 height: 3px;
 background-color: #333333;
 border-radius: 4px;
 }
.menu-trigger span:nth-of-type(1) {
 top: 0;
 }
.menu-trigger span:nth-of-type(2) {
 top: 10px;
 }
.menu-trigger span:nth-of-type(3) {
 bottom: 0;
 }
.menu-trigger.active span:nth-of-type(1) {
 -webkit-transform: translateY(8px) rotate(-45deg);
 transform: translateY(8px) rotate(-45deg);
 }
.menu-trigger.active span:nth-of-type(2) {
 left: 50%;
 opacity: 0;
 -webkit-animation: active-menu-bar02 .8s forwards;
 animation: active-menu-bar02 .8s forwards;
 }
@-webkit-keyframes active-menu-bar02 {
  	100% {
  		height: 0;
  	}
  }
@keyframes active-menu-bar02 {
  	100% {
  		height: 0;
  	}
  }
.menu-trigger.active span:nth-of-type(3) {
 -webkit-transform: translateY(-12px) rotate(45deg);
 transform: translateY(-12px) rotate(45deg);
 }

/*　メールフォーム　*/
.form_flex {
 display: block;
 }
.form_label {
 margin: 0 auto;
 text-align: center;
 padding: 30px 0 0 0;
 }

textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"] {
 width: 100%;
 }

/*　プロフィールページ　*/
.pro-flexbox {
 flex-direction: column;
}
.pro_text {
 margin: 0 0 0 0;
 position: static;
}
.location {
 position: static;
 margin-top: 50px;
}
.address span {
 font-size: 70%;
}
/*1023px以下なら*ここまで*/ }


/*==  480px以下なら  ここから==*/
@media screen and (max-width: 480px) {

/* トップページ　WORKページ　*/
.container {
 flex-direction: column;
}
.work_box {
 margin: 20px 10px;
 }

/*480px以下なら*ここまで*/ }