/*
Theme Name: original
*/

/* ****** TOP ****** */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing : 0.2em;
}

pre { 
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow: auto !important;
  font-size: 16px;
}

/**** ヘッダー ****/
header {
  padding: 18px 2% 10px;
  width: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
}

.main-logo {
  margin: 0; padding: 0;
  font-size: 20px;
}

/**** メニュー ****/
nav {
  margin: 0 0 0 auto;
}

.nav_menu {
  list-style: none;
  margin: 0;
  display: flex;
}

.nav_menu_item {
  margin: 0 0 0 20px;
  font-size: 16px;
}

/**** ハンバーガーメニュー ****/
.menu {	
  text-decoration: none;
  color: black;
}

/**** お問い合わせボタン ****/
.btn-contact {
  position: relative;
  cursor: pointer;
  padding: 0.5rem 3rem;
  border-radius: 50px;
  background: linear-gradient(to bottom, #007CEE, #01C4EF);
  transition: .3s;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 0 0 #369BEC;
  transition: .8s;
}

.btn-contact:hover {
  padding: 0.6rem 3rem;
}

/**** メインビジュアル ****/
.main-visual {
  display: flex;
  background: url(img/pc_top_main.png) top center / cover no-repeat;
  flex-direction: column;
  padding: 2% 0 20% 5%;
  background-size: 100% 100%;
}

.top-msg {
  color: #007CEE;
}

.top-en-text {
  font-weight: bold;
  color: white;
}
.top-ja-text {
  color: #fff;
  font-weight: bold;
}

.sp-nav {
  display: none;
}

/* 事業内容 */
.business-content {
  max-width: 850px;
  margin-top: 10%;
}

.business-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.business-title-jp {
  margin: 0;
  font-size: 3vw;
  font-weight: bold;
  color: black;
}

.colum1__img img {
  display: block;
  max-width: 100%;
}

.colum1__txt {
  box-sizing: border-box;
}

.colum1_title {
  font-weight: bold;
  color: black;
}

.colum1_title_en {
  font-size: 1vw;
  font-weight: bold;
  color: #007CEE;
}

.content-text {
  font-weight: lighter;
  color: black;
}

section.sec1 {
  width: 95%;
  margin: auto;
}

/**** 制作実績 ****/

.work_news {
  margin-top: 10%;
  background: url(img/layer-1.png) top center / cover no-repeat;
}

section.sec2 {
  margin-top: 10%;
}

.works-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.works-title-jp {
  margin: 0;
  font-size: 3vw;
  font-weight: bold;
  color: black;
}

.works_text {
  margin: 0;
}

.changeCardWorks {
  width: 90%;
  margin: auto;
  max-width: 1300px;
}

.changeCardWorks a {
  text-decoration: none;
}

.changeCardWorks ul {
  padding: 0;
  list-style: none;
  border: none;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 70px;
}

.changeCard ul {
  padding: 0;
  list-style: none;
  border: none;
  /* display: flex; */
  justify-content: space-evenly;
  gap: 0;
  margin-top: 70px;
margin-left: 30px;
}

.changeItem img {
  border: 0.5px solid lightgray;
}

.changeItem1 img {
  border: 0.5px solid lightgray;
  width: 90%;
}

.none-post img {
  border: 0.5px solid lightgray;
  width: 90%;
}

.news-changeItem1 img{
  border: 0.5px solid lightgray;
}

.changeItemTxt {
  width: 80%
}

.changeItemTxt p.itemTitle {
  font-size: 1rem;
  line-height: 1.56;
  /* margin: 0; */
  /* font-weight: lighter; */
  color: #313131;
  margin-bottom: 10px;
}

.itemCategory {
  display:inline-block;
  padding: 0.3em 0.4em;
  margin: 1em 0;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to bottom, #007CEE, #01C4EF);
  font-size: 14px;
}

.itemCategory.news {
  margin: 0 1em;
  border-radius: 10px;
}

.itemCategory p {
  margin: 0; 
  padding: 0;
}


/* お知らせ */
section.sec3 {
  margin-top: 5%;
  background-color: rgb(192 190 190 / 30%);
}

.news-inner {
  padding-top: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.news-title-jp {
  margin: 0;
  font-size: 3vw;
  font-weight: bold;
  color: black;
}

p.newsDate {
  margin-top: 1.3em;
  font-size: 14px;
  color: black;
}

.changeCard {
  width: 95%;
  margin: auto;
  max-width: 1200px;
}

.changeCard a {
  text-decoration: none;
}

li.changeItem1.grid1 {
  margin-bottom: 5%;
}

/* もっと見るボタン */
.more_btn {
  background: white;
  padding: 0.5rem 2rem;
  border: 2px solid #007CEE;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  display:inline-block;
  color: #007CEE;
}

.more_btn:hover {
  padding: 0.9rem 2.5rem;
}

.more {
  padding-bottom: 5%;
  text-align: center;
}


/**** フッター ****/
.footer-inner {
  display: flex;
  height: 50vh;
  background: url(img/footer.png) top center / cover no-repeat;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.common-footer-title {
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.footer-title {
  margin: 0;
  font-weight: bold;
  color: #fff;
  position: relative;
}

.footer-en-title {
  width: 320px;
  margin: -6% 0 0 45%;
}

.footer-text {
  color: #fff;
  font-size: 18px;
  padding: 3% 5% 2% 5%;
} 

/* お問い合わせボタン */
.footer-btn {
  background: linear-gradient(to bottom, #FF5C01, #EE8F00);
  padding: 0.5rem 2rem;
  border: 2px solid #fff;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  display:inline-block;
  color: #fff;
}

.footer-btn:hover {
  padding: 0.9rem 2.5rem;
}

/* コピーライト */
a.privacy {
  color:inherit;
  text-decoration: none;
  margin-right: 2%;
}

a.security {
  color:inherit;
  text-decoration: none;
}

.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  background: black;
  margin: 0;
  font-size: 13px;
}

/* ****** PAGE ****** */
/* ****** PC ****** */
.page-main-visual {
  display: flex;
  background: url(img/page-header.png) top center / cover no-repeat;
  align-items: center;
  justify-content: center;
  padding: 10% 0 15% 0;
  background-size: 100% 100%;
}

h1.page-title {
  width: 90%;
  margin: auto;
  text-align: center;
}

/* page-お問い合わせ */
.page-contact-main-visual {
  display: flex;
  background: url(img/contact.png) top center / cover no-repeat;
  align-items: center;
  justify-content: center;
  padding: 10% 0 15% 0;
  background-size: 100% 100%;
}

.c-text {
  width: 90%;
  margin: 0 auto;
}

p.contact-text {
  text-align: center;
  margin-bottom: 5%;
  width: 100%;
}

/* Contact Form 7 */
div#content {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
}

.c-box {
  padding-bottom: 20px;
}

/* 必須マーク */
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 8px;
	background: red; /* 背景色 */
	border-radius: 2px;
  font-weight: lighter;
  font-size: 14px;
}

/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8; /* 枠線の色 */
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

select.wpcf7-form-control.wpcf7-select {
	border: 1px solid #d0d5d8; /* 枠線の色 */
  padding: 8px 15px;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 3px;
}

/* 入力欄を見やすくする */
.c_input {
	background: #eff1f5; /* 背景色 */
}

/* 送信ボタンを見やすくする */
.c-submit {
  text-align: center;
  margin-bottom: 5%;
}

input.wpcf7-submit {
  background: linear-gradient(to bottom, #FF5C01, #EE8F00);
  padding: 0.5rem 2rem;
  border: 2px solid #fff;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  font-weight: bold;
}

div.wpcf7 .wpcf7-spinner {
  display: block;
}

/* ***お知らせ一覧ページ*** */
div#content-list {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}
.newsChangeCard {
  width: 100%;
  margin: auto;
}

.newsChangeCard ul {
  padding: 0;
  list-style: none;
  border: none;
  display: flex;
  justify-content: space-evenly;
  gap: 0;
  margin-top: 20px;
}

.newsChangeCard a {
  text-decoration: none;
}

li.news-changeItem1.news-grid1 {
  margin-bottom: 5%;
  list-style: none;
}

/* ***制作実績（詳細）*** */
#single-content {
  width: 70%;
  margin: 5% auto 15% auto;
}

.single-date {
  margin-bottom: 2%;
}

/* ***固定ページ*** */
div#content-page {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto 5% auto;
}


/* -------------- PCのみ -------------- */
@media screen and (min-width: 641px) {
  /* TOP */
  .main-visual {
    display: flex;
    background: url(img/pc_top_main.png) top center / cover no-repeat;
    flex-direction: column;
    padding: 2% 0 20% 5%;
    background-size: 100% 100%;
  }

  .top-en-text {
    font-size: 4rem;
  }

  .top-ja-text {
    font-size: 1.5rem;
  }

  /* 事業内容 */
  .business-title-jp {
    font-size: 37px;
  }

  .business-title-en {
    width: 30%;
    margin: -2% 0 0 28%;
  }

  .business-content {
    width: 100%;
  }

  .colum1 {
    display: flex;
  }

  .colum1_title {
    font-size: 1.5vw;
  }

  .content-text {
    font-size: 16px;
  }

  .colum1__txt {
    width: 70%;
  }

  .colum1__img {
    padding-top: 10%;
  }

  /* ドット */
  .circle-text {
    margin-top: -100px;
    margin-left: 220px;
  }

  .pc-left-dot-img {
    width: 300px;
  }

  .design {
    margin-top: -130px;
  }

  .maintenance {
    margin-top: -130px;
  }

  .circle-text-right {
    margin-top: -120px;
    text-align: right;
    margin-right: 110px;
  }

  .right-dot-img {
    width: 270px;
  }

  .web-site {
    margin-top: -110px;
  }

  .sp-left-dot-img {
    display: none;
  }

  .sp-right-dot-img {
    display: none;
  }

  /* 制作実績 */
  .works-title-jp {
    font-size: 37px;
  }

  .works-title-en {
    width: 25%;
    margin: -2.9% 0 0 28%;
  }

  /* お知らせ */
  .news-title-jp {
    font-size: 37px;
  }

  .news-title-en {
    width: 25%;
    margin: -2.9% 0 0 28%;
  }

  .changeItemTxt {
    margin-bottom: 7%;
  }

  .changeItemTxt.news {
    display: flex;
margin: auto;
  }

  /* Footer */
  .footer-title {
    font-size: 37px;
  }

  .footer-en-title-sp {
    display: none;
  }
}
/* ------------ タブレット ------------ */
@media screen and (max-width: 793px) {
  .pc-nav {
    display: none;
  }

  #hamburger {
    background-color: transparent;
    position: relative;
    height: auto;
    width: 60px;
    z-index: 100;
    position: absolute;
    right: 0;
  }

  .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #007CEE, #01C4EF);
    margin: auto;
  }

  #hamburger .icon span {
    position: absolute;
    left: 18px;
    width: 24px; /* 線の幅 */
    height: 2px; /* 線の太さ */
    background-color: white; /* 線の色 */
    border-radius: 8px;
    transition: ease 0.75s;
  }

  #hamburger .icon span:nth-of-type(1) {
    top: 12px;/* 上の線の位置調整 */
  }

  #hamburger .icon span:nth-of-type(2) {
    top: 20px; /* 真ん中の線の位置調整 */
  }

  #hamburger .icon span:nth-of-type(3) {
    bottom: 10px; /* 下の線の位置調整 */
  }

  #hamburger .open span:nth-of-type(1) {
    top: 20px;
    transform: rotate(45deg); /* 線の角度調整 */
    background-color: white; /* 線の色 */
  }

  #hamburger .open span:nth-of-type(2) {
    opacity: 0; /* 透明化 */
  }

  #hamburger .open span:nth-of-type(3) {
    top: 20px;
    transform: rotate(-45deg);  /* 線の角度調整 */
    background-color: white; /* 線の色 */
  }

  .sp-nav {
    display: none;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .8);
  }

  .sp-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    height: 100vh;
    padding: 0 20px;
  }

  .sp-nav li {
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-size: 20px 1px;
    background-repeat: repeat-x;
    background-position: center bottom;
  }
  .sp-nav a {
    color: white;
  }
  /* ****** フッター ****** */
  .footer-pc {
    display: none;
  }
}

