/* 修正済みCSS */
@charset "utf-8";


html,
body,
header,
footer,
main,
section,
h1,
h2,
h3,
ul,
li,
p,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #779293;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-feature-settings: "palt";
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
}

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

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: #f0faff;
}

html {
  scroll-behavior: smooth;
}


#logo img {
  transition: all 0.3s ease;
}


/* 初期状態 */
body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* フェードアウト用 */
body.fade-out {
  opacity: 0;
}





/* 中央揃え */
.loading-content {
  text-align: center;
}

/* 画像を回転させる */
.loading-image {
  width: 100px;
  height: 100px;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loading文字のアニメーション */
.loading-text {
  font-size: 20px;
  margin-top: 20px;
  font-family: monospace;
  color: #32d2d5;
  letter-spacing: 2px;
}


.hamburger,
.sp-nav {
    display: none;
}

.header {
    position: relative;
    margin: 0 auto;
    z-index: 1000;
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 2.77%;
    padding-right: 6.94%;
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;

}

.logo {
  top:20px;
  left:40px;
  max-width: 80px;
  position: fixed;
  z-index: 1000;
}


.pc-nav ul {
    display: flex;
    gap: 50px;                
    justify-content: center;
    z-index: 1000;
 
  }
  
  .pc-nav li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "trajan-pro-3", "serif";
    font-weight: 400;
    font-style: normal;;
  }
  
  .pc-nav li a {
    display: inline-block;
    writing-mode: vertical-rl;
    font-size: 14px;
    color: #779293;
    text-decoration: none;
    margin-top:13px;
  }
  
  .pc-nav {
    display: flex;
    gap: 50px;
    justify-content: center;
    position: fixed;
    right: 100px;
    top: 10px;

  }


  
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
  }
  
  .menu-item:hover {
    transform: translateY(5px);
  }
  

  /* 縦線 */
  .pc-nav li::before {
    content: "";              
    width: 1px;
    height: 50px;
    background-color: #779293;
  }

picture {
    margin: 0 auto;
    display: block;
    position: relative; 
    width: 100%;
    display: block;
}


.word {
  position: absolute;  
  top: 50%;            
  left: 70%;           
  transform: translate(-50%, -50%); 
  z-index: 2;          
  text-align: center;
  width: 100%;
  max-width: 600px; 
  overflow: hidden;
}

.word img{
  width: 100%;
}

.concept,
.about,
.skills,
.works,
.contact,
.contact2,
.footer
 {
    max-width: 1440px;
    margin: 0 auto;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}



.concept {
    margin-top: 209px;
    margin-bottom: 240px;
    
}



.concept_word_img{
  max-width: 470px;
  margin-bottom: 29px;
  margin-left:15%;
}

.concept_word{
  line-height: 2;
  max-width: 774px;
  margin: 0 auto;
  margin-left:15%;
}


.concept_word,
.about_sentence {
    font-size: 16px;
    text-align: left;
}


.about {
    margin-bottom: 164px;
}

.about_img{ 
    display: flex;
}



.about_word_img{
    max-width:  112px;
    margin-left: 15%;
    position: relative;
}


.about_img1{
    max-width: 280px;
    margin-top: -29px;
    margin-left: 8.7%;
}

.about_img2 {
    margin-left: 36px;
    max-width: 560px;
    margin-top: -330px;
}

.about_img3_wrapper {
    display: flex;
    flex-direction: column;
    margin-left: -80px;
    margin-top: -229px; 
}

.about_img3{
    width: 423px;
    max-width: 29.3vw;
}


.about_img4{
  width: 150px;
    margin-top: -30px;
    margin-left: 50px;
}

.about_img4 {
  max-width: 200px;
  height: auto;
  animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.about_sentence {
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 50px;
    max-width: 630px;
    line-height: 2.25;
    
}




.view_more_about_wrap,
.view_more_skills,
.view_more_works {
  display: flex;
  justify-content: flex-end;
  margin-right: 15%;
  position: relative; 
}


.scroll_area,
.scroll_area_viewmore{
  position: relative;
}




.view_more_yazirushi,
.view_more_yazirushi_skills,
.view_more_yazirushi_works
{
  position: absolute;
  top: 5px;
  right: 13px;                
  width: 17px;
  
}






.view_more_word img,
.view_more_skills img,
.view_more_works img{
   width: 142px;
}


.view_more_about_wrap .view_more_yazirushi,
.view_more_skills .view_more_yazirushi,
.view_more_works .view_more_yazirushi
{
  transition: 0.3s;
}

.view_more_about_wrap a:hover .view_more_yazirushi,
.view_more_skills a:hover .view_more_yazirushi,
.view_more_works a:hover .view_more_yazirushi
{
  right:-10px;
}





.skills{
    margin-bottom: 230px;
}


.skills_word_img{
    max-width: 304px;
    margin-left: 15%;
    margin-bottom: 108px;
}


/* // =====skills部分の動き＝＝＝＝＝＝ */
.bounce-image {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.bounce-image.show {
  opacity: 1;
  transform: translateY(0);
  animation: bounce-once 0.6s ease;
}

@keyframes bounce-once {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-20px); }
  60%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}


.view_more_skills {
    display: flex;
    justify-content: flex-end;
    margin-top: 57px;
    margin-right: 15%;

}

.skills_photo_wrap{
    max-width: 100%;
    display: flex;
    justify-content: center; 
    gap: 4.16%;               

  }


.skills_sp{
  display: none ;
}



.skills_photo{
  max-width: 206px;
}

.skills-swiper{
  display: none;
}



.works{
    margin-bottom: 160px;
}

.works_word_img{
    max-width:360px;
    margin-left: 15%;
    margin-bottom: 107px;
}




.carousel_inner{
    display:flex;
    position: relative;
}




.carousel_item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}



