@charset "UTF-8";
/* ----------------------------------------------------------------
base
----------------------------------------------------------------- */
/* adjust */
p,
ul,
ol {
	margin-bottom: 0;
}

/* contents */
.contents{
	padding-bottom: 60px;
}

/* row-inner */
.row-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 0 60px;
}

@media only screen and (max-width: 1200px) {
  .row-inner{
    padding: 30px 10px;
  }
}

@media only screen and (max-width: 640px) {
  .row-inner{
    padding: 30px 10px;
  }
}

/* clearfix */
.lyt-column::before,
.lyt-column::after,
.lyt-media::before,
.lyt-media::after{
  content: "";
  display: table;
}
.lyt-column::after,
.lyt-media::after{
  clear: both;
}

/* ----------------------------------------------------------------
    parts
----------------------------------------------------------------- */
/* bg */
.bg-color{
  background: #f7f7f7;
}
.bg-color-kyuyo{
  background-color: #f3ffe8;
}
.bg-color-hanbai{
  background-color: #ffebf0;
}

/* lead */
.lead{
	font-size: 1.6rem;
	margin-bottom: 30px;
}

@media only screen and (max-width: 640px) {
	.lead{
		font-size: 1.5rem;
		margin-bottom: 1em;
	}
}

/* ----------------------------------------------------------------
    hdg
----------------------------------------------------------------- */
.hdg-l2{
  margin: 0 0 30px;
  font-size: 4rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
}
[class^=hdg-] .label{
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  margin-right: 8px;
}
.label + span{
  display: inline-block;
  vertical-align: text-bottom;
}
.hdg-l2 .label{
  font-size: 3rem;
  padding: 7px 12px 3px;
}
.lp-supply-kyuyo .hdg-l2{
  color: #00963d;
}
.lp-supply-hanbai .hdg-l2{
  color: #d64768;
}
.lp-supply-hanbai .hdg-l2 .label{
  background-color: #d64768;
  color: #fff;
  padding-right: 6px;
}
.hdg-l3{
  font-size: 2.8rem;
  text-align: center;
  font-weight: 400;
  line-height: 1.2;
  margin: 40px 0 25px;
}
.hdg-l3:first-child{
  margin-top: 0;
}
.hdg-l3 .hdg{
  border-bottom-width: 2px;
  border-bottom-style: solid;
  padding: 0 0 10px;
  display: inline-block;
}
.lp-supply-kyuyo .hdg-l3 .hdg{
  border-bottom-color: #00963d;
}
.lp-supply-hanbai .hdg-l3 .hdg{
  border-bottom-color: #d64768;
}
.hdg-l3 .hdg .sub{
  font-size: 2rem;
}
.hdg-l3 .hdg sup{
  font-size: 1.8rem;
  top: -.4em;
}
.hdg-l4{
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 15px;
}

