@charset "utf-8";
/*
Theme Name: ao to ki.design
Author:yanokana
Description:オリジナルテーマ
Version:1.0
*/

html {
    font-size: 62.5%;
  }
  
  body {
    font-size: 1.6rem;
    color: #3B3B3B;
    font-family: "futura-pt", "toppan-bunkyu-gothic-pr6n", serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.15em;
  }

  .button_box {
    text-align: center;
  }

  .button_box a {
    color: #3B3B3B;
    text-decoration: none;
  }

  .button_box img {
    width: 150px;
    height: 15px;
    display: inline;
  }

  .button {
    color: #3B3B3B;
    text-decoration: none;
    display: inline-block;
    text-align: center;
  }

  .button img {
    width: 150px;
    height: 15px;
    display: inline;
  }

  .header {
    background-color: #C5D7DD;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 42px 78px;
  }

  .header h1 a {
    font-size: 2.4rem;
    letter-spacing: 0;
    color: #fff;
    text-decoration: none;
  }

  h2 {
    font-size: 3.6rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    line-height: 150%;
  }

  .me {
    font-weight: bolder;
  }

  h3 {
    font-size: 1.6rem;
    font-weight: normal;
  }

  h4 {
    font-weight: normal;
  }

  .header_nav_main {
    font-size: 2rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    column-gap: 40px;
    letter-spacing: 0;
    list-style: none;
  }

  .header_nav_main a {
    color: #fff;
    text-decoration: none;
  }

  .header_nav_main a:hover {
    text-decoration: underline 3px #F5F6CC;
    text-underline-offset: 2px;
  }
  
  .main_image {
    width: 90%;
    margin: auto;
  }
  
  .main_image img {
    width: 100%;
    margin: auto;
    display: block;
  }

  #slider {
    width: 100%;
    height: 700px;
}

  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }

.inner {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.about {
  margin-top: 140px;
}

.about_image img {
    width: 340px;
}

.about_text {
    width: 360px;
    margin-top: 15px;
    letter-spacing: normal;
}

.about_text p {
    margin-bottom: 1.6rem;
}

.about_button {
  text-align: right;
}

.about_button a {
  color: #3B3B3B;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.about_contents {
    display: flex;
    justify-content: center;
    column-gap: 81px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.service ,
.works {
  margin-top: 118px;
}

.display_flex {
    display: flex;
    justify-content: center;
    column-gap: 45px;
    margin-top: 36px;
    margin-bottom: 64px;
}
 
.web_img {
    background-image: url(images/web_design.png);
    width: 395px;
    height: 240px;
    background-repeat: no-repeat;
    background-size: contain;
}

.web_img h3 {
    text-align: center;
    line-height: 240px;
}

.graphic_img {
    background-image: url(images/graphic_design.png);
    width: 395px;
    height: 240px;
    background-repeat: no-repeat;
    background-size: contain;
}

.graphic_img h3 {
    text-align: center;
    line-height: 240px;
}

.works_contents {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  margin-bottom: 48px;
  column-gap: 6px;
}

.works_contents_card h3 {
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: normal;
}

.works_contents_card img {
  width: 300px;
}

.contact {
  background-color: #F5F6CC;
  text-align: center;
  margin-top: 240px;
  padding-top: 136px;
  padding-bottom: 80px;
}

.contact a {
  text-decoration: none;
  color: #3B3B3B;
}

.contact h2 {
  margin-bottom: 68px;
}

.contact img {
  width: 150px;
  height: 15px;
  display: inline;
}

footer {
  background-color: #C5D7DD;
}

.footer_flex {
  padding-top: 62px;
  padding-bottom: 119px;
  padding-left: 142px;
  padding-right: 160px;
  display: flex;
  justify-content: center;
  column-gap: 60%;
}

.footer_logo {
  color: #fff;
  font-size: 3.6rem;
  letter-spacing: 0;
}

.footer_logo a {
  color: #fff;
  text-decoration: none;
}

.footer_sns li {
  margin-bottom: 20px;
  list-style: none;
}

.footer_sns li a {
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
}

.footer_sns li a:hover {
  text-decoration: underline 3px #F5F6CC;
  text-underline-offset: 4px;
}

.footer_copyright {
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0;
  padding-bottom: 16px;
  display: block;
  text-align: center;
}

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  line-height: 1.8;
  text-align: center;
  z-index: 99;
}
#page-top a {
  background: #85aebb;
  text-decoration: none;
  color: #fff;
  width: 100px;
  height: 100px;
  padding: 28px 20px;
  margin: auto;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}

/* 下層ページ共通 */
.page_main_title {
  height: 162px;
  background-image: url(images/page_titleback.png);
  background-repeat: no-repeat;
  background-position:left 30px bottom;
  background-size: auto;
}

.page_main_title h2 {
  font-size: 3.6rem;
}

