/*iPhoneおよび共通設定*/
@charset "UTF-8";

html {
  font-size: 62.5%;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

h2 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #191970;
  text-align: center;
  letter-spacing: 0.2rem;
  padding: 7rem 0 1.6rem 0;
  margin: 0 auto;
  text-shadow: 0 0 2px #ffffff;
}

p {
  font-size: 1.5rem;
  font-weight: 300;
  color: #646464;
  line-height: 3.3rem;
  width: 77%;
  margin: 0 auto;
}

nav, h2, p, button {
  font-family: source-han-sans-japanese, sans-serif;
}

header {
  z-index: 100;	
  position: fixed;
  width: 100%;
  height: 6rem;
  background-color:rgba(206, 221, 200, 0.8);
}

/* メニュー開閉 */
.drawer_toggle {
  z-index: 200;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 6rem;
  height: 6rem;
}
.drawer_toggle span {
  position: absolute;
  top: 1.9rem;
  left: 1.7rem;
  display: inline-block;
  width: 3rem;
  height: 0.3rem;
  border-radius: 0.2rem;
  background-color: #666;
  vertical-align: top;
}
.drawer_toggle span:nth-child(2) {
  margin-top: 1rem;
}
.drawer_toggle span:last-child {
  margin-top: 2rem;
}
/* 開く動作 */
.drawer_toggle.open span {
  top: 2.9rem;
  left: 1.4rem;
  width: 3.5rem;
  margin: 0;
}
.drawer_toggle.open span:first-child {
  transform: rotate(45deg);
}
.drawer_toggle.open span:nth-child(2) {
  display: none;
}
.drawer_toggle.open span:last-child {
  transform: rotate(-45deg);
}
/* メニュー開閉 */

/* メニュー */
header {
  z-index: 100;	
  position: fixed;
  width: 100%;
  height: 6rem;
  background-color:rgba(206, 221, 200, 0.8);
}

/* 現在機能していない */
header h1 {
  position: absolute;
  top: 18px;
  left: 15px;
}
header .logo img {
  width: 200px;
}
/* 現在機能していない */

header nav {
  box-sizing: border-box;
  position: fixed;
  top: 6rem;
  display: none;
  width: 100%;
  height: calc(100% - 4rem);
  background: #fff;
  opacity: 0.95;
}
header nav ul {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header nav ul li a {
  display: block;
  margin: 2.3rem 0 0 0 ;
  padding: 1rem 0.5rem 1rem 0.5rem;
  color: #666;
  font-size: 1.5rem;
  text-align: center;
  text-decoration: none;
}

.works_a:after {
  content: "Works";
  display: block;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
  color: #505050;
  padding-top: 0.8rem;
  left: 0;
  right: 0;
}
.service_a:after {
  content: "Service";
  display: block;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
  color: #505050;
  padding-top: 0.8rem;
  left: 0;
  right: 0;
}
.price_a:after {
  content: "Price";
  display: block;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
  color: #505050;
  padding-top: 0.8rem;
  left: 0;
  right: 0;
}
.contact_a:after {
  content: "Contact";
  display: block;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
  color: #505050;
  padding-top: 0.8rem;
  left: 0;
  right: 0;
}
.instagram_a:after {
  content: "Instagram";
  display: block;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  font-weight: lighter;
  color: #505050;
  padding-top: 0.8rem;
  left: 0;
  right: 0;
}
/* メニュー */

/* ページトップ移動ボタン*/
.js-pagetop {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  cursor: pointer;
}
.js-pagetop span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
}
/* ページトップ移動ボタン*/

.topimg {
  grid-template-columns: 1fr 1fr;
  display: grid;
  width: 31rem;
  margin: 0 auto;
}
.midashi {
    width: 100%;
    grid-column: 1;
    margin: 9rem 3rem 3rem 0;
}
.tomato {
    width: 90%;
    grid-column: 2;
    margin: 11rem 2rem 1rem 4rem;
}

.approach, .contact, footer {
  background-color: #D9E3D4;
}

/* approach部分 */
.approach h2 {
  background-image: url(images/approach.png);
  background-repeat: no-repeat;
  background-position: bottom;
}
.approach h3 {
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1.6rem;
  color: rgb(80, 80, 80);
  margin: 4rem auto 2rem auto;
  position: relative;
  padding: 0.5rem;
  text-align: center;
}
.approach h3:before {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 25px);
  width: 50px;
  height: 0.2rem;
  content: '';
  border-radius: 3px;
  background: rgb(80, 80, 80);
}
.profile {
  padding-bottom: 4.8rem;
}
/* approach部分 */

