/*
Theme Name: qreer-child
Theme URI: 
Author: qreer
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: qreer
Text Domain: qreer-child
Tags: 
*/

:root{
  --contents-width: 1430px;
  --page-padding: 5%;
  --font-family: 'tt-commons-pro','noto-sans',sans-serif;
  --font-size-base: 16px;
  --font-size-base-sp: 16px;
  --primary-color: #4687e4;
  --selection-color: #ecf0ef;
  --text-color: #293e4c;
  --base-color: #f9f9f7;
  --bg-footer: #fff;
  --strong-color: #49585c;
  --line-color: #7f8b94;
  --margin-half-height: 50vh;
  --margin-base: var(--font-size-base);
}

body, html, h1, h2, h3, h4, h5, ul, li, div, p, img, section, a, 
header, footer, figure, main, dl, dt, dd, form, input, textarea, label, svg, strong, small{
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-family: var(--font-family);
  box-sizing: border-box;
}


/* WP余白の削除 */
html::before, html::after{
  display: none;
}

body::before, body::after{
  display: none;
}

header::before, header::after{
  display: none;
}

div::before, div::after{
  display: none;
}

section::before, section::after{
  display: none;
}

figure::before, figure::after{
  display: none;
}

:root :where(.is-layout-flex) {
  gap: 0;
}

table::before, table::after{
   display: none; 
}
:is(tr,td,tbody)::before,
:is(tr,td,tbody)::after{
  display: none; 
}

figure.wp-block-table{
  margin: 0;
}

:root :where(.is-layout-flow) > * {
  margin-block-start: 0;
}

:root :where(.is-layout-constrained) > * {
    margin-block-start: 24px;
    margin-block-end: 0;
}

button::before, button::after{
  display: none;
}

ul::before, ul::after{
  display: none;
}

p::before, p::after{
  display: none;
}

span::before, span::after{
  display: none;
}

label::before, label::after{
  display: none;
}

input::before, input::after{
  display: none;
}



h1, h2, h3, h4, h5 {
  font-feature-settings: 'palt' 1;
}
html{
  height: 100%;
  position: relative;
  background-color: var(--base-color);
}

*::after, *::before{
  content: '';
  display: inline-block;
}