.carousel_item {
  max-width: 1000px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.carousel_item .overlay-text{
	font-size:		150%;
  font-weight: bold;
	text-align: 		center;
	color:			#fff;
}
.carousel_item .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.carousel_item:hover .mask {
	opacity:		1;	
	padding-top:		80px;	
}


.prev-arrow{
  position: absolute;
  top: 50%;
  transform:translateY(-50%) ;
  width: 19px;
  left: 20%;
  z-index: 999;
}

.next-arrow{
  position: absolute;
  top: 50%;
  transform:translateY(-50%) ;
  width: 19px;
  right: 20%;
  z-index: 999;
}

.lightbox .lb-container { padding: 2px; }
.lightbox{padding-top: 200px;

}








.view_more_works {
    display: flex;
    justify-content: flex-end;
    margin-right:  15%;
    margin-top: 57px;   
    margin-bottom: 175px;
}




.contact{
    margin-bottom: 274px;
    overflow: hidden;
    padding-top: 20px;
}
    
   
.contact_photo_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.postcard {
  position: relative;
  display: inline-block;
  max-width: 670px;
}

.stamp {
  position: absolute;
  top: -5%;
  right: -12%;
  max-width: 180px;
  opacity: 0;
  transform: scale(2) rotate(-15deg);
  transition: all 0.4s ease-out;
}

.stamp.active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}




.thankyou{
    margin-bottom: 255px;
}
.thankyou_wave{
    align-items: center;
}

.footer-sp {
  display: none;
}

.footer_top_line{
  border-top: 1px solid #bce3e2;
  max-width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
}


.footer-pc {
    color: #bce3e2;
    max-width: 100%;
    margin: 0 auto;
    padding-left:30px ;
    padding-right: 30px;
  }
  

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    border-bottom: 1px solid #c5efef;
    border-top: 1px solid #c5efef;
    padding: 25px;
  }
  

  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-nav li {
    color: #bce3e2;
    font-size: 18px;
    font-family: "trajan-pro-3", "serif";
    font-weight: 400;
    font-style: normal;;
  }
  
  .footer-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    color: #9ec6c8;
  }

  .finduson{
    width: 73px;
  }
  
  .instaicon{
    width: 24px;
  }


.footer_bottom_line{
  border-bottom: 1px solid #bce3e2;
  padding-left:30px ;
  padding-right: 30px;
}

  .footer-left{
    margin-top: 9px;
    font-family: "trajan-pro-3", "serif";
    font-weight: 400;
    font-style: normal;
    
  }

  

  /* ＝＝２階層目以降＝＝＝＝＝＝＝＝ */

