@charset "utf-8";
/* reset */
html,body, h1, h2, h3, p, ul, li{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: 
  "Hiragino Kaku GOthic ProN",
  Meiryo,sans-serif;
}
body {  font-size:16px;}
ul{ list-style: none;}
a { 
  text-decoration: none;
  color: #222;
  cursor: pointer;
}
img { 
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

/* 【PC】leaout */
header{
  width: 100%;
  height: 100vh; /*  height: 1080px; */
  background: #ff871c;
  position: relative;
}

h1 img {
  position: absolute;
  top: -280px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1001;
}

h1.fixed {
  width: 150px;
  height: 150px;
  position: fixed;
  top: 105px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

.header_P{
  width: 100%;
  padding: 40px 0 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  background:rgba(255, 178, 28, 1.0);
  z-index: 1000;
  font-size: 15px;
}

.header_P p {
  line-height: 300%;
  text-align: center;
}

【共通情報】
.tb_sp_lost a{  display: block;}

.hd_i a{
  font-weight: bold;
  border-bottom: 3px solid #222;
  padding: 3px 0;
  font-size: 18px;
  line-height: 280%;
  cursor: pointer;
  transition: 0.5s;
  color:#222;
}

.tb_sp_lost a:hover{
  color:#FFE56B;
  border-bottom: 0px solid rgba(255, 178, 28, 1.0);
}

.fa-chevron-down {
  font-size: 20px;
  cursor: pointer;
}

nav {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}

nav ul{
  width: 900px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99998;
}

nav li{
  float: left;
  line-height: 80px;
  margin-right: 2em;
  font-size: 14px;
}

nav li a{
  display: block;
  transition: 1s;
}

nav li a:hover{
  transform: translate(10px,0);
  color:rgba(255, 215, 28, 1.0);
}

/* navのfixed */
nav.fixed{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 135, 28, 0.95);
}

/* レスポンシブのボタン */
#Btn{
  display: none;
  width: 130px;
  height: 40px;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 2px solid #222;
  border-radius: 5px;
}

#Btn p{
  width: 150px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -20px;
  margin: auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.icon{
  display: block;
  /* 下向き三角記述(下記4行) */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 13px solid #222;
  position: absolute;
  top: 12px;
  bottom: 0;
  right: 0;
  left: 85px;
  margin: auto;
  transition: 0.1s;
}

.icon.menui{
  /* 下向き三角記述(下記4行) */
  border: 10px solid transparent;
  border-bottom: 13px solid #222;
  position: absolute;
  top: -12px;
  bottom: 0;
  right: 0;
  left: 85px;
  margin: auto;
}

.header_b{
  width: 100%;
  height: 100vh;
  position: relative;
  top: -10px;
  left: 0;
}

/* headr svgライン */
.header_b svg{
  width: 100%;
  height: 98vh;
}

#page-top a{
  width: 50px;
  height: 50px;
  line-height: 46px;
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #111;
  color:#ddd;
  text-align: center;
  z-index: 100009;
  cursor: pointer;
  transition: 0.8s;
}

#page-top a:hover{
  background: #000;
  color:#ff871c;
}

/* header 背景アニメ */
line#line,line#line2,line#line3,line#line4,line#line5,line#line5{
stroke: #fdad66;
stroke-width: 1;
stroke-dasharray:2000; /*開始0地点*/
stroke-dashoffset:2000;
}

line#line{
animation: move 2s 0.5s infinite;
/*ショートハンド(以下同) name・speed・delay・fill*/
}

line#line2{ animation: move 2s 1s infinite;}
line#line3{ animation: move 2s 1.5s infinite;}
line#line4{ animation: move 2s 2s infinite;}
line#line5{ animation: move 2s 2.5s infinite;}

@keyframes move{
0%{stroke-dashoffset: 2000;}/*開始と揃えると、0から始まる事が可能*/
50%{stroke-dashoffset: 0;}
100%{stroke-dashoffset: 2000;}
}

/*【PC】基本設定 */
.container{
  width: 100%;
  overflow: hidden;
}

/*【PC】本文の改行指示 */
.br_tb { display: none;}

/*【PC】基本設定(バックグラウンドカラー) */
.wapper_B{ overflow: hidden;}

/*【PC】【地色】左側の土台指示（外側） */
.back_l {
  width:50%;
  height: 400px;
  float:left;
}

/*【PC】【地色】左側の土台指示（外側）白 */
.back_l .innerBl{
  width:600px;
  height: 400px;
  background:#fff;
  float: right;
}

/*【PC】【地色】右側の土台指示（外側） */
.back_R {
  width:50%;
  height: 400px;
  float:left;
}
/*【PC】【地色】右側の土台指示（外側）白 */
.back_R .innerBR{
  width:600px;
  height: 400px;
  background:#fff;
  float: left;
}
.wapper_c {
  width:100%;
  position: absolute;
  top: 100vh; /* header直下へ来る指示 */
  left: 0;
}

/* コンテンツページへリンクBox 基本設定 */
.inner1 {
  max-width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}

.boxOut{ position: relative;}
.boxOut a{ cursor: pointer;}

.inner1 .boxOut{
  width: calc(100% / 3);
  height: 800px;
  float: left;
}

/*【PC】上段下段 共通 */
.boxOut .box1,.boxOut .box2{
  width: 100%;
  height: 400px;
}

/*【PC】はみ出し隠し */
.box1 {
  display: block;
  cursor: pointer;
  overflow: hidden;
}

/*【PC】.inner1 上段 アイコンﾄとテキスト天地入れ替え(icon下へ) */
.b1_1,.b1_2,.b1_3{
position:absolute;
top:400px;
left:0;
}

/*【PC】.inner1 上段 アイコンﾄとテキスト天地入れ替え(text上へ)  */
.b2_1,.b2_2,.b2_3{
position:absolute;
top:0;
left:0;
}

/*【PC】.inner1 下段 アイコンﾄとテキスト天地入れ替えしない。iconの位置を調整するために指示は入れる */
.b3_1,.b3_2,.b3_3{
position:absolute;
top:0;
left:0;
}

/*【PC】.inner1 下段 アイコンﾄとテキスト天地入れ替えしない  */
.b4_1,.b4_2,.b4_3{
position:absolute;
top:400px;
left:0;
}