/* works部分 */
.works {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

      .works_2 h2 {
        background-image: url(images/works.png);
        background-repeat: no-repeat;
        background-position: 50% 70%;
        background-color: rgb(255, 255, 255);
        padding-top: 12rem;
        padding-bottom: 6rem;
      }
      .works_2 {
        background-color: #D9E3D4;
      }

        .works_3 h2 {
          background-image: url(images/works.png);
          background-repeat: no-repeat;
          background-position: 50% 70%;
          background-color: rgb(255, 255, 255);
          padding-top: 12rem;
          padding-bottom: 6rem;
        }
        .works_3 {
          background-color: #D9E3D4;
        }
.works h2 {
  background-image: url(images/works.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-bottom: 0rem;
}

/* works事例部分 */
.works .img {
  width: 77%;
  box-shadow: 0 0 5px 1px rgb(171, 172, 163) ; 
  margin: 0 auto;
}
.container {
  width: 77%;
  display: flex;
  margin: 0 auto;
}
.container div {
  font-family: din-2014, sans-serif;
  font-size: 1.2rem;
  color: #F07D6E;
  border: solid #F07D6E;
  border-width: 0.2rem;
  width: 6.5rem;
  height:2.2rem;
  line-height:2.2rem;
  margin: 1rem 1rem 3rem 0;
  text-align:center;
}

      .works_2 .container div {
        font-family: din-2014, sans-serif;
        font-size: 1.2rem;
        color: #F07D6E;
        border: solid #F07D6E;
        border-width: 0.2rem;
        width: 6.5rem;
        height:2.2rem;
        line-height:2.2rem;
        margin: 1.5rem 1rem 1rem 0 ;
        text-align:center;
      }
      .works_2 section {
        display: grid;
        width: 93%;
        background-color: unset;
        margin: 2rem auto 0 auto;
      }
      .works_2 img {
        display: grid;
        width: 77%;
        box-shadow: 0 0 5px 1px rgb(171, 172, 163) ; 
        margin: 0 auto;
        margin-bottom: 1rem;
      }
      .works_2 .works_2bg {
      background-color: #ffffff;
      }
      .works_2 .pf_p {
        width: 77%;
        margin: 0 auto;
      }
      .works_2 h4 {
        font-family: source-han-sans-japanese, sans-serif;
        font-size: 1.3rem;
        width: 10rem;
        height: 2rem;
        line-height:2rem;
        text-align: center;
        color: #646464;
        border: 0.1rem solid #646464;
        margin-top: 1.5rem;
      }
      .works_2 .pf_p p {
        width: 100%;
        line-height: 2.5rem;
        margin-top: 0.5rem;
      }
      .works_2 button {
        width: 100%;
        margin-top: 2rem;
      }
      
      .works_3 .container div {
          font-family: din-2014, sans-serif;
          font-size: 1.2rem;
          color: #F07D6E;
          border: solid #F07D6E;
          border-width: 0.2rem;
          width: 6.5rem;
          height:2.2rem;
          line-height:2.2rem;
          margin: 2.5rem 1rem 1.5rem 0;
          text-align:center;
        }
        .works_3 section {
          display: grid;
          width: 93%;
          background-color: rgb(255, 255, 255);
          margin: 2.5rem auto 0 auto;
        }
        .works_3 img {
          display: grid;
          width: 77%;
          box-shadow: 0 0 5px 1px rgb(171, 172, 163) ; 
          margin: 0 auto;
          margin-bottom: 1rem;
        }
        .works_3 .pf_p {
          width: 77%;
          margin: 0 auto;
        }
        .works_3 h4 {
          font-family: source-han-sans-japanese, sans-serif;
          font-size: 1.3rem;
          width: 10rem;
          height: 2rem;
          line-height:2rem;
          text-align: center;
          color: #646464;
          border: 0.1rem solid #646464;
          margin-top: 1.5rem;
        }
        .works_3 .pf_p p {
          width: 100%;
          line-height: 2.5rem;
          margin-top: 0.5rem;
        }
        .works_3 button {
          width: 100%;
          margin-top: 2.5rem;
        }

/* works事例部分 */
button{
  width: 77%;
  height: 3.5rem;
  background-color: #F07D6E;
  margin-bottom: 3rem;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  border-radius:0.2rem ;
}
button a {
  font-size: 1.6rem;
  color: #ffffff;
  text-decoration: none;
}
.works button {
  width: 77%;
}
/* works部分 */

/* service部分 */
#service div {
  display: grid;
  margin: 0 auto;
}
#service h2 {
  background-image: url(images/service.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  margin-bottom: 4rem;
}
#service img {
  margin: 0 auto;
  margin-bottom: 1.6rem;
}
#service  h3 {
  font-family: din-2014, sans-serif;
  font-size: 2rem;
  color: rgb(80, 80, 80);
  margin:  0 auto 2rem auto;
  text-align: center;
  position: relative;
  padding: 0.5rem;
}
#service  h3:before {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 25px);
  width: 50px;
  height: 0.2rem;
  content: '';
  border-radius: 3px;
  background: rgb(80, 80, 80);
}
#service p {
  margin-bottom: 3rem;
}
#service button {
  margin: 0 auto;
  margin-bottom: 4rem;
}
/* service部分 */