.page_main {
  margin-top: 108px;
}

.page_about_container {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  column-gap: 65px;
}

.page_about_profile {
  line-height: 250%;
  margin-top: 80px;
  margin-left: 50px;
  letter-spacing: normal;
}

.page_about_text {
  margin-top: 14px;
  line-height: 200%;
  letter-spacing: normal;
}

.page_skill_title {
  height: 162px;
  background-image: url(images/page_titleback.png);
  background-repeat: no-repeat;
  background-position:left 30px bottom;
  background-size: auto;
}

.page_skill {
  margin-top: 160px;
}

.page_skill_card {
  text-align: center;
}

.page_display_flex {
  display: flex;
  justify-content: center;
  column-gap: 28px;
  margin-top: 26px;
}

.page_web_img {
  background-image: url(images/page_about_image1.jpg);
  width: 360px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: contain;
}

.page_web_img h3,.page_graphic_img h3,.page_cording_img h3 {
  line-height: 240px;
}

.page_graphic_img {
  background-image: url(images/page_about_image2.jpg);
  width: 360px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: contain;
}

.page_cording_img {
  background-image: url(images/page_about_image3.jpg);
  width: 360px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: contain;
}

.page_skill_card h3 {
  font-size: 2.4rem;
  letter-spacing: 0.2em;
}

.page_skill_card p {
  margin-top: 30px;
  width: 300px;
  display: inline-block;
  text-align: left;
}

.page_skill-name {
  font-size: 2.4rem;
  text-align: center;
  text-decoration: underline #F5F6CC 2px;
  text-underline-offset: 5px;
  margin-top: 100px;
}

.page_service_image {
  text-align: center;
}

.page_service_image img {
  margin: 26px auto 45px;
}

.page_web_contents {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 30px;
}

.page_web_contents li {
  background-color: #fff;
  padding: 24px 72px;
  margin-bottom: 30px;
  border-radius: 50px;
  border: 1px solid #3B3B3B;
  list-style: none;
}

.page_graphic {
  margin-top: 141px;
}

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

.page_service-word {
  font-size: 2rem;
  text-align: center;
  text-decoration: underline #F5F6CC 2px;
  text-underline-offset: 5px;
  margin-top: 100px;
}

.spacebetween {
  display: flex;
  justify-content: space-between;
 
}

.works_title h2 {
  width: 230px;
}

.page_works_nav_main {
  display: flex;
  justify-content: space-between;
  column-gap: 34px;
  list-style: none;
}

.page_works_nav_main a {
  color: #3B3B3B;
  text-decoration: none;
}

.page_works_nav_main a:hover {
  text-decoration: underline 3px #F5F6CC;
  text-underline-offset: 2px;
}

.page_h2 {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 56px;
}

.page_h3 {
  font-size: 2rem;
  font-weight: bold;
  margin-left: 34px;
  margin-bottom: 24px;
}

.page_works_img {
  width: 576px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 40px;
}

.page_works_img img {
  width: 100%;
}

.page_works_text {
  display: flex;
  column-gap: 48px;
  margin-left: 34px;
  margin-bottom: 40px;
}

.page_works_category {
  font-weight: bold;
  width: 148px;
}

.page_works_text_p {
  width: 580px;
  line-height: 180%;
}

.page_works_img_li {
  display: flex;
  justify-content: center;
  column-gap: 63px;
  margin-top: 240px;
  margin-bottom: 240px;
  list-style: none;
}

.page_works_img_li img{
  width: 200px;
}

.page_contact_text {
  width: 480px;
  display: inline-block;
  text-align: left;
  margin-top: 26px;
}

.page_contact_center {
  text-align: center;
}

.page_contact_complete {
  margin-bottom: 200px;
}

.Form {
  margin-top: 105px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 140px;
  max-width: 480px;
}

.Form-Item {
  padding-top: 16px;
  padding-bottom: 16px;
  width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}

.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  padding-bottom: 8px;
}

.Form-Item-Label.isMsg {
  margin-bottom: 8px;
}

.Form-Item-Label-Required {
  display: inline-block;
  text-align: center;
  color: #FE7F7F;
}

.Form-Item-Input {
  border: none;
  border-radius: 6px;
  padding-left: 1em;
  padding-right: 1em;
  height: 50px;
  flex: 1;
  width: 100%;
  max-width: 480px;
  background: #F5F5F5;
}

.Form-Item-Textarea {
  border: none;
  border-radius: 6px;
  padding-top: 18px;
  padding-left: 1em;
  padding-right: 1em;
  height: 390px;
  flex: 1;
  width: 100%;
  max-width: 480px;
  background: #F5F5F5;
}

.Form-Btn {
  border: none;
  margin-top: 22px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  color: #3B3B3B;
  background: none;
}

.Form-Btn a {
  text-decoration: none;
  color: #3B3B3B;
}