/*【PC】【地色】text 一番上の段 */
.b2_1{  background:rgba(255, 156, 28, 0.7);}
.b2_2{  background:rgba(255, 156, 28, 0.8);}
.b2_3{  background:rgba(255, 156, 28, 0.9);}

.back_l:nth-child(1){ background:rgba(255, 156, 28, 0.6);}
.back_R:nth-child(2){ background:rgba(255, 156, 28, 1.0);}

/*【PC】【地色】icon 上から2番目の段 */
.b1_1{ background:rgba(255, 178, 28, 0.7);}
.b1_2{ background:rgba(255, 178, 28, 0.8);}
.b1_3{ background:rgba(255, 178, 28, 0.9);}

.back_l:nth-child(3){ background:rgba(255, 178, 28, 0.6);}
.back_R:nth-child(4){ background:rgba(255, 178, 28, 1.0);}

/*【PC】【地色】icon 上から3番目の段 */
.b3_1{ background:rgba(255, 204, 50, 0.7);}
.b3_2{ background:rgba(255, 204, 50, 0.75);}
.b3_3{ background:rgba(255, 204, 50, 0.85);}

.back_l:nth-child(5){ background:rgba(255, 204, 50, 0.6);}
.back_R:nth-child(6){ background:rgba(255, 204, 50, 1.0);}

/*【PC】【地色】text 一番下の段 */
.b4_1{ background:rgba(255, 215, 28, 0.65);}
.b4_2{ background:rgba(255, 215, 28, 0.75);}
.b4_3{ background:rgba(255, 215, 28, 0.85);}

.back_l:nth-child(7){ background:rgba(255, 215, 28, 0.55);}
.back_R:nth-child(8){ background:rgba(255, 215, 28, 1.0);}


/*【PC】コンテンツ紹介部分のtext */
.b2_1,.b2_2,.b2_3,.b4_1,.b4_2,.b4_3{
  width:90%;
  height:95%;
  text-align: center; 
}

/*【PC】h2の和文字の色を見えなくする対処を行う */
.boxOut h2{
  margin: 11px 0;
  font-size: 12px;
  transition: 1s;
  color:rgba(244,244,244,0.0);
  line-height: 270%;
}

/*【PC】h2の英文字部分はspanで包んで処理を行う */
.span {
  font-size:50px;
  font-family: 'Squada One', cursive; /* google font */
  color:rgba(244,244,244,0.0);
  transition: 1s;
}

