@charset "utf-8";
/* ************************************************** 
Name: voices.css
Description: Main CSS
Create: 2025.3.10
***************************************************** */ 

/* ================================================== 
BreakPoint
-1024
-994
-769
-579
-399
===================================================== */

/*--------------------------------------------------------------------------------------- 
元のCSS打ち消しや流用　リセットCSS
---------------------------------------------------------------------------------------*/
#Contents img {
  max-width: 100%;
  height: auto;
}
figure {
  margin: 0;
}
.JS body {
  background:#fff;
}
.JS .GridSet {
  margin: 0 auto;
}
.JS h2 {
  margin-left: 0;
  margin-right: 0;
}
.AdjustPcBlock {
  display: block;
}
@media screen and (max-width: 994px) {
  .AdjustPcBlock {
    display: inline;
  }
}
@media screen and (max-width: 1304px) {
  .ContentsArea {
      margin: 0;
  }
}
a.IsFixed {
  z-index: 1;
}
h2 {
  background: none;
}
@media screen and (max-width: 1304px) {
  .MiddleBrandingTitle {
    margin: 0;
  }
}
@media screen and (max-width: 1536px) {
  .MiddleBrandingTitle {
     font-size: 280%;
  }
}
/*------------------------------------------------------------------元のCSS打ち消しや流用*/

