@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

.container {
  width: 100%;
}

.lp_content {
    margin: 0 auto;
}

.md-container {
  max-width: none;
}

#sp-content {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

#sp-content a:hover{
  opacity: 0.8;
}

#sp-content .top-mv {
  width: 100%;
  max-width: 1180px;
  margin: 8% auto 0;
}

/*title-area*/
#sp-content .title-area {
  margin: 5% auto;
}
#sp-content .title-area .title-area-txt {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  font-size: 15px;
  line-height: 2em;
}

#sp-content .item-area_txt{
    font-size: 16px;
    letter-spacing: 0.05em;
}

#sp-content ul.item_color {
  display: flex;
}

#sp-content .yellow-area{
    background-color: #ffffdd;
}

#sp-content .harf-area{
    background: linear-gradient(180deg, #ffffdd 0%, #ffffdd 50%, #fff 50%, #fff 100%);
}

#sp-content .harf-are2{
    background: linear-gradient(180deg, #fff 0%, #fff 21%, #ffffdd 21%, #ffffdd 100%);
}

.reverse{
    flex-direction: row-reverse;
}

#Style-1 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 6%;
}

#Style-1 ul.item_color li.Style1_left_Area {
    width: 50%;
}

#Style-1 ul.item_color li.Style1_right_Area {
    width: 37%;
    margin: 30% 0 0 6%;
}

#Style-1 .onecolumn_wrappter {
    max-width: 590px;
    margin: 6% auto 0;
}

#Style-2 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 6%;
}

#Style-2 li.Style2_left_Area {
    width: 50%;
}

#Style-2 li.Style2_right_Area {
    width: 44%;
    margin-right: 6%;
    margin-top: 22%;
}

.num{
    display: block;
    padding-top: 6%;
    margin: 0 auto;
}

#Style-3{
  height: 960px;
}

#Style-3 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 1%;
}

#Style-3 li.Style3_left_Area {
    width: 50%;
}

#Style-3 li.Style3_right_Area {
    width: 50%;
}

#Style-4 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 6%;
}

#Style-4 ul.item_color li.Style4_left_Area {
    width: 50%;
}

#Style-4 ul.item_color li.Style4_right_Area {
    width: 37%;
    margin: 0 0 0 6%;
}

.num2{
    display: block;
    margin: 30% auto;
}

#Style-4 .onecolumn_wrappter {
    max-width: 590px;
    margin: 6% auto 0;
}

#Style-5 ul.item_color{
    max-width: 1000px;
    margin: 6% auto 0;
}

#Style-5 li.Style5_left_Area {
    width: 50%;
}

#Style-5 li.Style5_right_Area {
    width: 50%;
}

#Style-6 ul.item_color{
    max-width: 1000px;
    margin: 0 auto 0;
}

#Style-6 li.Style6_left_Area {
    width: 50%;
}

#Style-6 li.Style6_right_Area {
    width: 50%;
}

#Style-7 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 6%;
}

#Style-7 li.Style7_left_Area {
    width: 50%;
}

#Style-7 li.Style7_right_Area {
    width: 44%;
    margin-right: 6%;
    margin-top: 22%;
}

#Style-8{
    height: 1239px;
}

#Style-8 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
}

#Style-8 .onecolumn_wrappter {
    max-width: 590px;
    margin: 6% auto 0;
}

#Style-9 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 6%;
}

#Style-9 ul.item_color li.Style9_left_Area {
    width: 50%;
}

#Style-9 ul.item_color li.Style9_right_Area {
    width: 37%;
    margin: 30% 0 0 6%;
}

#Style-10 ul.item_color{
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 1%;
}

#Style-10 li.Style10_left_Area {
    width: 49%;
    margin-right: 1%;
}

#Style-10 li.Style10_right_Area {
    width: 49%;
    margin-left: 1%;
}


p.item_cre {
    margin-top: 20px;
    font-size: 14px;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-decoration: underline;
}

.btn_buy{
    padding-top: 6%;
    padding-bottom: 10%;
}

.btn_buy a {
    font-family: 'Lobster', cursive;
    width: 30%;
    background-color: #fff;
    border-radius: 50px;
    border: 1px solid #000;
    color: #ff6f8a;
    display: block;
    font-size: 39px;
    letter-spacing: 0;
    padding: 0.5% 0;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    box-shadow: 4px 8px 0 -1px #000;
}

.btn_buy a:hover {
    opacity: 1!important;
    box-shadow: 4px 8px 0 -1px #000;
    color: #fff;
    background-color: #ff6f8a;
}