/* contact部分 */
.contact h2 {
  background-image: url(images/contact.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  margin-bottom: 3.5rem;
}
.contact div {
  margin-top: 3rem;
  text-align: center;
}
.contact p {
  margin-bottom:2rem;
}

        .contact_2 {
          width: 77%;
          margin: 0 auto;
        }
        .contact_2 .form_1{
          display: grid;
        }
        .contact_2 h2 {
        background-image: url(images/contact.png);
        background-repeat: no-repeat;
        background-position: 50% 70%;
        background-color: rgb(255, 255, 255);
        padding-top: 12rem;
        padding-bottom: 6rem;
      }
      .contact_2 p {
        width: 100%;
        font-family: source-han-sans-japanese, sans-serif;
        font-size: 1.7rem;
        color: #505050;
        margin-bottom: 1rem;
      }
      .contact_2 .required::before {
        content: "必須";
        font-size: 1rem;
        color: rgb(255, 255, 255);
        background-color: #F07D6E;
        padding:0 0.4rem 0 0.4rem ;
        margin-right: 0.4rem;
        border-radius:0.2rem ;
      }
.form_1 input[type="text"],
.form_1 input[type="email"],
.form_1 input[type="url"],
.form_1 textarea {
background-color: #fff;
color: #333;
width: 100%;
border: 1px solid #ddd;
font-size: 100%;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
margin-bottom: 1rem;
}
.form_1 input[type="submit"] {
width: 100%;
font-size: 100%;
padding: 0.2em 0.4em;
background: #F07D6E;
color: #fff;
border-radius: 0.2rem;
cursor: pointer;
border: none;
margin-top: 1rem;
}
.form_1 input[type="button"] {
width: 100%;
margin: 0 auto;
}
/* contact部分 */

/* price部分 */
.price div {
  display: grid;
}
.price h2 {
  background-image: url(images/price.png);
  background-repeat: no-repeat;
  background-position: 50% 70%;
  background-color: rgb(255, 255, 255);
  padding-top: 12rem;
  padding-bottom: 6rem;
}
table {
  font-family: source-han-sans-japanese, sans-serif;
  width: 77%;
  margin: 0 auto;
  font-size: 1.6rem;
  color: #505050;
  margin-bottom: 2rem;
}
th, td {
  padding: 1.6rem 1.2rem;
}
th {
  letter-spacing: 0.3rem;
  background-color: #D9E3D4;
  border: solid 1px #acacac;
}
td {
  border: solid 1px #acacac;
}
.price_p1 {
  font-size: 1.4rem;
}
.price_p2 {
  line-height: 2rem;
  margin-top: 0.7rem;
  font-size: 1.2rem;
  color: #F07D6E;
}
.price button {
  width: 77%;
  margin: 2rem auto 3rem auto ;
}
/* price部分 */


/* footer部分 */
footer div {
  height: 10.5rem;
  margin: 0 auto;
}
footer div ul {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding-top: 3rem;
  padding-left: 5rem;
  gap: 2rem 5rem;
}
footer div ul li {
  font-family: source-han-sans-japanese, sans-serif;
  font-size: 1.3rem;
  list-style: none;
}
footer div ul li a {
  color: #868686;
  text-decoration: none;
}
/* footer部分 */

/* ////////////////////////////////////////////////// */

/*iPadの設定*/
@media screen and (min-width: 600px){
.approach h2 {
  font-size: 2.1rem;
}
.works h2, #service h2, .contact h2 {
  font-size: 2.1rem;
  margin-bottom: 4rem;
}
h3 {
  font-size: 2rem;
}
p {
  font-size: 1.8rem;
  line-height: 4rem;
  width: 100%;
}
button a {
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
}

.topimg {
  width: 60rem;
}
.midashi {
  width: 100%;
}

.message h3 {
  height: 3rem;
}
.profile h3 {
  height: 3rem;
}
.message p {
  margin-bottom: 4rem;
}

.approach section, #service section {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  gap: 4rem;
}

