.radiobutton {
  display: none;
}
label {
  background-color: skyblue;
  padding: 10px 20px;
}
.radiobutton:checked + label {
  background-color: pink;
}
body {
  font-family: serif;
  width: auto;
  transition: 0.5s;
  font-size:14px;
/*background: #eee;  元の色 */
  color: #000;
}
a:hover {
    opacity: 0.5;
    transition: 0.5s;
}
header {
    width: 94%;
    position: relative;
    margin: 50px auto 0;
}
main {
    width: 90%;
    margin: 150px auto 0;
    font-size: 18px;
}
nav#gnav-sp-fixed-scroll {
    position: fixed;
    top: 25px;
}
/*====== ナビゲーションpc =====*/
nav#gnav-pc {
    display: flex;
    justify-content: space-between;
}
nav#gnav-pc ul {
    display: flex;
    justify-content: flex-end;
}
nav#gnav-pc ul li {
    margin: 0 40px;
    font-size: 1.2rem;
}
nav#gnav-pc .logo {
    font-size: 1.3rem;
    margin-left: 55px;
}
/*===== nav スクロース固定 =====*/
.gnav-pc-fixed-scroll {
    background: #fff;
    display: none;
    padding: 15px 4% 15px 4%;
}
div#gnav-list-pc-fixed-scroll {
    display: flex;
    justify-content: space-between;
}
/*ロゴ*/
div#gnav-list-pc-fixed-scroll .logo {
    font-size: 1.3rem;
    margin-left: 40px;
}
/*メニュー*/
div#gnav-list-pc-fixed-scroll ul {
    justify-content: flex-end;
    display: flex;
}
div#gnav-list-pc-fixed-scroll ul li {
    margin: 0 40px;
    font-size: 1.2rem;
}
.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
  display:block;
}
.is-show {
  transform: translateY(0);
}
/*===== nav sp =====*/
.nav-sp {
    height: 50px;
    position: fixed;
    width: 100%;
    background: #ffffff;
    z-index: 99;
    display: none;
    top: 0;
    filter: blur(0);
    -webkit-filter: blur(0);
    box-shadow: 0px 1px 5px 0px #ccc;
}
.nav-sp .logo {
    margin: 0px 0 0 0;
    position: absolute;
    top: 15px;
    left: 15px;
}
/*======ハンバーガー　円形======*/
/* デフォルトの状態で付与されるクラス */
.menubtn {
    display: none;
    position: absolute;
    z-index: 9999;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    right: 0px;
    top: 3px;
}
.menubtn span {
    display: inline-block;
    transition: all 0.5s;
    position: absolute;
    left: 9px;
    height: 1px;
    /* border-radius: 2px; */
    background-color: #666;
    width: 50%;
}
/*スクロールでハンバーガーメニュー色変化*/
span.one.\.menubtn01,span.two.\.menubtn01,span.three.\.menubtn01 {
    background: #fff;
}
span.one.\.menubtn02,span.two.\.menubtn02,span.three.\.menubtn02 {
    background: #666;
}
/*======================================*/
.menubtn .one {
  top: 15px;
  width: 50%;
}
.menubtn .two {
  top: 23px;
  width: 50%;
}
.menubtn .three {
  top: 31px;
}
/*グローバルメニュー円*/
.circle-bg {
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 63vw;
    /* border-radius: 50%; */
    background: #666;
    transform: scale(0);
    right: 0px;
    top: -300px;
    transition: all 1.2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
/* ボタンをクリックした時に付与されるクラス */
.menubtn.active .one {
  top:18px;
  left:18px;
  transform: translateY(6px) rotate(-45deg);
  width: 50%;
background:#fff
}
.menubtn.active .two {
  opacity: 0;
}
.menubtn.active .three {
  top:30px;
  left:18px;
  transform: translateY(-6px) rotate(45deg);
  width: 50%;
background:#fff;
}
#gnav.gnavactive {
  z-index: 999;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
filter: blur(0);
-webkit-filter: blur(0);
}
#gnav #gnav-list {
  display: none;;
  height: auto;
  overflow: auto;
}

