@charset "utf-8";

/* CSS Document */

body {
  background: #faefdc;
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}


footer {
  margin-top: 0;
  background: #956409;
}


* {
  box-sizing: border-box;
  line-height: 1;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: #000;
}

a:hover {
  opacity: .7;
  transition: .3s;
}

figure {
  margin:0;
  padding:0;
}


.dispPC {
  display: block;
}

.dispSP {
  display: none;
}






@media (max-width: 767.98px) {


  .dispPC {
    display: none;
  }

  .dispSP {
    display: block;
  }


}





/* maincontents */

.kv2 {
  height:100vh;
  height:100svh;
  width:100%;
  background: url(img/kv_model2.png);
  background-color: #f2a30f;
  background-position:  center 40px;
  background-repeat: no-repeat;
  margin-bottom:4rem;
  padding:10vh 0 10vh;
}

.kv__inner {
  width:60%;
  height:100%;
  position:relative;
  border:4px solid #fff;
  margin:0 auto;
}

.kv__inner * {
  position:absolute;
}

.kv__inner .title {
  left:2rem;
  bottom:1.4rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight:700;
  letter-spacing: -0.1rem;
  color:#fff;
  font-size:5.6rem;
}

.kv__inner .subcopy {
  left:2rem;
  top:2rem;
  line-height:1.2;
  font-weight:600;
  letter-spacing: 0.1rem;
  color:#fff;
  font-size:1.6rem;
}


.kv__inner .title_jp {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  right:2rem;
  top:2rem;
  font-weight:500;
  color:#fff;
  letter-spacing: 0.2rem;
  font-size:2rem;
}





@media (max-width: 767.98px) {


.section .kv2 {
  margin-bottom:4rem;
}

.kv2 {
  height: 90ssvh;
  width: 100%;
  background: url(img/kv_model_sp2.png);
  background-color: #f2a30f;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5ssvh 0 5ssvh;
}

.kv__inner {
  width:90%;
  height:100%;
  position:relative;
  border:4px solid #fff;
  margin:0 auto;
}

.kv__inner * {
  position:absolute;
}

.kv__inner .title {
  left:1rem;
  bottom:1rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight:700;
  letter-spacing: -0.1rem;
  color:#fff;
  font-size:3.4rem;
}

.kv__inner .subcopy {
  left:1rem;
  top:1rem;
  font-weight:600;
  letter-spacing: 0.1rem;
  color:#fff;
  font-size:1.2rem;
}

.kv__inner .title_jp {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  right:1rem;
  top:1rem;
  font-weight:500;
  color:#fff;
  letter-spacing: 0.04rem;
  font-size:1.4rem;
}



}



/*


.kv {
  width:100%;
  background:#f2a30f;
  text-align: center;
}

.kv h1 {
  width:80%;
  margin:0 auto;
}

*/
.section.intro {
  width:80%;
  max-width: 960px;
  margin:0 auto 12rem;
}

.intro h2 {
  font-size:2rem;
  margin:0 0 2.4rem 0;
  color:#956409;
  font-weight:500;
}

.intro p {
  font-size: 1rem;
  line-height: 2;
}





.section .head {
  width: 80%;
  max-width: 960px;
  margin: 4rem auto 0;
}



.section .head h2 {
  font-size:1rem;
  font-weight:600;
  letter-spacing: 0.025rem;
  margin-bottom:2.4rem;
}

.section .head h2 span {
  display:inline-block;
  padding:.4rem .8rem .5rem;
  border:3px solid #d08400;
  background: #fff;
}

.section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 100svh;
  overflow: hidden;
}

.modelPart {
  display: grid;
  grid-template-columns: 50% 50%;
  overflow: hidden;
}


.part01 .modelPart__left {
  background-image: url(img/model_pict_01a.jpg);

}

.part01 .modelPart__right {
  background-image: url(img/model_pict_01b.jpg);
}


.part02 .modelPart__left {
  background-image: url(img/model_pict_02a.jpg);

}

.part02 .modelPart__right {
  background-image: url(img/model_pict_02b.jpg);
}

.part03 .modelPart__left {
  background-image: url(img/model_pict_03a.jpg);

}

.part03 .modelPart__right {
  background-image: url(img/model_pict_03b.jpg);
}

.part04 .modelPart__left {
  background-image: url(img/model_pict_04b.jpg);

}

.part04 .modelPart__right {
  background-image: url(img/model_pict_04a.jpg);
}



.section {
  margin-bottom:8rem;
}


