@charset "UTF-8";
/* -- white paper ... -- */
/** -- 参考 products  'search' 'products top' 'index_list' stylesheet -- **/


/* -- second page title -- */
.pTit {}
.pTit h3 { max-width: 1210px; margin: 60px auto 50px; padding-left: 5%; font-size: 20px; line-height: 1.1; font-weight: bold; display: block; }


/*  -- contents module home -- */
.contents h3 { margin: 0; font-size: 19px; line-height: 1.1; font-family: 'M PLUS 1p', sans-serif; font-weight: 800; }
.contents h3 span { font-size: 14px; /*font-family: scfEN, sans-serif; font-weight: normal;*/ font-weight: 400;}
.contents h3 span:before { content: '\A'; white-space: pre;}

.contents h4 { margin: 0; font-size: 16px; line-height: 1.1; font-family: 'M PLUS 1p', sans-serif;  }




/* -- products body -- */
p.pCtg { margin: 0; font-size: 17px; line-height: 1; font-weight: bold;}

.libraryWrap {}
.libraryWrapInner { max-width: 1300px; margin: auto; padding: 30px 5% 50px;}
@media (min-width: 1300px) { .libraryWrapInner { padding-left: 50px; padding-right: 50px;}}
@media (max-width: 640px) { .libraryWrapInner { padding-top: 0}}

