@charset "utf-8";
/*body{font-family: "ヒラギノ角ゴ Pro N W6"}*/
#Contents img{max-width: 100%;}
div#Contents{background-color:#fff;max-width:750px;margin-top:auto;color:#32363A;}
section{padding: 0;}
/* ===============================
PC共通
===============================*/
@media all and (min-width: 767px) {
	div#Contents{margin-top: 0;}
}

/*font-size指定*/
.fs10{
  font-size: 2.667vw;
}
.fs12{
  font-size: 3.2vw;
}
.fs13{
  font-size: 3.467vw;
}
.fs14{
  font-size: 3.733vw;
}
.fs15{
  font-size: 4vw;
}
.fs18{
  font-size: 4.8vw;
}
.fs20{
  font-size: 5.333vw;
}
.fs24{
  font-size: 6.4vw;
}
.font_bold{
  font-weight: bold;
}
.red{
  color: #EB5F2B;
}
.blue{
  color: #2BA1EB;
}
a.blue{
  color: #2A80B9;
  text-decoration: underline;
}
@media screen and (min-width: 750px){
.fs10{
  font-size: 20px;
}
.fs12{
  font-size: 24px;
}
.fs13{
  font-size: 26px;
}
.fs14{
  font-size: 28px;
}
.fs15{
  font-size: 30px;
}
.fs18{
  font-size: 36px;
}
.fs20{
  font-size: 40px;
}
.fs24{
  font-size: 48px;
}
}
/*------------*/

a._blank{
  padding-right: 1.2em;
  position: relative;
}
a._blank::after{
  content: '';
  position: absolute;
  background-image: url('/portal/images/icon-outlink.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 0.7em;
  height: 0.7em;
  right: 0.3em;
  top: 0;
  bottom: 0;
  margin: auto;
}

#KV_area{
  position: relative;
  margin-bottom: 5.33vw;
}
.kv_anchor{
  background-color: #ffffff;
  border-radius: 6px;
  width: 90%;
  line-height: 1;
  margin: auto;
  position: absolute;
  bottom: 5.33vw;
  left: 0;
  right: 0;
}
.kv_anchor p{
  border-bottom: solid 1px #C4CDDC;
  box-sizing: border-box;
  padding: 4vw;
}
.kv_anchor ul{
  box-sizing: border-box;
  padding: 4vw;
}
.kv_anchor ul li{
  margin-bottom: 4vw;
  cursor: pointer;
  position: relative;
}
.kv_anchor ul li:last-of-type{
  margin-bottom: 0;
}
.kv_anchor ul li::before{
  content: '';
  border: 1px solid;
  border-color:  transparent transparent #0c3752 #0c3752;
  transform: rotate(-45deg);
  width: 2vw;
  height: 2vw;
  left: 0.5em;
  position: absolute;
  top: -0.5em;
  bottom: 0;
  margin: auto;
}
.kv_anchor ul li a{
  padding-left: 8vw;
  display: block;
}

@media screen and (min-width: 750px){
  #KV_area{
    border-radius: 12px;
    margin-bottom: 40px;
  }
  .kv_anchor{
    bottom: 40px;
  }
  .kv_anchor p{
    padding: 30px;
  }
  .kv_anchor ul{
    padding: 30px;
  }
  .kv_anchor ul li{
    margin-bottom: 30px;
  }
  .kv_anchor ul li::before{
    width: 15px;
    height: 15px;
  }
  .kv_anchor ul li a{
    padding-left: 60px;
  }
}
@media screen and (min-width: 768px){
  .anchor_box{
    display: block;
    padding-top: 117px;
    margin-top: -117px;
  }
}

#Contents h1{
  line-height: 1;
  width: 100%;
  text-align: center;
  padding: 5.33vw;
}

@media screen and (min-width: 750px){
  #Contents h1{
    padding: 40px;
  }
}

h2{
  background-color: #546FB5;
  color: #fff;
  font-weight: normal;
  padding: 4vw;
  line-height: 1;
}

@media screen and (min-width: 750px){
  h2{
    padding: 30px;
  }
}

.mainContents{
  width: 90%;
  margin: 5.33vw auto 10.66vw;
}
.mainContents_inner{
  padding-bottom: 10.67vw;
}
.bottomVector .mainContents_inner{
  padding-bottom: 5px;
}
.mainContents_box{
  background-color: #ECECF6;
  border-radius: 6px 6px 0 0;
  margin-bottom: 5.33vw;
}
.mainContents_box h2{
  border-radius: 6px 6px 0 0;
}
.bottomVector{
  position: relative;
  margin-bottom: 16vw;
}
.bottomVector::after{
  content: '';
  position: absolute;
  border-top: 11.66vw solid #ECECF6;
  border-left: 45vw solid transparent;
  border-right: 45vw solid transparent;
  transition: auto;
}

