@charset "UTF-8";
/* common */
:root{
  --background: #ffffff;
  --content-background: #fafafa;
  --background_sub: #DDDDDD;
  --accent-color: #fdc427;
  --font-color: #000b00;
}

body{
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--font-color);
  background-color: var(--background);
}

.inner{
  padding: 120px 16px 120px 16px;
}
@media screen and (min-width: 1080px) {
  .inner{
    margin: 0 auto;
    max-width: 840px;
    padding: 120px 0px 120px 0px;
  }
  .sm-inner_pc{
    max-width: 440px;
    margin: 0 auto;
  }
}

.m_section-ttl_wrap{
  text-align: center;
}
.m_section-ttl{
  position: relative;
  font-size: 32px;
  font-weight: bold;
}
.m_section-ttl::after{
  position: absolute;
  content: "";
  font-size: 14px;
  font-weight: normal;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* header */
.l_header{
  height: 100%;
  padding-top: 16px;
}
@media screen and (min-width: 1080px) {
  .l_header{
    padding: 64px;
  }
}

@media screen and (min-width: 1080px) {
  .l_header-flex{
    display: flex;
    height: 100%;
    justify-content: space-between;
  }
}

.l_header-right{
  text-align: center;
}
.l_header-ttl{
  font-size: 24px;
  font-weight: bold;
}
@media screen and (min-width: 1080px) {
  .l_header-ttl{
    font-size: 32px;
  }
}

@media screen and (min-width: 1080px) {
  .l_header-nav{
    height: 100%;
  }
}
@media screen and (min-width: 1080px) {
  .l_header-lists{
    height: inherit;
    display: flex;
    height: inherit;
    align-items: center;
    gap: 40px;
  }
}

.twitter-img{
  object-fit: cover;
}
.l_header-item_link{
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* kv */
.kv-img{
  height: 540px;
  width: 100vw;
  object-fit: cover;
}

/* about */
.m_section-ttl_about::after{
  content:"- 私について -" ;
}

.m_about-txt_wrap{
  margin-top: 80px;
}
.m_about-txt_main{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.m_about-txt_sub{
  margin-top: 40px;
}

@media screen and (min-width: 1080px) {
  .m_about-flex{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
    gap: 80px;
  }
}

.m_about-kv{
  object-fit: cover;
  margin-top: 40px;
}
@media screen and (min-width: 1080px) {
  .m_about-kv-img{
    width: 360px;
    height: 490px;
  }
}

.m_about-kv-img{
  object-fit: cover;
}

.m_about_name_wrap{
  margin-top: 40px;
}
@media screen and (min-width: 1080px) {
  .m_about_name_wrap{
    margin-top: none;
  }
}

.m_about_name{
  font-weight: bold;
  font-size: 18px;
}
.m_about_desc{
  margin-top: 40px;
}
.m_about_desc:nth-of-type(2){
  margin-top: 24px;
}

/* service */
.m_services-flex{
  margin-top: 80px;
}
@media screen and (min-width: 1080px) {
  .m_services-flex{
    display: flex;
    justify-content: space-between;
  }
}

.m_service_wrap:not(:first-child){
  margin-top: 40px;
}
@media screen and (min-width: 1080px) {
  .m_service_wrap:not(:first-child){
    margin-top: 0px;
  }
  .m_service_wrap{
    width: 240px;
  }
}
.m_section-ttl_service::after{
  content: "- サービス -";
}

.m_service-ttl{
  text-align: center;
  position: relative;
  font-size: 20px;
  font-weight: bold;
}
.m_service-ttl::after{
  content: "";
  position: absolute;
  color: var(--accent-color);
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.m_service-ttl__design::after{
  content: "WEB DESIGN";
  font-size: 14px;
  font-weight: normal;
}
.m_service-ttl__coding::after{
  content: "CODING";
  font-size: 14px;
  font-weight: normal;
}
.m_service-ttl__photo::after{
  content: "PHOTOGRAPH";
  font-size: 14px;
  font-weight: normal;
}

.m_service-desc{
  margin-top: 24px;
}
@media screen and (min-width: 1080px) {
  .m_service-desc{
    margin-top: 40px;
  }
}

/* l_woks */
.l_works{
  background-color: #fafafa;
}
@media screen and (min-width: 1080px) {
  .l_works{
    background-color: transparent;
  }
}
.m_section-ttl_works.m_section-ttl_works::after{
  content: "- 実績 -";
}

.m_works_flex{
  margin-top: 80px;
}
@media screen and (min-width: 1080px) {
  .m_works_flex{
    display: flex;
    justify-content: space-between;
  }
}

.m_work_wrap:not(:first-child){
  margin-top: 40px;
}
@media screen and (min-width: 1080px) {
  .m_work_wrap:not(:first-child){
    margin-top: 0px;
  }
}
.m_work-desc_wrap{
  margin-top: 24px;
}

.m_work-desc_ttl{
  font-weight: bold;
}

.m_work-desc_sub{
  margin-top: 8px;
}

.m_works-button_wrap{
  margin: 0 auto;
  width: 199px;
  height: 61px;
  border: #000b00 1px solid;
  text-align: center;
  margin-top: 80px;
}

.m_works-button_link{
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* contact */
.m_section-ttl_contact::after{
  content: "- お問い合わせ -";
}

.m_contact-form{
  margin-top: 80px;
}

.m_form-unit{
  margin-top: 80px;
}
.m_form-unit:not(:first-of-type){
  margin-top: 40px;
}

.m_form-unit-head{
  font-weight: bold;
  font-size: 18px;
  position: relative;
}
.m_form-unit-head::after{
  position: absolute;
  content: "";
  font-size: 14px;
  color: #aaaaaa;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.m_form-unit-head_name::after{
  content: "Yamada Hanako";
}
.m_form-unit-head_email::after{
  content: "yamada@gmail.com";
}

.form-unit-contents{
  margin-top: 8px;
}

.m_form-input, .m_form-textarea{
  width: 100%;
  border: var(--background_sub) 1px solid;
  background-color: var(--content-background);
}
.m_form-textarea::placeholder{
  font-size: 14px;
  padding: 8px;
}

.m_form-checkbox{
  appearance: checkbox;
}

.m_form-label-txt{
  font-size: 16px;
  text-decoration: underline;
}

.m_form-unit_submit{
  margin: 0 auto;
  margin-top: 40px;
  border: 2px solid var(--accent-color);
  width: 176px;
  height: 61px;
  border-radius: 28px;
}

.submit{
  height: inherit;
  font-size: 16px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  color: var(--accent-color);
}

/* footer */
.l_footer{
  background-color: var(--content-background);
}

.l_footer-inner{
  padding: 24px 16px;
}

.l_footer-ttl{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.l_footer-nav{
  margin-top: 24px;
  height: 100%;
}

.l_footer-lists{
  height: inherit;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.l_footer-copyright_wrap{
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
}
.l_footer-copyright{
  font-size: 14px;

}