@charset "UTF-8";

/*============================================================

共通部分変更

============================================================*/

.g-contents,

.contents {

  background: url(../images/bg_dot.gif) center top repeat;

  background-size: auto;

  background-position: center top;

  overflow: hidden;

  min-width: 960px;

}



.g-pagetop,

.pagetop {

  padding: 20px 0 10px;

  margin: 0;

  background-color: #fff;

}



.is-showSp {

  display: none;

}



#crumb .crumb_txt > div {

  color: #fff;

}



#crumb .crumb_txt > div a {

  color: #fff;

}



.g-crumb,

.g-crumb a{

  color: #fff;

}

.g-crumb a:hover{

	text-decoration: underline;

}



@media screen and (max-width: 640px) {

  .g-contents,

  .contents {

    background-size: 30px 30px;

    min-width: 0;

  }



  .is-hideSp {

    display: none;

  }



  .is-showSp {

    display: block;

  }

}

/*============================================================

時短コンテンツ

============================================================*/

.howtoWrap {

  padding-top: 10px;

}

.howtoWrap a{

}



.howtoWrap-top {

  background: linear-gradient(to bottom, rgba(43, 171, 176, 0) 30%, #2babb0 50%), url(../images/bg_top_chara.png) no-repeat;

  background-size: auto,auto;

  background-position: left top, -webkit-calc(50% + 200px) 40px;

  background-position: left top, calc(50% + 200px) 40px;

  padding-top: 0;

}



.howtoWrap_inner {

  max-width: 960px;

  padding: 0 15px;

  min-width: 930px;

  margin: 0 auto;

  color: #fff;

}



.howtoWrap_inner-top {

  padding-bottom: 80px;

}



.howtoWrap_aside {

  background-color: #fff;

  padding-top: 80px;

}



.howtoWrap_aside_inner {

  max-width: 960px;

  padding: 0 15px;

  min-width: 930px;

  margin: 0 auto;

}



@media screen and (max-width: 640px) {

  .howtoWrap {

    padding-top: 0;

  }



  .howtoWrap-top {

    background: linear-gradient(to bottom, rgba(43, 171, 176, 0) 25%, #2babb0 30%), url(../images/bg_top_chara.png) no-repeat;

    background-size: auto,330px auto;

    background-position: left top,center 255px;

  }



  .howtoWrap_inner {

    min-width: 0;

    max-width: none;

    width: 100%;

    padding: 0 15px;

    box-sizing: border-box;

  }



  .howtoWrap_inner-top {

    padding: 0 0 20px;

  }



  .howtoWrap_aside {

    padding-top: 30px;

  }



  .howtoWrap_aside_inner {

    width: 100%;

    min-width: 0;

    max-width: none;

    padding: 0;

  }

}

/*============================================================

時短コンテンツ TOP

============================================================*/

.howtoTop {

  position: relative;

}



.howtoTop_ttl {

  padding-top: 45px;

  padding-bottom: 20px;

  margin: 0;

}



.howtoTop_txt {

  font-size: 2.4rem;

  margin: 0;

  font-weight: bold;

  min-height: 450px;

  padding-bottom: 20px;

  margin-bottom: 20px;

  box-sizing: border-box;

}



.howtoTop_balon {

  position: absolute;

  right: 20px;

  top: 390px;

  background-color: #ba8a17;

  text-align: center;

  font-size: 2.8rem;

  font-weight: bold;

  color: #fff;

  border-radius: 50%;

  padding: 30px 0;

  display: block;

  width: 240px;

  box-sizing: border-box;

}



.howtoTop_recorder {

  position: absolute;

  right: 0;

  left: 0;

  top: 605px;

  width: 835px;

  margin: auto;

}



@media screen and (max-width: 640px) {

  .howtoTop {

    text-align: center;

    padding: 0 15px;

  }



  .howtoTop_ttl {

    padding: 20px 30px 10px;

  }



  .howtoTop_ttl img {

    max-width: 205px;

  }



  .howtoTop_txt {

    font-size: 1.5rem;

    min-height: 400px;

    text-align: left;

  }



  .howtoTop_balon {

    right: 5px;

    top: 385px;

    font-size: 1.4rem;

    padding: 15px 0;

    width: 120px;

  }



  .howtoTop_recorder {

    top: 500px;

    width: 290px;

  }

}

.howtoTopNavWrap {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  margin: 0 -5px;

}



.howtoTopNavWrap_list {

  margin: 0 5px;

  border: 0 solid #fff100;

  border-width: 0 2px;

  padding: 0 0 20px;

  background-color: #2db4b9;

}



.howtoTopNavWrap_listOrange {

  background-color: #e08d03;

}



.howtoTopNavWrap_ttl {

  text-align: center;

  background-color: #087f86;

  padding: 10px;

  position: relative;

  margin-bottom: 25px;

}



.howtoTopNavWrap_ttl::after {

  content: "";

  position: absolute;

  right: 0;

  left: 0;

  bottom: -40px;

  width: 0;

  height: 0;

  margin: auto;

  border-width: 22px 13px;

  border-style: solid;

  border-color: #087f86 transparent transparent;

}



.howtoTopNavWrap_ttlOrange {

  background-color: #c54e00;

}



.howtoTopNavWrap_ttlOrange::after {

  border-top-color: #c54e00;

}



.howtoTopNav {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

}



.howtoTopNav_list {

  -webkit-flex: 1 1 230px;

  flex: 1 1 230px;

  max-width: 230px;

  box-sizing: border-box;

  border-right: 2px solid #fff100;

  position: relative;

  padding: 10px 15px;

}



.howtoTopNav_list:last-of-type {

  border-right: 0;

}



.howtoTopNav_list::after {

  content: "";

  position: absolute;

  right: -10px;

  top: 60px;

  background: left top no-repeat;

}



.howtoTopNav_list-chara01::after {

  width: 112px;

  height: 165px;

  background-image: url(../images/chara_mini01.png);

}



.howtoTopNav_list-chara02::after {

  width: 91px;

  height: 163px;

  background-image: url(../images/chara_mini02.png);

}



.howtoTopNav_list-chara03::after {

  width: 83px;

  height: 166px;

  background-image: url(../images/chara_mini03.png);

}



.howtoTopNav_ttl {

  padding: 0;

  margin: 0 0 30px;

  text-align: center;

  display: -webkit-flex;

  display: flex;

  -webkit-align-items: flex-end;

  align-items: flex-end;

  -webkit-justify-content: center;

  justify-content: center;

  height: 50px;

}



.howtoTopNav_txt {

  font-size: 1.8rem;

  font-weight: bold;

  min-height: 140px;

  margin: 0;

}



.howtoTopNav_txt-chara01 {

  padding-right: 80px;

}



.howtoTopNav_txt-chara02 {

  padding-right: 65px;

}



.howtoTopNav_txt-chara03 {

  padding-right: 60px;

}



.howtoTopNav_btn {

  color: #fff100;

  font-size: 1.6rem;

  font-weight: bold;

  display: block;

  border: 6px solid #2c9fa4;

  padding: 8px 20px 8px 8px;

  border-radius: 50px;

  text-align: center;

  transition: all .1s ease;

  background: url(../images/icon_arw.png) 96% center no-repeat;

}



.howtoTopNav_btn:hover {

  color: #2c9fa4;

  background-color: #fff;

  background-image: url(../images/icon_arw_green.png);

}



.howtoTopNav_btnOrange {

  border-color: #c07800;

}



.howtoTopNav_btnOrange:hover {

  color: #c54e00;

  background-color: #fff;

  background-image: url(../images/icon_arw_orange.png);

}



@media screen and (max-width: 640px) {

  .howtoTopNavWrap {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    margin: 0;

  }



  .howtoTopNavWrap_list {

    margin: 0 15px 20px;

    border-width: 0;

    padding: 0;

    width: 100%;

  }



  .howtoTopNavWrap_ttl {

    padding: 5px;

    margin-bottom: 12px;

  }



  .howtoTopNavWrap_ttl::after {

    bottom: -20px;

    border-width: 11px 6px;

  }



  .howtoTopNavWrap_ttl img {

    height: 15px;

    width: auto;

  }



  .howtoTopNav {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    margin: 0;

    padding: 0;

  }



  .howtoTopNav_list {

    margin: 0 0 10px;

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    max-width: 100%;

    border-right-width: 0;

    border-bottom: 1px solid #fff100;

    min-height: 90px;

    padding: 0 10px 10px 50px;

  }



  .howtoTopNav_list:last-of-type {

    margin-bottom: 0;

  }



  .howtoTopNav_list::after {

    left: -10px;

    right: auto;

    top: 0;

  }



  .howtoTopNav_list-chara01::after {

    width: 56px;

    height: 80px;

    background-size: 56px auto;

  }



  .howtoTopNav_list-chara02::after {

    width: 45px;

    height: 80px;

    background-size: 45px auto;

  }



  .howtoTopNav_list-chara03::after {

    width: 41px;

    height: 80px;

    background-size: 41px auto;

  }



  .howtoTopNav_ttl {

    padding: 0;

    margin: 0 0 10px;

    text-align: left;

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    -webkit-justify-content: flex-start;

    justify-content: flex-start;

    height: auto;

  }



  .howtoTopNav_ttl img {

    height: auto;

    width: 50px;

  }



  .howtoTopNav_ttlOrange img {

    width: 190px;

    height: auto;

  }



  .howtoTopNav_txt {

    font-size: 1.1rem;

    min-height: 0;

    padding: 0 0 10px;

    -webkit-flex: 0 0 50%;

    flex: 0 0 50%;

    -webkit-flex-basis: calc(100% - 145px);

    flex-basis: calc(100% - 145px);

  }



  .howtoTopNav_btn {

    font-size: 1.1rem;

    border-width: 3px;

    padding: 4px 15px 4px 4px;

    background-size: 8px auto;

    -webkit-flex: 0 0 110px;

    flex: 0 0 110px;

    max-width: 110px;

    -webkit-align-self: flex-start;

    align-self: flex-start;

  }

}

.howtoTopAside {

  margin-bottom: 85px;

}



.howtoTopAside_ttl {

  margin: 0 0 40px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: center;

  align-items: center;

}



.howtoTopAside_ttl_lineup {

  margin-right: 15px;

}



.howtoTopAside_ttl_jitan {

  margin-right: 10px;

  padding-bottom: 5px;

}



.howtoTopAside_ttl_txt {

  font-size: 2.2rem;

  font-weight: normal;

  color: #2db4b9;

}



.howtoTopAside_unit {

  margin-bottom: 40px;

}



.howtoTopAside_list {

  border-bottom: 1px solid #b5b5b5;

  padding: 20px 0 30px;

}



.howtoTopAside_link {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: flex-end;

  align-items: flex-end;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.howtoTopAside_link:hover {

  opacity: .8;

}



.howtoTopAside_ttl {

  font-size: 2.2rem;

  font-weight: bold;

  margin: 0;

}



.howtoTopAside_ttl-orange {

  color: #f39801;

}



.howtoTopAside_ttl-blue {

  color: #0075c1;

}



.howtoTopAside_ttl_mark {

  background-color: transparent;

  color: inherit;

}



.howtoTopAside_txt {

  margin: 0;

  font-size: 1.8rem;

  font-weight: bold;

}



.howtoTopAside_name {

  margin: 5px 0;

  font-size: 1.8rem;

}



.howtoLowAside {

  margin-bottom: 85px;

}



.howtoLowAside_ttl {

  margin: 0 0 40px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: flex-end;

  align-items: flex-end;

}



.howtoLowAside_ttl_lineup {

  margin-right: 15px;

}



.howtoLowAside_ttl_jitan {

  margin-right: 10px;

  padding-bottom: 5px;

}



.howtoLowAside_ttl_txt {

  font-size: 2.2rem;

  font-weight: normal;

  color: #2db4b9;

}



.howtoLowAside_unit {

  margin-bottom: 40px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

}



.howtoLowAside_list {

  -webkit-flex: 0 1 320px;

  flex: 0 1 320px;

  max-width: 320px;

  border-right: 1px solid #b5b5b5;

  padding: 20px 15px;

  box-sizing: border-box;

}



.howtoLowAside_list:last-of-type {

  border-right: 0;

}



.howtoLowAside_link {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row wrap;

  flex-flow: row wrap;

  -webkit-align-items: flex-end;

  align-items: flex-end;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.howtoLowAside_link:hover {

  opacity: .8;

}



.howtoLowAside_ttl {

  font-size: 2rem;

  font-weight: bold;

  margin: 0 0 15px;

  width: 100%;

}



.howtoLowAside_ttl-orange {

  color: #f39801;

}



.howtoLowAside_ttl-blue {

  color: #0075c1;

}



.howtoLowAside_ttl_mark {

  background-color: transparent;

  color: inherit;

}



.howtoLowAside_txt {

  margin: 0;

  font-size: 1.6rem;

  font-weight: bold;

  width: 100%;

  margin-bottom: 25px;

}



.howtoLowAside_img {

  width: 100%;

  min-height: 50px;

  margin-bottom: 10px;

}



.howtoLowAside_name {

  margin: 5px 0;

  font-size: 1.8rem;

  width: 100%;

  text-align: center;

}



.howtoLowAside_name img {

  width: auto;

  height: 20px;

}



@media screen and (max-width: 640px) {

  .howtoTopAside {

    padding: 0 15px;

    margin-bottom: 50px;

  }



  .howtoTopAside_ttl {

    margin: 0 0 15px;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-align-items: baseline;

    align-items: baseline;

  }



  .howtoTopAside_ttl_lineup {

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

    margin-right: 0;

    -webkit-order: 3;

    order: 3;

  }



  .howtoTopAside_ttl_lineup img {

    max-width: 140px;

  }



  .howtoTopAside_ttl_jitan {

    -webkit-flex: 0 0 60px;

    flex: 0 0 60px;

    max-width: 60px;

    margin: 0;

    padding-right: 10px;

    padding-bottom: 5px;

    box-sizing: border-box;

    -webkit-order: 1;

    order: 1;

  }



  .howtoTopAside_ttl_txt {

    -webkit-flex: 1 1 auto;

    flex: 1 1 auto;

    flex-basis: -webkit-calc(100% - 60px);

    flex-basis: calc(100% - 60px);

    max-width: -webkit-calc(100% - 60px);

    max-width: calc(100% - 60px);

    font-size: 1.2rem;

    -webkit-order: 2;

    order: 2;

    margin-bottom: 5px;

  }



  .howtoTopAside_unit {

    margin-bottom: 20px;

  }



  .howtoTopAside_list {

    padding: 20px 0 15px;

  }



  .howtoTopAside_link {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-align-items: flex-start;

    align-items: flex-start;

    -webkit-justify-content: flex-start;

    justify-content: flex-start;

  }



  .howtoTopAside_boxL {

    margin-bottom: 10px;

  }



  .howtoTopAside_boxR {

    margin-left: auto;

  }



  .howtoTopAside_boxR img {

    zoom: .5;

  }



  .howtoTopAside_ttl {

    font-size: 1.4rem;

  }



  .howtoTopAside_txt {

    font-size: 1rem;

  }



  .howtoTopAside_name img {

    zoom: .5;

  }



  .howtoLowAside {

    padding: 0 15px;

    margin-bottom: 50px;

  }



  .howtoLowAside_ttl {

    margin: 0;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-align-items: baseline;

    align-items: baseline;

  }



  .howtoLowAside_ttl_lineup {

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

    margin-right: 0;

    -webkit-order: 3;

    order: 3;

  }



  .howtoLowAside_ttl_lineup img {

    max-width: 140px;

  }



  .howtoLowAside_ttl_jitan {

    -webkit-flex: 0 0 60px;

    flex: 0 0 60px;

    max-width: 60px;

    margin: 0;

    padding-right: 10px;

    padding-bottom: 5px;

    box-sizing: border-box;

    -webkit-order: 1;

    order: 1;

  }



  .howtoLowAside_ttl_txt {

    -webkit-flex: 1 1 auto;

    flex: 1 1 auto;

    flex-basis: -webkit-calc(100% - 60px);

    flex-basis: calc(100% - 60px);

    max-width: -webkit-calc(100% - 60px);

    max-width: calc(100% - 60px);

    font-size: 1.2rem;

    -webkit-order: 2;

    order: 2;

  }



  .howtoLowAside_unit {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    margin-bottom: 20px;

  }



  .howtoLowAside_list {

    padding: 20px 0 15px;

    border-right-width: 0;

    border-bottom: 1px solid #b5b5b5;

    flex: 0 0 100%;

    max-width: 100%;

  }



  .howtoLowAside_link {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-align-items: flex-start;

    align-items: flex-start;

    -webkit-justify-content: flex-start;

    justify-content: flex-start;

  }



  .howtoLowAside_ttl {

    font-size: 1.4rem;

    -webkit-order: 1;

    order: 1;

  }



  .howtoLowAside_txt {

    -webkit-order: 2;

    order: 2;

    font-size: 1rem;

    margin-bottom: 0;

  }



  .howtoLowAside_name {

    -webkit-order: 3;

    order: 3;

    text-align: left;

    margin-bottom: 5px;

  }



  .howtoLowAside_name img {

    zoom: .8;

  }



  .howtoLowAside_img {

    -webkit-order: 4;

    order: 4;

    text-align: right;

    min-height: 0;

  }



  .howtoLowAside_img img {

    zoom: .5;

  }

}

/*============================================================

時短コンテンツ ローカルナビ

============================================================*/

.howtoNav {

  background-color: #fff100;

  margin-bottom: 30px;

  position: relative;

  z-index: 1;

}



.howtoNav_inner {

  width: 960px;

  margin: 0 auto;

  padding: 10px 0;

  color: #2db4b9;

  font-size: 1.7rem;

  text-align: left;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.howtoNav_logo {

  -webkit-flex: 0 1 320px;

  flex: 0 1 320px;

  max-width: 320px;

  border-left-width: 0;

}



.howtoNav_btn {

  display: none;

}



.howtoNav_menu {

  width: 640px;

  -webkit-align-self: stretch;

  align-self: stretch;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.howtoNav_list {

  -webkit-flex: 0 1 160px;

  flex: 0 1 160px;

  max-width: 160px;

  border-left: 1px solid #2db4b9;

  -webkit-align-items: center;

  align-items: center;

  -webkit-align-self: stretch;

  align-self: stretch;

  display: -webkit-flex;

  display: flex;

}



.howtoNav_link {

  display: block;

  width: 100%;

  -webkit-align-items: center;

  align-items: center;

  -webkit-align-self: stretch;

  align-self: stretch;

  display: -webkit-flex;

  display: flex;

  padding: 0 0 0 10px;

  transition: opacity .1s ease;

  box-sizing: border-box;

}



.howtoNav_link:hover {

  opacity: .8;

}



.howtoNav_link:not([href]) {

  font-weight: bold;

  color: #000;

}



@media screen and (max-width: 640px) {

  .howtoNav {

    margin-bottom: 0;

  }



  .howtoNav_inner {

    width: 100%;

    padding: 0;

    font-size: 1.5rem;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    position: relative;

  }



  .howtoNav_logo {

    -webkit-flex: 0 1 145px;

    flex: 0 1 145px;

    max-width: 145px;

    border-left-width: 0;

  }



  .howtoNav_btn {

		display: -webkit-flex;

		display: flex;

		-webkit-justify-content: flex-end;

		justify-content: flex-end;

		-webkit-align-items: center;

		align-items: center;

    -webkit-flex: 1 1 auto;

    flex: 1 1 auto;

    text-align: right;

    padding: 0 15px;

    font-size: 1.5rem;

    cursor: pointer;

  }



  .howtoNav_btn_icon {

    width: 17px;

		height: 9px;

    display: inline-block;

		vertical-align: middle;

    margin-left: 10px;

    transform-origin: center;

    transition: transform .1s ease;

  }



  .howtoNav_btn_icon.is-active {

    transform: rotateX(180deg);

  }

	.is-close .howtoNav_btn_icon{

    transform: rotateX(180deg);

	}



  .howtoNav_menu {

    display: none;

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    width: 100%;

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    border-top: 1px solid #2db4b9;

    background-color: #fff100;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

  }



  .howtoNav_list {

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: none;

    border-width: 0;

    border-bottom: 1px solid #2db4b9;

  }



  .howtoNav_link {

    padding: 10px 15px;

  }



  .howtoNav_link img {

    width: 100%;

  }

}

/*============================================================

時短コンテンツ 下層タイトル

============================================================*/

.howtoHdg {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -webkit-align-items: center;

  align-items: center;

  margin-bottom: 60px;

}



.howtoHdg_unit {

  margin: 0;

  position: relative;

}



.howtoHdg_items {

  position: absolute;

  right: 15px;

  top: 450px;

}



.howtoHdg_small {

  position: absolute;

  right: 0;

  top: 530px;

  font-size: 1.1rem;

  padding-left: 6em;

  text-indent: -6em;

  word-break: break-all;

  word-wrap: break-word;

}



.howtoHdg_small-left {

  right: auto;

  left: 0;

}



.howtoHdg_anchor {

  display: inline-block;

  background-color: #fff100;

  color: #2db4b9;

  font-size: 1.8rem;

  border-radius: 30px;

  padding: 10px 10px 10px 30px;

  transition: opacity .1s ease;

}



.howtoHdg_anchor:after {

  content: "";

  margin-left: 15px;

  width: 28px;

  height: 28px;

  background: #2db4b9 url(../images/icon_anchor.png) center center no-repeat;

  border-radius: 50%;

  display: inline-block;

  vertical-align: middle;

}



.howtoHdg_anchor:hover {

  opacity: .8;

}



.howtoHdg_ttl {

  font-size: 5rem;

  font-weight: bold;

  margin: 0;

  line-height: 1.2;

}



.howtoHdg_sub {

  margin: 0;

  font-size: 2.8rem;

  font-weight: bold;

  color: #fff100;

  text-align: center;

  padding: 0 15px;

  box-sizing: border-box;

  border: 3px solid #fff100;

  border-radius: 10px;

  background-color: #2db4b9;

}



.howtoHdg-low {

  -webkit-flex-flow: row wrap;

  flex-flow: row wrap;

  margin-bottom: 50px;

}



.howtoHdg-low_ttl {

  font-size: 3rem;

  width: 100%;

  text-align: center;

  margin-bottom: 5px;

}



.howtoHdg-low_sub {

  font-size: 4rem;

  width: 620px;

  border-width: 4px;

  margin: 0 auto;

}



.howtoHdg-small {

  -webkit-flex-flow: row wrap;

  flex-flow: row wrap;

}



.howtoHdg-small_sub {

  font-size: 2rem;

  width: 320px;

  margin: 0 auto;

  padding: 15px 10px;

}



@media screen and (max-width: 640px) {

  .howtoHdg {

    margin: 0 -15px 10px;

  }



  .howtoHdg_logo {

    padding-right: 10px;

    max-width: 100px;

    -webkit-flex: 0 1 100px;

    flex: 0 1 100px;

  }



  .howtoHdg_unit {

    margin-bottom: 60px;

  }



  .howtoHdg_img img {

    width: 100%;

  }



  .howtoHdg_items {

    right: 15px;

    top: auto;

    bottom: 3vw;

  }



  .howtoHdg_items-tsm {

    bottom: 10vw;

  }



  .howtoHdg_small {

    right: 15px;

    left: 15px;

    top: 125vw;

    bottom: auto;

    font-size: 1rem;

    text-align: left;

  }



  .howtoHdg_small-tsm {

    top: 134vw;

  }



  .howtoHdg_anchor {

    font-size: 1rem;

    padding: 5px 5px 5px 15px;

  }



  .howtoHdg_anchor:after {

    margin-left: 8px;

    width: 20px;

    height: 20px;

    background-size: 14px auto;

  }



  .howtoHdg_ttl {

    font-size: 2rem;

    margin-bottom: 5px;

  }



  .howtoHdg_sub {

    font-size: 1.5rem;

    border-width: 2px;

    border-radius: 5px;

  }



  .howtoHdg-low {

    margin-bottom: 25px;

    text-align: left;

    align-items: flex-end;

    border-top: 2px solid #fff;

  }



  .howtoHdg-low_ttl {

    font-size: 1.7rem;

    text-align: left;

    margin-bottom: 3px;

  }



  .howtoHdg-low_sub {

    font-size: 1.5rem;

    width: 100%;

    border-width: 2px;

    padding: 4px 4px 2px;

  }



  .howtoHdg-tsmChara {

    height: 210px;

    position: relative;

  }



  .howtoHdg-tsmChara:after {

    content: "";

    position: absolute;

    right: 0;

    top: -8px;

    width: 185px;

    height: 185px;

    background: url(../images/tsm/chara_tsm03.png) right top no-repeat;

    background-size: 185px auto;

  }



  .howtoHdg-tsmChara_ttl {

    padding-right: 170px;

  }



  .howtoHdg-dubbingChara {

    height: 225px;

    position: relative;

  }



  .howtoHdg-dubbingChara:after {

    content: "";

    position: absolute;

    right: 0;

    top: -8px;

    width: 185px;

    height: 195px;

    background: url(../images/dubbing/chara_dubbing02.png) right top no-repeat;

    background-size: 185px auto;

  }



  .howtoHdg-dubbingChara_ttl {

    padding-right: 170px;

  }



  .howtoHdg-recChara {

    height: 210px;

    position: relative;

  }



  .howtoHdg-recChara:after {

    content: "";

    position: absolute;

    right: 0;

    top: -8px;

    width: 185px;

    height: 185px;

    background: url(../images/rec/chara_rec03.png) right top no-repeat;

    background-size: 185px auto;

  }



  .howtoHdg-recChara_ttl {

    padding-right: 170px;

  }



  .howtoHdg-watchChara {

    height: 230px;

    position: relative;

  }



  .howtoHdg-watchChara:after {

    content: "";

    position: absolute;

    right: 0;

    top: -8px;

    width: 185px;

    height: 195px;

    background: url(../images/watch/chara_watch02.png) right top no-repeat;

    background-size: 185px auto;

  }



  .howtoHdg-watchChara_ttl {

    padding-right: 170px;

  }



  .howtoHdg-low {

    margin: 0 0 50px;

  }



  .howtoHdg-small {

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

    margin: 0 0 25px;

  }



  .howtoHdg-small_sub {

    font-size: 1.8rem;

    width: 100%;

    padding: 5px;

  }

}

/*============================================================

時短コンテンツ 表紙エリア

============================================================*/

.howtoFront {

  border: 2px solid #fff;

  border-radius: 10px;

  margin-bottom: 30px;

  background: #2db4b9;

  overflow: hidden;

  display: -webkit-flex;

  display: flex;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: center;

  justify-content: center;

}



.howtoFront img {

  width: 100%;

}



@media screen and (max-width: 640px) {

  .howtoFront {

    border-width: 1px;

    border-radius: 5px;

    margin-bottom: 15px;

  }

}

/*============================================================

時短コンテンツ スクロールダウン

============================================================*/

.howtoScroll {

  text-align: center;

  margin-bottom: 40px;

}



.howtoScroll_btn {

  display: inline-block;

  border: 6px solid #fff100;

  text-align: center;

  border-radius: 50%;

  color: #fff100;

  background: #2db4b9;

  width: 200px;

  height: 200px;

  box-sizing: border-box;

  padding-top: 80px;

  font-size: 2rem;

  transition: opacity 0.1s ease;

}



.howtoScroll_btn:hover {

  opacity: .8;

}



.howtoScroll_txt {

  margin: 0 0 10px;

}



.howtoScroll_icon {

  opacity: 0;

  transform-origin: center;

  animation: 1s scrDown both infinite;

  display: inline-block;

}



@media screen and (max-width: 640px) {

  .howtoScroll {

    margin-bottom: 20px;

  }



  .howtoScroll_btn {

    border-width: 3px;

    width: 100px;

    height: 100px;

    padding-top: 20px;

    font-size: 1.6rem;

  }



  .howtoScroll_txt {

    margin: 0;

    line-height: 1.2;

  }



  .howtoScroll_icon {

    width: 20px;

    animation: 1s scrDownSp both infinite;

  }

}

@keyframes scrDown {

  0% {

    opacity: 0;

    transform: translateY(0px);

  }

  100% {

    opacity: 1;

    transform: translateY(25px);

  }

}

@keyframes scrDownSp {

  0% {

    opacity: 0;

    transform: translateY(0px);

  }

  100% {

    opacity: 1;

    transform: translateY(10px);

  }

}

/*============================================================

時短コンテンツ コンテンツボックス

============================================================*/

.howtoBox {

  margin-bottom: 40px;

}



.howtoBox_small {

  margin: 10px 40px 0;

  font-size: 1.3rem;

  padding-left: 1.8em;

  text-indent: -1.8em;

}



.howtoBox_smallM {

  padding-left: 2.6em;

  text-indent: -2.6em;

}



.howtoBox_smallL {

  padding-left: 5em;

  text-indent: -5em;

}



.howtoBox_small + .howtoBox_small {

  margin: 0 40px 10px;

}



.howtoBox_aside {

  text-align: left;

  font-size: 1.6rem;

  margin: 0 40px 40px;

}



.howtoBox_link {

	color: #fff;

  display: inline-block;

  text-decoration: underline;

}



.howtoBox_link:hover {

  opacity: .8;

}



@media screen and (max-width: 640px) {

  .howtoBox {

    margin-bottom: 25px;

  }



  .howtoBox_small {

    margin: 5px 0 0;

    font-size: 1rem;

  }



  .howtoBox_small + .howtoBox_small {

    margin: 0 0 5px;

  }



  .howtoBox_aside {

    font-size: 1.4rem;

    margin: 0 0 20px;

  }

}

/*============================================================

時短コンテンツ ガイドページコンテンツボックス

============================================================*/

.howtoGuidebox {

  width: 100%;

  height: 100%;

  background-color: #fff;

  border-radius: 8px;

  position: relative;

}



.howtoGuidebox_ttl {

  background-color: #2db4b9;

  color: #fff;

  text-align: center;

  font-size: 2.8rem;

  font-weight: bold;

  margin: 0 0 15px;

}



.howtoGuidebox_ttl02 {

  color: #2db4b9;

  text-align: center;

  font-size: 2.8rem;

  font-weight: bold;

  margin: 0 0 20px;

}



.howtoGuidebox_txt {

  font-size: 1.8rem;

  color: #333;

}



.howtoGuidebox_top {

  background-color: #ffecd0;

  padding: 20px;

  border-radius: 8px 8px 0 0;

}



.howtoGuidebox_btm {

  padding: 20px;

}



.howtoGuidebox_subTtl {

  text-align: center;

  border: 1px solid #2db4b9;

  font-size: 3rem;

  font-weight: bold;

  color: #2db4b9;

  margin-bottom: 40px;

}



.howtoGuidebox_img {

  text-align: center;

  margin-bottom: 40px;

}



.howtoGuidebox_small {

  font-size: 1.3rem;

  color: #555;

  padding-top: 10px;

  padding-left: 5.2em;

  text-indent: -5.2em;

}



.howtoGuidebox_smallN {

  padding-left: 2.2em;

  text-indent: -2.2em;

}



.howtoGuidebox_smallL {

  padding-left: 4.3em;

  text-indent: -4.3em;

}



.howtoTsm01_img {

  padding-top: 10px;

  padding-left: 75px;

  position: relative;

}



.howtoTsm01_img:after {

  content: "";

  width: 338px;

  height: 330px;

  background: url(../images/tsm/chara_tsm01.png) left top no-repeat;

  position: absolute;

  right: 50px;

  top: 0px;

}



.howtoTsm01_txt_in {

  text-align: left;

  max-width: 610px;

  display: inline-block;

}



.howtoTsm02_img {

  text-align: right;

  padding-bottom: 40px;

  padding-right: 33px;

  position: relative;

}



.howtoTsm02_img:after {

  content: "";

  width: 290px;

  height: 330px;

  background: url(../images/tsm/chara_tsm02.png) left top no-repeat;

  position: absolute;

  left: -10px;

  top: 60px;

}



.howtoTsm02_txt {

  text-align: right;

}



.howtoTsm02_txt_in {

  text-align: left;

  max-width: 610px;

  display: inline-block;

}



.howtoTsm03_img {

  text-align: center;

  padding: 35px 35px 0;

  min-height: 180px;

  box-sizing: border-box;

}



.howtoTsm04_img {

  text-align: center;

  padding: 35px 65px 0;

  min-height: 180px;

  box-sizing: border-box;

}



.howtoWatch01_img {

  margin-bottom: -20px;

  padding-left: 340px;

  position: relative;

}



.howtoWatch01_img:after {

  content: "";

  width: 309px;

  height: 325px;

  background: url(../images/watch/chara_watch01.png) left top no-repeat;

  position: absolute;

  left: 0px;

  top: -10px;

}



.howtoWatch01_txt {

  margin-bottom: 60px;

}



.howtoWatch01_btm {

  padding: 20px 40px 40px;

}



.howtoRec01_img {

  padding-top: 20px;

  padding-left: 75px;

  position: relative;

}



.howtoRec01_img:after {

  content: "";

  width: 338px;

  height: 330px;

  background: url(../images/rec/chara_rec01.png) left top no-repeat;

  position: absolute;

  right: 50px;

  top: -10px;

}



.howtoRec01_txt {

  margin-bottom: 30px;

}



.howtoRec01_txt_in {

  text-align: left;

  max-width: 735px;

  display: inline-block;

}



.howtoRec01_btm {

  padding: 20px 40px 40px;

}



.howtoRec02_img {

  text-align: right;

  padding-left: 350px;

  margin-bottom: 10px;

  position: relative;

  width: 100%;

}



.howtoRec02_img:after {

  content: "";

  width: 350px;

  height: 341px;

  background: url(../images/rec/chara_rec02.png) left top no-repeat;

  position: absolute;

  left: -20px;

  top: 0px;

}



.howtoRec02_txt {

  text-align: right;

  margin-bottom: 30px;

}



.howtoRec02_txt_in {

  text-align: left;

  max-width: 760px;

  display: inline-block;

}



.howtoDubbing01_img {

  padding-left: 35px;

  padding-right: 280px;

  padding-bottom: 10px;

  position: relative;

}



.howtoDubbing01_img:after {

  content: "";

  width: 292px;

  height: 333px;

  background: url(../images/dubbing/chara_dubbing01.png) left top no-repeat;

  position: absolute;

  right: 10px;

  top: -10px;

}



.howtoDubbing01_btm {

  padding: 20px 40px 40px;

}



@media screen and (max-width: 640px) {

  .howtoGuidebox {

    border-radius: 4px;

  }



  .howtoGuidebox_inner {

    padding-left: 20px;

    padding-right: 20px;

  }



  .howtoGuidebox_ttl {

    font-size: 1.5rem;

    margin-bottom: 10px;

    padding: 3px;

  }



  .howtoGuidebox_ttl02 {

    text-align: left;

    font-size: 1.5rem;

    margin: 0 0 20px;

    padding-top: 25px;

    min-height: 130px;

  }



  .howtoGuidebox_txt {

    font-size: 1.2rem;

  }



  .howtoGuidebox_top {

    padding: 10px;

    border-radius: 4px 4px 0 0;

  }



  .howtoGuidebox_btm {

    padding: 15px 20px;

  }



  .howtoGuidebox_subTtl {

    font-size: 1.5rem;

    margin-bottom: 15px;

    padding: 5px;

  }



  .howtoGuidebox_img {

    margin-bottom: 20px;

  }



  .howtoGuidebox_small {

    font-size: 1rem;

    margin: 5px 0;

  }



  .howtoTsm01_img {

    padding: 2vw 85px 30px 0;

    min-height: 140px;

  }



  .howtoTsm01_img:after {

    width: 170px;

    height: 165px;

    background-size: 170px;

    right: -10px;

    top: 2vw;

  }



  .howtoTsm01_txt_in {

    text-align: left;

    max-width: 610px;

    display: inline-block;

  }



  .howtoTsm02_img {

    text-align: center;

    padding: 0 10px 10px;

  }



  .howtoTsm02_img:after {

    display: none;

  }



  .howtoTsm02_txt {

    text-align: left;

  }



  .howtoTsm02_txt_in {

    text-align: left;

    max-width: 610px;

    display: inline-block;

  }



  .howtoTsm03_img {

    padding: 15px 10px 10px;

    min-height: 0;

  }



  .howtoTsm04_img {

    padding: 15px 30px 10px;

    min-height: 0;

  }



  .howtoWatch01_img {

    min-height: 230px;

    margin-bottom: 0px;

    padding-left: 10px;

    padding-right: 10px;

  }



  .howtoWatch01_img:after {

    width: 155px;

    height: 162px;

    background-size: 155px auto;

    left: 28vw;

    top: 27vw;

  }



  .howtoWatch01_txt {

    margin-bottom: 30px;

  }



  .howtoWatch01_btm {

    padding: 15px 20px;

  }



  .howtoRec01_img {

    padding: 2vw 85px 30px 0;

    min-height: 140px;

  }



  .howtoRec01_img:after {

    width: 170px;

    height: 165px;

    background-size: 170px;

    right: -10px;

    top: 2vw;

  }



  .howtoRec01_txt_in {

    text-align: left;

    max-width: 610px;

    display: inline-block;

  }



  .howtoRec02_img {

    margin: 0 auto;

    text-align: center;

    padding: 20px 10px 10px;

    box-sizing: border-box;

  }



  .howtoRec02_img:after {

    display: none;

  }



  .howtoRec02_txt {

    text-align: left;

  }



  .howtoRec02_txt_in {

    text-align: left;

    max-width: 610px;

    display: inline-block;

  }



  .howtoDubbing01_img {

    padding-left: 0;

    padding-right: 0;

  }



  .howtoDubbing01_img:after {

    width: 146px;

    height: 167px;

    background-size: 146px auto;

    right: -20px;

    top: -120px;

  }



  .howtoDubbing01_btm {

    padding: 0 10px 20px;

  }

}

/*============================================================

時短コンテンツ リスト

============================================================*/

.howtoGuideList {

  margin: 0 -10px 0;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row wrap;

  flex-flow: row wrap;

}



.howtoGuideList_list {

  width: 100%;

  padding: 0 10px;

  box-sizing: border-box;

  margin-bottom: 30px;

}



.howtoGuideList_listCol2 {

  width: 50%;

}



.howtoGuideInList {

  margin: 0 -10px 10px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-flow: row nowrap;

}



.howtoGuideInList_list {

  border: 1px solid #2db4b9;

  margin: 0 10px;

  -webkit-flex: 1 1 280px;

  flex: 1 1 280px;

  padding: 15px 15px 25px;

  position: relative;

}



.howtoGuideInList_listNobdr {

  border-width: 0;

  padding: 0;

}



.howtoGuideInList_list::after {

  content: "";

  background: left top no-repeat;

  width: 80px;

  height: 80px;

  position: absolute;

  right: 20px;

  top: -10px;

}



.howtoGuideInList_list01::after {

  background-image: url(../images/watch/icon_watch01.png);

}



.howtoGuideInList_list02::after {

  background-image: url(../images/watch/icon_watch02.png);

}



.howtoGuideInList_list03::after {

  background-image: url(../images/watch/icon_watch03.png);

}



.howtoGuideInList_ttl {

  font-size: 2.4rem;

  font-weight: bold;

  color: #2db4b9;

  padding: 10px 0;

  margin-bottom: 10px;

}



.howtoGuideInList_ttlC {

  text-align: center;

}



.howtoGuideInList_txt {

  line-height: 1.8;

  color: #333;

  font-size: 1.6rem;

}



.howtoGuideInList_small {

  font-size: 1.3rem;

  color: #555;

  padding-left: 5.2em;

  text-indent: -5.2em;

  padding-top: 25px;

  margin-bottom: 20px;

}



.howtoGuideInList02 {

  margin: 0 -20px;

}



.howtoGuideInList02_list {

  border-width: 0;

  padding: 15px 20px 25px;

  margin: 0;

}



@media screen and (max-width: 640px) {

  .howtoGuideList {

    margin: 0 0 -30px;

  }



  .howtoGuideList_list {

    width: 100%;

    padding: 0;

    margin-bottom: 30px;

  }



  .howtoGuideInList {

    margin: 0 0 -10px;

    -webkit-flex-flow: row wrap;

    flex-flow: row wrap;

  }



  .howtoGuideInList_list {

    margin: 0 0 20px;

    -webkit-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

    box-sizing: border-box;

    padding: 10px;

  }



  .howtoGuideInList_list::after {

    width: 40px;

    height: 40px;

    background-size: 40px auto;

    right: 10px;

    top: -5px;

  }



  .howtoGuideInList_ttl {

    font-size: 1.9rem;

    padding: 5px 0;

    margin-bottom: 5px;

  }



  .howtoGuideInList_txt {

    font-size: 1rem;

  }



  .howtoGuideInList_small {

    font-size: 1rem;

    padding-top: 15px;

    margin-bottom: 0;

  }



  .howtoGuideInList02 {

    margin: 0;

    padding-bottom: 20px;

  }



  .howtoGuideInList02_list {

    border-width: 0;

    padding: 15px 0 10px;

    margin: 0;

  }

}

/*============================================================

時短コンテンツ 注釈

============================================================*/

.howtoNote {

  font-size: 1.2rem;

  font-weight: normal;

  margin: 0;

  color: #898989;

}



.howtoNote-num {

  padding-left: 2.4em;

  text-indent: -2.4em;

}



@media screen and (max-width: 640px) {

  .howtoNote {

    font-size: 1rem;

  }



  .howtoNote-num {

    padding-left: 2.4em;

    text-indent: -2.4em;

  }

}

.howtoNoteList {

  font-size: 1.3rem;

  font-weight: normal;

  margin: 0 40px;

  color: #fff;

  margin-bottom: 40px;

}



.howtoNoteList_unit {

  margin-bottom: 12px;

}



.howtoNoteList_num {

  padding-left: 2.4em;

  text-indent: -2.4em;

}



.howtoNoteList_circle {

  padding-left: 1.4em;

  text-indent: -1.4em;

}



.howtoNoteList_kome {

  padding-left: 1.4em;

  text-indent: -1.4em;

}



@media screen and (max-width: 640px) {

  .howtoNoteList {

    font-size: 1.1rem;

    margin: 0;

    margin-bottom: 20px;

  }



  .howtoNoteList_unit {

    margin-bottom: 5px;

  }



  .howtoNoteList_num {

    padding-left: 2.4em;

    text-indent: -2.4em;

  }



  .howtoNoteList_circle {

    padding-left: 1.4em;

    text-indent: -1.4em;

  }



  .howtoNoteList_kome {

    padding-left: 1.4em;

    text-indent: -1.4em;

  }

}

/*============================================================

時短コンテンツ ボタン

============================================================*/

.howtoBtn {

  margin-bottom: 50px;

  text-align: center;

}



.howtoBtn_btn {

  display: inline-block;

  max-width: 160px;

  width: 100%;

  margin: 0 auto;

  border: 4px solid #fff100;

  border-radius: 50px;

  padding: 5px 10px;

  box-sizing: border-box;

  color: #fff100;

  font-size: 2rem;

  font-weight: bold;

  transition: all .1s ease;

}



.howtoBtn_btnBack {

  background: #2db4b9 url(../images/icon_arw_back.png) 10px center no-repeat;

  background-size: 12px auto;

}



.howtoBtn_btn:hover {

  background-color: #fff100;

  background-image: url(../images/icon_arw_back_green.png);

  color: #2db4b9;

}



@media screen and (max-width: 640px) {

  .howtoBtn {

    margin-bottom: 35px;

  }



  .howtoBtn_btn {

    max-width: 115px;

    border-width: 2px;

    padding: 5px;

    font-size: 1.4rem;

  }



  .howtoBtn_btnBack {

    background-size: 7px auto;

  }

}

/*============================================================

時短コンテンツ 機能比較表

============================================================*/

.howtoGuideTable {

  color: #535353;

  padding: 40px;

  font-size: 1.6rem;

  font-weight: normal;

}



.howtoGuideTable_box {

  width: 100%;

  border-bottom: 1px solid #a9a9a9;

}



.howtoGuideTable_box th,

.howtoGuideTable_box td {

  border-top: 1px solid #a9a9a9;

  border-right: 1px solid #a9a9a9;

  padding: 12px 10px;

  text-align: center;

}



.howtoGuideTable_box th:last-of-type,

.howtoGuideTable_box td:last-of-type {

  border-right-width: 0;

}



.howtoGuideTable_box th.howtoGuideTable_box_space,

.howtoGuideTable_box td.howtoGuideTable_box_space {

  border-top-width: 0;

}



.howtoGuideTable_box th.howtoGuideTable_box_ttl01,

.howtoGuideTable_box td.howtoGuideTable_box_ttl01 {

  padding: 5px;

  font-weight: normal;

  color: #fff;

  background-color: #2287c9;

}



.howtoGuideTable_box th.howtoGuideTable_box_ttl02,

.howtoGuideTable_box td.howtoGuideTable_box_ttl02 {

  padding: 5px;

  font-weight: normal;

  color: #fff;

  background-color: #f5a623;

}



.howtoGuideTable_box th.howtoGuideTable_box_left,

.howtoGuideTable_box td.howtoGuideTable_box_left {

  text-align: left;

}



.howtoGuideTable_box th.howtoGuideTable_box_small,

.howtoGuideTable_box td.howtoGuideTable_box_small {

  font-size: 1.3rem;

}



@media screen and (max-width: 640px) {

  .howtoGuideTable {

    padding: 20px;

    font-size: 1.4rem;

  }



  .howtoGuideTable_box {

    table-layout: fixed;

  }



  .howtoGuideTable_box th,

  .howtoGuideTable_box td {

    padding: 6px 5px;

    word-break: break-all;

    word-wrap: break-word;

  }



  .howtoGuideTable_box th img,

  .howtoGuideTable_box td img {

    zoom: .5;

  }



  .howtoGuideTable_box th.howtoGuideTable_box_ttl01,

  .howtoGuideTable_box td.howtoGuideTable_box_ttl01 {

    padding: 3px;

  }



  .howtoGuideTable_box th.howtoGuideTable_box_ttl02,

  .howtoGuideTable_box td.howtoGuideTable_box_ttl02 {

    padding: 3px;

  }



  .howtoGuideTable_box th.howtoGuideTable_box_small,

  .howtoGuideTable_box td.howtoGuideTable_box_small {

    font-size: 1rem;

  }

}

/*============================================================

時短コンテンツ ページトップ

============================================================*/

.howtoPagetop {

  margin: 0;

  padding: 0 0 10px;

  text-align: right;

}



.howtoPagetop_inner {

  width: 100%;

  max-width: 960px;

  margin: 0 auto;

  position: relative;

}



.howtoPagetop_inner a {

  padding: 0;

  color: #fff;

  display: inline-block;

  font-size: 1.2rem;

  padding: 0 2.70833% 3.125%;

  transition: all 0.5s ease 0s;

}



.howtoPagetop_inner a::after {

  content: "";

  margin: 0 0 -0.6em 0.5em;

  height: 26px;

  width: 26px;

  background-position: -221px -5px;

  background-image: url("../../../common/images/icons.png");

  background-repeat: no-repeat;

  display: inline-block;

}



@media screen and (max-width: 640px) {

  .howtoPagetop_inner a {

    padding: 0 15px 3.125%;

  }

}

/*============================================================

時短コンテンツ スライダー用

============================================================*/

.slick-slider {

  -moz-user-select: none;

  box-sizing: border-box;

  display: block;

  position: relative;

  touch-action: pan-y;

}



.slick-list {

  display: block;

  margin: 0;

  overflow: hidden;

  padding: 0;

  position: relative;

}



.slick-list:focus {

  outline: medium none;

}



.slick-list.dragging {

  cursor: pointer;

}



.slick-slider .slick-track, .slick-slider .slick-list {

  transform: translate3d(0px, 0px, 0px);

}



.slick-track {

  display: block;

  left: 0;

  position: relative;

  top: 0;

}



.slick-track::before, .slick-track::after {

  content: "";

  display: table;

}



.slick-track::after {

  clear: both;

}



.slick-loading .slick-track {

  visibility: hidden;

}



.slick-slide {

  display: none;

  float: left;

  height: 100%;

  min-height: 1px;

}



[dir="rtl"] .slick-slide {

  float: right;

}



.slick-slide img {

  display: block;

}



.slick-slide.slick-loading img {

  display: none;

}



.slick-slide.dragging img {

  pointer-events: none;

}



.slick-initialized .slick-slide {

  display: block;

}



.slick-loading .slick-slide {

  visibility: hidden;

}



.slick-vertical .slick-slide {

  border: 1px solid transparent;

  display: block;

  height: auto;

}



.slick-arrow.slick-hidden {

  display: none;

}



.howtoSlickArw {

  display: -webkit-flex;

  display: flex;

  -webkit-justify-content: space-between;

  justify-content: space-between;

  -webkit-align-items: center;

  align-items: center;

  padding: 15px 15px;

}



.slick-prev, .slick-next {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  font-size: 0;

  text-indent: -9999px;

  display: block;

  border: 0 none;

  margin: 0;

  outline: 0 none;

  overflow: hidden;

  padding: 0;

  white-space: nowrap;

  background-size: 90px auto;

  height: 50px;

  width: 50px;

  border: 2px solid #fff100;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0) center center no-repeat;

  background-size: 11px 20px;

}



.slick-prev {

  background-image: url(../images/icon_prev.png);

}



.slick-next {

  background-image: url(../images/icon_next.png);

}



.slick-disabled {

  opacity: .5;

  border-color: #ddd;

}



/* js 表示エフェクト */

.js-scrlEfct-box {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 1s ease,transform 1s ease;

}



.js-scrlEfct-box.is-active {

  opacity: 1;

  transform: translateY(0px);

}



@media screen and (max-width: 640px) {

  .js-scrlEfct-box {

    opacity: 1;

    transform: translateY(0px);

  }

}