/* -- library ctg -- */
.libraryCtgWrap { margin-bottom: 40px; }
.libraryCtgWrap ul { list-style: none; }
.libraryCtgWrap ul li { margin: 0 10px 10px 0; padding: 0; display: inline-block;}
.libraryCtgWrap ul li a { min-width: 100px; padding: 8px 16px; text-align: center; border-radius: 999px; border: 1px solid #ddd; display: inline-block; transition: .3s;}
.libraryCtgWrap ul li a:hover { border-color: #51c1fa; color: #51c1fa; transition: .3s;}
.libraryCtgWrap ul li.head { padding-right: 14px; font-size: 14px; font-weight: bold;}

@media (max-width: 640px) { 
.libraryCtgWrap { margin-bottom: 25px; }
.libraryCtgWrap ul { padding-left: 15px; font-size: 13px;} 
.libraryCtgWrap ul li { margin: 0 8px 8px 0; }
.libraryCtgWrap ul li a { min-width: 80px; padding: 6px 12px;}
}

/* -- library ctg title-- */
p.libraryCtg { margin: 0 0 40px; padding: 10px 0 10px 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
p.libraryCtg span { font-size: 17px; font-weight: bold;}

@media (max-width: 640px) { p.libraryCtg span { font-size: 15px;} p.libraryCtg { margin: 0 0 25px; padding: 8px 0 8px 25px;}}

/* -- library head catch - download -- */
body.download p.libraryDownloadHeadCatch { margin: 0 0 30px; padding: 20px 0 20px 38px; font-size: 28px; font-weight: bold; line-height: 1.3; color: #fff; background-color: /*#5db3be*/ #68bbc6; display: block;}

@media (max-width: 640px) { body.download p.libraryDownloadHeadCatch { margin-bottom: 20px; padding: 15px 0 15px 25px; font-size: 19px;}}




/* -- library box -- */
.libraryBoxWrap { display: flex; flex-wrap:wrap;}
.libraryBox { width: 24%; min-height: auto; margin: 0 1% 1% 0; vertical-align: top; border-radius: 10px; background-color: #f5f5f5;}
.libraryBox a { width: 100%; height: 100%; min-height: auto; transition: .3s;}
.libraryBox a:hover { opacity:0.80; transition: .3s;}
.libraryBoxInBlock { width: 100%; height: 100%;  display: flex; flex-direction: column; }
.libraryBoxImage { width: 100%; margin: auto; height: auto; text-align: center; display: block; aspect-ratio: 7 / 5;  background-size: cover; background-position: 50%; border-radius: 10px 10px 0 0; position: relative;}
.libraryBoxInner { padding: 20px 20px 10px 20px; flex-grow: 1;}
.libraryBoxTitle h3 { font-size: 18px; font-weight: bold;  line-height: 1.4;}
.libraryBoxExp { line-height: 1.5;}

p.libraryBoxCtg { width: fit-content; font-size: 13px; line-height: 1.3; margin: 0 18px 10px; padding: 5px 15px; color: #fff; border-radius: 999px; background: #aaa; display: inline-block;} /* 角丸タイプ */

/*p.libraryBoxCtg { width: 100％; font-size: 13px; line-height: 1.3; margin: 0 18px 10px; padding: 5px 15px; color: #fff; background: #aaa; display: block;}*/ /* ラベルタイプ */

/*p.libraryBoxCtg { width: fit-content; font-size: 11px; line-height: 1.2; margin: 0 18px 10px; padding: 5px 5px; border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc; color: #555; display: inline-block;}*/ /* ボーダータイプ */ 

p.libraryBoxBottom { width: fit-content; margin-top: auto; position: relative; left: 42px; font-size: 13px; font-weight: bold; display: inline-block;}

    /* dl */
.libraryBox.dl p.libraryBoxBottom:before { content: ''; width: 15px; height: 15px; margin-right: 5px; background: url(../images/library/icon_dl.svg) 0 0 no-repeat; background-size: contain; display: inline-block; position: absolute; top: 6px; left: -24px;}

    /* lock */
.libraryBox.lock .libraryBoxImage:after { content: ''; width: 40px; height: 40px; background: url(../images/library/icon_lock.svg) 0 0 no-repeat; background-size: contain; display: inline-block; position: absolute; bottom: -12px; right: 15px;}
.libraryBox.lock p.libraryBoxBottom { left: 20px;}
.libraryBox.lock p.libraryBoxBottom:after { content: '\f054'; margin-right: 0; font-family: "Font Awesome 5 Free"; font-size: 12px; position: absolute; top: 0; right: -20px;
}


@media (max-width: 960px) { 
.libraryBox { width: 32%; margin: 0 1.3% 1.3% 0;}
.libraryBoxTitle h3 { font-size: 17px;}
}

@media (max-width: 640px) { 
.libraryBox { width: 48%; margin: 1%;}
.libraryBoxInner { padding: 15px 15px 5px 15px; }
.libraryBoxImage { text-align: center; display: block;}
.libraryBoxTitle h3 { font-size: 15px;}
.libraryBoxExp { font-size: 11px;  line-height: 1.4;}
p.libraryBoxCtg { margin-left: 12px; margin-right: 12px; font-size: 11px; line-height: 1.1; padding: 3px 18px; }

p.libraryBoxBottom { left: 38px; font-size: 12px;}
.libraryBox.dl p.libraryBoxBottom:before { content: ''; width: 13px; height: 13px; margin-right: 3px; }

.libraryBox.lock .libraryBoxImage:after { content: ''; width: 30px; height: 30px; bottom: -8px; }
.libraryBox.lock p.libraryBoxBottom { left: 15px;}
.libraryBox.lock p.libraryBoxBottom:after { font-size: 10px; top: 2px; right: -15px;}
}


    /* dl */
.libraryBox.dl p.libraryBoxBottom:before { content: ''; width: 15px; height: 15px; margin-right: 5px; background: url(../images/library/icon_dl.svg) 0 0 no-repeat; background-size: contain; display: inline-block; position: absolute; top: 6px; left: -24px;}


/*  --  form -- */
.wp-block-table td, .wp-block-table th { border: none !important;} /* 調整 */

.formArea { width: 50%; max-width: 700px; margin: 0 auto; padding: 0 30px 20px; background-color: #f5f5f5; border-radius: 20px; display: inline-block;}

.formArea p.mainExp { margin: 30px 0 0 10px; font-size: 16px; font-weight: bold;}
.formArea p.subExp { margin: 0 0 0 10px; font-size: 13px; font-weight: normal;}
.formArea p.subExp span { margin-left: 5px; color:#f00; font-weight: bold;}

.formArea .formBox { width: 100%; margin: 30px 0; border-collapse: collapse; display: table; border: 1px #cff;}
.formArea .formBox:after { content:'';display:block;clear:both;}
.formArea .formBox dl { display: table-row;}
.formArea .formBox dt,
.formArea .formBox dd { font-size: 16px; text-align:left; display: table-cell; vertical-align: middle;}
.formArea .formBox dt { width: 200px; font-weight: bold; padding: 0;vertical-align: top}
.formArea .formBox dt span { margin-left: 5px; font-size: 14px; color:#f00; line-height: 1; display: inline-block; vertical-align: 5px;}
.formArea .formBox dt span.subTxt { color: #000; font-size: 13px; font-weight: normal;}
.formArea .formBox dd { width: auto;}
.formArea .formBox dd p { margin: 0; padding: 0;}
.formArea .formBox dd input { width: 100%;}

.formBox input,
.formBox textarea { padding: 15px; font-size: 17px; border: 1px solid #fff; background: #fff; transition: .3s;}

.formBox input:focus,
.formBox textarea:focus { background-color: #fff; border: 1px solid #ccc; outline: none; transition: .3s;}

   /* radio */
.formArea .formBox dd .wpcf7-radio label input { width: auto;}
.formArea .formBox dd .wpcf7-radio .wpcf7-list-item.first { margin: 0;}

  /* デフォルト送信枠 */
.formArea .wpcf7-response-output { display: none;}

.formArea .formBox dl.space { margin: 10px 0; display: block;}


/*.formbtn button.formBtnSubmit { width: 60%; padding: 25px 0; color: #fff; font-size: 17px; font-weight: 800; font-family: "Open Sans", sans-serif; background-color: #0090d9; border: none; cursor: pointer;  transition: .3s;}
.formbtn button.formBtnSubmit:hover { text-decoration: none; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;  transition: .3s;}

.formbtn button:disabled { background-color: #ccc; }*/

   /*  --  form notes -- */
.formArea .noteBox { margin: 30px auto; text-align: center;}
.formArea .noteBox p.note { margin: auto; text-align: left; font-size: 13px; display: inline-block;}
.formArea .noteBox ul.note { margin: auto; text-align: left; font-size: 13px;}


@media screen and (max-width: 960px) { .formArea { width: 92%; padding-top: 8px; max-width: auto; display: block;}}
@media screen and (max-width: 769px) {
.formArea .formBox { width: 100%; margin: 0 auto 5%; border: none; display: block;}
.formArea .formBox dl { width: 100%; display: block;}
.formArea .formBox dt,
.formArea .formBox dd { width: 100%; margin: 0; padding: 0; border: none; display: block;}
.formArea .formBox dt { margin: 20px 0 10px;}
.formArea .formBox dt p { margin: 0; padding: 0;}

.formArea .noteBox { margin: 10px auto;}
.formArea .noteBox ul.note  { padding-left: 5%;}
/*p.formbtn button { margin: 0 auto 10px; display: block;}
p.formbtn button.formBtnSubmit { width: 95%;}*/
}

/*  --  form thanks -- */
.formThanksArea { width: 70%; max-width: 700px; margin: 50px auto 100px; padding: 30px 60px; background-color: #f5f5f5; border-radius: 20px; display:block; }

.formThanksArea h2 { font-size: 22px; font-weight: bold; }

p.libraryReturnBottom { width: fit-content; margin: 30px auto 0; position: relative; font-size: 14px; font-weight: bold; display: block;}
p.libraryReturnBottom a { padding: 10px;}
p.libraryReturnBottom:before { content: '\f054'; margin-right: 0; font-family: "Font Awesome 5 Free"; font-size: 12px; position: absolute; top: 3px; right: -10px;}

@media (max-width: 960px) { .formThanksArea { width: 90%;}}
@media (max-width: 640px) { .formThanksArea { width: 92%; padding: 20px 40px;}}


/* information */
.informationArea { width: 48%; margin: 0 auto; padding: 20px 70px;  display: inline-block; vertical-align: top;}
.informationArea p.informationTit { font-size: 16px; font-weight: bold;}
.informationArea p.informationExp { font-size: 15px; font-weight: normal;}
.informationArea .informationImage { margin: 30px 0;}
.informationArea .informationImage img { width: 100%;}

@media screen and (max-width: 960px) {
.informationArea { width: 92%; padding: 0;  display: block;}
}

/* form > library Image list */
.libraryBoxImageList { /*display: inline-block;*/ width: 100%; margin: 0 auto; padding: 0;}
.libraryBoxImageList ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap:wrap; justify-content: space-between;}
.libraryBoxImageList ul li { margin-bottom: 2%; padding: 0; width: 49%; height: auto; /*min-height: 160px;*/ aspect-ratio: 7 / 5; background-size: cover; background-position: 50%; border-radius: 10px; vertical-align: top; background-color: #f5f5f5;}
.libraryBoxImageList ul li .libraryBoxTitle p { margin: 0; padding: 15px 20px; font-size: 12px; font-weight: bold; line-height: 1.5;}

@media screen and (max-width: 960px) { .libraryBoxImageList { margin-bottom: 40px;}}

     /* purpose  (checkbox)  */
.formArea .formBox .purpose { margin-bottom: 30px;}
.formArea .formBox dl.purpose dt { padding: 0;}
.formArea .formBox dl.purpose dt p { margin: 0;}
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item { margin: 0; display: block;}
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item label { margin: 0 0 5px; display: table;}
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item input[type=checkbox] { width: auto; margin: 5px 5px 0 0; vertical-align: top; display: table-cell;}
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item .wpcf7-list-item-label { display: table-cell; vertical-align: top; line-height: 1.3;}
.formArea .formBox .wpcf7-not-valid-tip { margin-bottom: 12px;} /* error text */

@media screen and (max-width: 769px) { 
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item input[type=checkbox] { margin: 0 8px 0 0;}
.formArea .formBox .wpcf7-checkbox.purpose span.wpcf7-list-item .wpcf7-list-item-label { padding-top: 5px;}
}

     /* form button */
.formbtn { margin: 20px 0 0; padding-bottom: 16px; text-align: center;}
.formbtn input.formBtnSubmit { width: 60%; padding: 25px 0; color: #fff; font-size: 17px; font-weight: 800; font-family: "Open Sans", sans-serif; background-color: #0090d9; border: none; cursor: pointer;  transition: .3s;}
.formbtn input.formBtnSubmit:hover { text-decoration: none; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;  transition: .3s;}
.formbtn input:disabled { background-color: #ccc; }
.formbtn .wpcf7-spinner { display: none ;}

@media screen and (max-width: 769px) { .formbtn input.formBtnSubmit { width: 100%; font-size: 16px;}}




  /* contact form 7 送信メッセージ非表示 */
body.library .wpcf7-mail-sent-ok { display: none;}

   /* error - library ver */
body.library .errorPage { margin: 0 auto; padding: 10vh 0 15vh; text-align: center; display: block}
body.library .errorPage h3 { font-size: 20px; color: #666;}
body.library .errorPage p {  color: #666;}
body.library .errorPageInner { padding: 30px 60px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: inline-block}

body.library .errorPage .linkBtn { min-width: 230px; margin: 50px auto 20px;}


/* re Captcha */
/*p.tam_recaptcha_policy { margin: 30px 0 50px; padding: 0; text-align: center; font-size: 11px; color: #666;}
p.tam_recaptcha_policy a { padding: 3px 5px; font-size: 11px; color: #444; transition: .3s;}
p.tam_recaptcha_policy a:hover { color: #0090d9;  transition: .3s;}
.grecaptcha-badge { visibility: hidden; } */