@charset "UTF-8";
h2,h3,h4{
  letter-spacing: 0;
}
.bread{
	padding:max(60px, calc(100vw / 7.5)) 0 0;
	margin-bottom: 0.8em;
	margin-left: calc(28vw / 7.5);
	font-size: 13px;
}
.bread li{
	display:inline;
	margin-right: 0.5em;
	color: #999;
}
.bread li.mr0{
		margin-right: 0;
}
.bread li a{
	color: #333;
}
.article-title .inner{
  width: calc(620vw / 7.5);
  margin: auto;
  max-width: 100%;
}
.article-fv{
  position: relative;
  line-height: 1;
  padding: calc(30vw / 7.5) 0;
}
.article-title .subtitle{
  font-size: min(26px,calc(26vw / 7.5));
  margin-bottom: 0.5em;
  line-height: 1.75;
}
.article-title .maintitle{
  font-size: min(44px,calc(44vw / 7.5));
  letter-spacing: 0;
}
.h1-wrap{
  margin-bottom: calc(60vw / 7.5);
}
.article .video-btn-wrap{
  top: auto;
  bottom: 1%;
}
.toc-wrap{
  border: calc(8vw / 7.5) solid #333;
  border-radius: calc(108vw / 7.5);
  margin-left: calc(-8vw / 7.5);
  width: calc(100% + calc(16vw / 7.5));

  background: url(../images/sec03-bg_sp.webp) #fff;
  background-size: calc(60vw / 7.5);
  margin-bottom: calc(90vw / 7.5);
  margin-top: calc(50vw / 7.5);
}
.toc-inner{
  padding: calc(80vw / 7.5) calc(60vw / 7.5);
}
.toc-title{
  text-align: center;
  font-size: 22px;
	font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
  font-weight: 700;
}
.toc-line{
  text-align: center;
  margin: 30px auto 20px;
  width: 2px;
}
.toc-title span{
  padding: 0 0.3em 0.3em;
  background: url(../images/article/line-orange_4px.webp) repeat-x center bottom / auto 2px;
}
.toc_list li{
  font-size: 20px;
  line-height: 1.5;
	font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
  font-weight: 700;
  text-indent: -1em;
  padding-left: 1em;
  padding-bottom: 0.7em;
  margin-bottom: 0.5em;
  background: url(../images/article/line-gray_2px.webp) repeat-x center bottom / auto 1px;
}
.toc_list li a{
  color: #f18700;
  text-decoration: none;
}

  /* インタビュー */
