@charset "utf-8";

/* PC/SP表示切り替え */
#pc_wrap .for-pc {
  display: block !important;
}

#pc_wrap .for-sp {
  display: none !important;
}

#sp_wrap .for-pc {
  display: none !important;
}

#sp_wrap .for-sp {
  display: block !important;
}

/*-------------------------------*/

body{
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}

.target{
  pointer-events: none;
}

#feature #detail .entry h2 {
    margin: 0px 0 36px;
}

#feature .contents .entry_contents h3 {
  font-size: 20px;
  margin-bottom: 10px; 
}

.genre_health #detail .entry .entry_contents h4.no00, .genre_health #detail .entry .entry_contents h4.no01, .genre_health #detail .entry .entry_contents h4.no02, .genre_health #detail .entry .entry_contents h4.no03, .genre_health #detail .entry .entry_contents h4.no04, .genre_health #detail .entry .entry_contents h4.no05 {
  margin: 0 0 5px;
  padding: 0 0 4px 75px;
  font-size: 26px;
}

#pc_wrap p.top_lead {
  font-size: 16px;
  line-height: 2;
}

#feature #detail .entry .outline {
  margin: 32px 0 55px;
}

#feature .genre_health #detail .entry .speaker {
  margin: -14px 0 35px;
  padding: 47px 17px 13px;
  border: 4px dotted #00ae97;
}

#feature #detail .entry .speaker h3 {
  top: -19px;
}

#feature #detail .entry .speaker .name-card {
  width: 250px;
  height: 170px !important;
}

#feature #detail .entry .speaker .name-card .career {
  line-height: 2;
}

#feature #detail .entry .speaker .detail {
  width: 360px;
  margin: 6px 0 0 30px;
}

#feature #detail .entry .speaker .detail p {
  margin-bottom: 23px;
  line-height: 1.8;
}

#feature #detail.contents #feature_guard {
  background: #ffffff;
}

#feature #feature_guard p {
  margin-bottom: 34px;
  line-height: 2;
}

/* ---------------------
  page 1 
*/
#feature_guard.feature_page h4.no01 {
  padding: 0 0 0 75px;
  margin: 0 0 30px;
}

#feature_guard.feature_page h4 span {
  display: block;
}

#feature_guard.feature_page h3 {
  line-height: 2;
  color: #00ae97;
  font-weight: bold;
  margin: 19px 0 12px;
}

#feature_guard.feature_page p {
  color: #1e1e1e;
  font-size: 16px;
}

#feature #detail .entry .next-page {
  margin-bottom: 41px;
}

/* ---------------------
  page 1 
*/
.page1 .item-wrap {
  position: relative;
  width: 600px;
  margin: 67px auto 75px;
  padding: 30px 0 39px;
  background: #f0eee9;
}

.page1 .item-wrap:before,
.page1 .item-wrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  background: url(../img/feature/56_dashi/page1_item_tape.png) no-repeat 0 0;
}

.page1 .item-wrap:before {
  top: -10px;
  left: -10px;
}

.page1 .item-wrap:after {
  bottom: -10px;
  right: -10px;
}

.page1 .item-wrap .image {
  margin: 0 0 16px;
  text-align: center;
}

#feature #detail .page1 .item-wrap .discription {
  margin: 0 0 15px 50px;
  color: #5b5b5b;
  font-size: 12px;
  line-height: 20px;  
}

#feature #detail .page1 .item-wrap .text {
  width: 500px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 20px;
}


/* ---------------------
  page 2 
*/

.genre_health #detail .entry .entry_contents h4.no02 {
  margin: -20px 0 19px;
  padding-left: 88px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

#feature #feature_guard.feature_page.page2 .col-title {
  margin: 49px 0 29px;
  font-size: 20px;
  line-height: 26px;
}

#feature #feature_guard.feature_page.page2 .col01 .col-title {
  margin: 30px 0 20px;
}

#feature #feature_guard.feature_page.page2 .col02 .col-title {
  margin: 57px 0 29px;
}

.page2 .item-wrap {
  position: relative;
  margin: 135px 0 60px;
  padding: 35px 32px 32px;
  border-radius: 6px;
  background: #bd9e70
}

.page2 .item-wrap .item-title {
  position: absolute;
  top: -76px;
  left: 72px;
}

