@charset "UTF-8";

/**************************************************
FV
**************************************************/
.single-fv {
  max-width: 1100px;
  padding: 67px 0 60px;
  margin: 0 auto;
}

.single-fv .fv-title {
  width: 248px;
  margin: 0 auto;
}

.single-fv .fv-cat {
  margin-top: 13px;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-align: center;
}

.single-fv .fv-name {
  margin-top: 67px;
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
}

.single-fv-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 638px;
  margin: 34px auto 0;
  padding: 10px 0;
  border-top: 1px solid var(--c-main);
  border-bottom: 1px solid var(--c-main);
}

.single-fv-user .user-title {
  font-size: 13px;
  letter-spacing: 0;
}

.single-fv-user .user-data {
  display: flex;
  align-items: center;
  gap: 8px;
}

.single-fv-user .user-icon {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
}

.single-fv-user .user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-fv-user .user-name {
  font-size: 14px;
  letter-spacing: 0;
}

.single-fv-user .user-company {
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.3;
}

@media all and (max-width: 680px) {
  .single-fv {
    max-width: 100%;
    padding: 34px 30px 15px;
  }
  
  .single-fv .fv-title {
    width: 203px;
  }
  
  .single-fv-user .user-data {
    margin-top: 10px;
  }
  
  .single-fv .fv-cat {
    margin-top: 20px;
    font-size: 14px;
  }
  
  .single-fv .fv-name {
    margin-top: 36px;
    font-size: 18px;
    line-height: 1.78;
    letter-spacing: 0;
  }
  
  .single-fv-user {
    display: block;
    width: 100%;
    margin-top: 17px;
    padding: 14px 20px;
  }

  .single-fv-user .user-textbox {
    padding-bottom: 3px;
  }
  
  .single-fv-user .user-title {
    font-size: 13px;
    letter-spacing: 0;
  }
  
  .single-fv-user .user-company {
    margin-top: 5px;
  }
}

/**************************************************
大枠
**************************************************/
.single-contents {
  padding-bottom: 130px;
}

.single-contents .in {
  max-width: 1100px;
  margin: 0 auto;
}

.single-contents .sec-btnBox {
  margin-top: 75px;
}

.sec-title {
  width: 400px;
  margin: 0 auto;
}

.sec-title .en {
  display: block;
  margin: 0 auto;
}

.sec-title .news_topics {
  width: 288px;
}

.sec-title .crosstalk {
  width: 247px;
}

.sec-title .interview {
  width: 165px;
}

.sec-title .questionnaire {
  width: 271px;
}

.sec-title .jp {
  display: block;
  padding: 7px 0 9px;
  margin-top: 10px;
  border-top: 1px solid var(--c-main);
  border-bottom: 1px solid var(--c-main);
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 400;
  text-align: center;
}

@media all and (min-width: 681px) {
  
}

@media all and (max-width: 680px) {
  .single-contents {
    padding-bottom: 70px;
  }
  
  .single-contents .in {
    max-width: 100%;
    padding: 0 30px;
  }
  
  .single-contents .sec-btnBox {
    margin-top: 50px;
  }
  
  .sec-title {
    width: 88.89%;
  }
  
  .sec-title .news_topics {
    width: 61.786%;
  }
  
  .sec-title .crosstalk {
    width: 52.858%;
  }
  
  .sec-title .interview {
    width: 35.358%;
  }
  
  .sec-title .questionnaire {
    width: 58.215%;
  }
}

/**************************************************
コンテンツ内容
**************************************************/
.content-item + .content-item {
  margin-top: 80px;
}
.content-item .caption {
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.65;
  margin-top: 4px;
}

/* 画像1カラム */
.image_column_1 img {
  width: 100%;
}

/* 画像2カラム */
.image_column_2 {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 20px;
}
.image_column_2 .column-item {
  width: 540px;
}