/* -------------- SP -------------- */
@media screen and (max-width: 640px) {
  /* ****** TOP ****** */
  .main-visual {
    display: flex;
    background: url(img/sp_top_main.png) top center / cover no-repeat;
    flex-direction: column;
    padding: 2% 0 100% 5%;
    background-size: 100% 100%;
  }

  .top-en-text {
    font-size: 2.5rem;
  }

  .top-ja-text {
    font-size: 1rem;
  }

  /**** 事業内容 ****/
  .business-content {
    width: 90%;
  }

  .pc-left-dot-img {
    display: none;
  }

  .pc-right-dot-img {
    display: none;
  }

  img.sp-right-dot-img {
    width: 29%;
  }

  img.sp-left-dot-img {
    width: 24%;
  }

  .sp-txt-change {
    margin-left: auto;
  }

  .circle-text {
    text-align: right;
    margin-right: 45px;
  }

  .circle-text-right {
    margin-left: 30px;
  }

  .design {
    margin-top: -60px;
  }

  .maintenance {
    margin-top: -40px;
  }

  /**** 制作実績 ****/

  li.none-post {
    display: none;
  }

  li.changeItem.grid {
    margin: 0;
    padding: 0;
  }
  li.changeItem.grid a {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  li.changeItem.grid:last-child a {
    border-bottom: solid 1px #eee;
  }
  li.changeItem.grid a img {
    height: max-content;
    margin-bottom: 0;
  }
  li.changeItem.grid a .changeItemTxt time {
    display: none;
  }
  li.changeItem.grid a .changeItemTxt .itemTitle {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
  }

  /* 事業内容 */
  section.sec1 {
    margin-top: -30%;
  }

  .business-title-jp {
    font-size: 28px;
  }

  .business-title-en {
    width: 48%;
    margin: -3% 0 0 40%;
  }

  .colum1 {
    position: relative;
    grid-template-rows: 50% 50%;
  }

  .design {
    display: flex;
    flex-direction: column;
  }

  .maintenance {
    display: flex;
    flex-direction: column;
  }

  .sp-img-change {
    order: 2;
  }

  .sp-txt-change {
    order: 1;
  }
  
  .colum1__img {
    width: 80%;
  }

  .sec_img {
    margin-left: auto;
  }

  .colum1_title {
    font-size: 1rem;
  }

  .colum1__txt {
    width: 85%;
  }

  /* 制作実績 */
  .works-title-jp {
    font-size: 28px;
  }

  .works-title-en {
    width: 40%;
    margin: -5.5% 0 0 39%;
  }

  /* お知らせ */
  .news-title-jp {
    font-size: 28px;
  }

  .news-title-en {
    width: 40%;
    margin: -5.5% 0 0 39%;
  }

  .changeCard {
    text-align: center;
  }

  .changeItemTxt {
    margin: 0 auto 7% auto;
  }

.changeItemTxt.news {
    text-align: left;
    width: 100%;
  }
  /* フッター */
  .footer-title {
    font-size: 28px;
    position:relative;
  }

  .footer-en-title {
    display: none;
    /* z-index: 10; */
    position:absolute;
  }

  .footer-en-title-sp {
    width: 210px;
    margin: -6% 0 0 35%;
    /* z-index: -1; */
  }
}