@charset "UTF-8";

body {
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
  font-weight: normal;
  font-style: normal;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background-image: url(../img/background--beige.png);
  background-repeat: repeat;
}

a {
  color: #333;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  font-size: 18px;
}

/* ----------------------------
共通
---------------------------- */
.for-sp {
  display: none;
}

.for-pc-tb {
  display: block;
}

.text-center {
  text-align: center;
}

.color-red {
  color: #AE0221;
}

.wrapper {
  width: 60%;
  background: #fff;
  margin: 0 auto;
}

.section_wrapper {
  padding: 120px 0;
}

.section_inner {
  padding: 0 32px;
}

.common_heading {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
}

.common_grid {
  width: 20%;
  margin: 0 auto;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .for-sp {
    display: none;
  }

  .for-pc-tb {
    display: block;
  }

  .wrapper {
    width: 85%;
  }

  .common_heading {
    font-size: 28px;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .for-sp {
    display: block;
  }

  .for-pc-tb {
    display: none;
  }

  .wrapper {
    width: 85%;
  }

  .section_wrapper {
    padding: 80px 0;
  }

  .common_heading {
    font-size: 24px;
    margin-bottom: 32px;
  }
}

/* ----------------------------
CTA共通
---------------------------- */
.cta_wrapper {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-image: url(../img/background_cta--red.png);
  background-repeat: repeat;
  background-size: cover;
}

.cta_wrapper:last-child {
  background-image: url(../img/background_cta--black.png);
}

.cta_contents {
  display: flex;
  justify-content: center;
}

.cta_contents:nth-child(n+2){
  margin-top: 24px;
}

.cta_card {
  width: 300px;
  height: auto;
  background: #fff;
  border: 4px solid #BBA887;
  border-radius: 8px;
  padding: 8px;
  margin-right: 24px;
  position: relative;
}

.cta_card:last-child {
  margin-right: 0;
}

.cta_card-inner {
  border: 1px solid #BBA887;
  padding: 16px;
}

.cta_fan {
  width: 125px;
  height: auto;
  position: absolute;
  top: 2px;
  left: 2px;
  text-align: center;
  font-size: 14px;
  z-index: 2;
}

.cta_year-limited {
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 13px;
  left: 32px;
  z-index: 3;
}

.cta_year {
  font-size: 18px;
  line-height: 1;
}

.cta_product {
  position: relative;
  margin-bottom: 24px;
}

.cta_name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.cta_amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 24px;
  color: #9D0203;
}

.cta_shipping {
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  width: 40px;
  height: 40px;
  background-color: #9D0203;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.cta_price {
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
  margin-right: 4px;
}

.cta_price-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta_tax {
  color: #333;
  font-size: 10px;
  font-weight: bold;
}

.cta_yen {
  font-size: 24px;
  font-weight: bold;
  line-height: 24px;
}

.cta_button {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 8px 16px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.1em;
  color: #fff;
  background: #9D201D;
  border-radius: 50px;
}

.cta_button:hover {
  background: #821B18;
}

.common_arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 13px;
  transform: translateY(-50%);
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cta_contents:nth-child(n+2) {
    margin-top: 16px;
  }

  .cta_card {
    width: 230px;
    margin-right: 16px;
  }

  .cta_card-inner {
    padding: 8px;
  }

  .cta_fan {
    width: 104px;
  }

  .cta_year-limited {
    font-size: 10px;
    font-weight: bold;
    top: 10px;
    left: 27px;
  }

  .cta_year {
    font-size: 16px;
  }

  .cta_product {
    margin-bottom: 16px;
  }

  .cta_name {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .cta_amount {
    margin-bottom: 16px;
  }

  .cta_price {
    font-size: 32px;
  }

  .cta_yen {
    font-size: 20px;
  }

  .cta_shipping {
    font-size: 10px;
    width: 32px;
    height: 32px;
  }

  .cta_button {
    font-size: 14px;
    padding: 8px;
  }
}
/*for SP*/
@media screen and (max-width: 768px) {
  .cta_contents {
    display: block;
  }

  .cta_contents:nth-child(n+2) {
    margin-top: 16px;
  }

  .cta_card {
    width: 260px;
    margin: 0 auto 16px auto;
  }

  .cta_card:first-child {
    margin-bottom: 16px;
  }

  .cta_card:last-child {
    margin: 0 auto;
  }

  .cta_fan {
    width: 104px;
  }

  .cta_year-limited {
    font-size: 10px;
    font-weight: bold;
    top: 10px;
    left: 27px;
  }

  .cta_year {
    font-size: 16px;
  }

}