@media screen and (min-width: 750px){
  .mainContents{
    margin: 40px auto 80px;
  }
  .mainContents_inner{
    padding-bottom: 80px;
  }
  .mainContents_box{
    border-radius: 12px 12px 0 0;
    margin-bottom: 40px;
  }
  .mainContents_box h2{
    border-radius: 12px 12px 0 0;
  }
  .mainContents_box.bottomVector{
    margin-bottom: 120px;
  }
  .bottomVector::after{
    border-top: 87.487px solid #ECECF6;
    border-left: 337.675px solid transparent;
    border-right: 337.675px solid transparent;
  }
}

.chara_outer{
  display: flex;
  width: 90%;
  margin: 5.33vw auto;
  align-items: flex-start;
  justify-content: space-between;
}
.chara_outer p{
  background-color: #fff;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: 4px 4px 18px -6px rgba(0,0,0,0.3);
  padding: 4vw 3vw;
  position: relative;
  width: 45.33vw;
  line-height: 1.8;
  text-align: center;
}
.chara_outer p:after{
  border-left: 4.8vw solid #fff;
  border-top: 4.8vw solid transparent;
  content: ' ';
  display: block;
  position: absolute;
  top: 18%;
  right: -9%;
}
.chara_outer img{
  width: 31.2vw;
}

@media screen and (min-width: 750px){
  .chara_outer{
    margin: 40px auto;
  }
  .chara_outer p{
    border-radius: 12px;
    box-shadow: 4px 4px 18px -6px rgba(0,0,0,0.3);
    padding: 30px 22.5px;
    width: 340px;
  }
  .chara_outer p:after{
    border-left: 36px solid #fff;
    border-top: 36px solid transparent;
  }
  .chara_outer img{
    width: 234px;
  }
}