/* バナー */
.banner {
  display: block;
  width: 620px;
  margin: 0 auto;
}
.banner img {
  width: 100%;
}

/* タイトル＋テキスト */
.title_text {
  width: 800px;
  margin: 0 auto;
}
.title_text .title {
  font-size: 18px;
  letter-spacing: 0.1em;
  font-weight: 500;
  line-height: 1.5;
}
.title_text .text {
  font-size: 15px;
  letter-spacing: 0;
  line-height: 32px;
  text-align: justify;
}
.title_text .title + .text {
  margin-top: 17px;
}

/* インタビュー内容 */
.interview_cont {
  width: 800px;
  margin: 0 auto;
}
.interview_cont dl {
  display: flex;
}
.interview_cont dl + dl {
  margin-top: 25px;
}
.interview_cont dl dt,
.interview_cont dl dd {
  font-size: 15px;
  letter-spacing: 0;
  line-height: 32px;
  text-align: justify;
}
.interview_cont dl dt {
  width: 60px;
  padding-right: 8px;
  font-weight: 500;
}
.interview_cont dl dd {
  width: calc(100% - 60px);
}

/* コメント */
.comment {
  width: 800px;
  margin: 0 auto;
}
.comment .text {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 30px;
  color: var(--c-blue3);
}

/* イベント概要 */
.overview {
  width: 900px;
  margin: 0 auto;
  background: var(--c-gray3);
  padding: 54px 90px 43px;
}
.overview .overview-title {
  font-size: 20px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 13px 0 15px;
  border-top: 1px solid var(--c-main);
  border-bottom: 1px solid var(--c-main);
}
.overview dl {
  display: flex;
  margin-top: 28px;
}
.overview dl + dl {
  margin-top: 10px;
}
.overview dl dt,
.overview dl dd {
  font-size: 15px;
  letter-spacing: 0;
  line-height: 28px;
  text-align: justify;
}
.overview dl dt {
  width: 150px;
}
.overview dl dd {
  width: calc(100% - 150px);
}
.overview dl dd a {
  text-decoration: underline;
}