/* ----------------------------
メインビジュアル
---------------------------- */
.mainvisual_umbrella {
  width: 30%;
  height: auto;
  position: absolute;
  top: 0;
}

.mainvisual_umbrella--left {
  left: 0;
}

.mainvisual_umbrella--right {
  right: 0;
}

.mainvisual_wrapper {
  width: 100%;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.mainvisual_aizu {
  width: 30%;
  max-width: 250px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 24px;
}

.mainvisual_plum--right {
  width: 15%;
  height: auto;
  position: absolute;
  top: 10%;
  right: 18%;
  transform: rotate(90deg);
}

.mainvisual_plum--left {
  width: 20%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 10%;
}

.mainvisual_sub-title {
  font-size: 32px;
  font-weight: bold;
}

.mainvisual_sub-title--small {
  font-size: 20px;
}

.mainvisual_title {
  font-size: 52px;
  font-weight: bold;
  color: #C6A567;
  margin-bottom: 80px;
}

.mainvisual_koboshi {
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.mainvisual_koboshi img {
  width: 100%;
}

.mainvisual_cloud--three {
  width: 25%;
  height: auto;
  position: absolute;
  top: 55%;
  right: -10%;
}

.mainvisual_cloud--two {
  width: 25%;
  height: auto;
  position: absolute;
  top: 80%;
  left: -10%;
}

.mainvisual_mizuhiki {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .mainvisual_umbrella {
    width: 40%;
    max-width: 350px;
  }

  .mainvisual_aizu {
    width: 25%;
    max-width: 200px;
    margin-top: 9vh;
    margin-bottom: 40px;
  }

  .mainvisual_title {
    font-size: 48px;
    margin-bottom: 80px;
  }

  .mainvisual_koboshi {
    width: 50%;
  }

  .mainvisual_plum--right {
    width: 13%;
    top: 28%;
    right: 20%;
  }

  .mainvisual_plum--left {
    width: 16%;
    max-width: 120px;
    top: 50%;
    left: 10%;
  }

  .mainvisual_cloud--three {
    width: 20%;
    top: 53%;
    right: -5%;
  }

  .mainvisual_cloud--two {
    width: 20%;
    left: -2%;
  }
}
/*for SP*/
@media screen and (max-width: 768px) {
  .mainvisual_umbrella {
    width: 50%;
    max-width: 300px;
  }

  .mainvisual_aizu {
    width: 40%;
    margin-bottom: 32px;
    margin-top: 15vh;
  }

  .mainvisual_sub-title {
    font-size: 24px;
  }

  .mainvisual_title {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .mainvisual_koboshi {
    width: 65%;
  }

  .mainvisual_plum--right {
    top: 32%;
    right: 13%;
  }

  .mainvisual_plum--left {
    width: 15%;
    top: 42%;
    left: 3%;
  }

  .mainvisual_cloud--three {
    width: 20%;
    top: 62%;
    right: -7%;
  }

  .mainvisual_cloud--two {
    width: 20%;
    top: 83%;
    left: -5%;
  }
}

/* ----------------------------
起き上がり小法師とは
---------------------------- */
.about_wrapper {
  position: relative;
}

.about_contents {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0 auto;
  position: relative;
}

.about_heading {
  margin-left: 40px;
  margin-bottom: 0;
}

.about_sentence {
  line-height: 1.6;
}

.about_koboshi {
  width: 20%;
  height: auto;
  position: absolute;
  top: 70%;
  right: -3%;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .about_heading {
    margin-left: 32px;
  }

  .about_sentence {
    font-size: 16px;
    line-height: 1.8;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .about_contents {
    writing-mode: horizontal-tb;
    width: 80%;
  }

  .about_heading {
    margin-left: 0;
    margin-bottom: 32px;
    text-align: center;
  }

  .about_sentence {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .about_sentence:first-child {
    margin-bottom: 0;
  }

  .about_koboshi {
    width: 38%;
    max-width: 135px;
    height: auto;
    position: absolute;
    top: 83%;
    right: -5%;
  }
}

/* ----------------------------
干支小法師
---------------------------- */
.zodiac_contents {
  text-align: center;
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.zodiac_sentence {
  line-height: 2;
  margin-bottom: 40px;
}

.zodiac_character {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 80px;
}

.zodiac_products {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.zodiac_products video {
  width: 55%;
  margin-right: 40px;
  border: 4px solid #BBA887;
}

.zodiac_design-inner {
  display: flex;
  width: 45%;
}

.zodiac_design {
  margin-right: 8px;
}

.zodiac_design--text {
  color: #fff;
  font-size: 14px;
  padding: 8px 32px;
  background: #BBA887;
  border-radius: 50px;
}

.zodiac_cloud--left {
  width: 20%;
  height: auto;
  position: absolute;
  top: 25%;
  left: -28%;
}

.zodiac_cloud--right {
  width: 25%;
  height: auto;
  position: absolute;
  top: 108%;
  right: -30%;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .zodiac_sentence {
    font-size: 16px;
  }

  .zodiac_products video {
    margin-right: 32px;
  }

  .zodiac_cloud--left {
    width: 16%;
    top: 25%;
    left: -18%;
  }

  .zodiac_cloud--right {
    width: 20%;
    top: 111%;
    right: -17%;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .zodiac_sentence {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    text-align: left;
  }

  .zodiac_sentence:last-of-type {
    margin-bottom: 40px;
  }

  .zodiac_character {
    width: 100%;
    margin-bottom: 40px;
  }

  .zodiac_products {
    display: block;
  }

  .zodiac_products video {
    width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
  }

  .zodiac_design-inner {
    width: 80%;
    margin: 0 auto;
  }

  .zodiac_cloud--right {
    width: 35%;
    top: 106%;
    right: -17%;
  }
}

/* ----------------------------
赤べこ小法師
---------------------------- */
.akabeko_contents {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.akabeko_item {
  display: flex;
  align-items: center;
}

.akabeko_item:nth-child(even) {
  margin-bottom: 80px;
}

.akabeko_text {
  width: 65%;
}

.akabeko_item:nth-child(even) .akabeko_text {
  margin-right: 40px;
}

.akabeko_item-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
}

.akabeko_item-title::before {
  content: url(../img/shochiku-plum.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.akabeko_item-sentence {
  font-size: 16px;
  text-align: justify;
}

.akabeko_img {
  width: 35%;
}

.akabeko_item:nth-child(odd) .akabeko_img {
  margin-right: 40px;
}

.akabeko_cloud--left {
  width: 25%;
  height: auto;
  position: absolute;
  top: -25%;
  left: -30%;
}

.akabeko_cloud--right {
  width: 25%;
  height: auto;
  position: absolute;
  top: 113%;
  right: -26%;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .akabeko_item:nth-child(even) .akabeko_text {
    margin-right: 24px;
  }

  .akabeko_text {
    width: 60%;
  }

  .akabeko_item-title {
    font-size: 20px;
  }

  .akabeko_img {
    width: 40%;
  }

  .akabeko_cloud--left {
    top: -20%;
    left: -19%;
  }

  .akabeko_cloud--right {
    top: 111%;
    right: -20%;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .akabeko_item {
    flex-direction: column-reverse;
    align-items: center;
  }

  .akabeko_item:nth-child(even) {
    margin-bottom: 80px;
}

  .akabeko_item:nth-child(even) .akabeko_text {
    margin-right: 0;
    margin-bottom: 16px;
}

  .akabeko_text {
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
    order: 2;
  }

  .akabeko_item-title {
    font-size: 18px;
    display: block;
    text-align: left;
  }

  .akabeko_item-sentence {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 40px;
  }

  .akabeko_img {
    width: 60%;
    margin: 0 auto;
    order: 1;
  }

  .akabeko_item:nth-child(odd) .akabeko_img {
    margin: 0 auto;
  }
  .akabeko_cloud--left {
    width: 30%;
    top: -8%;
    left: -18%;
  }

  .akabeko_cloud--right {
    width: 30%;
    top: 105%;
    right: -18%;
  }
}

/* ----------------------------
伊東種苗店のこだわり
---------------------------- */
.feature_wrapper {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.feature_title {
  position: relative;
}

.feature_plum--right {
  width: 15%;
  position: absolute;
  top: -35%;
  right: 33%;
  transform: rotate(-70deg);
}

.feature_plum--left {
  width: 8%;
  position: absolute;
  top: 95%;
  left: 40%;
}

.feature_heading {
  writing-mode: vertical-rl;
  margin: 0 auto 80px auto;
}

.feature_text {
  font-size: 16px;
  text-align: center;
  line-height: 2;
  margin-bottom: 16px;
}

.feature_text:last-child {
  margin-bottom: 0;
}

.feature_img {
  width: 35%;
  max-width: 280px;
  height: auto;
}

.feature_img-store {
  position: absolute;
  top: 20%;
  left: -10%;
}

.feature_img-paint {
  position: absolute;
  top: 65%;
  right: -15%;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .feature_img {
    width: 30%;
  }

  .feature_img-store {
    left: -3%;
  }

  .feature_img-paint {
    top: 80%;
    right: -5%;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .feature_plum--right {
    width: 30%;
    right: 15%;
  }

  .feature_plum--left {
    width: 15%;
    top: 100%;
    left: 30%;
  }

  .feature_text {
    font-size: 14px;
    line-height: 1.5;
  }

  .feature_text:last-child {
    margin-bottom: 40px;
  }

  .feature_img {
    width: 60%;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 16px;
  }
}

/* ----------------------------
お客様の声
---------------------------- */
.voice_wrapper {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.voice_plum--left {
  width: 20%;
  position: absolute;
  top: 18%;
  left: -12%;
  transform:rotate(180deg);
}

.voice_plum--right {
  width: 20%;
  position: absolute;
  top: 78%;
  right: -13%;
}

.voice_contents {
  display: flex;
  justify-content: center;
}

.voice_item {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.voice_item:first-child {
  margin-right: 40px;
}

.voice_1 {
  width: 280px;
  height: 170px;
  background: #E9DDC9;
  border-radius: 28% 72% 41% 59% / 49% 60% 40% 51%;
}

.voice_2 {
  width: 370px;
  height: 180px;
  background: #E9E3D9;
  border-radius: 28% 72% 41% 59% / 49% 60% 40% 51%;
}

.voice_3 {
  width: 362px;
  height: 180px;
  background: #E9DDC9;
  border-radius: 47% 53% 64% 36% / 28% 72% 28% 72%;
}

.voice_4 {
  width: 362px;
  height: 180px;
  background: #E9E3D9;
  border-radius: 31% 69% 64% 36% / 54% 60% 40% 46%;
}

.voice_koboshi {
  width: 40%;
  margin: 0 auto;
}

/*for TB*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .voice_wrapper {
    width: 95%;
  }
}

/*for SP*/
@media screen and (max-width: 768px) {
  .voice_wrapper {
    width: 90%;
  }

  .voice_plum--left {
    width: 34%;
    max-width: 150px;
    top: 11%;
    left: -15%;
  }

  .voice_plum--right {
    width: 32%;
    max-width: 150px;
    top: 74%;
  }

  .voice_contents {
    display: block;
  }

  .voice_item {
    font-size: 14px;
    margin: 0 auto 8px auto;
  }

  .voice_item:first-child {
    margin: 0 auto 8px auto;
  }

  .voice_1 {
    width: 240px;
    height: 110px;
  }

  .voice_2 {
    width: 252px;
    height: 150px;
    border-radius: 42% 72% 41% 59% / 55% 56% 53% 54%;
  }

  .voice_3 {
    width: 250px;
    height: 152px;
    border-radius: 28% 72% 41% 59% / 49% 60% 40% 51%;
  }

  .voice_4 {
    width: 252px;
    height: 118px;
  }

  .voice_koboshi {
    width: 50%;
  }
}