.modelPart__left {
  background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.modelPart__right {
  background-position:  center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}


.textPart {
  width: 80%;
  max-width: 960px;
  margin: 0 auto 0;
  display:grid;
  grid-template-columns: 65% 30%;
  grid-column-gap: 5%;
}


.textPart .title {
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 2.4rem;
  line-height:1.6;
}

.part01 .anotherPart__right h3,
.part04 .anotherPart__right h3,
.part01 .head h2,
.part04 .head h2,
.part01 .textPart .title,
.part04 .textPart .title {
  color:#d08400;
}


.part02 .anotherPart__right h3,
.part02 .head h2,
.part02 .textPart .title {
  color:#87ae00;
}

.part03 .anotherPart__right h3,
.part03 .head h2,
.part03 .textPart .title {
  color:#574ba4;
}



.part01 .head h2 span,
.part04 .head h2 span {
  border:2px solid #d08400;
}

.part02 .head h2 span {
  border:2px solid #87ae00;
}


.part03 .head h2 span {
  border:2px solid #574ba4;
}



.textPart .caption {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2.4rem;

}

.credit__head {
  font-weight: bold;
  margin: 0 0 .4rem 0;
}

.credit__item {
  font-size: .8rem;
}


.credit__item .meta {
  font-weight:500;
  font-size:.8rem;
  color:#000;
}






.credit__item a {
  display: block;
  padding: .4rem 0;
}

.credit__item a * {
  display: inline;
}

.credit__item .link {
  margin-left: .4rem;
}

.credit__item .link span {
  display: inline-block;
  line-height: 1rem;
  color: #fff;
  font-size: .7rem;
  padding: 0rem .4rem .2rem .4rem;
}


.part01 .link span {
  background-color: #d08400;
}
.part02 .link span {
  background-color: #87ae00;
}
.part03 .link span {
  background-color: #574ba4;
}
.part04 .link span {
  background-color: #d08400;
}



/* 商品リスト */

.goodsPart {
  width: 80%;
  max-width: 960px;
  margin: 3.2rem auto 8rem;
}

.goodsList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-evenly;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

.goodsList__item {
}


.pict {
  margin: 0 0 .4rem;
}


/* anotherpart */
/*
.anotherPart {
  width: 80%;
  max-width: 960px;
  margin:0 auto 8rem;
}*/

.anotherPart {
  width:50%;
  max-width: 960px;
  display:grid;
  margin:2rem auto;
  grid-template-columns: 1.5fr 2fr;
  align-items: center;
}

.anotherPart__right h3 {
  margin-bottom: 1rem;
  line-height:1.2;
  font-size: 1.4rem;
  font-weight:600;
  letter-spacing: 0.04rem;
}


.anotherPart__right .caption {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 1.6rem;
}

.anotherPart h3.meta {
  color:#000;
}



.ending {
  margin: 0 0 8rem;
}

.btnWrap {
  text-align: center;
}

a.btn {
  margin: 0 auto;
  width: 90%;
  max-width: 400px;
  display: block;
  padding: 1.6rem .8rem;
  border:4px solid #d08400;
  color:#d08400;
  font-size: 1.2rem;
  font-weight: 600;
  font-optical-sizing: auto;
  text-align: center;
}

a:hover.btn {
  opacity: 0.7;
  transition: .4s;
}



@media (min-width: 767.98px) and (max-width: 1023px) {



.kv h1 img { 
  width:100%;
  margin:0 auto;
}

.kv h1 {
  width:100%;
  margin:0 auto;
}


.modelPart {
  display: block;
}


.textPart {
  display:block;
  width: 90%;
  margin: 3.2rem auto 0;
}



.section .head {
  width: 90%;
}

  
.textPart .title {
  line-heihgt:1.4;
}


.goodsList {
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}



.goodsPart {
  width: 90%;
  margin: 3.2rem auto 4rem;
}




.anotherPart {
  width:80%;
}



}



@media (max-width: 767.98px) {

.section.intro,
.section.kv{
  margin-bottom:4rem;
}


.intro h2 {
  font-size:1.6rem;
  line-height:1.6;
}



.modelPart__left {
  min-height: 80vh;
}

.modelPart__right {
  min-height: 80vh;
}



.modelPart {
  display: block;
}


.textPart {
  display:block;
  width: 90%;
  margin: 3.2rem auto 0;
}


.section .head {
  width: 90%;
}

.anotherPart {
  width: 90%;
  display:block;
}

.anotherPart__left figure {
  width:70%;
  margin:0 auto 2.4rem;
}

.goodsList {
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}



.goodsPart {
  width: 90%;
  margin: 3.2rem auto 4rem;
}


}