/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
:root {
  --border_gray: #D6E1E0;/*ボーダー色：部門説明コーナー（薄いグレー）*/
  --bg_gray: #eee;/*背景色：受領者の声コーナー（薄いグレー）*/
}
/*---テキスト関連---*/
small,
* small {
  line-height: 1.3;
}
@media screen and (max-width: 769px) {
  p,
  * p {
    font-size: 0.875rem;
  }
}
h2 {
  font-size: 1.875rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
  padding-bottom: 0;
}
.indent {
  padding-left: 16px;
}
/*---構造---*/
main *,
aside * {
  box-sizing: border-box;
}
section {
  /* overflow: hidden; */
  position: relative;
}
.ContentsArea {
  padding-top: 80px;
  margin-bottom: 20px;
}
@media screen and (max-width: 579px) {
	.ContentsArea {
  		padding-top: 60px;
		margin-bottom: 30px;
	}
}
.with-img_box {
  position: relative;
}
.flexblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flexblock.col_2 {
  justify-content: space-between;
}
.flexblock.col_2 > * {
  width:48%;
  max-width: 560px;
}
@media screen and (max-width: 994px) {
  .flexblock.col_2 {
    justify-content: center;
  }
  .flexblock.col_2 > * {
    width: 560px;
    max-width: 100%;
  }
  .flexblock.col_2 > *:first-child {
    margin-bottom: 24px;
  }
}
.flexblock.col_4 {
  gap: 24px;
}
.flexblock.col_4 > * {
  flex: 1;
  max-width: 300px;
}
@media screen and (max-width: 994px) {
  .flexblock.col_4 > * {
    flex: 1 1 calc(50% - 24px);
  }
}
@media screen and (max-width: 769px) {
  .flexblock.col_4 > * {
    flex: 1 1 100%;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/*---効果---*/
a::after {
  transition: .1s all;
}
/*---装飾---*/
.mbm_overlay {
  mix-blend-mode: overlay;
}
.white_box {
  background: #fff;
  padding: 24px;
  /* z-index: 5; */
}
.btn a {
  /* display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative; */
  text-decoration: none;
  word-break: break-all;
}
/*---レスポンシブ用クラス---*/
@media (min-width: 995px) {/*↑↑↑995px以上↑↑↑*/
  .without_pc {/*PCだけ除外*/
    display: none;
  }
}
@media (min-width: 1081px) {/* PC用 */
  .without_tb {/*タブレットだけ除外*/
    display: block;
  }
  .for_tb {/*タブレットだけ表示*/
    display: none;
  }
}
@media (max-width: 1080px) {/* SP用 */
  .without_tb {/*タブレットだけ除外*/
    display: block;
  }
  .for_tb {/*タブレットだけ表示*/
    display: none;
  }
}
@media (min-width: 1081px) and (max-width: 1540px){/* ipad Pro ipad Air用 */
  .without_tb {/*タブレットだけ除外*/
    display: none;
  }
  .for_tb {/*タブレットだけ表示*/
    display: block;
  }
}
@media (max-width: 579px) {/*↓↓↓579px以下↓↓↓*/
  .without_sp-L {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 399px) {/*↓↓↓399px以下↓↓↓*/
  .without_sp {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 347px) {/*↓↓↓347px以下↓↓↓*/
  .without_sp_S {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 994px) {/*↓↓↓994px以下↓↓↓*/
  .for_pc-L {/*PCだけ表示*/
    display: none;
  }
}
@media (max-width: 767px) {/*↓↓↓767px以下↓↓↓*/
  .for_pc {/*PCだけ表示*/
    display: none;
  }
}
@media (min-width: 768px) {/*↑↑↑768px以上↑↑↑*/
  .for_sp-L {/*SPだけ表示*/
    display: none;
  }
}
@media (min-width: 580px) {/*↑↑↑580px以上↑↑↑*/
  .for_sp {/*SPだけ表示*/
    display: none;
  }
}
/*----------------------------------------------------------------------------------汎用*/

/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
.voices {
  background: var(--bg_gray);
}
.mv {
  position: relative;
}
/*----------------------------------------------------------------------------------背景*/

/*--------------------------------------------------------------------------------------- 
メインビジュアル(スライダー)
---------------------------------------------------------------------------------------*/
.mv02 .slide {
  padding: 0;
}
#Contents .mv img {
  height: inherit;
}

/*---キャッチコピーレイアウト関連---*/
.ccbox {
  position: relative;
  width: 1275px;
  max-width: 96vw;
  display: grid;
  justify-content: flex-end;
}
@media screen and (max-width: 994px) {
  .ccbox {
    max-width: 90vw;
  }
}
@media screen and (max-width: 579px) {
  .ccbox {
    display: block;
    bottom: 8px;
    position: absolute;
    max-width: 100%;
    padding: 8px 8px 8px 32px;
    box-sizing: border-box;
  }
}

.r_img .ccbox {
  justify-content: flex-start;
}
.JS h2.MiddleBrandingTitle {
    margin: 0;
    text-align: left;
    width: 100%;
    z-index: 2;
    color: #333;
    line-height: 1.3;
    text-shadow: 1.5px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF,
                -1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF,
                0px 1.5px 0 #FFF,  0 -1.5px 0 #FFF,
                -1.5px 0 0 #FFF, 1.5px 0 0 #FFF;
    font-weight: normal;
	font-size: 225%;
}
@media screen and (max-width: 994px) {
  .JS h2.MiddleBrandingTitle {
    font-size: 162%;
  }
}
@media screen and (max-width: 769px) {
  .JS h2.MiddleBrandingTitle {
    position: relative;
    width: 100%;
  }
  .JS h2.MiddleBrandingTitle {
    white-space: nowrap;
  }
}
@media screen and (max-width: 399px) {
  .JS h2.MiddleBrandingTitle {
    white-space: normal;
    font-size: 1.6rem;
  }
}

.MiddleBrandingText {
    margin-top: 15px;
	margin-bottom: 8px;
    text-align: left;
    width: 100%;
    z-index: 2;
    font-size: 275%;
    line-height: 1.5;
    color: #333;
    font-weight: bold;
    text-shadow: none;
}
@media screen and (max-width: 994px) {
    .MiddleBrandingText {
        font-size: 187.5%;
    }
}
@media screen and (max-width: 579px) {
    .MiddleBrandingText {
        margin-top: 10px;
        text-shadow: 1.5px 1.5px 0 #FFF, -1.5px -1.5px 0 #FFF,
                -1.5px 1.5px 0 #FFF, 1.5px -1.5px 0 #FFF,
                0px 1.5px 0 #FFF,  0 -1.5px 0 #FFF,
                -1.5px 0 0 #FFF, 1.5px 0 0 #FFF;
    }
}

/*---地球イラストレイアウト関連---*/
.ccbox::after {
  content: '';
  display: block;
  position: absolute;
  width: 666px;
  height: 432px;
  background: url(/activities/kurata/images/voices/bg_title.png) no-repeat;
  top: -126px;
  right: -95px;
  opacity: .7;
  background-size: cover;
}
@media screen and (max-width: 994px) {
    .ccbox::after {
        width: 500px;
        top: -100px;
        right: -86px;
        background-size: contain;
    }
}

.r_img .ccbox::after {
  right: unset;
  left: -118px;
}
@media screen and (max-width: 579px) {
  .r_img .ccbox::after {
    right: -132px;
    left: unset;
  }
}
@media screen and (max-width: 579px) {
  .ccbox::after {
    width: 500px;
    top: -80px;
	z-index: -1;
  }
}
@media screen and (max-width: 399px) {
  .ccbox::after {
    width: 460px;
    top: -55px;
    right: -80px;
  }
}

/*---スライダー写真位置調整---*/
@media screen and (max-width: 1024px){
  .r_img.img_to_right .for_pc img {
    object-position: 40% 50%;
  }
  .r_img.img_to_left .for_pc img {
    object-position: 70% 50%;
  }
}
@media screen and (max-width: 994px) {
  .for_pc img {
    object-position: 42% 50%;   
  }
  .p_dark img {
    object-position: 50% 50%;    
  }
  .r_img.img_to_right .for_pc img {
    object-position: 50% 50%;
  }
  .r_img.img_to_left .for_pc img {
    object-position: 80% 50%;
  }
}
@media screen and (max-width: 769px) {
  .for_pc img {
    object-position: 42% 50%;   
  }
  .p_dark img {
    object-position: 50% 50%;    
  }
  .r_img.img_to_right .for_pc img {
    object-position: 50% 50%;
  }
  .r_img.img_to_left .for_pc img {
    object-position: 80% 50%;
  }
}
@media screen and (max-width: 579px) {
  .for_sp-L img {
    object-position: 60% 50%;   
  }
  .p_dark img {
    object-position: 50% 50%;    
  }
  .r_img.img_to_right .for_sp-L img {
    object-position: 70% 0%;
  }
  .r_img.img_to_left .for_pc img {
    object-position: 80% 50%;
  }
}

/*-----------------------------------------------------------メインビジュアル(スライダー)*/

/*--------------------------------------------------------------------------------------- 
倉田奨励金とは
---------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------- 
部門
---------------------------------------------------------------------------------------*/
.field li {
  border: 6px solid var(--border_gray);
  padding: 64px;
}
.field dt {
  font-size: 1.875rem;
  font-weight: bold;
  text-align: center;
}
.field dd {
  margin-top: 24px;
}
.field strong {
  display: block;
}
@media screen and (max-width: 1100px) {
  .field li {
    padding: 24px;
  }
}
/*---------------------------------------------------------------------------------部門*/

/*--------------------------------------------------------------------------------------- 
受領者の声
---------------------------------------------------------------------------------------*/
.voices .voice_boxes {
  margin-top: 32px;
  margin-bottom: 32px;
}
@media screen and (max-width: 579px) {
	.voices .voice_boxes {
		margin-top: 0;
	}
}
.voices a:link,
.voices a:visited {
    text-decoration: none;
    color: #333;
}
.voices a:hover,
.voices a:active {
    text-decoration: none;
    color: #b1000e;
}
dl.voice_listitem {
  position: relative;
}
dl.voice_listitem .specialty {
  position: absolute;
  top: -8px;
}
.specialty {
  font-size: 0.875rem;
  margin: 8px 0 0;
  box-sizing: border-box;
  padding: 3px 8px;
  background-color: #333;
  color: #fff;
  display: inline-block;
}
.name {
  font-size: 1.125rem;
  font-weight: bold;
  margin-top: 16px;
}
@media screen and (max-width: 579px) {
  .name {
    margin-top: 8px;
  }
}
.belong {
  font-size: 0.875rem;
  margin: 8px 0;
}
.belong::before {
  content: '所属';
  display: block;
  font-weight: bold;
  color: #999;
  line-height: 1;
}
.year {
  font-size: 0.875rem;
  margin: 8px 0;
}
.year::before {
  content: '倉田奨励金 助成年度';
  display: block;
  font-weight: bold;
  color: #999;
  line-height: 1;
}
.number {
  font-size: 0.875rem;
  margin: 8px 0;
}
.number::before {
  content: '倉田奨励金番号、受領研究テーマ';
  display: block;
  font-weight: bold;
  color: #999;
  line-height: 1;
}
.number a:link,
.number a:visited {
  color: #c02;
}
.number a:hover,
.number a:active {
	text-decoration: underline;
}
.number a img {
  width: 18px;
  vertical-align: middle;
}
.message {
  width: calc(100% - 417px);
  line-height: 2;
  padding-left: 24px;
}
@media screen and (max-width: 994px) {
  .message {
    width: 100%;
	line-height: 1.6;
    padding-left: 0;
  }
}
@media screen and (max-width: 579px) {
  .message {
    font-size: 0.875rem;
    margin-top: 16px;
  }
}
/*----------------------------------------------------------------------------受領者の声*/

/*--------------------------------------------------------------------------------------- 
モーダル
---------------------------------------------------------------------------------------*/
/*モーダルを開くボタン*/
.modal-open {
	cursor: pointer;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	overflow: auto;
	visibility: hidden;
	transition: .3s;
  box-sizing: border-box;
  padding: 40px 20px;
  z-index: 2;
}
@media screen and (max-width: 769px) {
  .modal-container {
    padding: 0;
  }
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active {
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body {
	position: relative;
	display: inline-block;
	vertical-align: middle;
    max-width: 1063px;
    width: 90%;
    background: #eee;
	text-align: left;
    margin-left: -4px;
}
/*ボタンの指定*/
button {
  cursor: pointer;
}
main button:not(.modal-close) {
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 56px;
  width: 56px;
  border-radius: 999px;
  background: #fff;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 769px) {
  main button:not(.modal-close) {
    height: 30px;
    width: 30px;
  }
}
button.modal-prev {
  left: -72px;
}
button.modal-next {
  right: -72px;
}
@media screen and (max-width: 993px) {
  button.modal-prev {
    left: -48px;
  }
button.modal-next {
    right: -48px;
  }
}
@media screen and (max-width: 769px) {
  button.modal-prev {
    left: -16px;
  }
button.modal-next {
    right: -16px;
  }
}
main button:not(.modal-close)::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  margin-top: 10px;
}
@media screen and (max-width: 769px) {
  main button:not(.modal-close)::before {
    margin-top: 11px;
  }
}
.modal-prev::before {
  transform: translateY(-50%) rotate(225deg);
  margin-left: 4px;
}
.modal-next::before {
  transform: translateY(-50%) rotate(45deg);
  margin-right: 4px;
}
main button:not(.modal-close):hover {
  background: #bbb;
}
.modal-close {
  background: none;
  border: none;
  color: #333;
  font-size: 0.625rem;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  position: absolute;
  padding-top: 32px;
  white-space: nowrap;
}
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 30px;
  background: #333;
}
.modal-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.modal-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
@media (max-width: 769px) {
  .modal-close {
    top: 6px;
    right: 6px;
  }
}
/*モーダル内のコンテンツの指定*/
.modal-content dt {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0573D4;
  margin-bottom: 24px;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 994px) {
  .modal-content dt {
    padding-right: 40px;
  }
}
@media screen and (max-width: 579px) {
  .modal-content dt {
    font-size: 1.125rem;
    margin-bottom: 8px;
  }
}
.modal-content .wrapper {
  width: 865px;
  max-width: 90%;
  margin: auto;
  padding: 5% 0;
}

.modal-content {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.modal-container.active .modal-content {
  opacity: 1;
}
.WrapperItem {
  width: 50%;
}
@media screen and (max-width: 994px) {
	.WrapperItem {
		width: 45%;
	}
}
@media screen and (max-width: 579px) {
	.WrapperItem {
		width: 95%;
	}
}