@charset "UTF-8";

.color01{
  color: #45ADDD;
}

.bg_color01 {
  background-color: #EAFAFF;
}

.color02 {
  color: #67AC65;
}

.bg_color02 {
  background-color: #F5F8EA;
}

.bg_img {
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/contents01_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.contents_color02 .bg_img {
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/contents02_bg.jpg);
}

.mb15 {
  margin-bottom: 15px;
}

.txt_center {
  text-align: center;
}

/* ====================================
	 sp.pc_hide
==================================== */
@media screen and (min-width:679px) {
  .sp {
    display: none !important;
  }
  }
  @media screen and (max-width:678px) {
    .pc {
      display: none !important;
    }
  }

/* ====================================
	 main
==================================== */
/* .wrapper .pane-main{
  margin-bottom:0;
} */
.cont_wrap {
  font-family: "Noto Sans JP", sans-serif;
  /* overflow: hidden; */
  background-color: #F9FBFC;
  width: 100vw;
  position: relative;
}
.cont_wrap .roboto {
  font-family: "Roboto", sans-serif;
}
.cont_wrap sup {
  font-size: 50%;
}
.cont_wrap h1,.cont_wrap h2,.cont_wrap h3,.cont_wrap h4,.cont_wrap h5,.cont_wrap li,.cont_wrap a{
  line-height: 1;
}
.cont_wrap img{
  width: 100%;
}
.cont_wrap a:focus{
  text-decoration: none;
}

/* main_area */
.main_area{
  width: 375px;
  box-shadow: 5px 0 15px #00000040;
  margin-left: calc(100vw - 375px - 29.2vw);
  /* overflow: hidden; */
  z-index: 10;
  position: relative;
  /* background-color: aqua;
  height: 3000px; */
  background-color: #fff;
}