::selection{
  background-color: var(--selection-color);
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul{
  list-style: none;
}

span.br {
  display: inline;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (max-width: 1000px) {
  span.br {
    display: inline;
  }
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  span.br {
    display: inline-block;
  }
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

/*--------------------------
 Structure
----------------------------*/

body{
  height: 100%;
  padding: 0 20px;
}

section, header, footer {
  display: block;
}

div.wrap {
  width: 100%;
  overflow: hidden;
  
}

main{
  width: 100%;
}

section.page{
  max-width: 1035px;
  margin: 0 auto;
}

section.page .container{
  padding: 0 55px 100px 55px;
}

.edit-site-editor__view-mode-toggle-icon img{
    opacity:0;
    border: 1px solid #eaa;
}

.wp-block-post-content{
    max-width: 1035px;
    margin: 0 auto;
    font: 400 normal calc(var(--font-size-base) * .875)/1.785 var(--font-family);
    letter-spacing: .05em;
    text-align: left;
}

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

  body{
    height: 100%;
    padding: 0 0px;
  }

}

/*--------------------------
 Common
----------------------------*/

/* h1 〜 H5 */
h2.wp-block-heading{
  margin-bottom: 25px;
  font: 400 normal calc(var(--font-size-base) * 1.625)/1 var(--font-family) !important;
  letter-spacing: .05em;
}

h2.wp-block-heading span{
  display: inline-block;
  margin-left: 20px;
  font: 400 normal calc(var(--font-size-base) * .75)/1 var(--font-family) !important;
  letter-spacing: .0em;
}

h2.wp-block-heading::after{
  width: 50px;
  height: 45px;
  margin-bottom: -5px;
  background-size: cover;
  
}

h2.h2-cording::after{
  margin-left: 85px;
  background-image: url('http://localhost:8888/qreer/wp-content/uploads/2025/11/icon-pc.png');
}
h2.h2-design::after{
  margin-left: 130px;
  background-image: url('http://localhost:8888/qreer/wp-content/uploads/2025/11/icon-print.png');
}

p.body-text{
  font: 400 normal calc(var(--font-size-base) * .875)/1.785 var(--font-family);
}


/* Table */

figure.wp-block-table table{
  width: 100%;
  margin-bottom: 0px;
  font: 400 normal calc(var(--font-size-base) * .875)/1.785 var(--font-family);
  letter-spacing: .025em;
}

figure.wp-block-table table td{
  padding: 30px 0;
  text-align: center;
  border-color: var(--line-color);
}

figure.wp-block-table table tr:first-child > td{
  padding: 10px 0 10px 0;
}

figure.wp-block-table table tr td:first-child{
  border-left: none;
}

figure.wp-block-table table tr td:last-child{
  border-right: none;
}

figure.wp-block-table table td span.label{
  display: block;
  font-size: 1rem;
}

figure.wp-block-table table tr:last-child td{
  min-width: 180px
}

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

  /* h1 〜 H5 */
  h2.wp-block-heading{
    margin-bottom: 12px !important;
    font: 400 normal calc(var(--font-size-base) * 1.5)/1 var(--font-family) !important;
    letter-spacing: .05em;
  }

  h2.wp-block-heading span{
    display: inline-block;
    margin-left: 15px;
    font: 400 normal calc(var(--font-size-base) * .6875)/1 var(--font-family) !important;
    letter-spacing: .0em;
  }

  h2.wp-block-heading::after{
    width: 42px;
    height: 36px;
    margin-bottom: -3px;
    background-size: cover;
  }

  h2.h2-cording::after{
    margin-left: 30px;
    background-image: url('http://localhost:8888/qreer/wp-content/uploads/2025/11/icon-pc.png');
  }
  h2.h2-design::after{
    margin-left: 65px;
    background-image: url('http://localhost:8888/qreer/wp-content/uploads/2025/11/icon-print.png');
  }

  p.body-text{
    font: 400 normal calc(var(--font-size-base) * .8125)/1.846 var(--font-family);
  }


  /* Table */
  figure.wp-block-table{
    position: relative;
  }
  figure.wp-block-table table{
    width: 100%;
    margin-bottom: 0px;
    font: 400 normal calc(var(--font-size-base) * .8125)/1.846 var(--font-family);
    letter-spacing: .025em;
  }

  figure.wp-block-table table td{
    padding: 20px 0;
    text-align: center;
    border-color: var(--line-color);
  }

  figure.wp-block-table table tr:first-child > td{
    padding: 10px 0 10px 0;
  }

  figure.wp-block-table table tr td:first-child{
    border-left: none;
  }

  figure.wp-block-table table tr td:last-child{
    border-right: none;
  }

  figure.wp-block-table table td span.label{
    display: block;
    font-size: 1rem;
  }

  figure.wp-block-table table tr:last-child td{
    min-width: 160px
  }
  figure.wp-block-table::after{
    display: block;
    content: 'scroll →';
    padding: 8px 0 10px;
    font: 400 normal calc(var(--font-size-base) * .8125)/1.846 var(--font-family);
    letter-spacing: .025em;
    text-align: right;
  }
}

/*--------------------------
 Header
----------------------------*/

header .container{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

header.wp-block-template-part{
  width: 100%;
  height: 167px;
  max-width: 1035px;
  margin: 0 auto 0px;
  padding-top: 50px;
}

.wp-block-site-logo a{
    max-width: 42px;
}

header.wp-block-template-part nav.wp-block-navigation{
  height: 20px;
}

header.wp-block-template-part nav.wp-block-navigation a{
  display: block;
  margin-left: 52px;
  font: 400 normal calc(var(--font-size-base) * .8125)/1.785 var(--font-family);
  letter-spacing: .1em;
}

@media screen and (max-width: 768px) {
 
  header .container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  header.wp-block-template-part{
    width: 100%;
    height: 142px;
    max-width: 72%;
    margin: 0 auto 0px;
    padding-top: 35px;
  }

  .wp-block-site-logo a{
      max-width: 35px;
  }

  header.wp-block-template-part nav.wp-block-navigation{
    height: 20px;
  }

  header.wp-block-template-part nav.wp-block-navigation a{
    display: block;
    margin-left: 32px;
    font: 400 normal calc(var(--font-size-base) * .8125)/1.785 var(--font-family);
    letter-spacing: .1em;
  }

  button.wp-block-navigation__responsive-container-open rect{
    width: 64px;
    stroke-width:6px;
    border: 1px solid #eaa;
  }
}


/*--------------------------
 Contents
----------------------------*/

/* MV */
section.mv{
  width: 100%;
  max-width: 1035px;
  margin: 0 auto 100px;
}

section.mv div.container{
  display: flex;
  justify-content: space-between;
}

section.mv div.container figure{
  margin: 0;
}

section.mv figure.mv-title{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 460px;
  height: 460px;
  border-top: 1px solid #7f8b94;
  border-bottom: 1px solid #7f8b94;
}

section.mv figure.mv-title img{
  max-width: 255px;
}

section.mv figure.mv-photo{
  max-width: 460px;
  height: 460px;
}

@media screen and (max-width: 768px) {
  section.mv{
    width: 100%;
    max-width: 72%;
    margin: 0 auto 75px;
  }

  section.mv div.container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  section.mv div.container figure{
    margin: 0;
  }

  section.mv figure.mv-title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 235px;
    border-top: 1px solid #7f8b94;
    border-bottom: none;
  }

  section.mv figure.mv-title img{
    max-width: 42.6vw;
  }

  section.mv figure.mv-photo{
    max-width: 100%;
    height: auto;
  }
}


/* Works */

section.works{
  max-width: 1035px;
  padding: 0 55px 100px 55px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line-color);
}