#feature #detail .page2 .item-wrap .text {
  margin: 0 0 25px;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  line-height: 28px;
}

.page2 .item-wrap .image {
  width: 522px;
  margin: 0 auto 7px;
}

#feature #detail .page2 .item-wrap .discription {
  margin: 0 0 0 85px;
  color: #333333;
  font-size: 12px;
  line-height: 18px;
}



/* ---------------------
  page 3 
*/

.genre_health #detail .entry .entry_contents h4.no02 {
  margin: -15px 0 19px;
}

#feature #feature_guard.page3 .column-wrap .item .title {
  margin: 60px 0 22px;
}

#feature #feature_guard.page3 .column-wrap .item01 .title {
  margin: 60px 0 22px;
}

#feature #feature_guard.page3 .material-wrap {
  overflow: hidden;
}

#feature #feature_guard.page3 .material-wrap > ul {
  float: left;
  width: 50%;
  margin: 0 0 32px;
}

#feature #feature_guard.page3 ul .category {
  margin: 0 0 12px;
  color: #e14263;
  font-size: 18px;
  line-height: 1;
}

#feature #feature_guard.page3 .material1 ul li p,
#feature #feature_guard.page3 .material2 ul li p {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px 0 10px;
  color: #1e1e1e;
  font-size: 16px;
  line-height: 2;
}

#feature #feature_guard.page3 .material1 ul li p:after,
#feature #feature_guard.page3 .material2 ul li p:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #cccccc;
}

#feature #feature_guard.page3 .material1 ul li:last-child p:after {
  display: none;
}

#feature #feature_guard.page3 .making-wrap {
  padding: 30px;
  background: #f7f7f7;
}

#feature #feature_guard.page3 .making-wrap ul .category {
  margin: 0 0 17px;
}

#feature #feature_guard.page3 .making-wrap ul li ul li {
  position: relative;
  margin: 0 0 15px;
}

#feature #feature_guard.page3 .making-wrap ul li ul li:last-child {
  margin: 0;
}

#feature #feature_guard.page3 .making-wrap ul li ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 19px;
}

#feature #feature_guard.page3 .making-wrap ul li ul li p {
  width: 640px;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
  font-size: 16px;
  line-height: 26px;
}

#feature #feature_guard.page3 .making-wrap ul li ul li p:last-child {
  margin: 0;
}

#feature #feature_guard.page3 .making-wrap .red {
  margin: 0 0 12px;
  color: #e14263;
}

.page3 .item-wrap {
  position: relative;
  margin: 117px 0 60px;
  padding: 35px 32px 32px;
  border-radius: 6px;
  background: #bd9e70
}

.page3 .item-wrap .item-title {
  position: absolute;
  top: -76px;
  left: 72px;
}

#feature #detail .page3 .item-wrap .text {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  line-height: 28px;
}

#feature #detail .page3 .item-wrap .text .text-border {
  text-decoration: underline;
}



/* ---------------------

      sp 

--------------------- */

p:empty { display: none; }

.sp .genre_health .pagenav ul .prev a,
.sp .genre_health .pagenav ul .next a {
  color: #333333;
  background: #f0f0f0;
}

#feature #sp_wrap #detail .entry .outline .time {
  top: 35px;
  left: 50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  margin: 0;
}

#feature #sp_wrap #detail .entry .top_lead {
  margin-bottom: 60px;
}

#feature #sp_wrap .genre_health #detail .entry .entry_contents h4 {
  color: #00ae97;
  font-size: 16px;
  padding: 0 0 0 45px;
  margin-bottom:20px;
}

#feature #sp_wrap #feature_guard.feature_page h3 {
  font-size: 15px;
  line-height: 1.16666667;
  margin: 20px 0 20px;
  font-weight: bold;
}

#feature #sp_wrap #feature_guard.feature_page p {
  font-size: 13px;
}

#feature #sp_wrap .genre_health #detail .entry .speaker {
  padding: 35px 14px 20px;
  border: 3px dotted #00ae97;
}

#feature #sp_wrap #detail .entry .speaker h3 {
  top: 0;
}

#feature #sp_wrap #detail .entry .speaker .name-card {
  width: 91%;
}

#feature #sp_wrap #detail .entry .speaker .name {
  margin-top: 13px;
}