/* 開催場所 */
.event .event-title {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.event .event-text {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.event .event-title + .event-text {
  margin-top: 16px;
}
.event .event-map {
  width: 100%;
  height: 534px;
  margin-top: 32px;
}
.event .event-map iframe {
  width: 100%;
  height: 100%;
}

/* 動画 */
.movie .movie-title {
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.movie .movie-text {
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.movie .movie-title + .movie-text {
  margin-top: 16px;
}
.movie .movie-cont {
  margin-top: 30px;
}
.movie .movie-cont.youtube {
  height: 617px;
}
.movie .movie-cont.youtube iframe {
  width: 100%;
  height: 100%;
}

/* アンケート内容 */
.questionnaire_cont {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.questionnaire-item {
  width: calc((100% - 20px)/2);
  background: var(--c-gray3);
  padding: 40px 34px 54px;
}
.questionnaire-item .item-num {
  font-size: 30px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
}
.questionnaire-item .item-num span {
  display: inline-block;
  padding-bottom: 20px;
  position: relative;
}
.questionnaire-item .item-num span::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 3px;
  background: var(--c-main);
}
.questionnaire-item .item-title {
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 32px;
  text-align: center;
  margin-top: 13px;
}
.questionnaire-item .item-img {
  margin-top: 30px;
}
.questionnaire-item .item-img img {
  width: 100%;
}
.questionnaire-item .item-text {
  height: 116px;
  margin-top: 26px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--c-main);
  border-bottom: 1px solid var(--c-main);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 28px;
  text-align: justify;
}

@media all and (min-width: 681px) {
  /* バナー */
  .banner {
    transition: opacity 0.3s;
  }
  .banner:hover {
    opacity: 0.7;
  }

  .overview dl dd a {
    transition: opacity 0.3s;
  }
  .overview dl dd a:hover {
    opacity: 0.7;
    text-decoration: none;
  }
}

@media all and (max-width: 680px) {
  .content-item + .content-item {
    margin-top: 40px;
  }
  .content-item .caption {
    font-size: 11px;
    line-height: 1.65;
  }
  
  /* 画像2カラム */
  .image_column_2 {
    display: block;
  }
  .image_column_2 .column-item {
    width: 100%;
  }
  .image_column_2 .column-item + .column-item {
    margin-top: 20px;
  }
  
  /* バナー */
  .banner {
    width: 95.24%;
  }

  /* ボタン */
  .sec-btn {
    width: 100%;
  }
  
  /* タイトル＋テキスト */
  .title_text {
    width: 100%;
  }
  .title_text .title {
    font-size: 17px;
    letter-spacing: 0;
    line-height: 1.88;
  }
  .title_text .text {
    line-height: 2.13;
  }
  .title_text .title + .text {
    margin-top: 15px;
  }

  .title_text + .sec-btn {
    margin-top: 30px;
  }
  
  /* インタビュー内容 */
  .interview_cont {
    width: 100%;
  }
  .interview_cont dl dt,
  .interview_cont dl dd {
    line-height: 2;
  }
  .interview_cont dl dt {
    width: 55px;
  }
  .interview_cont dl dd {
    width: calc(100% - 55px);
  }
  
  /* コメント */
  .comment {
    width: 100%;
  }
  .comment .text {
    font-size: 15px;
    line-height: 2;
  }
  
  /* イベント概要 */
  .overview {
    width: calc(100% + (30px*2));
    margin: 0 0 0 -30px;
    padding: 40px 30px 43px;
  }
  .overview .overview-title {
    font-size: 16px;
    padding: 15px 0 17px;
  }
  .overview dl {
    display: block;
    margin-top: 25px;
  }
  .overview dl + dl {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-white);
  }
  .overview dl dt,
  .overview dl dd {
    font-size: 14px;
    line-height: 2;
  }
  .overview dl dt {
    width: 100%;
  }
  .overview dl dd {
    width: 100%;
  }
  
  /* 開催場所 */
  .event .event-title {
    font-size: 16px;
  }
  .event .event-text {
    line-height: 1.6;
    text-align: left;
  }
  .event .event-title + .event-text {
    margin-top: 18px;
  }
  .event .event-map {
    width: calc(100% + (30px*2));
    height: 106.667vw;
    margin-top: 20px;
    margin-left: -30px;
  }
  
  /* 動画 */
  .movie .movie-title {
    font-size: 16px;
  }
  .movie .movie-text {
    line-height: 1.6;
    text-align: left;
  }
  .movie .movie-title + .movie-text {
    margin-top: 18px;
  }
  .movie .movie-cont {
    margin-top: 25px;
  }
  .movie .movie-cont.youtube {
    width: calc(100% + (30px*2));
    height: 56.267vw;
    margin-left: -30px;
  }
  
  /* アンケート内容 */
  .questionnaire_cont {
    display: block;
    max-width: 100%;
  }
  .questionnaire-item {
    width: 100%;
    padding: 34px 20px 35px;
  }
  .questionnaire-item + .questionnaire-item {
    margin-top: 30px;
  }
  .questionnaire-item .item-num {
    font-size: 20px;
  }
  .questionnaire-item .item-num span {
    padding-bottom: 15px;
  }
  .questionnaire-item .item-num span::before {
    width: 28px;
    height: 2px;
  }
  .questionnaire-item .item-title {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.75;
    text-align: left;
    margin-top: 10px;
  }
  .questionnaire-item .item-img {
    width: calc(100% + (20px*2));
    margin-top: 10px;
    margin-left: -20px;
  }
  .questionnaire-item .item-text {
    height: auto;
    margin-top: 18px;
    padding: 12px 0 14px;
    line-height: 1.88;
  }
}

/**************************************************
ユーザー情報
**************************************************/
.post-user-details {
  display: flex;
  width: 700px;
  padding: 30px 50px;
  margin: 90px auto 0;
  background: var(--c-gray3);
}
.post-user-details .post-user-leftBox {
  width: 280px;
  padding-top: 14px;
}
.post-user-details .post-user-rightBox {
  width: calc(100% - 280px);
  padding-left: 20px;
  border-left: 1px solid var(--c-main);
}
.post-user-details .post-user-images {
  display: flex;
  align-items: center;
}
.post-user-details .post-user-icon {
  width: 82px;
  height: 82px;
  border-radius: 100%;
  overflow: hidden;
}
.post-user-details .post-user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-user-details .post-user-textbox {
  width: calc(100% - 82px);
  padding-left: 8px;
}
.post-user-details .post-user-name {
  font-size: 16px;
  letter-spacing: 0;
}
.post-user-details .post-user-company {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 22px;
}
.post-user-details .post-user-sns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.post-user-details .post-user-sns li {
  width: 30px;
}
.post-user-details .post-user-desc {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 24px;
  text-align: justify;
}

@media all and (min-width: 681px) {
  .post-user-details .post-user-sns li {
    transition: transform 0.3s;
  }
  .post-user-details .post-user-sns li:hover {
    transform: rotate(10deg);
  }
}

@media all and (max-width: 680px) {
  .post-user-details {
    display: block;
    width: 100%;
    padding: 34px 30px 45px;
    margin-top: 50px;
  }
  .post-user-details .post-user-leftBox {
    width: 100%;
    padding-top: 0;
  }
  .post-user-details .post-user-rightBox {
    width: 100%;
    padding-left: 0;
    margin-top: 20px;
    border-left: none;
    border-top: 1px solid var(--c-main);
  }
  .post-user-details .post-user-textbox {
    padding-bottom: 6px;
  }
  .post-user-details .post-user-company {
    margin-top: 8px;
    line-height: 1.4;
  }
  .post-user-details .post-user-desc {
    margin-top: 15px;
    line-height: 1.72;
  }
}

/**************************************************
その他
**************************************************/
.sec-other {
  padding-bottom: 82px;
}

.sec-other .in {
  max-width: 1100px;
  margin: 0 auto;
}

.sec-other .other-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 54px;
}

.sec-other .other-list li {
  width: calc((100% - (40px*2))/3);
  position: relative;
}

.sec-other .other-list li .list-img {
  height: 190px;
  overflow: hidden;
}

.sec-other .other-list li .list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-other .other-list li .list-text {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 26px;
  margin-top: 17px;
}

.sec-other .other-list li .newicon {
  position: absolute;
  right: -14px;
  top: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--c-white);
  border: 1px solid var(--c-red);
  border-radius: 100%;
  font-size: 14px;
  color: var(--c-red);
  text-align: center;
  z-index: 1;
}

@media all and (min-width: 681px) {
  .sec-other .other-list li a {
    transition: opacity 0.3s;
  }
  .sec-other .other-list li a:hover {
    opacity: 0.7;
  }
}

@media all and (max-width: 680px) {
  .sec-other {
    padding-bottom: 60px;
  }
  
  .sec-other .in {
    max-width: 100%;
    padding: 0 30px;
  }
  
  .sec-other .other-list {
    display: block;
    margin-top: 36px;
  }
  
  .sec-other .other-list li {
    width: 100%;
  }

  .sec-other .other-list li + li {
    margin-top: 27px;
  }
  
  .sec-other .other-list li .list-img {
    height: 190px;
  }
  
  .sec-other .other-list li .list-text {
    line-height: 1.72;
    margin-top: 15px;
    padding: 0 20px;
  }
  
  .sec-other .other-list li .newicon {
    right: -14px;
    top: -30px;
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
}


/**************************************************
コメントアウト
**************************************************/
@media all and (min-width: 681px) {
  
}

@media all and (max-width: 680px) {
  
}