section.works .container{
  margin-bottom: 75px;
}
  
section.works .container > div{
  max-width: 345px;
}


@media screen and (max-width: 768px) {
  section.works{
    max-width: 72%;
    padding: 0 0px 75px 0px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line-color);
  }

  section.works .container{
    flex-direction: column;
    margin-bottom: 65px;
  }
    
  section.works .container > div{
    max-width: 100%;
    
  }

  section.works .container > div:first-child{
    margin-bottom: 50px;
  }
}


/* Contact */

section.contact{
  max-width: 1035px;
  padding: 75px 55px 0px 55px;
  margin: 0 auto;
  border: 0px solid #eaa;
}

section.contact .innner-wrap, 
section.page .innner-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

section.contact .innner-wrap div label,
section.page .innner-wrap div label{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 400px;
  height: 37px;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--line-color);
}

section.contact span.label-name,
section.page span.label-name{
  font: 400 normal calc(var(--font-size-base) * .8125)/1 var(--font-family);
  letter-spacing: .025em;
}

section.contact .innner-wrap label span.label-name,
section.page .innner-wrap label span.label-name{
  width: 70px;
  padding-top: 2px;
  padding-left: 10px;
}



/* インプット */
section.contact .innner-wrap input,
section.page .innner-wrap input{
  display: inline-block;
  width: 310px;
  height: 35px;
  border: none;
  outline: none;
  background-color: transparent;
}

section.contact .innner-wrap div:last-child label:last-child input,
section.page .innner-wrap div:last-child label:last-child input{
  width: 96%;
  margin-left: 10px;
  background-color: transparent;
}

/* テキストエリア */
section.contact .textarea-wrap,
section.page .textarea-wrap{
  padding: 0 10px;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--line-color);
}

section.contact .textarea-wrap textarea,
section.page .textarea-wrap textarea{
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
}

/* Validation */
.wpcf7-form-control-wrap{
  position: relative;
}
.wpcf7-not-valid-tip{
  position: absolute;
  top: 40px;
  font: 400 normal calc(var(--font-size-base) * .8125)/1 var(--font-family);
  letter-spacing: .025em; 
}

div.wpcf7-response-output{
  color: #dc3232;
  font: 400 normal calc(var(--font-size-base) * .8125)/1 var(--font-family);
  letter-spacing: .025em;
  text-align: center;
  padding: 10px !important;
  border: 1px solid #dc3232 !important;
}

div.wpcf7-turnstile{
  margin-bottom: 25px;
}

/* Submit */
.textarea-wrap + p{
  text-align: center;
}