.subpage {
    background: linear-gradient(to right, #f0faff 70%, #e6f8ff 0 );
  }

  .subpage .header{
    padding-bottom: 330px;
  } 


  
  .logo_blue {
    top:20px;
    left:40px;
    position: fixed;
}

  
  .logo_blue{
    max-width: 80px;
  }

    /* ＝＝ABOUT＝＝＝＝＝＝＝＝ */

.about2{
    margin-left: 15%;
    margin-right: 15%;
    max-width: 1440px;
    margin-bottom: 200px;
}

.about_intro{
    display: flex;
    justify-content: center;
    text-align: center;
}





.about2_word{
    width: 112px;
    margin-top: 30px;
}



.about_intro_photo{
    width: 487px;
    margin: 0 auto;
}

.about_intro_photo {
  overflow: hidden;
  position: relative;
}

.about_intro_photo::before,
.about_intro_photo::after {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #f0faff;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.about_intro_photo::before {
  animation-name: iabout_intro_photo-before;
  inset: 0 0 50%;
}

.about_intro_photo::after {
  animation-name: iabout_intro_photo-after;
  inset: 50% 0 0;
}

@keyframes iabout_intro_photo-before  {
  100% {
    transform: translateX(100%);
  }
}

@keyframes iabout_intro_photo-after  {
  100% {
    transform: translateX(-100%);
  }
}


.name{
    margin-top: 105px;
    text-align: center;
    color: #5ed2d5;
    font-size: 19px;
    margin-bottom: 33px;
    font-family: "trajan-pro-3", "serif";
    font-weight: 400;
    font-style: normal;
}

.about_intro_sentence{
    margin-top: 33px;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    line-height: 2.25;
    color:#779293;
}


.fv {
  width: 100vw;
  height: 10vh;
  position: relative;
  margin-bottom: 200px;
  &::after {
      content: '';
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.4;
  
}}


.scroll-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-text {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  color: #5ed2d5;
}
.scroll-bar-wrap {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100px;
}
.scroll-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  background: #5ed2d5;
  height: 0;
  animation-name: animation1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
@keyframes animation1 {
  0% {
      height: 0;
  }
  100% {
      height: 100px;
  }
}


    /* ＝＝about【strength】＝＝＝＝＝＝＝＝ */

.about2-2{
    margin-left: 220px;
    margin-right: 220px;
    max-width: 1440px;
    margin-bottom: 240px;
}


.about_strength_top{
    display: flex;
    justify-content: center;
    margin-bottom: 109px;
  }


.about_strength_word{
    width: 60px;
}


.about_strength_photo{
    max-width: 700px;
    margin: 0 auto;
}

.about_strength_photo {
  overflow: hidden;
  position: relative;
}

.cover1,
.cover2,
.cover3 {
  background: #f0faff;
  height: calc(100% / 3);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.cover-anime {
  animation: cover 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cover1 {
  top: 0;
}

.cover2 {
  animation-delay: 0.2s;
  top: calc(100% / 3);
}

.cover3 {
  animation-delay: 0.4s;
  top: calc(100% / 3 * 2);
}

@keyframes cover {
  100% {
    transform: translateX(100%);
  }
}



.strength_right{
  margin-bottom: 25px;
  max-width: 1000px;
}

.strength_left{
  margin-bottom: 25px;
  max-width: 1000px;
}

.strength-line_right{
  position: absolute;
    width: 90%;
    height: 1px;
    background-color: #b7e4e3;
    left:0;
    bottom: 15px;
}

.strength01,
.strength02,
.strength03{
    margin-bottom: 10px;
    text-align: left;
    position: relative;
    
}


.strength-line {
  position: absolute;
  width: 90%;
  height: 1px;
  background-color: #b7e4e3;
  right: 0;
  bottom: 15px;
  transform: scaleX(0); /* ← 初期状態を明記！ */
  transform-origin: left center;
  transition: transform 1.5s ease-out;
}

.strength-line.animate {
  transform: scaleX(1); 
}
  
  .strength1  {
    width: 172px;
  }

  .strength2 {
    max-width: 305px;
    margin-left: auto;
}
  
 .strength3 {
  max-width: 268px;
}


  .strength_left_word{
    line-height: 2.25;
    font-size: 16px;
    max-width: 680px;


  }
  .strength_right_word{
    left: 0;
    line-height: 2.25;
    font-size: 16px;
    max-width: 680px;
    margin-left: auto;
  }



    /* ＝＝SKILLS＝＝＝＝＝＝＝＝ */

  .skills2{
    max-width: 1440px;
    margin-right: 220px;
    margin-left: 220px;
    margin-bottom: 141px;
    font-size: 16px;
  }


  .skills2_word_img {
    width: 304px;
    margin-bottom: 144px;


  }

  .skills-swiper {
    display: none;
  }

  
  .graphic{
    max-width: 433px;
  }
  
  .webdesing{
    max-width: 392px;
  }

  .coding{
    max-width: 485px;
  }

  .skills_sentence{
    max-width: 623px;
    margin: 0 auto;
    margin-top: -90px;
    line-height: 2.25;
    margin-bottom: 30px;
  }


  .skills_list{
    margin-bottom: 109px;
  }

  .yazirushi_graphic,
  .yazirushi_web,
  .yazirushi_coding{
    max-width: 23px;
    margin-bottom: 70px;
    margin: 0 auto;

  }

  .yazirushi_graphic img,
  .yazirushi_web img,
  .yazirushi_coding img {
    animation: bounceDown 1s infinite ease-in-out;
    z-index: 10000;
}

.accordion{
    z-index: 1000;
}



.yazirushi_web img:hover 
.yazirushi_web img:hover,
.yazirushi_coding img:hover{
  opacity: 0.3;
  transition: opacity 0.3s ease;
}


.skills_viewmore{
  width: 92px;
  margin: 0 auto;
}




  .skills1{
    margin-bottom: 15px;
    margin-top: 15px;
  }


  .botann {
    width: 13px;
    margin-right: 3px;
    animation: spinY 1.5s linear infinite;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: inline-block;
  }
  
  @keyframes spinY {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }


  .skills_illustrator {
    max-width: 70px;
}

  .skills_photoshop {
    max-width: 77px;
}

.skills1 {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .skills1-line {
    flex-grow: 1;
    display: flex;
    justify-content: end;
    height: 1px;
    background-color: #b7e4e3;
  }



  
  
  .skills1{
    flex-direction: row;
  }

  .skills_figma{
    max-width: 42px;
  }
  
  .skills_HTMLCSS{
    max-width: 95px;
  }
  .skills_JavaScript{
    max-width: 54px;
  }
  

  .skills_illustrator_word,
  .skills_photoshop_word,
  .skills_figma_word,
  .skills_HTMLCSS_word,
  .skills_JavaScript_word{
    max-width: 570px;
    text-align: left;
    margin: 0 auto;
    line-height: 2.25;
  }




  .prev-arrow{
    position: absolute;
    top: 50%;
    transform:translateY(-50%) ;
    width: 19px;
    left: 18px;
}

.next-arrow{
    position: absolute;
    top: 50%;
    transform:translateY(-50%) ;
    width: 19px;
    right: 18px;
}





  /* ＝＝CONTACT＝＝＝＝＝＝＝＝ */


  .contact_warp{
    display: flex;
    flex-direction: column;     
    justify-content: center;    
    align-items: center;      
    margin-bottom: 234px;
        
  }
  
  .contact_word_img{
    max-width: 493px;
    margin-bottom: 94px;
    margin-left: 15%;
  }
 
  
  .contact_sentece{
    font-size: 16px;
    margin-bottom: 106px;
    text-align: center;
  }
  .contact_warp input,textarea{
    border: none;
    box-sizing: border-box;
    padding: 9px 16px;
    font-size: 16px;
    font-family: "fot-tsukuardgothic-std", sans-serif;
  }
  .contact_warp input::placeholder,.contact_warp textarea::placeholder{
    color:#b3b3b3
  }


  .contact_warp input{
    width: 400px;
    height: 34px;
  }

  .contact_warp textarea{
    width: 400px;
    height:  155px;
  }


 

.label{
  float:left ;
  width: 96px;
  margin-right: 20px;
  color: #779293;
  font-size: 12px;
  text-align: center;
}

select {
  width: 400px;
  height: 34px;
  border: none;
  background-color: #fff;
  font-size: 12px;
  padding: 9px 16px;
  color:#b3b3b3
}

select:valid {
  color: #333;
  font-family:"fot-tsukuardgothic-std", sans-serif;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


.br-sp {
  display: none;
}

.form_item{
  display: flex;
  align-items: center;
  margin-bottom: 56px;
 
}

.form_item2{
  display: flex;
  align-items: center; 
}


.form_send {
  margin: 0 auto;
  max-width: 94px;
  margin-top: 48px;
}


  /* ＝＝THANKS＝＝＝＝＝＝＝＝ */

.thanks_word{
  max-width: 493px;

}

.thanks_word_sp{
  display: none;
}

.thanks_word{
  margin-left: 15%;
  margin-bottom:95px ;
}

.thanks_wrap{
  color: #779293;
}

.thanks{
  margin-bottom: 250px;
}


.thanks_sentece1{
  font-size: 41px;
  width: 677px;
  align-items: center;
  margin: 0 auto;
  color: #779293;
  margin-bottom: 92px;
}

.thanks_sentece2 {
  font-size: 16px;
  color: #779293;
  max-width: 645px;
  margin: 0 auto;
  line-height: 1.75;
  text-align: left;
}

  /* ＝＝WORKS page＝＝＝＝＝＝＝＝ */


.works2{
  margin-left: 15%;
  margin-right: 15%;
  max-width: 1440px;
}
.works_top{
  margin-bottom:80px ;
  gap:119px;

}

.works_top_inner{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  gap:55px;

}

.works_top_inner {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.works_top_inner::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background: black;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.works_top_inner.active::after {
  width: 100%;
}
.webdesign_word_all{
  max-width:31px
}

.works_word2{
  max-width:360px
}

.webdesign_word1{
  max-width:120px
}

.graphicdesign_word1{
  max-width:152px
}



.webdesign_word2{
  max-width:177px
}

.item_line {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}


.underline {
  margin-top: -1px;
  align-items: center;
  width: 50px;            
  height: 1px;         
  background-color: transparent;
  transition: background-color 0.5s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.all_underline{
  margin-top: 3px;
  align-items: center;
  width: 15px;            
  height: 1px;         
  background-color: transparent;
  transition: background-color 0.5s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.item_line.active .underline {
  background-color: #5ed2d5; 
}


.item_line.active .all_underline {
  background-color: #5ed2d5; 
}




.webdesign_wrap{
  margin-bottom: 205px;
}



.zoom-image {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.zoom-image:hover {
  transform: scale(1.05);
}
.work-item_photo{
  margin-bottom: 10px;
}

.work-title{
  margin-bottom: 5px;
}

.work-item{
  margin-bottom: 70px;
}


.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.image-list li {
  flex: 1 1 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
  box-sizing: border-box;
}

.work-item {
  display: flex;
  flex-direction: column;

}

.work-item {
  width: 100%;
  display: block;
}



.work-title {
  font-size: 16px;
}

.work-kinds {
  font-size: 14px;
}


.graphicdesign_word2{
  max-width:208px
}

.graphicdesign_wrap{
  margin-bottom: 180px;
}

  /* ＝＝WORKS page＝＝＝＝＝＝＝＝ */

.works2-1{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
}
.works2-1_hayashi{
  max-width: 1440px;
  margin: 0 auto;
}



.works_contents_wrap_hayashi{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15%;
}

.works_contents_wrap_hayashi_sh{
  display: none;
}

.works_title
{
  text-align: center;
  margin-bottom: 36px;
  font-size: 24px;
}

.works_title_hayashi{
  text-align: center;
  margin-bottom: 36px;
  font-size: 24px;
}


.meishi_slide_sp{
  display: none;
}



.works_contents_text_trace{
  text-align: center;
  font-size: 14px;
}

.works_contents_wrap_trace{
  margin-top: 97px;
  margin-bottom:96px ;
}

.works_220{
  text-align: center;
  margin-bottom: 36px;
  font-size: 24px;
}

.works_contents_wrap_sh{
  display:none ;
}



.works_flyer_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; 
  max-width: 1000px; 
  margin: 0 auto;
}

.flyer {
  max-width: 100%;
  height: auto;
  display: block;
}
/* 
 PC版２枚sp版１枚 */
.pc-only {
  display: flex;
  gap: 30px;
}

.sp-only {
  display: none;
}



.flyer_1{
  margin-bottom: 112px;
  margin: 0 auto;
}

.logo_photo{
  max-width: 830px;
  margin: 0 auto;
}

.yazirushi1_left{
  max-width: 30px;
}

.yazirushi1_left{
  margin-left: 120px;
}

.yazirushi1_right{
  max-width: 30px;
}

.yazirushi1_right{
  margin-right: 120px;
}

.flyer{
  max-width: 450px;
}

/* タブレットモックアップ画面スイッチ */
.switch{
  display: flex;
  gap: 10px;
  margin-left: auto;     

}
.switch1 {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  cursor: pointer;
}



.switch1::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -8px;
  width: 50px;
  height: 40px;
  background-color: #b8f2ff;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  left: 50%; 
  transform: translateX(-50%); 

}

.sh_switch.active::before {
  width: 35px; 
}

.switch1.active::before {
  opacity: 1;
}


.switch1 img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}



.pc_switch{
  max-width: 36px;
}

.sh_switch{
  max-width: 15px;

}


.works_title_tablet_wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  position: relative;              

}
.works_tablet_wrap{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}


.works_sp_wrap{
  display: none;
  max-width: 336px;
  margin: 0 auto;
  position: relative;
}

.scroll_down {
  display: inline-block;
  animation: chunChunMove 1s ease-in-out infinite;
}

.scroll_down_sp {
  display: inline-block;
  animation: chunChunMove 1s ease-in-out infinite;
}

@keyframes chunChunMove {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

.works_title_tablet {
  font-size: 24px;
  align-items:center;
  margin: 0 auto;
  margin-bottom: 36px; 
  line-height: 1.2;         
}


.meishi_slide_wrap{
  position: relative}


.meishi_slider{
  align-items: center;
  position: relative;
}

.meishi_slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}



.meishi_slide_sp{
  display: none;
}


.meishi_wrap {

  max-width: 1000px;
  width: 100%;
  margin: 0 auto;

}

.meishi_slide_wrap{
  margin-bottom: 135px;
}

.meishi_wrap_ciel_inner{
  display: flex;
}


.meishi_wrap_ciel{
  max-width: 1000px;
  margin: 0 auto;
}

.meishi_yoko_ciel{
  max-width: 50%;
}


/* ＝＝＝＝スクロール＝＝＝ */
.scroll_down{
  max-width: 22px;
  position: absolute;
  top:40%;
  transform:translateY(-50%);
  right:-25px;
  
}

.scroll_down_wrap{
  margin-right: 5px;
}

.scroll_down_sp{
  max-width: 22px;
  position: absolute;
  top:40%;
  transform:translateY(-50%);
  right:-25px
}




.scrool_wrap_sp {
  position: absolute;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  overflow: hidden;
  aspect-ratio: 168/360;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrool_area_sp2 {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
 
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* ＝＝＝＝スマホのモックアップ＝＝＝ */
.sh_mock-up{ 
  max-width: 336px;
  margin-bottom: 112px;
  margin: 0 auto;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝タブレットのモックアップ＝＝＝ */
.tablet_mock-up{
  max-width: 1000px;
  margin-bottom: 112px;
  text-align: center;
  position: relative;
}
  
  .tablet_mock-up img {
    width: 100%;
    display: block;
  }

  .scrool_wrap{
    padding: 1%; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 100%; 
    aspect-ratio: 486 / 356;
    overflow: hidden;
    border-radius: 11px;
    box-sizing: border-box;
  }
  
  .scrool_area{
    width: 99%;
    aspect-ratio:  486/356;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 11px;
    box-sizing: border-box;
  }







  .smartphone_mock-up{
    max-width: 336px;
    margin-bottom: 112px;
    text-align: center;
    position: relative;
  }





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝ハヤシのモックアップ＝＝＝ */
.hayashi_all{
  width: 100%;
  margin-bottom: 144px;
}

.meishi_wrap_hayashi_sp{
  display: none ;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* ＝＝＝＝logo説明ありの設定＝＝＝ */
.meishi_swiper {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}


.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center; 
}



.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
}

.slick-prev {
  left: calc(50% - 540px);
}

.slick-next {
  right: calc(50% - 540px);
}


.logo_slider {
  position: relative;
  height: auto;
}


.meishi_omote img,
.meishi_ura img{
  max-width: 480px;
}

.meishi_omote{
  margin-bottom: 10px;
}

.meishi_ura{
  display: flex;
  justify-content: flex-end;
}


.swiper2-button-prev,
.swiper2-button-next {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 10;
}

/* ロゴ説明 */

.logo_meaning {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
}










/* 矢印の配置 */
.meishi-prev,
.meishi-next,
.logo-prev,
.logo-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  max-width: 25px;
  display: block
}

.meishi-prev,
.logo-prev {
  left: -25px;
}

.meishi-next,
.logo-next {
  right:-25px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */




.yazirushi_left{
  max-width: 30px;
}

.yazirushi_left{
  margin-right: 99px;
}

.yazirushi_right{
  max-width: 30px;
}

.yazirushi_right{
  margin-left: 99px;
}


.flyer_1{
  max-width: 450px;
}



/* 制作物したの説明書 */




.works_contents{
  list-style: none; 
}
.works_contents_sh{
  display: flex;
  margin-bottom: 19px;
  width: 100%;
}



.works_contents_wrap{
  display: flex;
  justify-content: center;
  margin-top: 112px;
  margin-bottom: 60px;
}

.works_contents{
  list-style: none;
  max-width: 1000px;
  width: 100%;

}

.works_contents_item{
  display: flex;
  align-items: center;
  margin: 30px 0;
}




.works_contents_item_category{
  width: 90px;
  text-align: center;

}

.works_contents_info{
  padding-left: 70px;
  width: 700px;
  font-size: 14px;
  line-height: 1.5;
}


.line{
  height: 1px;
  background-color: #c5efef;
  width: 100%;
}



.works_contents_text{
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 97px;
}





.backtoall_wrap {
  display: flex;
  justify-content: flex-end;

  position: relative; 
}

.backtoall_wrap_hayashi{
  display: flex;
  justify-content: flex-end;
  margin-right: 15%;
  position: relative; 
}


.backtoall_wrap .back_to_all_yazirushi{
  transition: 0.3s;
}

.backtoall_wrap a:hover .back_to_all_yazirushi{
  left:-20px;
}


.scroll_area,
.scroll_area_viewmore{
  position: relative;
}



.backtoall {
  width: 143px;
  margin-bottom:250px ;
  position: relative;
}

.back_to_all_yazirushi {
  position: absolute;
  top: 5px;
  left: 10px;                
  width: 17px;
  
}





.text-container {
  display: flex;
  color: #5ed2d5;
  font-family:"trajan-pro-3", "serif";;
  font-size: 24px;
  gap: 20px; 
  justify-content: center;
  height: 50px;
}

.text-container span {
  display: inline-block;
  width: 30px; 
  text-align: center; 
  animation: grow 2.4s infinite;
  transform-origin: center; 
}


.text-container span:nth-child(1) { animation-delay: 0s; }
.text-container span:nth-child(2) { animation-delay: 0.3s; }
.text-container span:nth-child(3) { animation-delay: 0.6s; }
.text-container span:nth-child(4) { animation-delay: 0.9s; }
.text-container span:nth-child(5) { animation-delay: 1.2s; }
.text-container span:nth-child(6) { animation-delay: 1.5s; }
.text-container span:nth-child(7) { animation-delay: 1.8s; }
.text-container span:nth-child(8) { animation-delay: 2.1s; }


@keyframes grow {
  0%, 100% {
    transform: scale(1);
  }
  12.5% {
    transform: scale(3); 
  }
}




@media screen and (max-width : 1100px){
  /* PCメニューを消してハンバーガーメニューを出す */
  .pc-nav{
      display: none;
  }

.hamburger_wrap{
  position: fixed;
  z-index: 99999999 !important; 
  top:20px;
  right: 30px;
  overflow: visible;
}

  .hamburger {
    width: 50px;
    height: 50px;
    border: 1px solid #9ec6c8;
    border-radius: 50%;
    display: flex;
    position: relative;
    justify-content: center;
    z-index: 999999 !important; 
    align-items: center;
    cursor: pointer;
    
  }
  
  .hamburger span {
    position: absolute;
    width: 20px;
    height: 1px;
    background: #9ec6c8;
    transition: all 0.3s ease;
    z-index: 9999999;
  }
  
 
  .hamburger span:nth-child(1) {
    top: 14px;
    width: 10px;
  }
  
  .hamburger span:nth-child(2) {
    top: 24px;
    width: 15px;
  }
  
  .hamburger span:nth-child(3) {
    top: 34px;
    width: 10px;
  }
  
 
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 24px;
  }
  
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 24px;
  }





.sp-nav_ham{
  display: flex;
  align-items: center;
  height: 100%;
  position: fixed !important;
}

/* オーバーレイ背景 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1100;
}

/* メニュースライド本体 */
.slide-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background: white;
  transition: right 0.3s ease;
  z-index: 1102;
  padding: 40px 20px;
}

/* メニュー開いたとき */
.slide-menu.open {
  right: 0;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}



  
.sp-nav{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100%;
  background: linear-gradient(to right, #f0faff 70%, #e6f8ff 0 );
  transform-origin: left bottom;
  transition: 0.5s;
  transform: rotate(90deg);
  display: block;
  opacity: 0;
  z-index: 5000;
}



.sp-nav ul{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sp-nav ul li a {
  color: #779293;
  text-align: left;
  display: block;
  padding:10px 0;
  font-family: "trajan-pro-3", "serif";
  font-size:24px;
  margin-bottom: 44px;
  margin-left: 30px;
}

.sp-nav.active {
 transform: rotate(0);
 opacity: 1;
}

.sp-nav.closing {
  transform: translateX(100%);
  opacity: 0;
}

.ham_insta{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  position: absolute;
  bottom: 10%;
  right: 30px;
}


.finduson_ham{
  width: 76px;
}

.instaicon_ham{
  width: 62px;

}




.word {
  position: absolute;  
  top: 50%;            
  left: 70%;           
  transform: translate(-50%, -50%); 
  z-index: 2;          
  text-align: center;
  width: 100%;
  max-width: 400px; 
}

.word img{
  width: 100%;
}

.stamp{

  top: 0;
  right: -20px;
  max-width: 100px;
}

}


@media screen and ( max-width : 767px ){

  .header{
      margin-bottom: 43px;
  }



  .logo{
      max-width:50px;
      top:20px;
      left:20px;
  }

  .logo_blue {
    top: 20px;
    left: 20px;
  } 
  
  .logo_blue {
    max-width: 50px;
  }

  .subpage .header{
    padding-bottom: 95px;
  } 


  
  
  .concept {
      margin-top: 82px;
      margin-bottom: 58px;
  }
  
  
  
  .concept_word_img{
    max-width: 188px;
    margin-bottom: 39px;
    margin-left: 30px;
}

  .concept_word{
    line-height: 2.9;
    max-width: 100%;
    margin-left:30px;
    margin-right:30px;
    
  }
  
  
  .concept_word,
  .about_sentence {
      font-size: 16px;
      color: #779293;
      text-align: left;
  }
  
  .word {
    position: absolute;  
    top: 55%;            
    left: 70%;           
    transform: translate(-50%, -50%); 
    z-index: 2;          
    text-align: center;
    width: 100%;
    max-width: 200px; 
  }
  
  .word img{
    width: 100%;
  }
  
 
  
  .about {
      margin-bottom: 164px;
  }
  
  .about_img{ 
      display: flex;
  }
  
  
  .about_word_img{
      margin-left: 30px;
      margin-top: 0;
      max-width: 50px;
      position: relative;
      z-index: 3;
  }
  
  
    .about_img {
      display: block;     
      position: relative;
      width: 100%;
    }


  
    .about_img1,
    .about_img3_wrapper {
      position: absolute;   
    }
  


    .about_img1 {
      position: absolute;
      width: 42%;
      top: -80px;               
      left: 0;
      margin-left: 0; 
      z-index: 2;      
    }
  
    .about_img2 {       
      width: 72%;
      position: relative;
      margin-top: 30px;    
      margin-left: 21%;   
      z-index: 1;
    }

  
  .about_img3_wrapper {
      position: absolute;
      right:0;
      top:0;
      overflow: hidden;
      
  }
  
  .about_img3 {
      display: none;
  
      
  }
  
  .about_img4{
    max-width: 150px;
      margin-top: 90%;
      margin-right: 19px;
      z-index: 4;
  }
  
  .about_sentence {
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 41px;
      max-width: 630px;
      line-height: 2.25;
      
  }
  
  
  .view_more_about {
      margin-right: 30px;
      margin-top: 11px;
  }
  


  /* TOPページ部分スキル */
  .skills{
    margin-bottom: 119px;
}



.skills_word_img{
  width: 304px;
  max-width: 21.1vw;
  margin-left: 30px;
  margin-bottom: 49px;
}

.skills_photo_wrap {
  display: none; 
}


.skills_sp{
  display: block;
  margin: 0 auto;
  position: relative;
}

.skills-slider{
  max-width: 250px;
  margin: 0 auto;
}

/* カスタム矢印 */
.custom-prev,
.custom-next {
  margin-left: 10px;
  margin-right: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  width: 20px;
}

.custom-prev {
  left: 0px;
}

.custom-next {
  right: 0px;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.view_more_skills {
  margin-top: 22px;
  margin-right: 30px;
}


.works{
  margin-bottom: 88px;
}

.works_word_img{
  width:360px;
  max-width: 25vw;
  margin-left: 30px;
  margin-bottom: 50px;
}



.carousel_inner{
  display:flex;
  position: relative;
}


.view_more_works {
  margin-top: 57px;
  margin-right: 30px;
}




.contact{
  margin-bottom: 109px;
}

.postcard{
  display: block;
  margin: 0 auto;
  max-width: 80%;
  margin-left: 30px;
  margin-right: 30px;
}



.thankyou{
  margin-bottom: 113px;
}

.text-container {
  font-size: 15px;
  width:  70%;
  padding-left:  8%;
  padding-right:  8%;
  gap: 2px; 
}


  .footer-pc {
    display: none;
    justify-content: center;
  }




  .footer_top_line_nav-sp{
    border-top: 1px solid #bce3e2;
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;

  
  }
  .footer-sp {
    display: block;
    color: #bce3e2;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
  
  }
  
  .footer-inner_sp{
    border-bottom: 1px solid #bce3e2;
    border-top: 1px solid #bce3e2;
    padding-top: 45px;
  }
 
  

  .footer_nav-sp ul {
    list-style: none;
    padding: 0;
    margin: 0;
  
  }
  
  .footer_nav-sp li {
    color: #bce3e2;
    font-size: 18px;
    font-family: "trajan-pro-3", "serif";
    margin-bottom: 57px;
    align-items: start;
  }
  
  .footer-right_nav-sp{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
  }
  



.footer_bottom_line_nav-sp{
  border-bottom: 1px solid #bce3e2;
  max-width: 100%;
  padding-left: 30px;
  padding-right: 30px;

}

.footer-left_nav-sp{
    margin-top: 18px;
    font-family: "trajan-pro-3", "serif";  
  }


/* ====about-sp===== */


.about2{
    margin-left: 30px;
    margin-right: 30px;
    max-width: 100%;
    margin-bottom: 124px;
}

.about_intro{
    display: flex;
    justify-content: center;
}

.about2_word{
    max-width: 27px;
    margin-top: 0px;
}

.about_intro{
    text-align: center;
}

.about_intro_photo{
    max-width: 268px;
    margin: 0 auto;
}

.name{
    margin-top: 24px;
    font-size: 19px;
    margin-bottom: 33px;
    font-family: "trajan-pro-3", "serif";
    font-weight: 400;
    font-style: normal;;
}

.about_intro_sentence{
    max-width: 330px;
    margin: 0 auto;
    line-height: 2.25;
}

    /* ＝＝about【strength】＝＝＝＝＝＝＝＝ */

.about2-2{
    margin-left: 30px;
    margin-right: 30px;
    max-width: 100%;
    margin-bottom: 166px;
}


.about_strength_top{
    display: flex;
    justify-content: center;
    margin-bottom: 87px;
  }


.about_strength_word{
    max-width: 27px;
  margin-top: 36px;
}


.about_strength_photo{
    max-width: 294px;
}


.about_strength_photo{
    margin: 0 auto;
    margin-left: 16px;
}



.strength01,
.strength02{
    margin-bottom: 30px;
}


  .strength3{
    max-width: 268px;
}

  .strength2{
    max-width: 305px;
}
  
  .strength1{
    max-width: 172px;
  }

/* ====skills-sp===== */



.skills2{
  max-width: 100%;
  margin-right: 30px;
  margin-left: 30px;
  margin-bottom: 111px;
}


.skills2_word_img img{
  width: 112px;
  margin-bottom: 39px;


}

.graphic img{
  width: 290px;
}

.webdesing img{
  width: 260px;
}

.coding img{
  width: 330px;
}

.skills_sentence{
  max-width: 330px;
  margin-top: -70px;
}


.skills_list{
  margin-bottom: 109px;
}



.yazirushi{
  margin-bottom: 70px;
}


.skills1{
  margin-bottom: 15px;
  margin-top: 15px;
}


.botann img {
  width: 13px;
}

.botann{
  margin-right: 4px;
}

.skills_illustrator img{
  width: 70px;
}

.skills_photoshop img{
  width: 77px;
}

.skills1 {
  display: flex;
  align-items: center;
  width: 100%;
}

.skills1-line {
  flex-grow: 1;
  height: 1px;
  background-color: #b7e4e3;
}

.skills1{
  flex-direction: row;
}

.skills_figma img{
  width: 42px;
}

.skills_HTMLCSS img{
  width: 95px;
}
.skills_JavaScript img{
  width: 54px;
}


.skills_illustrator_word,
.skills_photoshop_word,
.skills_figma_word,
.skills_HTMLCSS_word,
.skills_JavaScript_word{
  max-width: 570px;
  text-align: left;
  margin: 0 auto;
  line-height: 2.25;
}


/* ====contact-sp===== */


.contact2{
  max-width: 100%;
  padding: 8%;
}

.contact_warp{
  margin-bottom: 110px;
}

.contact_word_img img{
  width: 191px;
}
.contact_word_img{
  margin-bottom: 72px;
  text-align: center;
  margin-left: 0;
}


.contact_sentece{
  height: 1.44px;
  margin-bottom: 64px;
}


.contact_warp input{
  width: 100%;
  height: 34px;
}

.contact_warp textarea{
  width: 100%;
  height:  175px;
}




.label{
float:left ;
margin-right: 0;
margin-bottom: 7px;
text-align: left;

}

select {
width: 100%;
}

/* スマホだけ改行 */
.br-sp {
  display: block;
}

.form_item{
display: block;
margin-bottom: 40px;
width: 100%;

}

.form_item2{
display: block;
}
.form_send img{
width: 94px;
}
.form_send{
max-width: 92px;
margin-top: 81px;
}


/* ====thanks-page===== */

.thanks_word{
  display: none;
}

.thanks_word_sp{
  display: block;
  margin-bottom: 66px;
}

.thanks_word_sp img{
  width: 374px;
}




.thanks{
  margin-bottom: 110px;
}


.thanks_sentece1{
  font-size: 29px;
  width: auto;
  margin-bottom: 50px;
  margin-left: 30px;
  margin-right: 30px;
  align-items: center;
  text-align: center;
}

.thanks_sentece2{
  width: auto;
  margin-left: 8%;
  margin-right: 8%;
}


/* ====works-page===== */





/* ＝＝＝＝＝制作一覧ページ＝＝＝＝＝ */

.works2{
  margin-left: 30px;
  margin-right: 30px;
}

.works_top{
  display: block;
  margin-bottom:75px ;
  gap:119px;
}

.works_top_inner{
  display: block;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}


.works_word2 img{
  width:141px
}
.works_word2{
  margin-bottom: 65px;
}

.webdesign_word1 img{
  width:118px
}

.graphicdesign_word1 img{
  width:149px
}


.webdesign_word2 img{
  width:165px
}


.webdesign_wrap{
  margin-bottom: 270px;
}

.works_contents_wrap_hayashi{
  display: none;
}

.works_contents_wrap_hayashi_sh{
  display: block;
  justify-content: center;
  width: auto;
  margin-left: 15%;
  margin-right: 15%;
}


.works_contents_wrap_sh{
  display: block;
  margin-top: 45px;
  margin-bottom: 51px;
}



.works_title_tablet {
  font-size: 20px;
  line-height: 1.2;         
}
/* ＝＝＝スマホバナーモックアップ＝＝＝ */


.work-title{
  margin-bottom: 7px;
}

.work-item{
  margin-bottom: 106px;
}


.image-list {
  flex-direction: column; 
  align-items: center;    
}

.image-list li {
  flex: 1 1 100%;
  max-width: 100%;
}



.work-item img {
  width: 100%;
  display: block;
}


.graphicdesign_word2 img{
  width:203px
}

.graphicdesign_wrap{
  margin-bottom: 160px;
}



  /* ＝＝WORKS page＝＝＝＝＝＝＝＝ */

  .item_line {
    margin-bottom: 20px;
  }


  /* タイトル */
  .title_wrapper {
    text-align: center;
  }


  .works_title{
    margin-bottom: 40px;
    font-size: 20px;
    text-align: left;
    display: inline-block; 
  }

 
  .works_title_hayashi{
    margin-bottom: 40px;
    font-size: 20px;
    padding: 0 30px;
    margin: 0 auto;
    margin-bottom: 36px; 
    line-height: 1.2;         
    }
    

  

  .works_220{
    margin-bottom: 36px;
    font-size: 24px;
  }
  
  .works_contents_wrap_trace{
    margin-top: 45px;
    margin-bottom:50px ;
  }
  


  
  .works-line_sh{
    flex-grow: 1;

    height: 1px;
    display: flex;
    justify-content: flex-end;
    background-color: #b7e4e3;
    margin-top: 10px;
  }
  

  .works_contents_info_sh{
    margin-bottom: 43px;
    font-size: 14px;
    line-height: 1.5;
  }

  .works_contents_item_category_sh{
    font-size: 18px;
  }





.flyer img {
  max-width: 330px;
  display: block;
}

.logo_meaning{
  display: none;
}




.logo_meaning_sp {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8%;   
  height: auto;
  box-sizing: border-box;
}

.logo_meaning_sp img {
  max-width: 100%;    
  display: block;
  height: auto;
}

/* Pc版２sp版１ */
  
.pc-only {
  display: none;
}

.sp-only {
  display: block;
  max-width: 330px;
  margin: 0 auto;
}


.works_flyer_wrapper {
  position: relative;
  width: 100%;
}


.works_flyer_slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* カスタム矢印 */
.swiper1-button-prev,
.swiper1-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 20px;
  cursor: pointer;
}

.swiper1-button-prev {
  left: -30px;
}

.swiper1-button-next {
  right: -30px;
}
  .flyer img{
    width: 450px;
  }
  
  .swiper2-prev {
    left: 0px; 
  }

  .swiper2-next {
    right: 0px;
  }

  
  .swiper2-prev::after,
  .swiper2-next::after {
    font-size: 20px; 
  }

  .swiper2-prev,
  .swiper2-next {
    width: 28px;
    height: 28px;
    margin: 0 2px; 
  }




  
  .meishi_wrap{
    display: block;
  }

.meishi_slide_wrap{
  margin-bottom: 95px;
}

.meishi_slide_sp{
  display: block;
  justify-content: center;
}

.logo_photo{
  display: none;
}

.meishi-prev ,
.meishi-next,
.logo-next,
.logo-prev {
  max-width: 20px;

}



  .meishi_wrap_ciel{
    display: block;
    justify-content: center;
  }

  .meishi_wrap_ciel_inner{
    flex-direction: column;
    align-items: center;
}


  
  /* スマホモックアップ */
  .sh_mock-up{ 
    max-width: 190px;
    margin-bottom: 65px;
  }
  
  /* タブレットモックアップ */
  .tablet_mock-up img{
    max-width: 100%;
  }
  .tablet_mock-up{
    margin-bottom: 97px;
  }
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝ハヤシのモックアップ＝＝＝ */

.hayashi_all{
  display: none;
}

.meishi_wrap_hayashi_sp {
  display: block ;
  width: 100%;
  padding: 0 8%;
  margin-bottom: 86px;
  box-sizing: border-box;
  text-align: center; 
}

.meishi_yoko {
  width: 100%;
  max-width: 50%;
  margin-bottom: 16px;
}

.meishi_yoko img {
  display: block;
  margin: 0 auto;
}

.hayashi-prev,
.hayashi-next {
  width: 25px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
}

.hayashi-prev {
  left: 0; 
}

.hayashi-next {
  right: 0;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


  

  .yazirushi_left img{
    width: 30px;
  }
  
  .yazirushi_left{
    margin-right: 99px;
  }
  
  .yazirushi_right img{
    width: 30px;
  }
  
  .yazirushi_right{
    margin-left: 99px;
  }
  

  .meishi_omote img{
    max-width:100%;
  }
  
  
  .meishi_ura img{
    max-width:100%;
  }
  
  .pc_switch{
    max-width: 25px;
  }
  
  .sh_switch{
    max-width: 11px;
  }
  
  .works_contents_text{
    margin-bottom: 52px;
  }
  
  
  .flyer_1 img{
    max-width: 100%;
  }
  
  .scroll_down{
    max-width: 15px;
    top:20%;
    transform:translateY(-50%);
    right:-30px
  }
  

  .scroll_down_sp{
    max-width: 15px;
    top:30%;
    transform:translateY(-50%);
    right:-25px
  }
  
  .works_contents_wrap{
   display: none;
  }
  
  


  .footer-right_nav-sp .finduson{
    width: 73px;
  }



  /* 制作一覧に戻る */
  .backtoall{
    margin-bottom: 50px;
  }

  .backtoall_wrap .back_to_all_yazirushi{
    transition: 0.3s;
  }
  
  .backtoall_wrap a:hover .back_to_all_yazirushi{
    left:10px;
  }

  .backtoall_wrap{
    margin-right: 7%;

  }

  .works_contents_wrap_hayashi_sh{
    margin: 0 8%;
  }

}