.boxOut a{ display: block;}
.boxOut a:hover .span{ color:#222;}
.boxOut a:hover h2{ color:#222;}

/*【PC】中身コンテンツの共通指示 */
.boxOut p {
  width: 70%;
  height: 80%;
  line-height: 200%;
  margin: 0 auto;
  text-align: left;
  color:rgba(244,244,244,0.0);
  transition: 1s;
}

.more {
  display: block;
  padding: 5px 20px 6px;
  background: rgba(244,244,244,0.0);
  text-align: center;
  color:rgba(244,244,244,0.0);
  margin: 15px auto 0;
}
.boxOut a:hover p{ color:#222;}
.boxOut a:hover .more{
  background: #222;
  color:#fff;
}

/*【PC】アイコンﾄとテキスト天地入れ替え ここまで*/
/*【PC】アイコンboxサイズ 共通 */
.box1 .boxin{
  display: block;
  width: 100%;
  height: 100%;
}

.boxSenter{
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

/* アイコン画像差し替え 個別 */
.boxin1{
  width: 230px;
  height: 230px;
  background:url(../img/icon_pc1.svg)no-repeat center/contain;
  position: absolute;
  top: 85px;
  left: 50px;
}

.boxin1_2 {
  width: 80px;
  height: 80px;
  background:url(../img/icon_pc2.svg)no-repeat center/contain;
  position: absolute;
  top: 225px;
  left: 290px;
  animation-name: mobile;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes mobile{
0% {transform: rotate(0deg);}
10% {transform: rotate(20deg);}
20% {transform: rotate(0deg);}
30% {transform: rotate(-20deg);}
40% {transform: rotate(0deg);}
50% {transform: rotate(20deg);}
60% {transform: rotate(0deg);}
70% {transform: rotate(-20deg);}
80% {transform: rotate(0deg);}
90% {transform: rotate(20deg);}
100% {transform: rotate(0deg);}
}

.boxin1_3 {
  width: 150px;
  height: 150px;
  background:url(../img/icon_work.svg)no-repeat center/contain;
  position: absolute;
  top: 106px;
  left: 89px;
  animation-name: work;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes work{
0% {transform: rotate(0deg);opacity: 0;}
20% {transform: rotate(0deg);opacity: 1;}
80% {transform: rotate(-15deg);opacity: 1;}
100% {transform: rotate(0deg);opacity: 0;}
}

/*【PC】about-me */
.b1_2 .boxin2{
  background:url(../img/icon_about.svg)no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  animation-name:about-me;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes about-me{
0% {transform: rotate(0deg);}
20% {transform: rotate(40deg);}
80% {transform: rotate(-40deg) ;}
100% {transform: rotate(0deg);}
}

/*【PC】練習サイトのアニメーション */
.boxin3{
  width: 230px;
  height: 230px;
  background:url(../img/icon_pc1.svg)no-repeat center/contain;
  position: absolute;
  top: 85px;
  left: 50px;
  animation-name: PC3;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.boxin3_2 {
  width: 80px;
  height: 80px;
  background:url(../img/icon_pc2.svg)no-repeat center/contain;
  position: absolute;
  top: 225px;
  left: 290px;
  animation-name: mobaile_2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes mobaile_2{
0% {transform: translate(0,0)}
50% {transform: translate(0,-200px)}
100% {transform: translate(0,0)}
}

.boxin3_3 {
  width: 150px;
  height: 150px;
  background:url(../img/icon_PS.svg)no-repeat center/contain;
  position: absolute;
  top: 108px;
  left: 89px;
  animation-name: PS;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes PS{
0% {transform: scale(1,1);opacity: 0;}
20% {transform: scale(1,1);opacity: 1;}
50% {transform: scale(1.2,1.2);opacity: 1;}
80% {transform: scale(1,1);opacity: 1;}
100% {transform: scale(1,1);opacity: 0;}
}

/*【PC】ワードプレスの画像とアニメーション */
.box1 .boxin4{
  width:110px;
  height:110px;
  background:url(../img/wordpress2.svg)no-repeat center/contain;
  position: absolute;
  top: 129px;
  left: 148px;
  animation-name: wp;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes wp{
0% {transform: rotate(0deg) scale(1,1);}
50% {transform: rotate(360deg) scale(2.5,2.5);}
100% {transform: rotate(0deg) scale(1,1);}
}

.box1 .boxin4_2 {
  width:265px;
  height:265px;
  background:url(../img/icon_pc1.svg)no-repeat center/contain;
  position: absolute;
  top: 72px;
  left: 70px;
  animation-name: wp2;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes wp2{
0% {transform: scale(1,1); opacity: 1;}
25% {transform: scale(1.2,1.2); opacity: 0;}
75% {transform: scale(1.2,1.2); opacity: 0;}
100% {transform: scale(1,1);opacity: 1;}
}

/*【PC】バナーの画像とアニメーション */
.box1 .boxin5{
  width:250px;
  height:250px;
  background:url(../img/icon_b_waku.svg)no-repeat center/contain;
  position: absolute;
  top: 80px;
  left: 75px; 
}

.box1 .boxin5_2{
  width:120px;
  height:120px;
  background:url(../img/icon_banner.svg)no-repeat center/contain;
  position: absolute;
  top: 190px;
  left: 110px;
  animation-name: B2;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes B2{
0% {transform: rotate(0deg); }
50% {transform: rotate(15deg); }
100% {transform: rotate(0deg);}
}

.box1 .boxin5_3{
  width:300px;
  height:300px;
  background:url(../img/icon_b_Bi.svg)no-repeat center/contain;
  position: absolute;
  top: 20px;
  left: 68px;
  animation-name: B3;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes B3{
0% {transform: scale(0.5,0.5) rotate(0deg) translate(0,0); }
50% {transform: scale(1.2,1.2) rotate(10deg) translate(0,-25px); }
100% {transform: scale(0.5,0.5) rotate(0deg) translate(0,0);}
}

/*【PC】お気に入りサイトのアニメーション */
.box1 .boxin6{
  width:150px;
  height:150px;
  background:url(../img/hart.svg)no-repeat center/contain;
  position: absolute;
  top: 130px;
  left: 130px;
  animation-name: hart;
  animation-duration: 2s;
  animation-iteration-count: infinite;
/* animation-fill-mode:#222; */
}

@keyframes hart{
0% {transform: scale(1,1); /* fill: #222; */}
50% {transform: scale(1.5,1.5);/*  fill: indianred; */ }
100% {transform: scale(1,1); /* fill: #222; */ }
}

/*【PC】Boxのhover */
.box1:hover{
  background: #FFB21C;
  transition: 1.0s;
}


/*【PC】footer上の空ボックス */
.KaraBox{
  display: none;
}

/*【PC】footer */
footer{
  width: 100%;
  padding: 50px 0;
  background: #ff871c;
  text-align: center;
  font-size: 12px;
}

/*---------- 【実績紹介ページ】 ----------*/
#works {  background: #ff871c;}
#works h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -50px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

 #works h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

/*---------- 【自己紹介ページ】 ----------*/
#about header{  height: 1080px;}
#about .wapper_c {  top: 1080px; /* header直下へ来る指示 */}

#about h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#about h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

.about_i {
  width: 160px;
  height: auto;
  margin: 0px auto;
  padding: 120px 0 10px;
}

.about_t_h2{
  text-align: center;
  font-size: 12px;
}

.about_t_h2 span{
  font-size: 70px;
  margin-bottom: 25px;
  font-family: 'Squada One', cursive;
}

#about .header_about{
  width: 100%;
  height: auto;
  text-align: center;
}

#about .header_about p{
  line-height: 300%;
  margin: 30px 0;
}

.about_t_h3{
  font-size: 14px;
  margin-top: 70px;
}
.about_skill{  font-size: 14px;}
#about .hd_i{  margin-top: 90px;}

/* 【PC_about】自己紹介 写真 */
#about .b1_1{  background: url(../img/About_aya.jpg)no-repeat center/cover;}
#about .b1_2{  background: url(../img/About_Tp.jpg)no-repeat center/cover;}
#about .b1_3{  background: url(../img/About_KIRIN.jpg)no-repeat center/cover;}
#about .b3_1{  background: url(../img/About_PC.jpg)no-repeat center/cover;}
#about .b3_2{  background: url(../img/About_camera.jpg)no-repeat center/cover;}
#about .b3_3{  background: url(../img/About_Business.jpg)no-repeat center/cover;}

/*【PC】h2の和文字の色を見えなくする対処を行う */
#about .boxOut h2{
  margin: 55px 0 25px 0;
  font-size: 22px;
  transition: 1s;
  color:#222;
  line-height: 220%;
  font-weight: lighter;
}

/*【PC】中身コンテンツの共通指示 */
#about .boxOut p {
  width: 98%;
  height: 50%;
  line-height: 260%;
  margin: 0 auto;
  text-align: center;
  color:#222;
}

/*---------- 【実績紹介ページ】 ----------*/
#Works {  background: #FF871C}
#Works header{  height: 600px;}
#Works .wapper_c {  top: 600px; /* header直下へ来る指示 */}

#Works h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Works h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Works .about_i {  width: 180px;}

#Works .header_works {
  width: 100%;
  height: auto;
  text-align: center;
}

#Works .header_works p{
  line-height: 200%;
  margin: 30px 0;
}

#Works .container{ 
  width: 100%;
  height: auto;
  background: #ff871c;
}

.SiteBox {  
  width: 50%;
  margin: 0 auto;
}

.SiteBox img{
  margin: 0 auto;
  width: 100%;
}

/* リンク開始後aを付ける#Works .more a {*/
#Works .more {
  display: block;
  background: #222;
  color: #fff;
  width: 200px;
  height: 40px;
  line-height: 40px;
  transition: 0.8s;
  margin: 0 auto;
}
/* リンク開始後aを付ける #Works .more a:hover */
#Works .more :hover {
  background: #000;
  color: #ff871c;
}

/*---------- 【デザインSampleページ】 ----------*/
#practice header{ height: 800px;}
#practice .wapper_c {  top: 800px; /* header直下へ来る指示 */}

#practice h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#practice h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#practice .about_i {  width: 180px;}

#practice .header_Pra{
  width: 100%;
  height: auto;
  text-align: center;
}

#practice .header_Pra p{
  line-height: 300%;
  margin: 30px 0;
}

#practice .hd_i{  margin-top: 90px;}
#practice .boxOut a{ cursor: pointer;}


/* 【PC_practice】練習サイトの写真 */
#practice .b1_1{  
background: url(../img/Web_B.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();overflow: hidden;}
#practice .b1_1:hover{  filter:none;}
#practice .boxOut:hover .b1_1{  filter:none;}

#practice .b1_2{  background: url(../img/Web_15th.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();}
#practice .b1_2:hover{  filter:none;}
#practice .boxOut:hover .b1_2{  filter:none;}

#practice .b1_3{  background: url(../img/Web_Fitness.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();}
#practice .b1_3:hover{  filter:none;}
#practice .boxOut:hover .b1_3{  filter:none;}

#practice .b3_1{  background: url(../img/Web_VUN.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();}
#practice .b3_1:hover{  filter:none;}
#practice .boxOut:hover .b3_1{  filter:none;}

#practice .b3_2{  background: url(../img/Web_company.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();}
#practice .b3_2:hover{  filter:none;}
#practice .boxOut:hover .b3_2{  filter:none;}

#practice .b3_3{  background: url(../img/Web_ICKUP_STREAM.png)no-repeat center/cover;transition: 0.5s;filter: grayscale();}
#practice .b3_3:hover{  filter:none;}
#practice .boxOut:hover .b3_3{  filter:none;}

/*【PC】h2の和文字の色を見えなくする対処を行う */
#practice .boxOut h2{
  margin: 55px 0 25px 0;
  font-size: 22px;
  transition: 1s;
  color:#222;
  line-height: 220%;
  font-weight: lighter;
}

/*【PC】中身コンテンツの共通指示 */
#practice .boxOut p {
  width: 70%;
  height: 50%;
  line-height: 200%;
  margin: 0 auto;
  text-align: center;
  color:#222;
}

#practice .more{
  display: block;
  background: #222;
  color: #fff;
  margin-top: 30px;
  transition: 0.5s;
}