#gnav.gnavactive #gnav-list {
  display: block;
}
#gnav ui {
  opacity: 0;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#gnav.gnavactive ul {
  opacity: 1;
  padding: 0;
}

 .circle-bg.circleactive {
   transition: all 0.4s;
    transform: scale(2);
}
/* ナビゲーションメニュー */
#gnav ul {
    list-style: none;
    /*text-align: right;*/
    margin: 15px 15px 0;
    display: flex;
    justify-content: space-evenly;
}

#gnav ul li a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 0px;
  font-size: 20px;
}
#gnav ul li{
display:none;
}
#gnav.gnavactive ul {
    overflow: hidden;
}
/*=========== トップページ ==========*/
/*メインビジュアル*/
.top-visual {
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*h1,h2,h3,h4{
   color:#707070;
}
サイト名*/
h1 {
    font-size: 2.3rem;
    line-height: 2em;
}
/*項目名*/
h2 {
    font-size: 3rem;
    text-align: center;
    margin: 0 0 100px 0;
}
h2 span:after, h2 span:before {
    content: "";
    display: inline-block;
    width: 3rem;
    height: 1px;
    background: #707070;
    position: relative;
    bottom: 15px;
}
h2 span:after{
   margin-left: 25px;
}
h2 span:before {
    margin-right: 25px;
}
/*項目名-サブ*/
h3 {
    font-size: 1.5rem;
    margin: 0 0 20px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid;
}
/*作品名*/
ul.works-contents li h4 {
    margin: 20px 0 0 0;
    font-size: 16px;
    border-top: 1px solid #bbb;
    padding-top: 10px;
    font-feature-settings: "palt";
    text-align: left;
    height: 55px;
    text-decoration: underline 1px;
}
ul.works-contents li h4 span {
    display: inline-block;
    margin-left: 5px;
    background: #bbb;
    color: #fff;
    padding: 0 7px;
    border-radius: 50px;
    box-shadow: 0px 0px 2px #8a8a8a;
}
/*===== Works =====
ul.works-contents {
    text-align: center;
}
ul.works-contents li {
    display: inline-block;
    width: 29%;
    margin: 30px 30px 30px 0;
    vertical-align: top;
}
ul.works-contents.Banner li:nth-child(3n){
    margin: 30px 0;
}

*/
ul.works-contents {
    text-align: center;
}
ul.works-contents li {
    display: inline-block;
    width: 22%;
    margin: 20px 20px 0px 0;
    vertical-align: bottom;
}
ul.works-contents li:last-child {
    margin-right:0px;
}
ul.works-contents li:last-child,ul.works-contents.Banner li:nth-child(4n){
    margin-right:0px;
}

/* ----- web ----- */
ul.works-contents.WebSite li {
    margin-bottom: 0;
    width: 30%;
}

.works-poto.web img {
    border: 1px solid #bbb;
}
/* ----- banner ----- */
section.banner {
    margin-top: 100px;
}
.works-poto.banner {
  /*  width: 250px;*/
    text-align: center
}

/* ----- logo ----- */
section.logo {
    margin-top: 100px;
}
ul.works-contents.Logo li {
    width: 35%;
}
ul.works-contents.Logo li:first-child {
    margin-right: 100px;
}
.works-poto.logo {
    margin: 0;
}
/* ===== about =====*/
section.about {
    margin: 200px 0;
}
.about-contents {
    display: flex;
    justify-content: center;
}
/*写真*/
.poto {
    height: 200px;
    width: 200px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 50px;
}
/*名前*/
span.name-en {
    font-size: 1.2rem;
}
.profile {
    width: 500px;
    position: relative;
}
p.profile-text {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: justify;
}
/*リンクボタン*/
.about-link-bt {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 35px;
}
.about-link-bt a {
    background: #aaa;
    padding: 0 20px;
    color: #fff;
}
/*=================================*/

/*============== site-worksページ ==============*/

section.works-web-site-detail {
    border-bottom: 1px solid #bbb;
    margin-bottom: 100px;
}
.logo-image {
    width: 350px;
}
.web-site-detail {
    text-align: center;
    background: #f7f7f7;
    padding: 15px 15px;
    width: 40rem;
    margin: 0px auto 100px;
    box-shadow: 0 0 3px #a9a9a9;
}
/*モックアップ画像,ロゴ*/
.web-site-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto 20px;
    width: 90%;
}
/*モックアップ画像,ロゴなし*/
.web-site-image.logo_none {
    justify-content: center;
}
/*サイト名*/
h3.web-site-title {
    font-size: 1.2rem;
    border: none;
    margin: 0 auto 15px;
    text-align: center;
}
h3.web-site-title span {
    display: block;
    font-size: 1rem;
    margin-top: 5px;
text-decoration: underline 1px;
}
/*制作詳細*/
ul.web-site-detail-list {
    display: inline-block;
    line-height: 1.5;
}
ul.web-site-detail-list li span {
    vertical-align: top;
    background: #aaaaaa;
    color: #fff;
    width: 120px;
    display: inline-block;
    text-align: center;
    border-radius: 50px;
    line-height: 1.3;
    font-size: 16px;
}
ul.web-site-detail-list li:last-child {
    margin-bottom: 0;
}
/*デザイン,コーディング*/
p.web-site-detail-text {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: bold;
}
ul.web-site-detail-list li {
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}
/*丸
ul.web-site-detail-list li:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #BBBBBB;
    position: absolute;
    top: 8px;
    left: 0;
    border-radius: 50px;
}*/
ul.web-site-detail-list li p {
    margin-left: 30px;
    display: inline-block;
}
/*使用ツール*/
ul.web-site-detail-list li:first-child p {
    margin-left: 30px;
}