.monthSelect_box{
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: auto;
}
.monthSelect_inner{
  border-radius: 6px 6px 0 0;
  color: #fff;
  width: 39vw;
  padding: 4.267vw 0;
  position: relative;
  line-height: 1;
  text-align: center;
}
.monthSelect_inner._select{
  background: -moz-linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
  background: -webkit-linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
  background: linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
}
.monthSelect_inner._select:after{
  border-left: 4.8vw solid linear-gradient(to right,#F67F88 50%,#B9B8F0);
  border-top: 4.8vw solid transparent;
  content: ' ';
  display: block;
  position: absolute;
  bottom: -4.8vw;
  left: 0;
  right: 0;
  margin: auto;
}
.monthSelect_inner._gray{
  color: #32363A;
  background-color: #D8D8D8!important;
  font-weight: normal;
  cursor: pointer;
}
.monthSelect_content{
  background-color: #fff;
  width: 90%;
  margin: 0 auto 5.33vw;
  padding: 5.33vw 2.667vw;
  position: relative;
}
.monthSelect_content._03 li{
  border-bottom: solid 1px #DDDDDD;
  display: flex;
  line-height: 2.8;
  justify-content: space-between;
  align-items: center;
}
.monthSelect_content._03 li .ranking{
  display: inline-block;
  padding-right: 1em;
}
.monthSelect_content._03 li.crown{
  position: relative;
  padding-left: 12vw;
}
.monthSelect_content._03 li.crown p::after{
  content: '';
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 10.667vw;
  height: 9.6vw;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.monthSelect_content._03 li.crown._1st p::after{
  background-image: url('/report/2010/images/icon_1st.png');
}
.monthSelect_content._03 li.crown._2nd p::after{
  background-image: url('/report/2010/images/icon_2nd.png');
}
.monthSelect_content._03 li.crown._3rd p::after{
  background-image: url('/report/2010/images/icon_3rd.png');
}
.monthSelect_content._03 li:nth-of-type(1){
  border-bottom: solid 1px #EBB72B;
}
.monthSelect_content._03 li:nth-of-type(2){
  border-bottom: solid 1px #6B757A;
}
.monthSelect_content._03 li:nth-of-type(3){
  border-bottom: solid 1px #855B2D;
}
.monthSelect_content._03 li .line_height{
  line-height: 1.3;
}
.monthSelect_content_inner{
  position: relative;
}
._01 .monthSelect_content_inner{
  height: 64.168vw;
}
._02 .monthSelect_content_inner{
  height: 76.267vw;
}
._03 ._03_box1{
	height: 159vw;
}
._03 ._03_box2{
	height: 159vw;
}

.monthSelect_content_inner img,.monthSelect_content_inner .listOuter{
  position: absolute;
  transition: 0.4s;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
}
.monthSelect_content_inner ._visible{
  opacity: 0;
  z-index: -1;
}
.btn a{
  width: 90%;
  font-size: 4vw!important;
  height: 15.33vw;
  line-height: 15.33vw;
  position: relative;
  background: -moz-linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
  background: -webkit-linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
  background: linear-gradient(to right,#FCC87E,#F67F88 33%,#B9B8F0 66%,#87D9D6)!important;
}
.btn_icon{
  display: block;
  border-top: 0.5vw solid #fff;
  border-right: 0.5vw solid #fff;
  transform: rotate(45deg);
  width: 3vw;
  height: 3vw;
  position: absolute;
  top: 0;
  right: 5.337vw;
  bottom: 0;
  margin: auto;
}
.beforeList .btn_icon{
  border-top: 0.3vw solid #2A80B9;
  border-right: 0.3vw solid #2A80B9;
  right: auto;
  left: 0;
}
.caution{
  margin-top: 5.333vw;
}

@media screen and (min-width: 750px){
  .monthSelect_inner{
    border-radius: 12px 12px 0 0;
    padding: 32px 0;
    width: 290px;
  }
  .monthSelect_content{
    margin: 0 auto 40px;
    padding: 40px 20px;
  }
  .monthSelect_content._03 li.crown{
    padding-left: 90px;
  }
  .monthSelect_content._03 li.crown p::after{
    width: 80px;
    height: 72px
  }
  ._01 .monthSelect_content_inner{
    height: 481.27px;
  }
  ._02 .monthSelect_content_inner{
    height: 572.3px;
  }
	._03 ._03_box1{
		height: 1190px;
	}
	._03 ._03_box2{
		height: 1190px;
	}
  .monthSelect_content_inner img,.monthSelect_content_inner ul{
    width: 568.275px;
  }
  .btn a{
    font-size: 30px!important;
    height: 115px;
    line-height: 115px;
  }
  .btn_icon{
    border-top: 3.75px solid #fff;
    border-right: 3.75px solid #fff;
    width: 18.75px;
    height: 18.75px;
    right: 40px;
  }
  .beforeList .btn_icon{
    border-top: 2.25px solid #2A80B9;
    border-right: 2.25px solid #2A80B9;
    width: 16.5px;
    height: 16.5px;
  }
  .caution{
    margin-top: 40px;
  }
}

.beforeList{
  background-color: #fff;
  box-sizing: border-box;
  padding: 5.33vw 8vw;
  width: 90%;
  margin: auto;
}
.beforeList ul{
  width: 100%;
  display: none;
}
.beforeList ul li{
  line-height: 2.4;
  padding-left: 3.5rem;
  position: relative;
}
.beforeList ul a{
  color: #2A80B9;
}
.bannerList li{
  position: relative;
}
.bannerList li._blank::after{
  position: absolute;
  content: '';
  background-image: url('/portal/images/icon-outlink.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 5vw;
  height: 5vw;
  max-width: 31px;
  max-height: 31px;
  bottom: 0;
  right: 5%;
}
.bannerList a{
  display: block;
  margin: 0 auto 0 5%;
  margin-bottom: 5.33vw;
  width: 83%;
}
.bannerList li:last-of-type a{
  margin-bottom: 0;
}
.beforeList_btn{
  background-color: #ECECF6;
  border: solid 2px #2BA1EB;
  margin-bottom: 15px;
  padding-left: 1em;
  position: relative;
  cursor: pointer;
}
.beforeList_btn:last-of-type{
  margin-bottom: 0;
}
.beforeList_btn span{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 1em;
  margin: auto;
}
.beforeList_btn span::before,.beforeList_btn span::after{
  position: absolute;
  top: 9px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 2px solid #2BA1EB;
  transform: translateX(-50%);
}
.beforeList_btn:not(.open) span::after{
  top: 3px;
  left: -3px;
  transform: rotate(90deg);
}
@media screen and (min-width: 750px){
  .beforeList{
    padding: 40px 30px;
  }
  .bannerList a{
    margin-bottom: 40px;
  }
  .bannerList img{
    width: 100%;
    max-width: 560px;
  }
}

.banner_text{
  margin: 0 auto 0 5%;
  font-weight: bold;
  width: 83%;
  text-align: center;
  line-height: 1.5;
}

.banner_text span {
  font-weight: normal;
}