#practice .boxOut:hover .box2{
  background: #ff871c;
  transition: 1.5s;
}

#practice .boxOut:hover .more{
  background: #000;
  color: #ff871c;
}

/*---------- 【PC／Wordpress】 ----------*/
#Wordp header{  height: 800px;}
#Wordp .wapper_c {  top: 800px; /* header直下へ来る指示 */}

#Wordp h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Wordp h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Wordp .about_i {  width: 140px;}

#Wordp .header_Wordp {
  width: 100%;
  height: auto;
  text-align: center;
}

#Wordp .header_Wordp p{
  line-height: 300%;
  margin: 30px 0;
}

#Wordp .hd_i{  margin-top: 90px;}
#Wordp .boxOut a{ cursor: pointer;}

/* 【PC_Wordpress】サイト 写真 */
#Wordp .b1_1{  background: url(../img/Wordp_Travel_S.png)no-repeat center/cover;;transition: 0.5s;filter: grayscale();}
#Wordp .b1_1:hover{  filter:none;}
#Wordp .boxOut:hover .b1_1{  filter:none;}
#Wordp .b1_2{  background:rgba(255, 178, 28, 0.8);}
#Wordp .b1_3{  background:rgba(255, 178, 28, 0.9);}
#Wordp .b3_1{  background:rgba(255, 204, 50, 0.7);}
#Wordp .b3_2{  background:rgba(255, 204, 50, 0.75);}
#Wordp .b3_3{  background:rgba(255, 204, 50, 0.85);} 

/*【PC】h2の和文字の色を見えなくする対処を行う */
#Wordp .boxOut h2{
  margin: 55px 0 25px 0;
  font-size: 22px;
  transition: 1s;
  color:#222;
  line-height: 220%;
  font-weight: lighter;
}

/*【PC】中身コンテンツの共通指示 */
#Wordp .boxOut p {
  width: 70%;
  height: 50%;
  line-height: 200%;
  margin: 0 auto;
  text-align: center;
  color:#222;
}

#Wordp .more{
  display: block;
  background: #222;
  color: #fff;
  margin-top: 30px;
}

#Wordp .boxOut:hover .box2{
  background: #ff871c;
  transition: 1.5s;
}

#Wordp .boxOut:hover .more{
  background: #000;
  color: #ff871c;
}

/*---------- 【PC／banner】 ----------*/
#banner {  background: #FF871C}
#banner header{  height: 700px;}
#banner .wapper_c {  top: 700px; /* header直下へ来る指示 */}

#banner h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#banner h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#banner .about_i {  width: 140px;}

#banner .header_Love {
  width: 100%;
  height: auto;
  text-align: center;
}

#banner .header_Love p{
  line-height: 300%;
  margin: 30px 0;
}

/* バナー のページはbody全体に共通カラー */
#banner .container{ 
  width: 90%;
  height: auto;
  margin: 0 auto;
}

/* バナー コンテンツ */
.banner_1{
  width: 100%;
  height: auto;
  margin: 0 auto 50px;
}

#banner .container h2{
  padding: 10px;
  background: #111;
  color:#eee;
  text-align: center;
  font-size: 18px;
  font-weight: lighter;
  margin-bottom: 50px;
  letter-spacing: 120%;
}

/* display: flex;を使用した横並び */
.warp2{
  width: 100%;
  display: flex;
  flex-wrap:wrap; 
  margin-bottom: 50px;
}

.Ba_box{
  width:calc(( 100% / 5 ) - 20px );
  height: auto;
  margin: 0 auto 20px;

}

.Ba_img {
  width: 100%;
  text-align: center;
}


/* アニメーション バナー */
.box {
  width:calc(( 100% / 5 ) - 20px );
  height: auto;
  margin: 0 auto 22px;
  background: #8700ce;
  animation-name:dg-color;  /*数字以外の始まりで名前を決める*/
  animation-duration:10s;   /*始まってから終わるまでの秒数 2は秒*/
  animation-iteration-count:infinite; /*設定しないとカウント１ infiniteをするとループ  例:3＝3と指示*/
}