/*アイコン*/
ul.web-site-detail-list li p img {
    width: 1.7rem;
}
/*製作期間*/
ul.production-period li:before {
    display: none;
}
/*========== concept/design ==========*/
section.concept-design {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}
section.concept, section.design {
    width: 44%;
}
/*サブタイトル*/
h3.detail-title {
    border: 0;
    margin-bottom: 15px;
    padding:2px 0 0 0;
    font-size: 1.12rem;
    color: #fff;
    background: #aaa;
    width: 160px;
    text-align: center;
    border-radius: 50px;
}
/*区切り線*/
section.concept {
    position: relative;
}
section.concept:after {
    content: "";
    display: block;
    width: 1px;
    height: 96%;
    background: #bbb;
    position: absolute;
    top: 0;
    right: -14%;
}
/*項目詳細*/
ul.detail-list, p.design-text {
    margin-bottom: 30px;
    line-height: 1.9;
    font-size: 16px;
}
ul.detail-list li {
    position: relative;
    padding-left: 20px;
}
/*丸*/
ul.detail-list li:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #BBBBBB;
    position: absolute;
    top: 9px;
    left: 0;
    border-radius: 50px;
}
/*サイトイメージ*/
h2.sire-image-title {
    margin-bottom: 50px;
}
/*サイト画像
.site-image {
    width: 60%;
    margin: auto;
}*/
/**/.site-image {
    display: flex;
    justify-content: center;
}
p.site-img.pc {
    width: 50%;
    margin-right: 20px;
}
p.site-img.sp {
    width: 14.2%;
}
p.site-img span {
    margin-bottom: 10px;
    display: inline-block;
    color: #707070;
}
/* ===== banner-works ===== */
section.works-banner {
    margin-bottom: 100px;
}
.banner-image {
    text-align: center;
    border-bottom: 1px solid #bbb;
    margin-bottom: 50px;
}
/*画像*/
.banner-image p {
    width: 50%;
    margin: auto;
}
/*制作タイトル*/
.banner-image h2 {
    display: inline-block;
    margin: 50px 0 15px 0;
    padding-bottom: 10px;
    font-size: 26px;
    border-bottom: 1px solid #bbb;
    font-weight: bold;
}
ul.banner-data-list {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
ul.banner-data-list li {
    margin: 10px 10px;
}
ul.banner-data-list li img {
    width: 1.7rem;
}
/* ----- ペルソナ ----- */
section.make-detail {
    width: 70%;
    margin: auto;
}
.banner-detail {
    margin-bottom: 50px;
    border-bottom: 1px solid #bbb;
}
ul.banner-detail-list {
    padding-bottom: 50px;
}
/*ペルソナタイトル*/
li.banner-detail-list-title {
    width: 150px;
    background: #bbb;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    margin: 20px 0 10px 0;
    padding: 2px 0;
}
/*行間*/
li.banner-detail-list-text {
    line-height: 1.5;
    position: relative;
    padding-left: 12px;
}
/*丸*/
li.banner-detail-list-text:before {
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: #BBBBBB;
    border-radius: 50%;
    top: 8px;
    left: 0;
}
.design-describe p {
    line-height: 1.8;
}
/*カラーリスト*/
ul.use-color {
    display: flex;
    margin-top: 50px;
}
li.use-color-list {
    width: 100%;
    font-size: 16px;
}
li.use-color-list p {
    margin-bottom: 5px;
}
/*使用カラー*/
span.color {
    width: 100%;
    height: 20px;
    display: block;
    background: #000;
}
/* Bar-bise */
span.color.bise-main {
    background: #9C7B51;
}
span.color.bise-base {
    background: #180B01;
}
span.color.bise-point {
    background: linear-gradient(90deg, #CBB149 50%, #fff 50%);
    border: 1px solid #ccc;
}
/*私服*/
span.color.banner02-main {
    background: #F98FB5;
}
span.color.banner02-base {
    background: #fff;
    border: 1px solid #ccc;
}
ul.use-color:last-child {
    margin-top: 15px;
}
span.color.banner02-point {
    background: linear-gradient(90deg, #EE9A16 20%, #F8BB17 20% 40%, #FFF585 20% 60%, #75A5FE 40% 80%, #75C9FE 80%);
}
/*エース*/
span.color.banner03-main {
    background: #BF8999;
}
span.color.banner03-base {
    background: #EBF6F8;
}
span.color.banner03-point {
    background: linear-gradient(90deg, #635759 30%, #9F9164 30%, #D8CEAD 65%, #BD8697 50%, #ECC5D1 90%);
}
/*Bar-bise 飲み放題*/
span.color.banner04-main {
    background: #FCE786;
}
span.color.banner04-base {
    background: #101010;
    border: 1px solid #ccc;
}
span.color.banner04-point {
    background: linear-gradient(90deg,#921E27 30%,#CCCCCC 30%,#FEFEFB 65%,#B5953A 65%,#FFF8A3 90%);
}
/*バレンタイン*/
span.color.banner05-main {
    background: linear-gradient(90deg, #DDCD99 10%, #FDFDA1 50%, #AE8ECB 30%, #ffffff 100%);
}
span.color.banner05-base {
    background: linear-gradient(90deg, #6F0102 15%, #E44E51 100%);
    border: 1px solid #ccc;
}
span.color.banner05-point {
    background: linear-gradient(90deg, #633738 50%, #CCCCCC 41%, #FEFEFB 99%);
}
/*電話占いピュアリ*/
span.color.banner06-main {
    background: #F054A5;
}
span.color.banner06-base {
    background: #fff;
    border: 1px solid #ccc;
}
span.color.banner06-point {
    background: #65CC33;
}
/*電話占いキララ*/
span.color.banner07-main {
    background: #EE2F4E;
}
span.color.banner07-base {
    background: #fff;
    border: 1px solid #ccc;
}
span.color.banner07-point {
    background: linear-gradient(90deg, #323232 50%, #CAB48B 40%, #EFDEC2 100%);
}
/*無料キャンペーン*/
span.color.banner08-main {
    background: #EE2F4E;
}
span.color.banner08-base {
    background: #fff;
    border: 1px solid #ccc;
}
span.color.banner08-point {
    background: linear-gradient(90deg, #CAB48B 40%, #EFDEC2 100%);
}
/*========= logo ==========*/
/*サロンとも*/
span.color.banner09-main {
    background: #BCA586;
}
/*リラ*/
span.color.banner10-main {
    background: #fff;
    border: 1px solid #ccc;
}
span.color.banner10-base {
    background: #dbb2ce;
}
/* ===== ページネーション ===== */
.pagenation {
    display: flex;
    justify-content: space-between;
    margin: 50px auto 100px;
    width: 68%;
}
.prev span {
    margin-right: 5px;
    font-size: 1.5rem;
}
.next span {
    margin-left: 5px;
    font-size: 1.5rem;
}
/*======aboutページ=====*/
section.about-page {
    margin-bottom: 100px;
}
/*-----経歴-----*/
.about-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.about-contents {
    display: block;
}
/*名前*/
li.about-list-name {
    margin-bottom: 40px;
    /* font-size: 1.3rem; */
    line-height: 1.3;
    /* border-bottom: 1px solid #ccc; */
    /* display: inline-block; */
}
li.about-list-name span {
    display: block;
    /* line-height: 1.4; */
    font-size: 1.5rem;
}
li.about-list {
    margin-bottom: 30px;
    position: relative;
    padding-left: 15px;
}
li.about-list span {
    font-weight: bold;
    /* display: block; */
    /* border-bottom: 1px solid #ccc; */
    margin-right: 20px;
}
li.about-list:before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #ccc;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 6px;
}
/*写真*/
.about-container .poto {
    width: 300px;
    height: 300px;
}
.about-container .poto img {
    width: 300px;
    left: 12px;
}
/*-----スキル-----*/
.skill-container {
    display: flex;
    position: relative;
    margin-bottom: 200px;
}
.skill-container .design, .skill-container .coding {
    width: 100%;
    margin: 0px 50px;
}
/*項目タイトル*/
h3.skill {
    border: none;
    text-align: center;
    font-size: 1.7rem;
}
h3.skill span {
    font-size: 1rem;
    display: block;
    margin-top: 10px;
    color: #888;
}
/*アイコン*/
.icon {
    text-align: center;
    margin-bottom: 30px;
}
.icon img {
    width: 20%;
}
/*テキスト*/
p.text {
    line-height: 1.7;
}
/*ツール*/
.tool-contents {
    position: absolute;
    bottom: -70px;
}
p.tool-title {
    display: inline-block;
    background: #BBBBBB;
    color: #fff;
    border-radius: 50px;
    padding: 0px 15px;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 10px;
}

/*li.about-list:first-child {
    display: inline-block;
}*/
/*写真*/
.poto img {
    transform: rotate(-27deg);
    width: 220px;
    position: relative;
    left: 7px;
    bottom: 15px;
}
/*===== footer =====*/
footer {
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 5px 0;
}

footer nav#nav-footer ul {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}
footer nav#nav-footer ul li {
    margin: 0 40px;
    font-size: 1.2rem;
}
footer p {
    font-size: 10px;
}
/*----------- アニメーション ----------------*/

/*========java スクロールで背景色変化========*/
body.invert {
	transition: 0.5s;
	color:#fff;
	fill: #fff;/*svg;*/
	background: #041032; /* スクロール後の色 */
}
body.invert02 {
	transition: 0.5s;
	background: #fefefe; /* スクロール後の色 */
	color:#000;
}

/*top戻るボタン*/
#page-top {
width:150px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}
#page-top a {
    text-decoration: none;
    padding: 0px;
    text-align: center;
    display: block;
    border-radius: 90px;
    opacity: 0.9;
    /*transition: all .5s ease;*/
}

span.backtotop {
    position: absolute;
    top: 55px;
    left: 55px;
    font-size: 1em;
    letter-spacing: 0.4em;
    color: #000;
    transition: .5s;
}
span.backtotop.\.backtotop-active{
color:#fff;
transition: .5s;
}
#top-svg {
    width: 85%;
    position: relative;
    animation: scroll-down-circle-text 10s linear infinite both;
}
@keyframes scroll-down-circle-text {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(1turn);
    }
}

/*1文字ずつ文字フェイドイン*/
.text-move {
  opacity: 0;
  display: inline-block;
  transform: translate3d(0,0,0);
  /*font-size: 80px;*/
  letter-spacing: 0.02em;
}

.text-move:nth-child(1) {
  transition: opacity 1s ease 0.2s, transform 0.8s ease 0.1s;
  transform: translate(20px, 0px);
}
.text-move:nth-child(2) {
  transition: opacity 1s ease 0.3s, transform 0.8s ease 0.2s;
transform: translate(24px, 0px);
}
.text-move:nth-child(3) {
  transition: opacity 1s ease 0.4s, transform 0.8s ease 0.3s;
transform: translate(28px, 0px);
}
.text-move:nth-child(4) {
  transition: opacity 1s ease 0.5s, transform 0.8s ease 0.4s;
transform: translate(32px, 0px);
}
.text-move:nth-child(5) {
  transition: opacity 1s ease 0.6s, transform 0.8s ease 0.5s;
transform: translate(36px, 0px);
}
.text-move:nth-child(6) {
  transition: opacity 1s ease 0.7s, transform 0.8s ease 0.6s;
transform: translate(40px, 0px);
}
.text-move:nth-child(7) {
  transition: opacity 1s ease 0.8s, transform 0.8s ease 0.7s;
transform: translate(44px, 0px);
}
.text-move:nth-child(8) {
  transition: opacity 1s ease 0.9s, transform 0.8s ease 0.8s;
transform: translate(48px, 0px);
}
.text-move:nth-child(9) {
  transition: opacity 1s ease 1s, transform 0.8s ease 0.9s;
transform: translate(52px, 0px);
}
.text-move:nth-child(10) {
  transition: opacity 1s ease 1.1s, transform 0.8s ease 1s;
transform: translate(56px, 0px);
}
.text-move:nth-child(11) {
  transition: opacity 1s ease 1.2s, transform 0.8s ease 1.1s;
transform: translate(60px, 0px);
}
.text-move:nth-child(12) {
  transition: opacity 1s ease 1.3s, transform 0.8s ease 1.2s;
transform: translate(64px, 0px);
}
.text-move:nth-child(13) {
  transition: opacity 1s ease 1.4s, transform 0.8s ease 1.3s;
transform: translate(68px, 0px);
}
.text-move:nth-child(14) {
  transition: opacity 1s ease 1.5s, transform 0.8s ease 1.4s;
transform: translate(72px, 0px);
}
.text-move:nth-child(15) {
  transition: opacity 1s ease 1.6s, transform 0.8s ease 1.5s;
transform: translate(76px, 0px);
}
.text-move:nth-child(16) {
  transition: opacity 1s ease 1.7s, transform 0.8s ease 1.6s;
transform: translate(80px, 0px);
}
.text-move:nth-child(17) {
  transition: opacity 1s ease 1.8s, transform 0.8s ease 1.7s;
transform: translate(84px, 0px);
}
.text-move:nth-child(18) {
  transition: opacity 1s ease 1.9s, transform 0.8s ease 1.8s;
transform: translate(88px, 0px);
}
.active {
  opacity: 1;
}

.active .text-move {
    opacity: 1;
    transform: translate3d(0,0,0);
    padding: 0 10px;
}


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

}
/*600px以上*/
@media screen and (min-width: 600px){
/*メインタイトル*/
h2.concept-design-title {
    margin-bottom: 50px;
    font-size:2.6rem;
}
h2.concept-design-title span:after, h2.concept-design-title span:before {
    bottom: 13px;
}
br.sp {
    display: none;
}
section.works-web-site {
    width: 90%;
    margin: auto;
}
.banner-image {
    width: 70%;
    margin: 0 auto 50px;
}

}
/*920px以下*/
@media screen and (max-width: 920px){
/*=====Abuot=====**/

.about-container {
    flex-direction: column;
}
/*名前*/
li.about-list-name {
    text-align: center;
    margin-top: 10px;
}
/*写真*/
.poto {
    margin:auto;
}
.skill-container .design{
    margin:0 20px 0 0;
}
.skill-container .coding {
    margin:0 0 0 20px;

}
/*600px以下*/
@media screen and (max-width: 600px){
/*header*/
header {
    width: 100%;
    margin: 0px auto 0;
}
.nav-sp {
    display: block;
}
/*===== toppage =====*/
.clone-nav {
    display: none;
}
/*サイト名*/
h1 {
    font-size: 1.3rem;
}
.active .text-move {
    padding: 0 6px;
}
/*項目名*/
h2 {
    font-size: 2rem;
    margin: 0 0 50px 0;
}
h2 span:after, h2 span:before {
    bottom: 10px;
}
h4 {
    margin: 10px 0 0 0;
}
.menubtn {
display:block;
}
nav#gnav-pc,.language-pc {
   display:none;
}
.slick-list.draggable {
     height: auto;
}
section.banner,section.eye-catch,section.logo {
    margin-top: 50px;
}
/*----- works -----*/
ul.works-contents li,ul.works-contents.WebSite li,ul.works-contents.Logo li {
    display: block;
    width: auto;
    margin: 30px 0px 30px 0;
}
/*----- EyeCatch -----*/
ul.works-contents.EyeCatch li {
    width:auto;
}
/*----- lgo -----*/
ul.works-contents.Logo li:first-child {
    margin-right: 0px;
}
/*----- profile -----*/
section.about {
    margin: 100px 0;
}
.about-contents {
    flex-direction: column;
}

/*名前*/
.profile h3 {
    text-align: center;
    font-size: 1.2rem;
}
span.name-en {
    font-size: 0.95rem;
}
/*テキスト*/
.profile {
    width: auto;
    padding-top: 20px;
}
/*リンクボタン*/
.about-link-bt {
    bottom: 0px;
}
/*----- works-site -----*/
.web-site-detail,section.works-web-site-detail,section.concept-design{
margin-bottom:50px;
}
section.design {
    margin-top: 50px;
}
/*モックアップ*/
.web-site-image {
    flex-direction: column;
}
.logo-image {
    width: 200px;
    margin-top: 5px;
}

/*制作詳細*/
.web-site-detail {
    width: 20rem;
}
ul.web-site-detail-list li {
    padding-left: 15px;
}
ul.web-site-detail-list li p{
display:block;
margin-left:0;
}
ul.web-site-detail-list li:first-child p {
    margin-left: 0px;
}
/* concept/design */
section.concept-design {
    flex-direction: column;
}
section.concept, section.design {
    width: 100%;
}
section.concept:after {
    display: none;
}
/*サイトイメージ画像*/
p.site-img.pc,p.site-img.sp{
    width: auto;
}
/* ======= works-banner ======= */
main {
    margin: 70px auto 0;
}
/*画像*/
.banner-image p {
    width: 100%;
}
/*bannertitle*/
.banner-image h2 {
    margin: 30px 0 30px 0;
    font-size: 18px;
}
/*詳細*/
ul.banner-data-list {
    display: inline-block;
    margin-bottom: 30px;
    text-align: left;
}
section.make-detail {
    width: 100%;
}
ul.banner-data-list li:first-child span {
    margin-left: 18px;
}
ul.banner-data-list li:nth-child(2) span {
    margin-left: 35px;
}
u
/*使用カラー*/
ul.use-color {
    display: block;
}
li.use-color-list {
    width: 100%;
    margin-top: 20px;
}
/*ページネーション*/
.pagenation {
    width: auto;
}
/*トップへ戻るボタン*/
#page-top {
    width: 100px;
    bottom: 15px;
    right: 10px;
}
span.backtotop {
    top: 35px;
    left: 35px;
    font-size: 0.8em;
}
/*----- About -----*/
.skill-container {
    margin-bottom: 100px;
}
/*写真*/
.about-container .poto {
    width: 200px;
    height: 200px;
}
.about-container .poto img {
    width: 200px;
    left: 7px;
}
/*経歴*/
li.about-list span {
    display: block;
}
/*スキル*/
.skill-container {
    display: block;
}
/*.design, .coding {
    margin: 0px;
}*/
.skill-container .design {
    margin: 0 0 50px 0;
}
.skill-container .coding {
    border-top: 1px solid #ccc;
    padding-top: 50px;
    margin:0;
}
/*ツール*/
.tool-contents {
    position: static;
    margin-top: 20px;
}
nav#nav-footer {
    display: none;
}
}