.main_area{
}
.mv_area{
}
.contents_area.contents_area01.contents_color01{
}
.wrapper h2.contents_title{
  font-size: 24px;
  font-weight: 500;
  padding: 65px 15px 0;
  line-height: 1.6;
}
.h2_ruby{
  vertical-align: baseline;
  color: #45AEDD;
}
.h2_ruby rt{
  color: #F8CB51;
  font-size: 4px;
}
.clothes_type{
  font-size: 16px;
  color: #F8CB51;
  padding: 10px 10px 0 15px;
  display: inline-block;
  position: relative;
  background-color: #fff;
}
.clothes_type::after {
  content: "";
  margin-right: -15px;
  border-bottom: 1px dotted #F8CB51;
  position: absolute;
  /* right: -77px; */
  /* transform: translateX(-50%); */
  width: 100vw;
  top: 20px;
  left: 0;
  z-index: -1;
}
.contents_color02 .clothes_type{
  color: #67AC65;
}
.contents_color02 .clothes_type::after{
  border-bottom: 1px dotted #67AC65;
}
.contents_main_img{
  margin-top: 10px;
}
.contents_theme{
  padding: 24px 60px;
  text-align: center;
}
.contents_theme_p{
  color: #156DB9;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  display: inline-block;
  /* max-width: 500px; */
  margin: 0 auto;
  text-align: left;
}
.contents_color02 .contents_theme_p {
  color: #44523A;
}
.contents_item_area{
  overflow: hidden;
}
.contents_detail_img{
  padding: 20px 15px 0;
  background-color: #fff;
  background-image: linear-gradient(#fff 60%,#fff 70%, #EAFAFF 100%);
}
.contents_color02 .contents_detail_img{
  background-image: linear-gradient(#fff 60%,#fff 70%, #F5F8EA 100%);
}
.contents_item_block{
  padding: 40px 30px 40px;
  background-color: #EAFAFF;
}
.contents_item_block:last-child{
  padding: 40px 30px 80px;
}
.contents_color02 .contents_item_block{
  background-color: #F5F8EA;
}
.contents_item_list{
}
.contents_item_list li.contents_item_box:not(:first-child){
  margin-top: 40px;
}
.contents_item_a{
  display: flex;
}
.contents_item_img{
  width: 138px;
}
.contents_item_detail{
  width: calc(100% - 138px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 14px;
}
.cont_wrap h3.contents_item_detail_h3{
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
.cont_wrap img.logo_tiotio_small{
  width: 85px;
  height: auto;
  padding-top: 10px;
}

.contents_item_detail_price{
  font-size: 15px;
  font-weight: 500;
  padding-top: 10px;
}
.contents_item_detail_price_tax{
  font-size: 12px;
}
.contents_item_detail_function{
  display: flex;
  gap: 10px;
}
.contents_item_detail_function li .contents_item_detail_function_icon{
  width: 31px;
  height: auto;
}
.contents_item_detail_function li .contents_item_detail_function_icon[src="assets/img/picto05.svg"]{
  width: 39px;
}
.button_area {
  margin: 40px 0 0;
  position: relative;
}
.bg_deco {
  position: absolute;
  z-index: 0;
  width: 168px;
  height: 158px;
}
.bg_deco01 {
  left: -148px;
  top: -50px;
}
.bg_deco02 {
  right: -70px;
  top: -50px;
}
.bg_deco03 {
  right: -110px;
  top: -8px;
}
.bg_deco04 {
  left: -71px;
  bottom: -120px;
  width: 155px;
  height: 162px;
}
.bg_deco01.bg_deco01_img{
  width: 100%;
}

.btn_more{
  display: flex;
  width: 100%;
  height: 62px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  position: relative;
  background-color: #6AB0D0;
  z-index: 2;
}
.contents_color02 .btn_more{
  background-color: #72B771;
}
.btn_more::after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  right: -15px;
  background-color: #EAC101;

}
.contents_color02 .btn_more::after{
  background-color: #A39E5B;
}
.sticky {
  position: sticky;
  /* top: 122px; */
  top: 72px;
  overflow: hidden;
  z-index: -1;
}
.contents_area.contents_area02.contents_color01{
}
.bnr{
  margin: 70px -15px 0;
  display: block;
  z-index: 2;
  position: relative;
}
.tiotio_explanation_area{
  background-color: #fff;
  margin: 70px -15px 0;
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/bg_pattern.png);
  background-size: 45px;
  padding: 0 15px 25px;
  z-index: 2;
  position: relative;
}
.wrapper h2.tiotio_explanation_title{
  padding-top: 43px;
}
.tiotio_explanation_title_under{
  font-size: 17px;
  text-align: center;
  padding-top: 20px;
}
.tiotio_figure_area {
  text-align: center;
}
.tiotio_figure{
  margin-top: 36px;
  max-width: 400px;
}
.tiotio_explanation_txt{
  font-size: 14px;
  line-height: 1.6;
  padding-top: 36px;
}
.tiotio_explanation_notes{
  font-size: 11px;
  margin-top: 5px;
}
.tiotio_explanation_features_list{
}
.tiotio_explanation_features_list li{
  padding-top: 36px;
}
.tiotio_explanation_features_list_number{
  color: #EEC406;
  /* display: inline-block; */
  position: relative;
  font-size: 22px;
}
.tiotio_explanation_features_list_number::after{
  content: "";
  height: 1px;
  position: absolute;
  background-color: #AAAAAA;
  top: 50%;
  left: 30px;
  width: calc(100% - 30px);
}
.wrapper h3.tiotio_explanation_features_list_name{
  font-size: 20px;
  font-weight: 600;
  color: #2093D5;
  padding-top: 5px;
  line-height: 1.4;
}
.tiotio_explanation_features_list_p{
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.tiotio_explanation_features_list_p_notes{
  font-size: 11px;
  padding-top: 10px;
  line-height: 1.6;
}
.tiotio_explanation_topics{
  margin-top: 53px;
  position: relative;
  background-color: #FFFDF2;
  border: 1px solid #CECECE;
  padding: 30px 5px;
}
.tiotio_explanation_topics_icon{
  font-size: 17px;
  border: 1px solid #2093D6;
  background-color: #fff;
  border-radius: 50px;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2093D6;
  position: absolute;
  top: -32px;
  left: -15px;
}
.tiotio_explanation_topics_p{
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.deco{
  color:#2093D6;
  position: relative;
  font-weight: 600;
  vertical-align: text-bottom;
}
.deco::after{ 
  content:"";
  display: inline-block;
  height:4px;
  background-color: #F8CA52;
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.emphasis_small{
  font-size: 16px;
}
.emphasis{
  font-size: 20px;
}
.tiotio_explanation_topics_notes{
  font-size: 11px;
  padding-top: 10px;
  text-align: center;
}

.plusone_icon {
  text-align: center;
  padding-top: 65px;
}

.plusone_icon img{
  width: 180px;
  height: auto;
}

.plusone_icon + .contents_title {
  padding: 0px 15px 0!important;
}

.bnr_area {
  position: relative;
}

/* pc_left */
.pc_left {
  /* width: 45.7545vw; */
  width: calc(100vw - 375px - 29.2vw);
  /* height: calc(100vh - 122px); */
  position: fixed !important;
  top: 120px;
  left: 0;
  /* right: 45vw; */
  transition: all 0.1s 0s linear;
  /* max-width: 300px; */
  margin: auto;
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/bg_left.png);
  background-size: cover;
  height: calc(100vh - 122px);
  background-repeat: no-repeat;
}

.pc_left_menu {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: auto;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: 0;
  justify-content: center;
}

.pc_left_menu li {
  border-bottom: 1px dotted #333;position: relative;

}

.pc_left_menu_a {
  padding-top: 20px;
  display: block;
}

.pc_left_menu_a.menu_plusone {
  padding-top: 50px;
}

.pc_left_menu li .left_menu_title::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-bottom: solid 1.5px #333;
  border-right: solid 1.5px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 12%;
  bottom: 0;
  margin: auto;
}
.pc_left_menu li .left_menu_title.pb-10::after {
  top: -14px;
}

.left_menu_sub_title {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 25px;
  position: relative;
  text-align: center;
}

.left_menu_sub_title::after {
  content: "";
  width: 117px;
  height: 10px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
}

.left_menu_sub_title.color01::after {
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/wavyline01.svg);
}
.left_menu_sub_title.color02::after {
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/wavyline02.svg);
}

.left_menu_title {
  font-size: 17px;
  display: flex;
  flex-direction: column;
  padding: 10px  20px 10px 40px;
  position: relative;
  font-weight: 500;
}
.left_menu_title.pb-10 {
  padding-bottom: 20px;
}

.left_menu_title_span {
  font-size: 14px;
  font-weight: 300;
  display: block;
  margin-bottom: 10px;
}

.is-hidden{
display: none;
   }

/* pc_right */
.pc_right {
  width: 29.2vw;
  /* width: calc(100vw - 375px - 45.7545vw); */
  position: fixed;
  top: 122px;
  right: 0;
  transition: all 0.1s 0s linear;
  /* background-image: url(../); */
  background-image: url(/ec/img/usr/pg/campaign/tiotio_premium/26ss/bg_right.png);
  background-size: cover;
  height: calc(100vh - 122px);
  background-repeat: no-repeat;
  z-index: 0;
}
.pc_right_contents{
  /* background-color: #fff; */
  /* border-right: none; */
  padding: 45px 8%;
  margin: 0 auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  height: calc(100vh - 122px);
  /* position: absolute; */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
}


.pc_right_contents_p {
  font-size: 15px;
  margin-bottom: 5px;
  /* line-height: 2.0; */
}

.pc_right_contents_p .pc_right_contents_span {
  font-size: 19px;
  vertical-align: text-bottom;
}
.pc_right_contents_p .pc_right_contents_span ruby rt {
  font-size: 4px;
}

.pc_right_contents_arrow_down {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  margin: 0 auto;
}

.pc_right_contents_logo_tiotio {
  width:154px;
  margin: 20px auto 0;
}

/* ====================================
	 responsive
==================================== */

@media screen and (min-width:679px) and (max-width:1023px) {

  .main_area {
    margin-left: calc(100% - min(50vw, 375px));
}
  .pc_left {
    width: calc(100% - min(50vw, 375px));
    height: calc(100vh - 9.56%);
    top: 9.56%;
  }
  /* .fixed {
    top: 64px;
    height: calc(100vh - 64px);
} */
/* pc_right */
  .pc_right{
    display: none;
    }
}
@media screen and (min-width:450px) and (max-width:678px){
  /* .br_hide {
    display: none !important;
  } */
  /* .casual_box:nth-of-type(1) .point_inner,
.casual_box:nth-of-type(3) .point_inner,
.casual_box:nth-of-type(6) .point_inner,
.casual_box:nth-of-type(9) .point_inner{
  margin-right: 30%;
  }
.casual_box:nth-of-type(2) .point_inner,
.casual_box:nth-of-type(5) .point_inner,
.casual_box:nth-of-type(8) .point_inner,
.casual_box:nth-of-type(10) .point_inner{
  margin-left: 30%;
  } */
}
@media screen and (max-width:678px) {
  .main_area {
    margin-left: 0;
}
  .cont_wrap{
    height: auto;
  }
  .main_area{
    width: 100%;
  }
  .mv_img {
    height: 140vw;
}

/* pc_left,pc_right */
.pc_left,.pc_right{
display: none;
}
}

/* overwrite */
.wrapper .pane-main {
  margin-bottom: 0;
}

body,
.wrapper{
  overflow: visible;
}