/*bodyの外に指示を書く（animation-nameを書く）スタート0％ ゴールが100%*/
@keyframes dg-color{
0% { background: #8700ce;}
25% { background: #00ce57;}
50% { background: #005fce;}
25% { background: #7fce00;}
100% { background: #8700ce; /*ループの場合は0%と同じにする*/}
}

/* アニメーション バナー */
.box22 {
  width:calc(( 100% / 5 ) - 20px );
  height: auto;
  margin: 0 auto 22px;
  background: #8700ce;
  animation-name:dg-color2;  /*数字以外の始まりで名前を決める*/
  animation-duration:10s;   /*始まってから終わるまでの秒数 2は秒*/
  animation-iteration-count:infinite; /*設定しないとカウント１ infiniteをするとループ  例:3＝3と指示*/
}

/*bodyの外に指示を書く（animation-nameを書く）スタート0％ ゴールが100%*/
@keyframes dg-color2{
0% { background: #ffff3f;}
25% { background: #6afda8;}
50% { background: #8dc2ff;}
25% { background: #c2ff60;}
100% { background: #da9afc; /*ループの場合は0%と同じにする*/}
}

/*---------- 【PC／Live site】 ----------*/
#Love {  background: #FF871C}
#Love header{  height: 800px;}
#Love .wapper_c {  top: 800px; /* header直下へ来る指示 */}

#Love h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Love h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#Love .about_i {  width: 120px;}

#Love .header_Love {
  width: 100%;
  height: auto;
  text-align: center;
}

#Love .header_Love p{
  line-height: 300%;
  margin: 30px 0;
}

#Love .container{ 
  width: 100%;
  height: auto;
  background: #ff871c;
}

.SiteBox {  
  width: 50%;
  margin: 0 auto;
}

.SiteBox img{
  margin: 0 auto;
  width: 100%;
}

#Love .more a{
  display: block;
  background: #222;
  color: #fff;
  width: 200px;
  height: 40px;
  line-height: 40px;
  transition: 0.8s;
  margin: 0 auto;
}

#Love .more a:hover {
  background: #000;
  color: #ff871c;
}

/*---------- 【PC／contact】 ----------*/
#contact {  background: #FF871C}
#contact header{  height: 1000px;}
#contact .wapper_c {  top: 1000px; /* header直下へ来る指示 */}

#contact h1 img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#contact h1.fixed {
  position: fixed;
  top: 0px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#contact .about_i {
  width: 150px;
  padding: 110px 0 10px; 
  /* オリジナル：padding: 120px 0 10px;*/
  transition: 2s;
  display: block;
  cursor: pointer;
}

#contact .about_i:hover{
  animation: 2s; 
  transform: translate(1000px,-500px);
}

#contact .header_contact {
  width: 100%;
  height: auto;
  text-align: center;
}

#contact .header_contact p{
  line-height: 300%;
  margin: 50px 0;
}

#contact .container{ 
  width: 100%;
  height: auto;
  background: #ff871c;
}

.Con_mail a{
  font-size: 25px;
  text-decoration: underline;
  padding: 50px 0 65px;
}

#contact .Con_mail a:hover{
  color: #FFD965;
  transition: 0.5s;
}

#contact .fa-envelope-o{
  font-size: 32px;
  margin-right: 10px;
}

#contact #con_detail {
  font-size: 14px;
  line-height: 250%;
  margin-bottom: 50px;
}

#contact .info{
  width: 550px;
  border: 1px solid #444;
  padding: 30px 40px;
  margin: 20px auto 300px;
}

#contact .info li{
  font-size: 14px;
  text-align: left;
  line-height: 30px;
}

#contact .fa-circle{
  color:#222;
  font-size: 12px;
  margin-right: 5px;
}

