@charset "utf-8";

/*FONT*/
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Thin.woff2) format('woff2'),
       url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Thin.woff) format('woff'),
       url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Light.woff2) format('woff2'),
       url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Light.woff) format('woff'),
       url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-DemiLight.woff) format('woff'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-DemiLight.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Regular.woff2) format('woff2'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Regular.woff) format('woff'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Medium.woff2) format('woff2'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Medium.woff) format('woff'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Bold.woff2) format('woff2'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Bold.woff) format('woff'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Black.woff2) format('woff2'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Black.woff) format('woff'),
        url(https://info.us.yokogawa.com/rs/591-TCV-738/images/NotoSansJP-Black.otf) format('opentype');
 }

/* MAIN */
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.block {
	display: block;
	position: relative;
	z-index: 1;
}

body {
	position: relative;
	font-family: 'Noto Sans Japanese', sans-serif;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

header h1 {
	width: 100%;
	margin: 0;
}

header h1 img {
	width: 100%;
	vertical-align: bottom;
}

article {
	width: 100%;
}

article::after {
	content: "";
	display: block;
	clear: both;
}

article .description_area {
	width: 60%;
	float: left;
}

main h2 {
	font-weight: bold;
	margin-top: 40px;
	margin-left: 8%;
}

main h2 .small {
	font-size: 16px;
}

main h2 .big {
	font-size: 20px;
}

main .description {
	margin-top: 30px;
	line-height: 1.7;
	font-size: 16px;
	margin-left: 8%;
	margin-bottom: 60px;
}

main .title_area:before {
	content: "";
    position: absolute;
    width: 466.5%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: -300%;
    background-color: #ffffff;
}

/*追加*/
main ul.date-place-area {
	width: 92%;
	margin-left: 7%;
	padding: 7px 0;
	padding-left: 15px;
	background-color: #e6e6e6;
}

main ul.date-place-area li {
	font-size: 18px;
	font-weight: bold;
	padding: 7px 0;
}

main ul.date-place-area li.date-place-area-left {
	float: left;
	width: 10%;
}

main ul.date-place-area li.date-place-area-left1 {
	float: left;
	width: 30%;
}

main ul.date-place-area li.spacer {
	width: 10%;
}
/*追加*/


main .ebook_area {
	width: 95%;
	background-color: #DFE2E3;
	padding: 3% 0;
	padding-left: 8%;
}

main .ebook_area:before {
	content: "";
    position: absolute;
    width: 461.8%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: -300%;
    background-color: #dfe2e3;
}

main .ebook_area .gray_description {
	width: 100%;
	line-height: 1.5;
	margin-top: 20px;
	margin-bottom: 50px;
}

main .ebook_area_left {
	width: 50%;
	float: left;
}

main .ebook_area_right {
	width: 40%;
	margin-left: 5%;
	float: left;
}

main .ebook_area h3 {
	font-size: 22px;
	color: #00316C;
	font-weight: bold;
	line-height: 1.5;
}

main .ebook_area ul {
	list-style-type: disc;
	padding-left: 4%;
	margin: 20px 0;
}

main .ebook_area ul li {
	margin: 10px 0;
	font-size: 18px;
	line-height: 1.5;
}

main .ebook {
	text-align: center;
}

main .ebook img {
	width: 250px;
}


main .download_area {
	background-color: #EEEFF0;
	width: 25%;
	padding: 3% 4%;
	position: relative;
	float: left;
	z-index: 5;
	margin-left: 5%;
}

main .download_area h2 {
	color: #04396C;
	font-weight: bold;
	font-size: 23px;
	margin-top: 0;
}

main .download_area .download_header .triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 30px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	top: 7%;
	left: 0;
}

main .download_area .download_header p {
    text-align: center;
    font-size: 25px;
    color: #fff;
    background-color: #7a8e99;
    font-family: 'Noto Sans Japanese', sans-serif;
    padding: 5px;
}

#mktoForm_2014 {
  padding: 10px;
  font-size: 13px !important;
  width:auto !important;
  
}

.mktoFormRow{	
    display:flex;	
}

.mktoFormCol{
    width:100%;
}

.mktoRequiredField{
    width:100%;
}

.mktoFieldWrap{
    width:100%;
}

  /*必須のアスタリスクを透明化*/
  .mktoAsterix{
    color:transparent!important;
    display: flex !important;

  }
 /*入力欄の間を縮めるために余分なものは消去*/ 
 .mktoForm .mktoOffset {
	display:none;
}

/*下のテキストを枠内に収める*/
.mktoHtmlText{

	width:auto!important;
}

/*チェックボックスの位置を揃える*/
.mktoLogicalField.mktoCheckboxList.mktoHasWidth {
              width: 10%!important;
}