.link-btn-area {
  margin: 0 auto 6%;
}

.link-btn-area img{
  margin: 0 auto;
  display: block;
}

.link-btn-area h3 {
  font-size: 28px;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  margin-bottom: 3%;
  text-align: center;
  letter-spacing: 0.1em;
}

.link-btn-area p{
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  margin-top: 15px;
  letter-spacing: 0.08em;
}

@media (max-width: 1179px){
#sp-content .item_color{
  width: 90%;
}

#Style-3 {
    height: 843px;
}
}

@media (max-width: 820px){
#Style-3 {
    height: 657px;
}
}

@media (max-width: 767px){
.breadcrumb,
  #page-body {
    margin: 0;
}

#sp-content {
    margin-top: 20px;
}

#sp-content .title-area {
    margin: 8% auto;
}

#sp-content .title-area .title-area-txt {
    padding: 0 3%;
    text-align: center;
    letter-spacing: 0;
    font-size: 14px;
}

#sp-content ul.item_color {
    display: block;
}

#Style-1 ul.item_color li.Style1_left_Area {
    width: 80%;
}

#Style-1 ul.item_color li.Style1_right_Area {
    width: 70%;
    margin: 10% 0 0 30%;
}

#Style-1 .onecolumn_wrappter {
    margin: 10% auto 0;
    width: 90%;
}

#Style-2 li.Style2_left_Area {
    width: 85%;
    margin-left: 15%;
}

#Style-2 li.Style2_right_Area {
    width: 70%;
    margin-right: 30%;
    margin-top: 10%;
}

.num {
    padding-top: 10%;
    margin: 0 auto 10px;
    height: 37px;
}

#Style-3 li.Style3_left_Area {
    width: 90%;
    margin: 0 auto;
}

#Style-3 li.Style3_right_Area {
    width: 90%;
    margin: 20px auto 0;
}

#Style-3 {
    height: auto;
    padding-bottom: 10%;
}

#sp-content .harf-area {
    background: #ffffdd;
}

.num2 {
    display: block;
    margin: 10% 0 10px 0;
    height: 37px;
}

#Style-4 ul.item_color li.Style4_left_Area {
    width: 80%;
}

#Style-4 ul.item_color li.Style4_right_Area {
    width: 70%;
    margin: 10% 0 0 30%;
}

#Style-4 .onecolumn_wrappter {
    margin: 10% auto 0;
    width: 90%;
}

#Style-5 li.Style5_left_Area {
    width: 100%;
    margin: 0 auto;
}

#Style-5 li.Style5_right_Area {
    width: 100%;
    margin: 0 auto;
}

#Style-6 li.Style6_left_Area {
    width: 100%;
    margin: 0 auto;
}

#Style-6 li.Style6_right_Area {
    width: 100%;
    margin: 0 auto;
}

#Style-7 li.Style7_left_Area {
    width: 80%;
}

#Style-7 li.Style7_right_Area {
    width: 70%;
    margin: 10% 0 0 30%;
}

#Style-8 {
    height: auto;
    padding-bottom: 6%;
    padding-top: 0.5%;
    margin-top: 10%;
}

#Style-8 .onecolumn_wrappter {
    margin: 10% auto 0;
    width: 80%;
}

#sp-content .harf-are2 {
    background: #ffffdd;
}


#Style-9 ul.item_color li.Style9_left_Area {
    width: 80%;
}

#Style-9 ul.item_color li.Style9_right_Area {
    width: 70%;
    margin: 10% 0 0 30%;
}

#Style-10 li.Style10_left_Area {
    width: 90%;
    margin: 0 auto;
}

#Style-10 li.Style10_right_Area {
    width: 90%;
    margin: 20px auto 0;
}
p.item_cre {
    margin-top: 7%;
    margin-left: 0;
}

.link-btn-area a {
  font-size: 1.3em;
  line-height: 2.5;
  width: 80%;
  min-width: 280px;
}

.link-btn-area h3 {
    font-size: 23px;
}

.link-btn-area p {
    font-size: 13px;
    margin-top: 5px;
}

.btn_buy a {
    width: 90%;
    margin: 8% auto;
    display: block;
    font-size: 24px;
    padding: 3.2% 0;
}

p.item_cre {
    font-size: 14px;
    text-align: left;
    line-height: 1.8em;
}
}

.hidden {
  display: none;
  visibility: hidden;
}
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}


@media (min-width: 769px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

.c-breadcrumb_content {
    margin-bottom:0;
}

@media (min-width: 768px) and (max-width: 979px) {
  .top-subtext {
      right: -100px;
  }
}