/*---------- 【tablet】 ----------*/
@media screen and (max-width: 1199px){

header{
  width: 100%;
  height: 580px; /* wapper_cと揃える */
}

h1 img {  
  width: 450px;
  position: absolute;
  top: -220px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
 
h1.fixed {
  position: fixed;
  top: 77px;
  left: 20px;
  z-index: 1000;
  line-height: 1vh;
  margin: 0;
}

#header_bar.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background:rgba(255,135,28,1.0);
  z-index: 99;
}

.header_P{
  width: 100%;
  padding: 50px 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

.header_P p{
  line-height: 250%;
  text-align: center;
}

.header_b{
  width: 100%;
  height: 100vh;
}

/* headr svgライン */
.header_b svg{
  width: 100%;
  height: 100vh;
  position: relative;
  top: -400px;
  left: 0;
}

/* 【tablet】headerコピー Try to touch の隠し指示 */
.tb_sp_lost{ display: none;}

nav {  display: none;}
.menu{
  width: 100%;
  height: 80px;
  position: absolute;
  top: 80px;
  right: 0;
  overflow: visible;
  z-index: 99998;
}

.menu ul{
  width: 100%;
  position:fixed;
  top: 80px;
  right: 0;
  background: #222;
  padding: 40px 0;
}

.menu li {
  float: none;
  width: 60%;
  line-height: 50px;
  margin: 0 auto;
  font-size: 14px;
  background: #222;
  text-align: left;
  border-bottom: 1px solid #444;
}

.menu li:last-child{
  border-bottom: none;
}

nav li a{  color:#fff;}

.menu li a:hover{
  transform: translate(0,0);
}

/* 【tablet】navのfixed */
nav.fixed{
  position:static;
  display: none;
}

/* 【tablet】レスポンシブのボタン */
#Btn{
  display: block;
  width: 130px;
  height: 40px;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 2px solid #222;
  border-radius: 5px;
  z-index: 1003;
}

#Btn.fixed{
  position: fixed;
  top: 20px;
  right: 20px;
}

#Btn p{
  width: 150px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -20px;
  margin: auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.icon{
  display: block;
  /*【tablet】下向き三角記述(下記4行) */
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 13px solid #222;
  position: absolute;
  top: 12px;
  bottom: 0;
  right: 0;
  left: 85px;
  margin: auto;
  transition: 0.1s;
}

.icon.menui{
  /* 下向き三角記述(下記4行) */
  border: 10px solid transparent;
  border-bottom: 13px solid #222;
  position: absolute;
  top: -12px;
  bottom: 0;
  right: 0;
  left: 85px;
  margin: auto;
}

/* header SVGアニメ確認 */
.header_b{
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

/*【tablet】基本設定 */
/*【tablet】本文の改行指示 */
.br_tb {
  display: block;
}

.wapper_c {
  position: absolute;
  top: 580px; /* header直下へ来る指示 */
  left: 0;
}

/*【tablet】コンテンツページへリンクBox 基本設定 */
.inner1 { max-width: 100%;}
.boxOut{ position: relative;}
.inner1 .boxOut{ width: calc(100% / 2); /* 変更 */}

/*【tablet】上段下段 共通 */
/*【tablet】はみ出し隠し */
/*【tablet】.inner1 アイコンﾄとテキスト天地入れ替え(icon下へ) */
.b1_1,.b1_2,.b1_3{
position:absolute;
top:0px; /* 変更 */
left:0;
}

/*【tablet】.inner1 アイコンﾄとテキスト天地入れ替え(text上へ)  */
.b2_1,.b2_2,.b2_3{
position:absolute;
top:400px; /* 変更 */
left:0;
}

.boxOut h2{
  margin: 5px 0 8px 0;
  color:#222;
  line-height: 180%;
}

/*【tablet】h2の英文字部分はspanで包んで処理を行う */
.span { 
  color:#222;
  line-height: 90%;
}

/*【tablet】中身コンテンツの共通指示 */
.boxOut p { color:#222;}

.more{
  font-size: 25px; /* 変更 */
  padding: 10px 20px 15px; /* 変更 */
  background: #222; /* 変更 */
  color: #fff; /* 変更 */
}

/*【tablet】アイコンﾄとテキスト天地入れ替え ここまで*/
/*【tablet】アイコンboxサイズ 共通 */
/*【tablet】アイコンのwidth／heightは情報を残さないとサイズが崩れる */
.box1 .boxin{   
  display: block;
  width: 100%;
  height: 100%;
}

/* アイコン画像差し替え 個別 */
.boxin1{
  width: 230px;
  height: 230px;
}

.boxin1_2 {
  width: 80px;
  height: 80px;
}

.boxin1_3 {
  width: 150px;
  height: 150px;
}

/*【tablet】about-me */

/*【tablet】練習サイトのアニメーション */
.boxin3{
  width: 230px;
  height: 230px;
}

.boxin3_2 {
  width: 80px;
  height: 80px;
}

.boxin3_3 {
  width: 150px;
  height: 150px;
}

/*【tablet】ワードプレスの画像とアニメーション */
.box1 .boxin4{
  width:110px;
  height:110px;
}

.box1 .boxin4_2 {
  width:265px;
  height:265px;
}

/*【tablet】バナーの画像とアニメーション */
.box1 .boxin5{
  width:250px;
  height:250px;
}

.box1 .boxin5_2{
  width:120px;
  height:120px;
}

.box1 .boxin5_3{
  width:300px;
  height:300px;
}

/*【tablet】お気に入りサイトのアニメーション */
.box1 .boxin6{
  width:150px;
  height:150px;
}

/*【tablet】footer上の空ボックス */
.KaraBox{
  display: block;
  width:100%;
  height:800px;
}

/*【PC】footer */
footer{ padding: 40px 0;}

/*---------- 【tablet／実績紹介ページ】 ----------*/
.SiteBox {  
  width: 70%;
  margin: 0 auto;
}

#Works h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}

#Works .more {
  display: block;
  background: #222;
  color: #fff;
  width: 80%;
  height: 40px;
  line-height: 43px;
  transition: 0.8s;
  margin: 0 auto;
}

#Works .more:hover {
  background: #000;
  color: #ff871c;
}


/*---------- 【tablet／自己紹介ページ】 ----------*/

#about header{ height: 950px;;}

#about .wapper_c { top: 950px; /* header直下へ来る指示 */}

#about h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}

#about .header_about p{
  line-height: 260%;
  margin: 30px 0;
}
.about_t_h3{ margin-top: 40px;}
#about .hd_i{  margin-top: 20px;}

/*---------- 【tablet／サイトサンプル】 ----------*/

#practice header{ height: 650px;}
#practice .wapper_c { top: 650px; /* header直下へ来る指示 */}

#practice  h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}


/*---------- 【tablet／Wordpress】 ----------*/

#Wordp header{ height: 650px;}
#Wordp .wapper_c { top: 650px; /* header直下へ来る指示 */}

#Wordp h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}

/*---------- 【tablet／Bunner】 ----------*/

/* display: flex;を使用した横並び */
.Ba_box{  width:calc(( 100% / 3 ) - 20px );}

#banner h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}


/*---------- 【tablet／Live site】 ----------*/

.SiteBox {  
  width: 70%;
  margin: 0 auto;
}

#Love h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}

#Love .more {
  display: block;
  background: #222;
  color: #fff;
  width: 80%;
  height: 40px;
  line-height: 43px;
  transition: 0.8s;
  margin: 0 auto;
}

#Love .more:hover {
  background: #000;
  color: #ff871c;
}

/*---------- 【tablet／contact】 ----------*/
#contact h1.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
}

}

/*---------- 【mobile】 ----------*/
@media screen and (max-width: 767px){
header{
  width: 100%;
  height: 500px;  /*570px.wapper_c に合わせる */
}

h1 img {  
  width: 160px;
  position: absolute;
  top: 65px;
  bottom: 0;
  left: 30px;
  right: 0;
  margin: 0;
}

h1.fixed {
  width: 130px;
  height: auto;
  position: fixed;
  top: -49px; /*h1 imgの位置で調整必須*/
  left: -15px;
}

.about_t_h2 span{
  font-size: 50px;
  margin-bottom: 25px;
}

.header_P{
  width: 100%;
  padding: 0;
}

.header_P p{
  font-size: 15px;
  line-height: 200%;
  text-align: left; /* 変更 */
  margin: 30px;
}

.header_b{
  width: 100%;
  height: 100vh;
}

/* headr svgライン */
.header_b svg{
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
}

#header_bar.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background:rgba(255,135,28,1.0);
  z-index: 99;
}

/* 【mobile】レスポンシブのボタン */
#Btn p{  font-size: 15px;}
/* レスポンシブのボタン */
#Btn{
  display: block;
  width: 110px;
  position: absolute;
  top: 10px;
  right: 10px;
}