@media screen and (max-width: 1184px) {
  .footer_logo {
    font-size: 2.8rem;
  }
}

@media screen and (max-width:1180px) {
  .page_display_flex {
    flex-wrap: wrap;
  }

  .page_skill_card {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 1045px) {
  .footer_logo {
    font-size: 2rem;
  }
}

@media screen and (max-width:1000px) {
  .page_works_nav {
    display: block;
    margin-left: auto;
    margin-bottom: auto;
  }

  .page_works_nav_main {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 48px;
    margin-top: 28px;
    margin-bottom: 64px;
  }

  .page_works_nav_main li {
    margin-bottom: 28px;
  }

  .page_works_img_li {
    column-gap: 24px;
  }
}

@media screen and (max-width:960px) {
  .inner {
    width: 90%;
  }
}

@media screen and (max-width: 904px) {
  .footer_logo {
    font-size: 2rem;
    margin-bottom: 72px;
  }
  .footer_flex {
    padding: 62px 120px;
    display: block;
    text-align: center;
  }
  .footer_sns li {
    margin-bottom: 20px;
  }
  
  .footer_sns li a {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
  }
}
@media screen and (max-width:860px) {
  .display_flex {
    display: block;
    
    margin-top: 36px;
    margin-bottom: 64px;
  }

  .web_img {
    margin-bottom: 36px;
    margin-left: auto;
    margin-right: auto;
  }

  .graphic_img {
    margin-left: auto;
    margin-right: auto;
  }

  .works_contents {
    flex-wrap: wrap;
    justify-content: center;
  }

  .works_contents_card {
    margin-bottom: 24px;
  }

  .contact {
    margin-top: 118px;
  }
}
@media screen and (max-width:770px) {
  .header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 42px 78px;
    text-align: center;
  }

  .header h1 {
    margin-bottom: 24px;
  }

  .header_nav_main {
    justify-content: center;
    column-gap: 60px;
  }

  #slider {
    width: 100%;
    height: 400px;
  }

  h2 , .page_main_title h2 {
    font-size: 2.4rem;
  }

  .page_about_container {
    display: block;
  }

  .page_about_profile {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 0;
    line-height: 180%;
  }
  
  .page_about_text {
    width: 76%;
    margin-top: 40px;
    line-height: 180%;
    
  }
  
  .page_about_part {
    display: flex;
    justify-content: center;
    column-gap: 48px;
  }
}

@media screen and (max-width:700px) {
  .spacebetween {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .page_works_text {
    display: block;
  }

  .page_works_category {
    margin-bottom: 16px;
  }

  .page_works_img_li {
    margin-top: 160px;
    margin-bottom: 160px;
  }
}

@media screen and (max-width:660px) {
  .inner {
    width: 90%;
  }
  
  .page_works_img {
    width: 80%;
  }

  .page_works_text_p {
    width: 90%;
  }
}

@media screen and (max-width: 610px) {
  .main_image {
    width: 100%;
  }
  
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .about_contents {
    display: block;
   text-align: center;
  }
  
  .about_image ,.about_text {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}

 .about_image img {
  width: 70%;
  margin: auto;
 } 

.about_button {
  text-align: center;
}
}
@media screen and (max-width:540px) {
  .page_skill-name {
    font-size: 1.8rem;
  }

  .page_about_part {
    display: block;
  }

  .page_about_profile {
    text-align: center;
    margin-bottom: 48px;
    
  }

  .page_about_profile p {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 24px;
    border-bottom: solid #3B3B3B 1px;
  }

  .page_about_img {
    text-align: center;

  }

  .Form-Item {
    width: 80%;
  }
  
  .page_contact_text {
    width: 80%;
  }
}

@media screen and (max-width: 530px) {
  .header_nav_main {
    column-gap: 30px;
  }
}

@media screen and (max-width: 480px) {
.header {
  width: 100%;
  align-items: center;
  padding: 42px;
}

.page_graphic_contents {
  width: 100%;
}

.Form-Btn {
  margin-top: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 160px;
  font-size: 16px;
  }

.Form-Item-Textarea {
  margin-top: 18px;
  margin-left: 0;
  height: 200px;
  flex: inherit;
  font-size: 15px;
}

.Form-Item-Input {
  margin-left: 0;
  margin-top: 18px;
  height: 40px;
  flex: inherit;
  font-size: 15px;
}
 
.Form-Item-Label.isMsg {
  margin-top: 0;
}

.Form-Item-Label {
  max-width: inherit;
  display: flex;
  align-items: center;
  font-size: 15px;
}
}

@media screen and (max-width:430px) {
  .web_img {
    width: 90%;
    
}

.web_img h3 {
    line-height: 13;
}

.graphic_img {
    width: 90%;
}

.graphic_img h3 {
    line-height: 13;
}
}