.intro-wrap {
    width: calc(620vw / 7.5);
    margin: auto;
    padding-bottom: calc(10vw / 7.5);
    background: url(../images/article/line-brown_4px.webp) repeat-x center bottom / auto 2px;
    margin-bottom: calc(30vw / 7.5);
}
  .interview-wrap {
    width: calc(620vw / 7.5);
    margin: auto;
}
.interview-img {
  margin: 0 0 calc(30vw / 7.5);
  text-align: center;
}
.speech {
  display: flex;
  margin-bottom: 1em;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.75;
}
.speaker {
  width: 4em;
  flex-shrink: 0;
  margin-right: 0.3em;
}
.interview-text {
  margin: 0;
  padding-left: 0.3em;
  flex-grow: 1;
}
/* 話者ごとのカラー */
.interviewer .speaker { color: #ff9fc6;  }
.guest-a .speaker { color: #f18700;  }
.guest-b .speaker { color: #80c524;  }

.intro-wrap .speech{
    font-size: 13px;
}
.article-sec01{
  padding-bottom: min(180px,calc(180vw / 7.5));
}
.interview-h2,.article-h2{
  background:#f18700;
  color: #fff;
  line-height: 1.5;
  padding:0.5em 0 0.6em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.article_00 .interview-h2 {
	margin-top: 3.5em;
}
.interview-h2 h2{
  font-size: 20px;
  width: calc(620vw / 7.5);
  margin: auto;
  text-indent: -1em;
  padding-left: 1em;
}
.profile-wrap{
  width:calc(620vw / 7.5);
  margin: 0 auto min(60px, calc(60vw / 7.5));
  display: flex;
  justify-content: space-between;
}
.profile-img{
  width: min(220px, 220vw / 7.5);
}
.profile-txt{
  width: min(365px, 365vw / 7.5);
  line-height: 1.75;
  font-size: 13px;
}
.name {
  font-size: 20px;
  position: relative;
  display: inline-block;
  color:#f18700;
	font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.article_00 .name::before {
  /* ルビの内容 */
  content: "ばんば"; 
  /* 配置の調整 */
  position: absolute;
  top: -1em;
  left: 0.2em;
  width: 50%;
  /* ルビの装飾 */
  font-size: 11px; /* 親の半分くらいのサイズ */
  text-align: left;
  letter-spacing: 0.1em;
}
.article_00 .name::after {
  /* ルビの内容 */
  content: "いくこ"; 
  /* 配置の調整 */
  position: absolute;
  top: -1em;
  left: 4.8em;
  width: 50%;
  /* ルビの装飾 */
  font-size: 11px; /* 親の半分くらいのサイズ */
  text-align: left;
  letter-spacing: 0.1em;
}

.name span {
  /* 先生の部分を少し小さく */
  font-size: 0.7em; 
  margin-left: 0.5em;
}
.action-wrap{
  background: url("../images/article/action-bg_sp.webp") top center /auto calc(155vw / 7.5) no-repeat, linear-gradient( to bottom, transparent 0, transparent calc(155vw / 7.5), #fff calc(155vw / 7.5), #fff 100% );
  padding: calc(155vw / 7.5) 0;

}
.action-inner{
  width: min(344px,calc(344vw / 7.5));
  margin: 0 auto min(70px,calc(70vw / 7.5));
}
.action-wrap .link-btn{
  background:#fff567;
  font-size: min(36px, calc(36vw / 7.5));
}
.footer-wrap{
  background: #fff;
}

/* 記事01〜 */
.article .item-tag{
  justify-content: left;
	margin-top: min(28px,calc(28vw / 7.5));
}
.step-item {
  margin-bottom: 30px;
  font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
}
.step-header {
  display: flex;
  align-items: center; 
  gap: 6px;          
  margin-bottom: 4px; 
}
.step-label {
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 10px 4px;
  border-radius: 5px; 
  white-space: nowrap; 
  line-height: 1;
  font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
}
.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.step-main-text {
  margin: 0;
  font-size: 20px;
  color: #f18700; /* オレンジ色 */
  font-weight: bold;
  line-height: 1.4;
}
.letter-spacing04{
  letter-spacing: 0.4em;
}
.article-h2 .step-label{
    background-color: #fff;
  color: #f18700;
}
.article-h2 .inner{
  width: calc(620vw / 7.5);
  margin: auto;
}
.article-h2 .step-title,.article-h2 .step-main-text  {
  color:#fff;
}
.article-h2{
  margin-top: 3em;
}
.step-inner{
  width: calc(620vw / 7.5);
  margin: auto;
}
.step-inner hr{
  margin-bottom: 1em;
}
.step-inner .step-inner-p,.step-inner ul{
  margin-bottom: 2em;
}
.step-inner-p{
	line-height: 1.75;
}
.step-inner h3{
  display: inline-block;
  font-size: 18px;
  background: url(../images/article/line-orange_4px.webp) repeat-x bottom left/auto 2px;
  margin-bottom: 0.8em;
  padding-bottom: 0.5em;
}
.c-orange{
  color: #f18700;
}
.step-inner-p.c-orange{
	font-weight: 500;
}
.c-green{
  color: #80c524;
}
.list-orangedot li{
  padding-left: 1.2em;
  position: relative;
	font-weight: 500;
}
.list-orangedot li::before{
  content: "●";
  top:0;
  left: 0;
  position: absolute;
  display: block;
  color: #f18700;
}
.line-gray_4px{
  background: url(../images/article/line-gray_4px.webp) repeat-x left bottom/auto 2px;
  border: none;
  height: 2px;
}
.step-box{
  width: 100%;
  margin: auto;
  background: #fff;
  border-radius: 30px;
    box-shadow: 6px 6px 0 0 #333;
    padding: 30px 20px 20px;
    margin-bottom: 2em;
    margin-top: 30px;
    position: relative;
}
.step-box h4{
    width: 220px;
    font-size: 18px;
    height: 32px;
    position: absolute;
    top: -10px;
    border-radius: 10px;
    letter-spacing: 0.1em;
    padding-top: 0.5%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    color:#fff;
    background: #5cb58a;
}
.step-box .speaker {
  width: 1.2em;
}
.step-box .c1 .speaker{
  color:#5cb58a;
}
.step-box .speech {
  margin-bottom: 0;
}
.list-dot li{
	padding-left: 1em;
  text-indent: -1em;
}
.step-box .list-dot{
	margin-bottom:0;
}
.step-inner .step-label{
	margin-bottom: 0.5em;
}

.step-report-orange .step-label{
  background-color: #f18700;
}
.step-label.label-2l{
  line-height: 1.5;
}
.step-report{
  margin-bottom: 1em;
}
.dl-wrap .link-btn{
  margin-top: 30px;
  margin-bottom: 120px;
}
.step-inner hr{
  margin: 2em auto;
}
.step-box h4 {
  width: 254px;
  font-size: 20px;
  height: 37px;
  border-radius: 14px;
}
.step-box{
  padding: 55px 25px 45px;
}
.line-gray_4px {
  background: url(../images/article/line-gray_4px.webp) repeat-x left bottom/auto 3px;
  height: 3px;
}
.video-btn-float{
  display: none;
  position: fixed;
  right: 0;
  bottom: 10px;
  width: calc(200vw / 7.5);
  transition: all 0.3s;
}
.video-btn-float.is_fixed{
  display: block;
  opacity: 1;
}

/*いいね・閲覧*/
.stats-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: center;
}
.stats-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-like-trigger {
 background: none; border: none; cursor: pointer; padding: 0; display: flex;
}
.stats-icon {
  width: 48px;
  height: auto;
}
.stats-number {
  font-weight: bold;
  font-size: 18px;
  color: #999;
  font-family: "zen-maru-gothic","メイリオ",Meiryo,sans-serif;
}
.view-label {
  color: #666;
  width: 24px;
}
.profile-green .name{
	color:#80c524;
}
.profile-blue .name{
	color:#66b9ff;
}
.profile-pink .name{
	color:#f66c83;
}
.dlg01 li{
	padding-left :1em;
	text-indent: -1em;
}
.step-inner .step-box .step-inner-p{
	margin-bottom: 0;
}

/* メニュー位置調整 */
#step1,#step2,#step3,#step4,#step5,#step0,
#title1,#title2,#title3,#title4,#title5,#title6,#title7{
  margin-top: -50px;
  padding-top: 50px;
  display: block;
}


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


}

/* //////////////////////////////////////////////////////////////////////////////// PC //////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 769px) {


  body{
    background: url(../images/article/article-body.jpg);
  }
  main{
    max-width: 1100px;
    width: 100%;
    background: url(../images/body-bg.jpg);
    margin: 0 auto;  /* 中央寄せ */
    box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.2), 5px 0 10px -5px rgba(0, 0, 0, 0.2);
    padding-bottom: 200px;
  }
	.bread{
    padding: 85px 0 0;
    margin: 0 0 1.5em 40px;
		font-size: 18px;
	}
  .article-title .inner {
    width: calc(900vw / 11);
    margin: 0 auto min(30px, calc(30vw / 11));
    max-width: 900px;
    display: flex;
    justify-content: center;
    gap: min(30px, calc(30vw / 11));
    align-items: end;
  }
  .article-fv{
    padding: 0;
    width: min(380px, calc(380vw / 11));
  }
  .article-title .subtitle{
    font-size: min(18px,calc(18vw / 11));
  }
  .article-title .maintitle{
    font-size: min(38px,calc(38vw / 11));
  }
  .article .video-btn-wrap {
    top :auto;
    bottom: -10%;
    left: -16.5%;
  }
  .article .video-btn-pink {
    width: min(175px,calc(175vw / 11));
  }
  .article .video-btn-text {
    width: min(105px,calc(105vw /11));
  }
  .article .video-btn-illust{
    top: auto;
    bottom: 44%;
    right: -3%;
    width: min(92px,calc(92vw / 11));
  }
  .h1-wrap {
    margin-bottom: 0;
    width: min(396px,calc(396vw / 11));
}
  .article-sec01 {
    padding-bottom: min(120px,calc(120vw / 11));
  }
  /* インタビュー */
  .intro-wrap{
    width: 580px;
    padding-bottom: min(30px, calc(30vw / 11));
    background: url(../images/article/line-brown_4px.webp) repeat-x center bottom / auto 3px;
    margin-bottom: min(40px, calc(40vw / 11));
  }
  .interview-wrap {
    width: 580px;
  }
  .interview-img {
    margin: min(50px ,calc(30vw / 11)) 0 min(30px ,calc(30vw / 11));
    text-align: center;
  }
  .speech {
    margin-bottom: 0.5em;
    font-size: 18px;
  }
  .intro-wrap .speech{
      font-size: 18px;
  }

  .toc-wrap {
    padding: 0 0 min(70px,calc(70vw / 11));
    border: min(3px,calc(3vw / 11)) solid #333;
    border-radius: min(100px,calc(100vw / 11));
    background: url(../images/sec03-bg_sp.webp) #fff;
    background-size: min(60px,calc(60vw / 11));
    margin: min(50px,calc(50vw / 11)) auto min(90px,calc(90vw / 11));
    width: min(800px,calc(800vw / 11));
  }
  .toc-inner{
    padding: min(50px,calc(50vw / 11)) min(100px,calc(100vw / 11)) 0;
  }
  .toc-title{
    font-size: 36px;
    font-weight: 700;
  }
  .toc-line{
    width: 3px;
    margin: 40px auto 20px;
  }
  .toc-title span{
    background: url(../images/article/line-orange_4px.webp) repeat-x center bottom / auto 3px;
  }
  .toc_list li{
    font-size: 32px;
    background: url(../images/article/line-gray_2px.webp) repeat-x center bottom / auto 2px;
  }
   .interview-h2{
    margin-bottom: 2em;
    padding: 0.8em 0 0.9em;
   }
  .interview-h2 h2 {
    font-size: 32px;
    width: 580px;
  }

  .profile-wrap {
    width: 574px;
    margin: 0 auto 70px;
  }
  .profile-img {
    width: 160px;
  }
  .profile-txt {
  width: 385px;
  line-height: 1.75;
  font-size: 16px;
  }
  .name {
    font-size: 26px;
  }
  .article_00 .name::before {
    font-size: 14px; 
  }
   .article_00 .name::after {
    font-size: 14px;
    left: 5em;
  }
  .name span {
    font-size: 16px; 
  }
  .action-wrap{
    background: url("../images/article/action-bg_pc.webp") top center /100% 200px no-repeat, linear-gradient( to bottom, transparent 0, transparent 200px, #fff 200px, #fff 100% );
    padding: 115px 0;
    margin-top: -115px;
    z-index: 1;
    position: relative;
  }

  .action-inner{
    width: min(380px,calc(380vw / 11));
    margin: 0 auto min(70px,calc(70vw / 11));
  }
  .action-wrap .link-btn {
    font-size: min(24px,calc(24vw / 11));
  }
  /* 記事01〜 */
  .article .item-tag {
    margin-top: 1.5em;
	  column-gap: min(7px,calc(7vw / 11));
  }
  .step-label {
    font-size: 18px;
    font-weight: bold;
    padding: 6px 20px 8px;
    border-radius: 8px;
  }
  .step-title {
    font-size: 24px;
  }
  .step-main-text {
  font-size: 32px;
  }
  .article-h2 .inner {
    width: 580px;
  }
  .step-inner {
    width: 580px;
  }
  .article-h2 {
    margin-top: 4em;
    margin-bottom: 3em;
    padding: 1.1em 0;
  }
  .step-inner h3 {
    font-size: 24px;
    background: url(../images/article/line-orange_4px.webp) repeat-x bottom left/auto 3px;
    margin-bottom: 0.5em;
  }
  .step-inner .step-inner-p, .step-inner ul{
    font-size: 18px;
  }
  .step-inner ul{
    line-height: 1.75;
  }
  .interview-img {
    margin: 0 auto 5px;
  }
	.article_00 .interview-img {
    margin: 1.5em auto;
	  }
  .step-report .step-label{
    margin-bottom: 0.5em;
    font-size: 16px;
  }
  .step-report p{
    font-size: 18px;
    line-height: 1.75;
  }
  .step-report .interview-img {
    margin: 40px auto;
  }
  .dl-wrap .link-btn {
    margin-top: 120px;
    margin-bottom: 90px;
	font-size: min(24px,calc(24vw / 11));
  }
  .video-btn-float{
    width: min(175px,calc(175vw / 11));
	  z-index: 99;
  }
	/*いいね・閲覧*/
	.stats-wrapper {
	  gap: 56px;
	}
	.stats-item {
	  display: flex;
	  align-items: center;
	  gap: 18px;
	}
	.stats-icon {
	  width: 60px;
	  height: auto;
	}
	.stats-number {
	  font-weight: bold;
	  font-size: 24px;
	  color: #999;
	}
	.view-label {
	  color: #666;
	  width: 38px;
	}

	/* メニュー位置調整 */
	#step1,#step2,#step3,#step4,#step5,#step0,
	#title1,#title2,#title3,#title4,#title5,#title6,#title7{
  margin-top: -70px;
  padding-top: 70px;
  display: block;
}

	
	

}