@charset "UTF-8";

/* resetcssに負けてしまうので、要素の指定が必要 */

/* common
-------------------------*/
div.saison-main .saison-wrapper{
  max-width: 960px;
  margin: 0 auto;
  color: #333;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans", "Noto Sans CJK JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.saison_illust_01 > img,
.saison_illust_02 > img,
.saison_illust_03 > img{
  margin-left: auto;
  margin-right: auto;
}
.saison_illust_01,
.saison_illust_02,
.saison_illust_03 {
  margin-bottom: 16px;
  text-align: center;
}
/*btn*/
div.saison-btn{
  margin: 16px auto;
  text-align: center;
}
div.saison-ichioshi button{
  background-color: #004098;
  border: 4px solid #004098;
  color: #fff;
}
div.saison-marugoto h2 span.day{
  color: #737373;
}
div.saison-marugoto h2 span.color{
  line-height: 130%;
}
div.saison-marugoto p{
  text-align: center;
  padding-bottom: 32px;
}
p.alert{
  padding-top: 24px;
  text-align: center;
  color: #f41919;
}
div.saison-marugoto button{
  background-color: #eb5757;
  border: 4px solid #eb5757;
  color: #fff;
}
div.saison-ichioshi button:hover{
  background: #fff;
  border: 4px solid #004098;
  color: #004098;
}
div.saison-marugoto button:hover{
  background: #fff;
  border: 4px solid #eb5757;
  color: #eb5757;
}
div.saison-dm-comic1 .saison-btn button,
div.saison-dm-comic2 .saison-btn button{
  height: 80px;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  display: block;
  border-radius: 100px;
  line-height: 70px;
  margin: 0 auto;
}
div.saison-dm-comic1 .saison-btn button {
    width: 80%;
}
div.saison-dm-comic2 .saison-btn button {
    width: 100%;
}
div.saison-btn button:hover{
  transition: 0.2s;
  cursor: pointer;
}
div.saison-btn2 a{
  margin: 0 auto;
  display: block;
  width: 600px;
}
div.saison-btn2 img{
  width: 600px;
}
/* header
-------------------------*/
.saison-main .bg-color{
  background-color: #27b7b4;
}
h1.saison-header-eyecatch img{
  width: 100%;
  height: auto;
}
/* contents
-------------------------*/
div.saison-main .saison-contents{
  padding: 56px 0;
}
ul.lp-title-bottom br.none{
  display: none;
}
ul.lp-title-bottom h3{
  font-size: 24px;
  padding-top: 16px;
}

/* point
-------------------------*/
.saison-main .bg-color2{
  background-color: #d1e9e9;
}
.saison-contents h2{
  font-size: 32px;
  line-height: 0.5;
  display: block;
  margin-top: 0;
  margin-bottom: 56px;
  text-align: center;
  font-weight: 900;
}
.saison-contents h2 > .small {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.saison-contents span.color {
  color: #004097;
}
div.saison-point dl{
  background: #fff;
  width: 800px;
  margin: 24px auto;
  text-align: center;
  border-radius: 30px;
}
div.saison-point dt{
  font-size: 32px;
  background: #004097;
  padding: 8px 16px 24px 16px;
  color: #fff;
  line-height: 0.6;
}
div.saison-point dt.top{
  border-radius: 30px 30px 0 0;
}
div.saison-point dt > .small {
  font-size: 24px;
  font-weight: 700;
  display: block;
  margin: 4px;
}
div.saison-point dt span.color {
  color: #ffe23e;
}
div.saison-point dd{
  color: #333;
  font-size: 18px;
  padding: 24px 16px;
}
div.item a:hover,
div.saison-campaign a:hover,
div.saison-btn a:hover,
div.saison-btn2 a:hover{
  opacity: 0.8;
}
div.saison-dm-comic1 .item,
div.saison-dm-comic2 .item{
  padding: 16px;
  text-align: center;
  margin-bottom: 24px;
}
div.saison-dm-comic1 .item {
  width: 50%;
}
div.saison-dm-comic2 .item{
  width: 33%;
}
div.saison-dm-comic1 img,
div.saison-dm-comic2 img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
  box-shadow: 10px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
div.saison-dm-comic1,
div.saison-dm-comic2 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-end
}
div.saison-bubble{
  width: 50%;
  position: relative;
  margin: 0 auto;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  background: linear-gradient(transparent 50%, yellow 50%);
}
div.saison-bubble::before,
div.saison-bubble::after{
  position: absolute;
  top: 70%;
  display: inline-block;
  width: 30px;
  height: 3.5px;
  background-color: #333;
}
div.saison-bubble::before{
  content: "";
  margin: 0;
  left: -45px;
  transform: rotate(50deg);
}

div.saison-bubble::after{
  content: "";
  margin: 0;
  right: -45px;
  transform: rotate(-50deg);
}

span.maru {
  border-radius: 100%;
  line-height: 50px;
  text-align: center;
  background: #ffe23e;
  color: #004098;
  font-weight: 900;
  padding: 5px 11px;
  font-size: 18px;
}
/* campaign
-------------------------*/
div.saison-campaign dl{
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  margin: 24px 0;
}
div.saison-campaign dt{
  text-align: center;
}

/* breadcrumb
-------------------------*/
div.lp-breadcrumb {
  margin: 0;
  padding: 32px 0;
  list-style: none;
  background-color: #f3f3f3;
}
div.lp-breadcrumb ul {
  max-width: 940px;
  margin: 0 auto;
}
div.lp-breadcrumb li {
  display: inline;
  list-style: none;
  font-size: 13px;
}
div.lp-breadcrumb li:after {
  content: '>';
  padding: 0 0.2em;
  color: #333;
}
div.lp-breadcrumb li:last-child:after {
  content: '';
}
div.lp-breadcrumb li a {
  color: #004098;
}
/* screen size
-------------------------*/
@media(max-width: 959px){
  div.saison-point{
    padding: 16px;
  }
  div.saison-marugoto,
  div.saison-campaign,
  div.saison-ichioshi{
    padding: 16px 0;
  }
  div.saison-point dl {
    width: 100%;
    margin: 0;
}
div.saison-campaign-bnr img{
  width: 100%;
}
div.saison-campaign dl {
    margin: 24px 16px;
}
div.saison-bubble {
    width: 60%;
  }
}
@media(max-width: 559px){
  div.saison-main .saison-contents {
    padding: 0;
}
  div.saison-btn2 a {
    width: 100%;
    padding: 0 16px;
    margin-bottom: 24px;
}
div.saison_illust_01 img,
div.saison_illust_02 img,
div.saison_illust_03 img{
  width: 30px;
}
.saison-contents h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }
  .saison-contents h2 > .small {
    font-size: 16px;
}
div.saison-point dt > .small {
    font-size: 18px;
  }
  div.saison-point dt {
    font-size: 20px;
  }
  div.saison-point dd {
    font-size: 13px;
    padding: 16px 8px;
  }
  div.saison-bubble {
    width: 70%;
}
  div.saison-btn2 img {
    width: 100%;
}
  div.saison-bubble {
    font-size: 16px;
  }
  .saison-contents h2 {
    font-size: 16px;
}
  div.saison-dm-comic1 .item,
  div.saison-dm-comic2 .item {
    padding: 8px;
    margin-bottom: 0;
}
  div.saison-btn {
    margin: 0 auto;
  }
  div.saison-dm-comic2 .saison-btn button {
    height: 60px;
    font-size: 16px;
    line-height: 50px;
}
div.saison-ichioshi .saison-btn button {
  font-size: 14px;
}
  div.saison-dm-comic1 .saison-btn button{
    height: 60px;
    font-size: 18px;
    line-height: 50px;
    width: 100%;
  }
  div.saison-dm-comic1,
  div.saison-dm-comic2{
    margin-bottom: 24px;
  }
  .saison-contents h2 {
    font-size: 24px;
  }
  div.saison-campaign h2{
    font-size: 16px;
  }
  div.saison-dm-comic1 img,
  div.saison-dm-comic2 img {
    box-shadow: 6px 6px 6px -6px rgb(0 0 0 / 30%);
  }
  div.saison-campaign dl {
    margin: 16px;
    font-size: 14px;
  }
  div.saison-marugoto p,
  p.alert{
    text-align: left;
    font-size: 14px;
    padding: 0 16px;
  }
  div.saison-marugoto p br.none{
    display: none;
  }
  div.lp-breadcrumb{
    padding: 32px 16px 0px 16px;
  }

}