.works section {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  margin-top: 6rem;
  gap: 0rem 2rem;
}
.pf img {
  width: 100%;
}
.container {
  width: 100%;
}
.container div {
  margin: 1rem 1rem 1rem 0;
}
button {
  width: 35%;
  height: 4.5rem;
}
	
.contact_2 .form_1 {
width: 100%;
}
.contact_2 span {
margin: 0 auto;
}
.contact_2 .form_1 input[type="submit"] {
width: 35%;
margin-top: 2rem;
margin-bottom: 2rem;
}
	
.works button {
  width: 35%;
  margin-top: 3rem;
}

.works_2 .pf_2 {
  width: 93%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 5rem 1fr;
  margin: auto;
}
.works_2 container {
  grid-column: 1;
}
.works_2 img{
  margin: 2rem 0 ;
  margin-top: 2rem;
  width: 90%;
}
.works_2 .pf {
  grid-column: 1;
  grid-row: 2;
}
.works_2 .pf_p {
  width: 93%;
  margin: auto 0 auto 2rem;
  grid-column: 2;
  grid-row: 2;
}
.works_2 .pf_p p{
  margin-top: 1rem;
  margin-bottom: 2rem;
}
	
          .works_3 section {
            width: 75%;
            display: grid;
            margin: 0 auto;
            margin-top: 3rem;
          }
          .works_3 img {
            display: grid;
            width: 77%;
            box-shadow: 0 0 5px 1px rgb(171, 172, 163) ; 
            margin: 0 auto;
            margin-bottom: 1rem;
          }
          .works_3 .container {
            width: 77%;
          }
          .works_3 .pf_p h4 {
            margin-bottom: 1rem;
          }
          .works_3 .pf_p p {
            margin-bottom: 3rem;
          }
          .works_3 button {
            margin-top: 0;
          }

.web_p {
  height: 9rem;
}

.contact p {
  width: 80%;
}

table {
  font-size: 1.8rem;
}
th, td {
  padding: 1.6rem 2rem;
}
.price_p1 {
  font-size: 1.7rem;
}
.price_p2 {
  font-size: 1.5rem;
}
.price p {
  width: 77%;
  margin: 0 auto;
}
.price button {
  margin-top: 3rem;
  width: 35%;
}

footer div ul {
  display: flex;
  padding: 3rem 5rem 0rem 5rem ;
}
footer div ul li {
  font-size: 1.5rem;
  padding: 0 auto;
  margin: 0 auto;
  position: relative;
  padding: 0.5rem;
  text-align: center;
}
footer div ul li:before {
  position: absolute;
  bottom: -7px;
  left: calc(50% - 25px);
  width: 50px;
  height: 0.1rem;
  content: '';
  border-radius: 3px;
  background: #868686;
}

}

/* ////////////////////////////////////////////////// */

/*PCの設定*/
@media screen and (min-width: 1050px){

  .drawer_toggle {
    right: 5rem;
  }

  .js-pagetop {
    position: fixed;
    bottom: 5rem;
    right: 6rem;
    cursor: pointer;
  }

 .topimg {
    width: 100%;
  }
  .midashi {
    width: 60%;
    margin: 11rem auto 5rem 13rem;
  }
  .tomato {
	width: 80%;
    margin: 10rem 8rem 2rem auto;
  }

  .contact_2 .form_1 {
    width: 77%;
    margin: 0 auto;
  }
  main, .topimg, .works_2, .works_3, .contact_2, .price{
    max-width: 1000px;
    margin: 0 auto;
    border-left: 4px solid #D9E3D4;
    border-right: 4px solid #D9E3D4;
}
  }