@media only screen and (max-width: 640px) {
  .hdg-l2{
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  .hdg-l3{
    font-size: 1.8rem;
    margin: 20px 0;
  }
  .hdg-l4{
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
}

/* ----------------------------------------------------------------
    Header
----------------------------------------------------------------- */
.header .row-inner{
  padding-top: 0;
  padding-bottom: 0;
}
.lyt-column-header{
	padding: 12px 0;
}
.lyt-column-header,
.lyt-column-header > .col{
	overflow: hidden;
}
.lyt-column-header > .col,
.lyt-column-header .header-logo{
	float: left;
}
.lyt-column-header .col:last-child{
	float: right;
}
.lyt-column-header .col.col-logo > *{
	float: left;
}
.lyt-column-header .header-logo{
	padding-top: 4px;
}
.lyt-column-header .text-catch{
  font-size: 1.6rem;
  color: #005bac;
  margin: 1em 0 0 25px;
}
.lyt-column-header .col-btn{
  margin-top: .5em;
}
.lyt-column-header .btn-02{
  font-size: 1.3rem;
}

@media only screen and (max-width: 1200px) {
  .lyt-column-header .col-logo{
  	width: calc(100% - 300px);
  }
	.lyt-column-header .col-logo .text-catch{
		width: calc(100% - 150px);
	}
}
@media only screen and (max-width:640px) {
	.lyt-column-header .col-logo{
		width: 55%;
	}
  .lyt-column-header .header-logo{
	  width: 35%;
	  display: block;
		padding: 0;
  }
	.lyt-column-header .header-logo img{
		width: 100%;
	}
  .lyt-column-header .col-logo .text-catch{
		font-size: 1.1rem;
		line-height: 1.3;
	  width: 65%;
		margin: 0;
		padding: .5em 0 0 .5em;
  }
  .lp-supply-kyuyo .lyt-column-header .col-logo .text-catch{
    padding-top: 0;
  }
	.lyt-column-header .col-btn{
	  width: 45%;
    text-align: right;
    margin-top: 0;
	}
}

/* ----------------------------------------------------------------
    Column
----------------------------------------------------------------- */
.lyt-column {
  margin-bottom: 20px;
}
.lyt-column > .col {
  margin-bottom: 20px;
}
.lyt-column > .col > :last-child {
  margin-bottom: 0;
}
.lyt-column[data-col-num="2"] {
  margin-left: -2.08%;
}
.lyt-column[data-col-num="2"] > .col {
  float: left;
  width: 47.95%;
  margin-left: 2.04%;
}
.lyt-column[data-col-num="2"] > .col:nth-child(2n+1) {
  clear: both;
}
.lyt-column[data-col-num="3"] {
  margin-left: -2.08%;
}
.lyt-column[data-col-num="3"] > .col {
  float: left;
  width: 31.22%;
  margin-left: 2.04%;
}
.lyt-column[data-col-num="3"] > .col:nth-child(3n+1) {
  clear: both;
}
.lyt-column[data-col-num="4"] {
  margin-left: -2.08%;
}
.lyt-column[data-col-num="4"] > .col {
  float: left;
  width: 22.95%;
  margin-left: 2.04%;
}
.lyt-column[data-col-num="4"] > .col:nth-child(4n+1) {
  clear: both;
}
.lyt-column[data-col-num="5"] {
  margin-left: -2.08%;
}
.lyt-column[data-col-num="5"] > .col {
  float: left;
  width: 17.95%;
  margin-left: 2.04%;
}
.lyt-column[data-col-num="5"] > .col:nth-child(5n+1) {
  clear: both;
}

@media only screen and (max-width: 640px) {
  .lyt-column > .col:last-child {
    margin-bottom: 0;
  }
  .lyt-column[data-col-num="2"],
	.lyt-column[data-col-num="3"],
	.lyt-column[data-col-num="4"],
	.lyt-column[data-col-num="5"] {
    margin-left: 0;
  }
  .lyt-column[data-col-num="2"] > .col,
	.lyt-column[data-col-num="3"] > .col,
	.lyt-column[data-col-num="4"] > .col,
	.lyt-column[data-col-num="5"] > .col {
    clear: both;
    width: 100%;
    margin-left: 0;
  }
}

/* _lineup */
.lyt-column._lineup .col .hdg-l4 + p{
  margin-top: -5px;
  margin-bottom: 15px;
}
.lyt-column._lineup .btn{
  width: 100%;
  max-width: 244px;
}

@media only screen and (max-width: 640px) {
  ._lineup-btn{
    text-align: center;
  }
}

/* pickup */
.lyt-column._pickup{
  margin-left: -3.33%;
}
.lyt-column._pickup .col{
  font-size: 1.6rem;
  background-color: #fff;
  width: 30%;
  margin-left: 3.33%;
  padding: 40px 35px;
}
.lyt-column._pickup .col p{
  margin-bottom: 40px;
}
.lyt-column._pickup .col p:last-child{
  margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
  .lyt-column._pickup{
    margin-left: 0;
  }
  .lyt-column._pickup .col{
    font-size: 1.4rem;
    width: 100%;
    height: auto !important;
    margin-left: 0;
  }
}

/* ----------------------------------------------------------------
    Media column
----------------------------------------------------------------- */
.lyt-media {
  margin: 0 0 20px;
}
.lyt-media > .item {
  text-align: center;
  margin-bottom: 10px;
}
.lyt-media > .col {
  overflow: hidden;
}
.lyt-media > .col > :last-child {
  margin-bottom: 0;
}
.lyt-media > :last-child {
  margin-bottom: 0;
}
.lyt-media[data-item-layout="left"] > .item {
  float: left;
  margin-right: 50px;
}

/* .lyt-media[data-item-layout="left"] */
.lyt-media[data-item-layout="left"] > .item {
  float: left;
  margin-right: 20px;
}
@media only screen and (max-width: 640px) {
  .lyt-media[data-item-layout="left"] > .item {
    float: none;
    margin-right: 0;
  }
  .lyt-media[data-item-layout="left"].sp-keep > .item {
    float: left;
    width: 30%;
    margin-right: 20px;
  }
}
/* .lyt-media[data-item-layout="right"] */
.lyt-media[data-item-layout="right"] > .item {
  float: right;
  margin-left: 20px;
}
@media only screen and (max-width: 640px) {
  .lyt-media[data-item-layout="right"] > .item {
    float: none;
    margin-left: 0;
  }
  .lyt-media[data-item-layout="right"].sp-keep > .item {
    float: right;
    width: 30%;
    margin-left: 20px;
  }
}

/* ----------------------------------------------------------------
    KV
----------------------------------------------------------------- */
.row-inner-kv{
  padding: 25px 0;
  background-repeat: no-repeat;
  background-position: center, 0 0;
}
.lp-supply-kyuyo .row-inner-kv{
  background-color: #4db87a;
  background-image: url(/content/dam/yayoi-corp/lp/supply/kyuyo/img/index-bg-mainvisual.jpg),
                    -webkit-linear-gradient(left top, #4db87a 50%, #00943e 50%);
  background-image: url(/content/dam/yayoi-corp/lp/supply/kyuyo/img/index-bg-mainvisual.jpg),
                    linear-gradient(to right, #4db87a 50%, #00943e 50%);
}
.lp-supply-hanbai .row-inner-kv{
  background-color: #ee859e;
  background-image: url(/content/dam/yayoi-corp/lp/supply/hanbai/img/index-bg-mainvisual.jpg),
                    -webkit-linear-gradient(left top, #ee859e 50%, #d64768 50%);
  background-image: url(/content/dam/yayoi-corp/lp/supply/hanbai/img/index-bg-mainvisual.jpg),
                    linear-gradient(to right, #ee859e 50%, #d64768 50%);
}

@media only screen and (max-width: 1200px) {
  .row-inner-kv{
    padding: 25px 10px;
    background-size: cover;
  }
}

/* ----------------------------------------------------------------
    Box
----------------------------------------------------------------- */
/* box-notice */
.box-notice{
  font-size: 1.6rem;
  background-color: #f6f9fc;
  padding: 25px 10px;
}
.box-notice p{
  margin-bottom: 1em;
}
.box-notice p:last-child{
  margin-bottom: 0;
}
.link-box-notice{
  position: relative;
  padding-left: 20px;
}
.link-box-notice::before{
  width: 8px;
  height: 13px;
  position: absolute;
  top: 4px;
  left: 0;
  background-image: url(/content/dam/yayoi-corp/lp/common/img/icon-arrow-05.png);
  background-repeat: no-repeat;
  content: "";
}

@media only screen and (max-width: 640px) {
  .box-notice{
    font-size: 1.4rem;
  }
}

/* box-order */
.box-order{
  text-align: center;
}
.box-order > *{
  margin-bottom: 20px;
}
.box-order > *:last-child{
  margin-bottom: 0;
}
.box-order .btn-02 + p{
   margin-bottom: 30px;
}

/* ----------------------------------------------------------------
     lyt-column-center
----------------------------------------------------------------- */
.lyt-column-center{
  text-align: center;
  font-size: 0;
  margin: -20px 0 30px -20px;
}
.lyt-column-center > li > :last-child{
  margin-bottom: 0;
}
.lyt-column-center > *{
  display: inline-block;
  font-size: 1.4rem;
  margin: 20px 0 0 20px;
  vertical-align: top;
}

@media only screen and (max-width: 640px) {
  .lyt-column-center{
    margin: 0 0 20px 0;
  }
  .lyt-column-center > *{
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
    display: block;
    margin: 20px 0 0 0;
  }
}

/* _merit */
.lyt-column-center._merit{
  margin-left: -6.12%;
  font-size: 0;
}
.lyt-column-center._merit > *{
  width: 24.5%;
  font-size: 1.4rem;
  margin-left: 6.12%;
}
.lyt-column-center._merit .media{
  margin-bottom: 15px;
}
.lyt-column-center._merit .text-catch{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

@media only screen and (max-width: 640px) {
  .lyt-column-center._merit{
    margin-left: 0;
  }
  .lyt-column-center._merit > *{
    width: 100%;
    margin-left: 0;
  }
  .lyt-column-center._merit .media img{
    width: 25%;
  }
}

/* point */
.lyt-column._point .col:last-child,
.lyt-column._point .col:nth-last-of-type(2){
  margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
  .lyt-column._point{
    font-size: 1.4rem;
  }
  .lyt-column._point .col:nth-last-of-type(2){
    margin-bottom: 20px;
  }
}

/* guide */
.lyt-column-center._guide{
  margin: 40px 0 -25px;
}
.lyt-column-center._guide > *{
  margin: 0 0 60px;
  position: relative;
  width: 20%;
}
.lyt-column-center._guide > *::before{
  border-width: 25px 20px;
  border-style: solid;
  border-color: transparent transparent transparent #bababa;
  margin-top: -25px;
  position: absolute;
  left: -20px;
  top: 40%;
  content: "";
}
.lyt-column-center._guide > *:first-child::before{
  display: none;
}
.lyt-column-center._guide .col{
  text-align: center;
}
.lyt-column-center._guide .text-catch{
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 25px;
}
.lyt-column-center._guide .media{
  margin-bottom: 30px;
}
.lyt-column-center._guide .col em{
  color: #c00;
}
.guide-notice{
  font-size: 1.6rem;
  margin-bottom: 30px;
}

@media only screen and (max-width: 1200px) {
  .lyt-column-center._guide > *{
    width: 33%;
  }
}
@media only screen and (max-width: 640px) {
  .lyt-column-center._guide{
    margin: 20px 0 30px 0;
  }
  .lyt-column-center._guide > *{
    width: 100%;
    display: block;
    margin: 40px 0;
  }
  .lyt-column-center._guide > *::before{
    left: 50%;
    top: 0;
    border-width: 10px 12px;
    border-color: #bababa transparent transparent transparent;
    margin-left: -12px;
  }
  .lyt-column-center._guide > *:first-child{
    margin-top: 0;
  }
  .lyt-column-center._guide .col{
    height: auto !important;
  }
  .lyt-column-center._guide .text-catch{
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
  .lyt-column-center._guide .media{
    margin-bottom: 15px;
  }
  .guide-notice{
    font-size: 1.4rem;
  }
}

/* ----------------------------------------------------------------
     btn
----------------------------------------------------------------- */
.btn{
  display: inline-block;
  position: relative;
  border: 1px solid #00963d;
  background: #fff;
  font-size: 1.6rem;
  color: #00963d;
}
.btn._wide{
  width: 400px;
}
.btn,
.btn-02{
  border-radius: 23px;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  padding: 13px 30px 12px;
  display: inline-block;
  position: relative;
  -webkit-transition: background .2s ease-out;
  transition: background .2s ease-out;
}
.btn::before,
.btn-02::before{
  display: block;
  width: 6px;
  height: 9px;
  position: absolute;
  top: 50%;
  right: 10px;
  background-image: url(/content/dam/yayoi-corp/products/img/sprite-desktop.png);
  margin-top: -4.5px;
  content: "";
}
.btn::before{
  background-position: -83px -34px;
}
.btn:hover,
.btn:active,
.btn:focus{
  background: #f3ffe8;
  color: #00963d;
}

@media only screen and (max-width: 640px) {
  .btn{
    font-size: 1.4rem;
  }
  .btn._wide{
    width: 100%;
  }
}

.lp-supply-kyuyo .btn::before{
  background-position: -100px -76px;
}
.lp-supply-kyuyo .btn{
  border-color: #00963d;
  color: #00963d;
}
.lp-supply-kyuyo .btn:hover,
.lp-supply-kyuyo .btn:active,
.lp-supply-kyuyo .btn:focus{
  background: #f3ffe8;
}
.lp-supply-hanbai .btn::before{
  background-position: -111px -78px;
}
.lp-supply-hanbai .btn{
  border-color: #d64768;
  color: #d64768;
}
.lp-supply-hanbai .btn:hover,
.lp-supply-hanbai .btn:active,
.lp-supply-hanbai .btn:focus{
  background: #ffebf0;
}

/* btn-02 */
.btn-02{
  background: #ff8124;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
}
.btn-02._wide{
  width: 400px;
}
.btn-02::before{
  background-position: -57px -34px;
}
.btn-02:hover,
.btn-02:active,
.btn-02:focus{
  background: #ff9c00;
  color: #fff;
}
.btn-02 > span{
  font-size: 1.6rem;
}
.btn-02 > .min{
  font-size: 1.4rem;
}

@media only screen and (max-width: 640px) {
  .btn-02{
    font-size: 1.6rem;
  }
  .btn-02._wide{
    width: 100%;
  }
  .btn-02 > span{
    font-size: 1.2rem;
  }
  .btn-02 > .min{
    font-size: 1.1rem;
  }
}

/* ----------------------------------------------------------------
     Link
----------------------------------------------------------------- */
/* link */
.link{
  padding-left: 25px;
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}
.link::before,
.link-02::before,
.link-list > li::before,
.link-list-02 > li::before{
  width: 15px;
  height: 15px;
  background-position: -38px -91px;
  background-image: url(/content/dam/yayoi-corp/products/img/sprite-desktop.png);
  position: absolute;
  top: .15em;
  left: 0;
  content: "";
}

@media only screen and (max-width: 640px) {
  .link{
    font-size: 1.3rem;
    padding-left: 22px;
  }
  .link::before{
    top: .05em;
  }
}

/* link-02 */
.link-02{
  padding-left: 25px;
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}
.link-02::before{
  background-position: -55px -91px;
}

@media only screen and (max-width: 640px) {
  .link-02{
    font-size: 1.3rem;
    padding-left: 22px;
  }
  .link-02::before{
    top: .05em;
  }
}

/* 汎用モジュールの移行 */
.ge-list-bullet > li {
  margin-bottom: 7px;
  padding-left: 14px;
  position: relative;
}

.ge-list-bullet > li::before {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 10px;
  left: 0;
  background-color: #ccc;
  content: "";
}

.ge-box {
  background: #f8f8f8;
  padding: 30px;
margin-bottom: 40px;
}

.ge-box-hdg {
  margin-bottom: 15px;
  font-size: 1.8rem;
}

[class^=ge-box] > :last-child {
margin-bottom: 0;
}

@media only screen and (max-width: 640px) {
.ge-box {
  padding: 20px;
  margin-bottom: 30px;
}

.ge-box-hdg {
  margin-bottom: 10px;
  font-size: 1.6rem;
}
}