#Btn.fixed{
  display: block;
  width: 110px;
  position: fixed;
  top: 10px;
  right: 10px;
}

#Btn p{
  width: 110px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -25px;
  margin: auto;
}

/*【mobile】mobile時改行をやめる指示*/
.br_sp { display: none;}
.br_tb { display: none;}

/* 【mobile】nav */
nav {
  display: none;
}
.menu{
  width: 100%;
  height: 80px;
  position: absolute;
  top: 65px;
  right: 0;
  overflow: visible;
  z-index: 99998;
}

.menu ul{
  width: 100%;
  position:fixed;
  top: 65px;
  right: 0;
  padding: 20px 0;
}

.menu li {
  width: 70%;
  line-height: 42px;
  font-size: 14px;
}

nav li a{  color:#fff;}

.menu li a:hover{
  transform: translate(0,0);
}

#page-top a{
  position: fixed;
  bottom: 10px;
  right: 10px;
}

/*【mobile】基本設定(バックグラウンドカラー) */
.wapper_B{ 
  overflow: visible;
  display: none;
}


/*【mobile】【地色】左側の土台指示（外側） */
.back_l {
  width:0;
  height: 0;
  float:none;
}
/*【mobile】【地色】左側の土台指示（外側）白 */
.back_l .innerBl{
  width:0;
  height: 0;
  float:none;
}

/*【mobile】【地色】右側の土台指示（外側） */
.back_R {
  width:0;
  height: 0;
  float:none;
}
/*【mobile】【地色】右側の土台指示（外側）白 */
.back_R .innerBR{
  width:0;
  height: 0;
  float:none;
}

.wapper_c {
  width:100%;
  height: auto;
  position: absolute;
  top: 500px; /* header直下へ来る指示 */
  left: 0;
}

/*【mobile】.inner1 アイコンﾄとテキスト天地入れ替え(text上へ)  */
.b2_1,.b2_2,.b2_3{
position:absolute;
top:350px; /* 変更 */
left:0;
}

.b4_1,.b4_2,.b4_3{
position:absolute;
top:350px; /* 変更 */
left:0;
}

/*いまのところ変更なし*/
.boxSenter{
  width: 100%;
  height: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}


/*【mobile】コンテンツページへリンクBox 基本設定 */
.inner1{
  overflow: visible;
  margin: 0 auto;
}

.boxOut{ position: relative;}

.inner1 .boxOut{
  width: calc(100% / 1);
  height: 700px;/*  height: 800px;*/
  float: none
}

/*【mobile】アイコン画像差し替え 個別 */
.boxin1{
  width: 250px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
/*【mobile】スマホは消す */
.boxin1_2 {  display: none;}

.boxin1_3 {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}


/*【mobile】練習サイトのアニメーション */
.boxin3{
  width: 250px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.boxin3_2 {  display: none;}

.boxin3_3 {
  width: 150px;
  height: 150px;
  position: absolute;
  top: -35px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/*【mobile】ワードプレスの画像とアニメーション */
.box1 .boxin4{
  width:110px;
  height:110px;
  position: absolute;
  top: -40px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.box1 .boxin4_2 {
  width:265px;
  height:265px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/*【mobile】バナーの画像とアニメーション */
.box1 .boxin5{
  width:270px;
  height:270px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.box1 .boxin5_2{
  width:100px;
  height:100px;
  position: absolute;
  top: 190px;
  left: 115px;
}

.box1 .boxin5_3{
  width:300px;
  height:300px;
  position: absolute;
  top: 20px;
  left: 55px;
}

/*【mobile】お気に入りサイトのアニメーション */
.box1 .boxin6{
  width:150px;
  height:150px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/*【mobile】上段下段 共通 */
.boxOut .box1,.boxOut .box2{
  width: 100%;
  height: 350px; /*400*/
}

/*【PC】h2の和文字 */
.boxOut h2{
  margin: 10px 0;
  font-size: 12px;
  line-height: 100%;
}

/*【PC】h2の英文字部分はspanで包んで処理を行う */
.span {
  font-size: 45px;
}

/*【mobile】中身コンテンツの共通指示 */
.boxOut p {
  width: 85%;
  height: auto;
  line-height: 180%;
  font-size:15px;
  margin: 6px auto;
  text-align: left;
}

.more {
  margin: 7px auto 0;
}

/*【mobile】footer上の空ボックス */
.KaraBox {
  display: block;
  width:100%;
  height:4200px;
}

/*【PC】footer */
footer { padding: 30px 0;}

/*---------- 【mobile／実績紹介ページ】 ----------*/
#Works header{
  height: auto;
  padding: 20px 20px 0;
  box-sizing: border-box;
}

#Works .wapper_c {  top: auto; /* header直下へ来る指示 */}

#Works h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#Works h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#Works .about_i {  padding: 100px 0 10px;}
#Works .about_t_h3{  text-align: center;}

#Works .header_works p{
  font-size: 15px;
  line-height: 200%;
  margin: 30px 0 10px;
  text-align: left;
}

/*【mobile】中身コンテンツの共通指示 */
#Works .boxOut p {  width: 80%;}

.about_t_h3{ margin-top: 30px;}
#Works .hd_i{  margin-top: 15px;}

#Works .tb_sp_lost{
  display: block;
  line-height: 100%;
  text-align: center;
}

.SiteBox {  
  width: 90%;
  margin: 0 auto;
}


/*---------- 【mobile／自己紹介ページ】 ----------*/
#about header{
  height: 1000px;
  background: #ff871c;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

#about .wapper_c {
  position: absolute;
  top: 1000px; /* header直下へ来る指示 */
  left: 0;
}

#about h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#about h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#about .about_i {  padding: 100px 0 10px;}

#about .header_about p{
  font-size: 15px;
  line-height: 200%;
  margin: 30px 0;
  text-align: left;
}

.about_t_h3{ margin-top: 30px;}
#about .hd_i{  margin-top: 15px;}

#about .tb_sp_lost{
  display: block;
  line-height: 100%;
  text-align: center;
}

/*【PC】h2の和文字の色を見えなくする対処を行う */
#about .boxOut h2{
  margin: 48px 0 25px 0;
  font-size: 22px;
  line-height: 200%;
}

