@charset "utf-8";

/* ==================================================
  Food Science 共通
================================================== */
.contents { color: #333; }
.contents a {
  color: #464646;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contents a:hover { text-decoration: none;}

.contents h2,
.contents h3,
.contents h4,
.contents h5,
.contents h6 {font-weight:400;}

.table {
  border-collapse: collapse;
  border-style: 0;
}

.clearfix::before,
.clearfix::after {
  display: block;
  clear: both;
  content: '';
}
.clearfix { display: block;}

.bakblue01 { background: #f2f8fb; }
.bakpink01 { background: #faf9f9; }
.bakgray01 { background: #fcfcfc; }


/*	heading
-------------------------------------------------- */
.contents h2 {
  margin-bottom: .7em;
  font-size: 2.2rem;
  line-height: 1.4;
}
.contents h2 .mod-h2_cap {
  font-size: 1.6rem;
  font-weight: 300;
}
.contents h3 {
  margin-bottom: 1em;
  font-size: 2rem;
  line-height: 1.4;
}
.contents h4 {
  margin-bottom: .5em;
  font-size: 1.6rem;
}

@media all and (width >= 750px) {
  .contents h2 {
    font-size: 3.6rem;
    line-height: 1.3;
    letter-spacing: .05em;
  }
  .contents h2 .mod-h2_cap {
    font-size: 2.1rem;
    font-weight: 300;
    letter-spacing: .05em;
  }
  .contents h3 {
    font-size: 2.4rem;
    letter-spacing: .05em;
  }
  .contents h4 {
    font-size: 1.8rem;
  }
}

/*	style
-------------------------------------------------- */
.hr {
  margin-top: 2.5em;
  padding: 0;
  width: 100%;
  height: 0;
  border: 0;
  border-top: solid 1px #e7e7e7;
}

/* text link */
.ldeco01 a {
  color: #464646;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}
.ldeco02 a {
  text-decoration: none;
}
.ldeco07 a {
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
}
.ldeco01 a:hover, 
.ldeco07 a:hover {
  text-decoration: none;
}
.ldeco02 a:hover, 
.ldeco03:hover {
  transition: opacity 0.5s;
  opacity: 0.7;
}

/* text */
.leadtxt { line-height: 1.8;}
.leadtxt + .leadtxt { margin-top: 1.5em;}
@media all and (width >= 750px) {
  .leadtxt { line-height: 2;}
}
/* list */
.list > li {
  position: relative;
  padding-left: 1.2em;
}
.list > li::before {
  position: absolute;
  left: 0;
  display: block;
  content: "・";
}
.list > li + li { margin-top: .5em;}

/* table */
.table {
  width: 100%;
  font-size: 1.2rem;
}
.table th,
.table td {
  padding: 1em 1.5em;
  line-height: 1.6666;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
}
.table th {
  font-weight: 700;
  background-color: #f8f6f6;
}

@media all and (width >= 750px) {
    .table {
      font-size: 1.4rem;
    }
    .table th,
  .table td {
    padding: 1.4em;
  }
}

.mod-movie {
	width: 100%;
	aspect-ratio: 16/9;
	position: relative;
}
.mod-movie iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}


/*	section
-------------------------------------------------- */
.section {
  padding: 30px 10px;
}
.sub-section {
  padding-top: 2.5em;
}

@media all and (width >= 750px) {
  .section {
    padding: 60px 0 0 0;
  }
  .inner {
    width: 1140px;
    margin: 0 auto;
  }
}

/*	module
-------------------------------------------------- */
/* vi */
.vi-level2 {
  display: grid;
  place-content: center;
  height: 140px;
}
.vi-level2 > h1 {
  font-size: 2.2rem;
  color: #ffffff;
  letter-spacing: .1em;
  font-weight: 300;
  text-shadow: 0 0 5px #0000001f, 0 0 5px #0000001f, 0 0 5px #0000001f, 0 0 5px #0000001f;
}

/* intro */
.intro {
  padding: 30px 0 0;
}
.introtxt {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  line-height: 2;
}
.introtxt p + p {
  margin-top: 1.4em;
}

@media all and (width >= 750px) {
  /* vi */
  .vi-level2 {
    height: 345px;
  }
  .vi-level2 > h1 {
    font-size: 3.8rem;
    text-shadow: 0 0 6px #0000001f, 0 0 6px #0000001f, 0 0 6px #0000001f, 0 0 6px #0000001f;
  }

  /* intro */
  .intro {
    padding: 50px 0 0 0;
  }
}

/* heading */
.contents .mod-h2 {
  position: relative;
  padding-bottom: 10px;
  border-bottom: 3px solid #f0f0f0;
}
.contents .mod-h2.is-center {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.contents .mod-h2:after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 3px;
  left: 0;
  bottom: -3px;
  background-color: #ff0000;
}
.contents .mod-h2.has-badge {
  text-align: center;
}
.contents .mod-h2.has-badge .badge {
  display: block;
  width: fit-content;
  margin: .8em auto 0;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  font-size: 1rem;
}

.contents .mod-h3 {
  position: relative;
  padding-left: 1.4em;
}
.contents .mod-h3::before {
  position: absolute;
  left: 0;
  top: .34em;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 5px solid #333;
  content: '';
}

.contents .mod-h4 {
  font-size: 1.7rem;
  margin-bottom: 1em;
}

@media all and (width >= 750px) {
  .contents .mod-h2 {
    padding-bottom: 15px;
  }
  .contents .mod-h2:after {
    width: 29px;
  }
  .contents .mod-h2.has-badge {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 18px;
    text-align: left;
  }
  .contents .mod-h2.has-badge .badge {
    flex-shrink: 1.5;
    margin: 0;
    padding: 12px 16px;
    font-size: 1.2rem;
  }
  .contents .mod-h3::before {
    width: 22px;
    height: 22px;
  }
  .contents .mod-h4 {
    font-size: 2.1rem;
  }
}

/*	button */
a.btn01 {
  display: inline-block;
  text-decoration: none;
}
a.btn01  {
  padding: .8em 3.2em;
  font-size: 1.6rem;
  font-weight: 300;
  color: #ffffff;
  background: rgba(109,154,170,1);
  transition: background .5s;
  border-radius: 3.2em;
}
a.btn01:hover {
  background: rgba(109,154,170,.7);
}
a.btn01 span {
  position: relative;
}
a.btn01::after {
  position: relative;
  top: -3px;
  display: inline-block;
  width: 25px;
  height: 10px;
  background: url(../img/arrow_01.png) no-repeat center / contain;
  margin-left: 6px;
  content: "";
}

a.btn02 {
  display: inline-block;
  min-width: 180px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  border: solid 1px #dddddd;
  box-shadow: 2px 2px 0px 0 #e3e3e3;
  transition: opacity 0.5s;
}
a.btn02:hover {
  opacity: 0.7;
}

@media all and (width >= 750px) {
  a.btn01 {
    font-size: 2rem;
  }
  a.btn01::after {
    width: 37px;
  }

  a.btn02 {
    min-width: 210px;
  }
}

/*	box */
.ex {
  margin-top: 2.5em;
  padding: 20px 10px;
  background-color: #faf9f9;
}
.ex h4 { font-weight: 700;}
@media all and (width >= 750px) {
  .ex {
    padding: 30px;
  }
}

.fig {
  margin-top: 20px;
  padding: 20px 10px;
  background-color: #f2f8fb;
  overflow-x: auto;
}
.fig-inner {
	display: flex;
	align-items: center;
	column-gap: 2.4%;
	width: 145%;
	max-width: 1130px;
	margin: 0 auto;
}
.fig .exa {
	position: relative;
	width: 20%;
	padding: 10px 0;
	font-size: 1rem;
	font-weight: 700;
	background-color: #fff;

}
.fig .exa dt,
.fig .exa dd {
	padding: 0 1em;
	text-align: center;
}
.fig .exa dd.img {
	margin-top:1.5em;
	padding: 0;
}
.fig .pageLink {
	font-weight: 700;
	text-align: center;
}
.fig .arr {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 55.2%;
}

@media all and (width >= 750px) {
  .fig {
    margin-top: 40px;
    padding: 50px 0;
  }
	.fig .exa {
		padding: 25px 0 35px;
		font-size: 1.2rem;
  }
}

/*	note */
.note {
  margin-top: 10px;
  font-size: 1.1rem;
  line-height: 1.6;
}
@media all and (width >= 750px) {
  .note {
    margin-top: 20px;
    font-size: 1.2rem;
  }
}

@media all and (width < 750px) {
  .scrollbox-x {
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 15px;
  }
}












.display-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

input {
  border-radius: 0;
}



.vT {
  vertical-align: top !important;
}

.vM {
  vertical-align: middle !important;
}

.vB {
  vertical-align: bottom !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.nowrap {
  white-space: nowrap !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.txtB { font-weight: 700 !important; }









/*	横位置
-------------------------------------------------- */ 
.centered {
  text-align: center;
}

/*	flex
-------------------------------------------------- */ 
.col01 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: center;
} 
.col02 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: space-between;
} 
.col03 {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: flex-start;
} 
.colwrap {
 flex-wrap: wrap;
}
.colai01 {
 align-items: center;
}
.colai02 {
 align-items: baseline;
}
.colai03 {
 align-items: end;
}
.colai04 {
 align-items: flex-start;
}
.colfd01 {
 flex-direction: row-reverse;
}

/*	float
-------------------------------------------------- */ 
.fl {
 float: left;
}
.fr {
 float: right;
}


@media screen and (min-width:750px) {
  /* --------------------------------------------------
      クリア
  -------------------------------------------------- */
  .pcflcl {
    float: none;
  }
  /*	bak
  -------------------------------------------------- */ 
  .bakgray01 {
    border: solid 4px #f4f3f3 ;
  }
}



@media screen and (width < 750px) {
  /* --------------------------------------------------
      クリア
  -------------------------------------------------- */
  .spcolcl {
    display: block;
  }
  /*	bak
  -------------------------------------------------- */
  .bakgray01 {
    border: solid 2px #f4f3f3 ;
  }
}




/*--------------------------------------
	utility
--------------------------------------*/
@media screen and (width >= 750px) {
  .mt0 { margin-top: 0 !important; }
  .mt05 { margin-top: 5px !important; }
  .mt10 { margin-top: 10px !important; }
  .mt15 { margin-top: 15px !important; }
  .mt20 { margin-top: 20px !important; }
  .mt25 { margin-top: 25px !important; }
  .mt30 { margin-top: 30px !important; }
  .mt35 { margin-top: 35px !important; }
  .mt40 { margin-top: 40px !important; }
  .mt45 { margin-top: 45px !important; }
  .mt50 { margin-top: 50px !important; }
  .mt55 { margin-top: 55px !important; }
  .mt60 { margin-top: 60px !important; }
  .mt65 { margin-top: 65px !important; }
  .mt70 { margin-top: 70px !important; }
  .mt75 { margin-top: 75px !important; }
  .mt80 { margin-top: 80px !important; }
  .mt85 { margin-top: 85px !important; }
  .mt90 { margin-top: 90px !important; }
  .mt95 { margin-top: 95px !important; }
  .mt100 { margin-top: 100px !important; }

  .mb0 { margin-bottom: 0 !important; }
  .mb05 { margin-bottom: 5px !important; }
  .mb10 { margin-bottom: 10px !important; }
  .mb15 { margin-bottom: 15px !important; }
  .mb20 { margin-bottom: 20px !important; }
  .mb25 { margin-bottom: 25px !important; }
  .mb30 { margin-bottom: 30px !important; }
  .mb35 { margin-bottom: 35px !important; }
  .mb40 { margin-bottom: 40px !important; }
  .mb45 { margin-bottom: 45px !important; }
  .mb50 { margin-bottom: 50px !important; }
  .mb55 { margin-bottom: 55px !important; }
  .mb60 { margin-bottom: 60px !important; }
  .mb65 { margin-bottom: 65px !important; }
  .mb70 { margin-bottom: 70px !important; }
  .mb75 { margin-bottom: 75px !important; }
  .mb80 { margin-bottom: 80px !important; }
  .mb85 { margin-bottom: 85px !important; }
  .mb90 { margin-bottom: 90px !important; }
  .mb95 { margin-bottom: 95px !important; }
  .mb100 { margin-bottom: 100px !important; }

  .pt0 { padding-top: 0 !important; }
  .pt05 { padding-top: 5px !important; }
  .pt10 { padding-top: 10px !important; }
  .pt15 { padding-top: 15px !important; }
  .pt20 { padding-top: 20px !important; }
  .pt25 { padding-top: 25px !important; }
  .pt30 { padding-top: 30px !important; }
  .pt35 { padding-top: 35px !important; }
  .pt40 { padding-top: 40px !important; }
  .pt45 { padding-top: 45px !important; }
  .pt50 { padding-top: 50px !important; }
  .pt55 { padding-top: 55px !important; }
  .pt60 { padding-top: 60px !important; }
  .pt65 { padding-top: 65px !important; }
  .pt70 { padding-top: 70px !important; }
  .pt75 { padding-top: 75px !important; }
  .pt80 { padding-top: 80px !important; }
  .pt85 { padding-top: 85px !important; }
  .pt90 { padding-top: 90px !important; }
  .pt95 { padding-top: 95px !important; }
  .pt100 { padding-top: 100px !important; }

  .pb0 { padding-bottom: 0 !important; }
  .pb05 { padding-bottom: 5px !important; }
  .pb10 { padding-bottom: 10px !important; }
  .pb15 { padding-bottom: 15px !important; }
  .pb20 { padding-bottom: 20px !important; }
  .pb25 { padding-bottom: 25px !important; }
  .pb30 { padding-bottom: 30px !important; }
  .pb35 { padding-bottom: 35px !important; }
  .pb40 { padding-bottom: 40px !important; }
  .pb45 { padding-bottom: 45px !important; }
  .pb50 { padding-bottom: 50px !important; }
  .pb55 { padding-bottom: 55px !important; }
  .pb60 { padding-bottom: 60px !important; }
  .pb65 { padding-bottom: 65px !important; }
  .pb70 { padding-bottom: 70px !important; }
  .pb75 { padding-bottom: 75px !important; }
  .pb80 { padding-bottom: 80px !important; }
  .pb85 { padding-bottom: 85px !important; }
  .pb90 { padding-bottom: 90px !important; }
  .pb95 { padding-bottom: 95px !important; }
  .pb100 { padding-bottom: 100px !important; }
}

@media screen and (width < 750px) {
  .spmt0 { margin-top: 0 !important; }
  .spmt05 { margin-top: 5px !important; }
  .spmt10 { margin-top: 10px !important; }
  .spmt15 { margin-top: 15px !important; }
  .spmt20 { margin-top: 20px !important; }
  .spmt25 { margin-top: 25px !important; }
  .spmt30 { margin-top: 30px !important; }
  .spmt35 { margin-top: 35px !important; }
  .spmt40 { margin-top: 40px !important; }
  .spmt45 { margin-top: 45px !important; }
  .spmt50 { margin-top: 50px !important; }
  .spmt55 { margin-top: 55px !important; }
  .spmt60 { margin-top: 60px !important; }
  .spmt65 { margin-top: 65px !important; }
  .spmt70 { margin-top: 70px !important; }
  .spmt75 { margin-top: 75px !important; }
  .spmt80 { margin-top: 80px !important; }
  .spmt85 { margin-top: 85px !important; }
  .spmt90 { margin-top: 90px !important; }
  .spmt95 { margin-top: 95px !important; }
  .spmt100 { margin-top: 100px !important; }

  .spmb0 { margin-bottom: 0 !important; }
  .spmb05 { margin-bottom: 5px !important; }
  .spmb10 { margin-bottom: 10px !important; }
  .spmb15 { margin-bottom: 15px !important; }
  .spmb20 { margin-bottom: 20px !important; }
  .spmb25 { margin-bottom: 25px !important; }
  .spmb30 { margin-bottom: 30px !important; }
  .spmb35 { margin-bottom: 35px !important; }
  .spmb40 { margin-bottom: 40px !important; }
  .spmb45 { margin-bottom: 45px !important; }
  .spmb50 { margin-bottom: 50px !important; }
  .spmb55 { margin-bottom: 55px !important; }
  .spmb60 { margin-bottom: 60px !important; }
  .spmb65 { margin-bottom: 65px !important; }
  .spmb70 { margin-bottom: 70px !important; }
  .spmb75 { margin-bottom: 75px !important; }
  .spmb80 { margin-bottom: 80px !important; }
  .spmb85 { margin-bottom: 85px !important; }
  .spmb90 { margin-bottom: 90px !important; }
  .spmb95 { margin-bottom: 95px !important; }
  .spmb100 { margin-bottom: 100px !important; }

  .sppt0 { padding-top: 0 !important; }
  .sppt05 { padding-top: 5px !important; }
  .sppt10 { padding-top: 10px !important; }
  .sppt15 { padding-top: 15px !important; }
  .sppt20 { padding-top: 20px !important; }
  .sppt25 { padding-top: 25px !important; }
  .sppt30 { padding-top: 30px !important; }
  .sppt35 { padding-top: 35px !important; }
  .sppt40 { padding-top: 40px !important; }
  .sppt45 { padding-top: 45px !important; }
  .sppt50 { padding-top: 50px !important; }
  .sppt55 { padding-top: 55px !important; }
  .sppt60 { padding-top: 60px !important; }
  .sppt65 { padding-top: 65px !important; }
  .sppt70 { padding-top: 70px !important; }
  .sppt75 { padding-top: 75px !important; }
  .sppt80 { padding-top: 80px !important; }
  .sppt85 { padding-top: 85px !important; }
  .sppt90 { padding-top: 90px !important; }
  .sppt95 { padding-top: 95px !important; }
  .sppt100 { padding-top: 100px !important; }

  .sppb0 { padding-bottom: 0 !important; }
  .sppb05 { padding-bottom: 5px !important; }
  .sppb10 { padding-bottom: 10px !important; }
  .sppb15 { padding-bottom: 15px !important; }
  .sppb20 { padding-bottom: 20px !important; }
  .sppb25 { padding-bottom: 25px !important; }
  .sppb30 { padding-bottom: 30px !important; }
  .sppb35 { padding-bottom: 35px !important; }
  .sppb40 { padding-bottom: 40px !important; }
  .sppb45 { padding-bottom: 45px !important; }
  .sppb50 { padding-bottom: 50px !important; }
  .sppb55 { padding-bottom: 55px !important; }
  .sppb60 { padding-bottom: 60px !important; }
  .sppb65 { padding-bottom: 65px !important; }
  .sppb70 { padding-bottom: 70px !important; }
  .sppb75 { padding-bottom: 75px !important; }
  .sppb80 { padding-bottom: 80px !important; }
  .sppb85 { padding-bottom: 85px !important; }
  .sppb90 { padding-bottom: 90px !important; }
  .sppb95 { padding-bottom: 95px !important; }
  .sppb100 { padding-bottom: 100px !important; }
}