#feature #sp_wrap #detail .entry .speaker .name-card .career {
  padding-left: 110px;
  line-height: 1.5;
}

#feature #sp_wrap #detail .entry .speaker .detail {
  width: 312px;
  margin: 16px 5px 5px;
}

#feature #sp_wrap #detail .entry .speaker .detail p {
  margin-bottom: 0;
  line-height: 1.8;
  letter-spacing: -0.01em;
}

/* ---------------------
  page 1 
*/

.sp .page1 .item-wrap {
  width: 89%;
  margin: 30px auto;
  padding: 30px 20px 55px;
}

.sp .page1 .item-wrap:before,
.sp .page1 .item-wrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url(../img/feature/56_dashi/page1_item_tape.png) no-repeat 0 0;
  background-size: 100% auto;
}

.sp .page1 .item-wrap:before {
  top: -5px;
  left: -5px;
}

.sp .page1 .item-wrap:after {
  bottom: -5px;
  right: -5px;
}

.sp .page1 .item-wrap .item-title {
  top: -12px;
  left: calc(50% - 32%);
  width: 65%;
}

.sp .page1 .item-wrap .image {
  width: 68%;
  margin: 0 auto 15px; 
}

#feature #sp_wrap #feature_guard.page1 .item-wrap .text {
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
  line-height: 17px;
}

#feature #sp_wrap #detail .page1 .item-wrap .discription {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-size: 10px;
}


/* ---------------------
  page 2 
*/

#sp_wrap .genre_health #detail .entry .entry_contents h4.no02 {
  margin: -16px 0 19px;
  padding-left: 88px;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

#feature #sp_wrap #feature_guard.feature_page h3 {
  margin: 30px 0 20px;
}

.sp .page2 .item-wrap {
  margin: 95px 0 30px;
  padding: 20px;
}
 
.sp .page2 .item-wrap .item-title {
  top: -71px;
  left: 0;
  width: 330px;
}

#feature #sp_wrap #detail .page2 .item-wrap .text {
  font-size: 12px;
  line-height: 22px;
}

#sp_wrap .page2 .item-wrap .image {
  width: 100%;
}

#feature #sp_wrap #detail .page2 .item-wrap .discription {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}



/* ---------------------
  page 3 
*/

#sp_wrap .genre_health #detail .entry .entry_contents h4.no03 {
  margin-top: -13px;
}

#feature .sp #feature_guard.page3 .column-wrap .lead {
  margin: 0 0 20px;
}

#feature .sp #feature_guard.page3 .material-wrap > ul {
  float: none;
  width: 100%;
}

#feature .sp #feature_guard.page3 .material1 ul li p,
#feature .sp #feature_guard.page3 .material2 ul li p {
  padding: 0 15px;
  font-size: 13px;
  line-height: 1.8;
}

#feature .sp #feature_guard.page3 ul .category {
  margin: 0 0 12px;
  font-size: 13px;
}

#feature .sp #feature_guard.page3 .making-wrap {
  padding: 30px 15px 20px;
}

#feature .sp #feature_guard.page3 .making-wrap ul .category {
  margin: 0 0 17px;
}

#feature .sp #feature_guard.page3 .making-wrap ul li ul li {
  margin: 0 0 15px;
}

#feature .sp #feature_guard.page3 .making-wrap ul li ul li:last-child {
  margin: 0;
}

#feature .sp #feature_guard.page3 .making-wrap ul li ul li img {
  top: 4px;
  width: 12px;
  height: 13px;
}

#feature .sp #feature_guard.page3 .making-wrap ul li ul li p {
  width: 95%;
  margin: 0 0 5px;
  padding: 0 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
}

#feature .sp #feature_guard.page3 .making-wrap ul li ul li p:last-child {
  margin: 0;
}

#feature .sp #feature_guard.page3 .making-wrap .red {
  margin: 0 0 12px;
}

#feature .sp #feature_guard.page3 .column-wrap .item .title {
  margin: 30px 0 12px;
}

.sp .page3 .item-wrap {
  margin: 70px 0 30px;
  padding: 20px 15px;
}

.sp .page3 .item-wrap .item-title {
  top: -45px;
  left: 0;
  right: 0;
  width: 323px;
  margin: auto;
}

#feature .sp #detail .page3 .item-wrap .text {
  font-size: 12px;
  line-height: 22px;
}