/*【mobile】中身コンテンツの共通指示 */
#about .boxOut p {  line-height: 230%;}

/*---------- 【mobile／サイトサンプル】 ----------*/
#practice header{
  height: 580px;
  background: #ff871c;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

#practice .wapper_c {
  position: absolute;
  top: 580px; /* header直下へ来る指示 */
  left: 0;
}

#practice h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#practice h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#practice .about_i {  padding: 100px 0 10px;}

#practice .header_Pra p{
  font-size: 15px;
  line-height: 180%;
  margin: 30px 0;
  text-align: left;
}

/* 【mobile_practice】練習サイトの写真 */
#practice .b1_1{  filter:none;}
#practice .b1_2{  filter:none;}
#practice .b1_3{  filter:none;}
#practice .b3_1{  filter:none;}
#practice .b3_2{  filter:none;}
#practice .b3_3{  filter:none;}

/*【mobile】h2の和文字の色を見えなくする対処を行う */
#practice .boxOut h2{
  margin: 35px 0 10px 0;
  line-height: 200%;
}

/*【mobile】中身コンテンツの共通指示 */
#practice .boxOut p {
  width: 80%;
  line-height: 200%;
}

.about_t_h3{ margin-top: 30px;}
#practice .hd_i{  margin-top: 15px;}

#practice .tb_sp_lost{ display: none;}

/*---------- 【mobile／Wordpress】 ----------*/
#Wordp header{
  height: 640px;
  background: #ff871c;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

#Wordp .wapper_c {
  position: absolute;
  top: 640px; /* header直下へ来る指示 */
  left: 0;
}

#Wordp h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#Wordp h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#Wordp .about_i {  padding: 100px 0 10px;}

#Wordp .header_Wordp p{
  font-size: 15px;
  line-height: 200%;
  margin: 30px 0;
  text-align: left;
}
#Wordp .b1_1{  filter:none;}
#Wordp .b1_2{  filter:none;}
#Wordp .b1_3{  filter:none;}
#Wordp .b3_1{  filter:none;}
#Wordp .b3_2{  filter:none;}
#Wordp .b3_3{  filter:none;}

#Wordp .tb_sp_lost{
  display: block;
  line-height: 100%;
  text-align: center;
}
    
/*【mobile】h2の和文字の色を見えなくする対処を行う */
#Wordp .boxOut h2{
  margin: 35px 0 10px 0;
  line-height: 200%;
}

/*【mobile】中身コンテンツの共通指示 */
#Wordp .boxOut p {
  width: 80%;
  line-height: 200%;
}

.about_t_h3{ margin-top: 30px;}
#Wordp .hd_i{  margin-top: 15px;}

#Wordp .tb_sp_lost{ display: none;}

/*---------- 【mobile／Bunner】 ----------*/

#banner header{
  height: auto;
  padding: 20px;
  box-sizing: border-box;
}

#banner h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#banner h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#banner .about_i {  padding: 100px 0 10px;}

#banner .header_Love p{
  font-size: 15px;
  line-height: 200%;
  margin: 30px 0;
  text-align: left;
}

/*【mobile】中身コンテンツの共通指示 */
#banner .boxOut p {  width: 80%;}

.about_t_h3{ margin-top: 30px;}
#banner .hd_i{  margin-top: 15px;}

#banner .tb_sp_lost{
  display: block;
  line-height: 100%;
  text-align: center;
}

.SiteBox {  
  width: 80%;
  margin: 0 auto;
}

#banner .container h2{
  padding: 15px;
  text-align: left;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 150%;
}
/* display: flex;を使用した横並び */
.Ba_box{  width:calc(( 100% / 1 ) );}

/* アニメーション バナー */
.box {
  width:300px;}
    
.box22 {
  width:300px;}

/*---------- 【mobile／Live site】 ----------*/
#Love header{
  height: auto;
  padding: 20px;
  box-sizing: border-box;
}

#Love .wapper_c {  top: auto; /* header直下へ来る指示 */}
    
#Love h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#Love h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#Love .about_i {  padding: 100px 0 10px;}

#Love .header_Love p{
  font-size: 15px;
  line-height: 200%;
  margin: 30px 0 10px;
  text-align: left;
}

/*【mobile】中身コンテンツの共通指示 */
#Love .boxOut p {  width: 80%;}

.about_t_h3{ margin-top: 30px;}
#Love .hd_i{  margin-top: 15px;}

#Love .tb_sp_lost{
  display: block;
  line-height: 100%;
  text-align: center;
}

.SiteBox {  
  width: 90%;
  margin: 0 auto;
}

/*---------- 【mobile／contact】 ----------*/
#contact header{
  height: auto;
  padding: 20px;
  box-sizing: border-box;
}

#contact .wapper_c {  top: auto; /* header直下へ来る指示 */}

#contact h1 img {
  width: 130px;
  height: auto;
  position: absolute;
  top: 16px;
  left: 15px;
}

#contact h1.fixed {
  position: fixed;
  top: 0px; /*h1 imgの位置で調整必須*/
  left: 0px;
}

#contact .about_i {  
  width: 150px;
  padding: 50px 0 0;}

#contact .about_i:hover{
  animation: 2s; 
  transform: translate(80px,-30px);
  opacity: 0;
}



#contact .header_contact {
  width: 100%;
  height: auto;
  text-align: center;
}

#contact .header_contact p{
  font-size: 15px;
  line-height: 200%;
  margin: 40px 0 35px;
  text-align: left;
}

#contact .container{ 
  width: 100%;
  height: auto;
  background: #ff871c;
}

.Con_mail a{
  font-size: 20px;
  text-decoration: underline;
  padding: 40px 0 55px;
  margin-right: 10px;
}

#contact .Con_mail a:hover{
  color: #FFD965;
  transition: 0.5s;
}

#contact .fa-envelope-o{
  font-size: 25px;
  margin: 0 0 10px 0;
}

#contact #con_detail {
  font-size: 14px;
  line-height: 180%;
  margin-bottom: 20px;
}

#contact .info{
  width: 100%;
  border: 1px solid #444;
  padding: 15px 25px;
  margin: 20px auto;
  box-sizing: border-box;
}

#contact .info li{
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  line-height: 180%;
}

#contact .fa-circle{
  color:#222;
  font-size: 12px;
  margin-right: 5px;
}
}