.wpcf7-submit{
  padding: 10px 30px;
  margin: 30px auto 0;
  font: 400 normal calc(var(--font-size-base))/1 var(--font-family);
  letter-spacing: .05em; 
  border: 1px solid var(--line-color);
  border-radius: 4px;
  background-color: transparent;
}

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

  section.contact{
    max-width: 72%;
    padding: 75px 0px 0px 0px;
    margin: 0 auto;
  }

  section.contact .innner-wrap,
  section.page .innner-wrap{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 30px;
  }

  section.contact .innner-wrap div:first-child,
  section.page .innner-wrap div:first-child{
    margin-bottom: 25px;
  }

  section.contact .innner-wrap div label,
  section.page .innner-wrap div label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 37px;
    margin-bottom: 5px;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid var(--line-color);
  }

  section.contact span.label-name,
  section.page span.label-name{
    font: 400 normal calc(var(--font-size-base) * .8125)/1 var(--font-family);
    letter-spacing: .025em;
  }

  section.contact .innner-wrap label span.label-name,
  section.page .innner-wrap label span.label-name{
    width: 80px;
    padding-top: 2px;
    padding-left: 10px;
  }


  /* インプット */
  section.contact .innner-wrap input,
  section.page .innner-wrap input{
    display: inline-block;
    width: 95%;
    height: 35px;
    border: none;
    outline: none;
    background-color: transparent;
  }

  section.contact .innner-wrap div:last-child label:last-child input,
  section.page .innner-wrap div:last-child label:last-child input{
    width: 90%;
    margin-left: 10px;
  }

  /* テキストエリア */
  section.contact .textarea-wrap,
  section.page .textarea-wrap{
    padding: 0 10px;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid var(--line-color);
  }

  section.contact .textarea-wrap textarea,
  section.page .textarea-wrap textarea{
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
  }

  /* Validation */
  .wpcf7-form-control-wrap{
    position: relative;
  }
  .wpcf7-not-valid-tip{
    position: absolute;
    top: 42px;
    font: 400 normal calc(var(--font-size-base) * .75)/1 var(--font-family);
    letter-spacing: .025em; 
  }

  div.wpcf7-response-output{
    color: #dc3232;
    font: 400 normal calc(var(--font-size-base) * .75)/1.846 var(--font-family);
    letter-spacing: .025em; 
    padding: 10px !important;
    border: 1px solid #dc3232 !important;
    border-radius: 4px;
  }
  
  /* Submit */
  .textarea-wrap + p{
    text-align: center;
  }

  .wpcf7-submit{
    display: block;
    padding: 10px 30px;
    margin: 30px auto 0;
    font: 400 normal calc(var(--font-size-base))/1 var(--font-family);
    letter-spacing: .05em; 
    border: 1px solid var(--line-color);
    border-radius: 4px;
    background-color: transparent;
  }
}


/*--------------------------
 Footer
----------------------------*/
footer.wp-block-template-part{
  max-width: 1035px;
  margin: 0 auto;
  padding:100px 0 25px 0;
}

footer.wp-block-template-part .container{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

footer.wp-block-template-part:has(.shop-info, .footer-link) {
    font: 400 normal calc(var(--font-size-base) * .875)/1.785 var(--font-family);
    letter-spacing: .05em;
}

footer.wp-block-template-part .footer-link{
  display: flex;
  justify-content: flex-end;
}

footer.wp-block-template-part .footer-link li{
    margin-left: 65px;
}

footer.wp-block-template-part .footer-link li a{
  text-decoration: none;
}


@media screen and (max-width: 768px) {
  footer.wp-block-template-part{
    max-width: 1035px;
    margin: 0 auto;
    padding:75px 0 10px 0;
  }

  footer.wp-block-template-part .container{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  footer.wp-block-template-part:has(.shop-info, .footer-link) {
      font: 400 normal calc(var(--font-size-base) * .8125)/1.785 var(--font-family);
      letter-spacing: .05em;
  }
  footer.wp-block-template-part .shop-info{
    width: 72%;
    margin: 0px auto 0;
  }

  footer.wp-block-template-part .footer-link{
    width: 72%;
    display: flex;
    justify-content: space-between !important;
    margin: 20px auto 0;
  }

  footer.wp-block-template-part .footer-link li{
    margin-left: 0px;
  }
  footer.wp-block-template-part .footer-link li:not(:last-child){
    margin-right: 0px;
  }

  footer.wp-block-template-part .footer-link li a{
    text-decoration: none;
  }

  footer.wp-block-template-part .footer-link{
    display: flex;
    justify-content: flex-start;
  }


}