.mktoForm p.allow {
              margin-left: 0!important;
}

/*下のラジオぼたんを枠内に収める*/
.mktoRadioList{

	width:auto!important;
}

.mktoForm mktoHasWidth mktoLayoutAbove .mktoFormRow {
  display: block;
  overflow: hidden;
  margin: 20px 15px 5px;
}


main .contact-form .item .radio-group{
  padding: 5px 0px 5px 60px;
}

.mktoFormRow input[type=text],
.mktoFormRow input[type=email],
.mktoFormRow input[type=tel],
.mktoFormRow select {
  display: block;
  width: 100% !important;
  padding:10px !important;
  border: 1px solid #ccc;
  box-sizing: border-box !important;
  font-size: 13px !important;
  background-color: #FFF;
  border-radius: 0;
}

main .contact-form .item select {
	color: #ccc;
	padding-left: 6px;
}

main .contact-form .item select .select_item {
	color: #000;
}

main .contact-form .item input:focus {
	background-color: #fff;
}

main .contact-form .item ::placeholder {
  color: #ccc;
}
main .contact-form .item textarea {
  outline: none;
  border: 1px solid #ccc;
  resize: vertical;
}

.mktoButtonRow {
	border-radius: 5px;
	margin-top: 50px;
	width:100%;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
  border: none !important;
  outline: none;
  display: block !important;
  line-height: 40px !important;
  width: 85% !important;
  text-align: center;
  font-size: 18px !important;
  color: #fff !important;
  background-color: #159848 !important;
  cursor:pointer !important;
  box-sizing: content-box !important;
  font-family: 'Noto Sans Japanese', sans-serif !important;
  border-radius:5px;
  /*mktocssを打ち消すために追加*/
  background-image: none !important;
  /*中央よせ*/
  margin:auto;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover{
  opacity:0.6;
}

main .contact-form .visit_check {
	margin-top: 10px;
	font-weight: bold;
}

main .required {
	font-size: 12px;
	color: #00316C;
	margin: 10px 7%;
}

main .form-notice {
	font-size: 12px;
	/*30pxから15pxに調整*/
	margin: 15px 7% !important;
	line-height: 1.5;
}
main .form-notice1 {
	/*30pxから15pxに調整*/
	margin: 0px 10px !important;
	font-size: 12px;
	line-height: 1.5;
}

.mktoFieldDescriptor .mktoFormCol{	
    width:40px;	
}

/*optinのチェックボックスレイアウト対応*/
.mktoForm .mktoFormRow:nth-of-type(9) .mktoFormCol {

	display: inline-block;
	width: auto;
	padding-right: 2%; /*チェックボックスのテキストとの余白合わせ*/

}
.mktoForm .mktoFormRow:nth-of-type(10) .mktoFormCol {

	display: inline-block;
	width: auto;

}
.mktoForm .mktoFormRow:nth-of-type(11) .mktoFormCol {

	display: inline-block;
	width: auto;

}

main .preferences {
	font-size: 12px;
	margin: 15px 7% !important;
	line-height: 1.5;
}

/*radiobox*/
.checkbox1 {
	width: 280px;
	line-height: 1.3;
}
.checkbox2 {
	width: 280px;
	line-height: 1.3;
}

label {
	display: block;
	margin: 10px;
	text-align: left;
}
label:after {
	content: "";
	clear: both;
	display: block;
}

label input { float: left; }

label p {
	float: left;
	padding-top: 2px;
	width: calc(100% - 24px);
}
/*radiobox-end*/

.2column tr td {
	width: 33%;
	line-height: 1.3;
	padding: 2%;
}

.footer_gray {
	background-color: #f6f6f7;
}

.footer_gray p {
	text-align: center;
}

.tdText {
	text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

.tdTitle {
	text-align: center;
        line-height: 1.5;
        font-size:25px;
        font-weight:bold;
        margin-bottom: 10px;
}

.footer_gray span {
	font-weight:bold;
}

.footer_gray tr td {
	line-height: 1.3;
        background-color: #ffffff;
	padding: 2%;
        margin-top: 30px;
}

.footer_white_a {
    width: 100%;
}

.footer_white_a p {
    text-align: center; 
    margin-top: 30px; 
    margin-bottom: 30px;
    font-size: 25px;
    font-weight:bold;
}

.footer_white_a_left footer_white_a_right {
	width: 15%;
}

.footer_white_a_center {
	width: 70%;
}

.footer_grey_b {
    width: 100%;
    background-color: #f6f6f7;
}

.footer_grey_b p {
    text-align: center; 
    margin-top: 30px; 
    margin-bottom: 30px;
    font-size: 25px;
    font-weight:bold;
}

.footer_grey_b_left footer_grey_b_right {
	width: 15%;
}

.footer_grey_b_center {
	width: 70%;
}
.footer_grey_b_right {
	width: 10%;
}

.footer_white {
        width: 100%;
}


.footer_white tr td {
	width: 33%;
	padding: 2%;
        margin-top: 30px;
}

.footer_white p {
	text-align: center;
}

.footer_gray_a_left {
	padding:2%;
	vertical-align:top;
}

.footer_gray_a_left p {
	text-align:left;
	margin-top: 10px;
    line-height: 1.5;
}

.footer_gray_a_left span {
    font-weight:bold;
}

.footer_gray_a_right {
	width:70%;
	padding:2%;
}

footer {
	background-color: #004f9b;
}

footer .copyright {
	color: #fff;
	text-align: center;
	padding: 30px 0;
	line-height: 1.3;
}

/*Speaker Area*/
.speaker_area {
	margin-left: 7%;
}

.speaker_area .speaker_image, .title-area-left {
	vertical-align: top;
	text-align: center;
}

.speaker_area .speaker_description, .title-area-right {
	width: 70%;
	padding-left: 10px;
}

/*Tablet*/
@media screen and (max-width: 950px) {

	body {-webkit-text-size-adjust: 100%;}

	article .description_area {
		width: 54%;
	}

	main .title_area:before {
		width: 485%;
	}

	main .ebook_area:before {
		width: 479.8%;
	}

	main .ebook_area h3 {
		font-size: 22px;
	}

	main .ebook_area_left {
		width: 60%;
	}

	main .ebook_area_right {
		width: 33%;
		margin-left: 7%;
	}

	main .ebook_area ul {
		padding-left: 8%;
	}

	main .ebook_area ul li {
		font-size: 16px;
	}

	main .description {
		margin-top: 20px;
		font-size: 16px;
	}

	main .ebook {
		width: 100%;
		margin-top: 20px;
	}

	main .download_area {
		width: 30%;
		margin-right: 20px;
	}

	main .download_area .download_header .triangle {
		border-width: 25px 0 25px 20px;
		top: 7.5%;
	}

}

/*mobile*/
@media screen and (max-width: 767px) {

	body {-webkit-text-size-adjust: 100%;}

	.hidden_sp {
		display: none;
	}

	main h2 {
		margin-top: 30px;
		margin-right: 4%;
	}

	main .title_area:before,
	main .ebook_area:before {
		width: 300%;
	}

	main .description_area {
		width: auto;
		clear: both;
		float: none;
		margin: 0;
	}

	main .description {
		margin-top: 14px;
		margin-right: 8%;
		font-size: 16px;
	}

	main .ebook_area {
		width: 100%;
		position: relative;
		margin-top: 50px;
		padding: 30px 0;
	}

	main .ebook_area .gray_description {
		width: 84%;
		padding: 0 8%;
	}

	main .ebook_area h3 {
		padding: 0 8%;
	}

	main .ebook_area_left {
		width: 100%;
		float: none;
	}

	main .ebook_area_left ul {
		padding: 0 14%;
	}

	main .ebook_area_right {
		width: 100%;
		float: none;
		margin: 0;
	}

	main .ebook_area_right img {
		max-width: 80%;
	}

	main .ebook {
		width: 100%;
		text-align: center;
	}

	main .download_area {
		width: auto;
		margin: 0;
		clear: both;
		float: none;
	}

	.checkbox1, .checkbox2 {
		width: 100%;
	}

	.two-column tr td {
		width: 92%;
		display: block;
		padding: 0;
                font-size: 16px;
	}

	.two-column .two-column_center,
	.two-column .two-column_right {
		padding-top: 20px;
	}

	.footer_gray tr td {
		width: 92%;
		display: block;
		padding: 4%;
	}

	.footer_gray .footer_gray_center,
	.footer_gray .footer_gray_right {
		padding-top: 0;
	}
	.footer_white tr td {
		width: 92%;
		display: block;
		padding: 4%;
	}

	.footer_white .footer_white_center,
	.footer_white .footer_white_right {
		padding-top: 0;
	}
	/*追加*/
	main ul.date-place-area {
		width: 84%;
	}
	/*追加*/

	/*Speaker Area*/
	.speaker_area {
		margin-left: 0;
		margin: 0 auto;
	}

	.speaker_area .speaker_image, .title-area-left {
		display: block;
		text-align: center;
	}

	.speaker_area .speaker_description, .title-area-right {
		width: 85%;
		display: block;
		padding-left: 0;
		margin: 0 auto;
		margin-bottom: 30px;
	}

}