/*pro_under_page
--------------------*/
.pro_under_page { padding-bottom: 1px; }

/*under_page_tit_area
--------------------*/
.under_page_tit_area .pro_inner { position: relative; }
.under_page_tit_area .page_tit { text-align: center; }
.under_page_tit_area .typ_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; }
.under_page_tit_area .typ_list li a { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; width: 100%; }
@media print, screen and (min-width: 768px) { .under_page_tit_area { padding: 2.3125rem 0 3.25rem; }
  .under_page_tit_area .pro_inner { margin-bottom: 2.625rem; }
  .under_page_tit_area .page_tit { font-size: 2.5rem; font-weight: 500; }
  .under_page_tit_area .typ_list { padding: 1.625rem 0; position: absolute; top: 100%; left: 0; }
  .under_page_tit_area .typ_list li a { height: 2.625rem; font-size: 1.3125rem; font-weight: 500; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
  .under_page_tit_area .typ_list::before { content: ""; display: block; width: 100vw; height: 100%; position: absolute; left: 50%; z-index: -1; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 0; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; opacity: 0; }
  .under_page_tit_area .typ_list.fixed { width: 72.9166666667%; position: fixed; left: 50%; top: 5.625rem; z-index: 1000; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  .under_page_tit_area .typ_list.fixed::before { opacity: 0.8; } }
@media only screen and (max-width: 767px) { .under_page_tit_area { padding: 5.0666666667vw 0 6.4vw; }
  .under_page_tit_area .page_tit { font-size: 1.3rem; font-weight: 500; margin-bottom: 7.6vw; }
  .under_page_tit_area .typ_list li a { height: 9.3333333333vw; font-size: 0.975rem; font-weight: 500; } }

/*feature_page_tit_area
--------------------*/
@media print, screen and (min-width: 768px) { #feature_page_tit_area .typ_list li { width: 25%; }
  #feature_page_tit_area .typ_list li:not(:nth-child(4n)) { margin-right: 0%; }
  #feature_page_tit_area .typ_list li:not(:nth-child(4n)) { border-right: 1px solid; } }
@media only screen and (max-width: 767px) { #feature_page_tit_area .typ_list li { width: 50%; border-right: 1px solid; }
  #feature_page_tit_area .typ_list li:not(:nth-child(2n)) { margin-right: 0%; }
  #feature_page_tit_area .typ_list li:nth-child(2n+1) { border-left: 1px solid; }
  #feature_page_tit_area .typ_list li:not(:nth-child(-n+2)) { margin-top: 4.6666666667vw; } }

/*sample_page_tit_area
--------------------*/
@media print, screen and (min-width: 768px) { #sample_page_tit_area .typ_list li { width: 33.2857142857%; }
  #sample_page_tit_area .typ_list li:not(:nth-child(3n)) { margin-right: 0.0714285714%; }
  #sample_page_tit_area .typ_list li:not(:nth-child(3n)) { border-right: 1px solid; } }
@media only screen and (max-width: 767px) { #sample_page_tit_area .typ_list li { border-right: 1px solid; }
  #sample_page_tit_area .typ_list li:first-child { width: 100%; }
  #sample_page_tit_area .typ_list li:not(:first-child) { width: 50%; margin-top: 4.5333333333vw; }
  #sample_page_tit_area .typ_list li:not(:last-child) { border-left: 1px solid; } }

/*under_cont
--------------------*/
.under_cont .under_cont_tit { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; -webkit-align-items: center; align-items: center; }
.under_cont .under_cont_tit::after { content: ""; display: block; width: 100%; height: 1px; }
.under_cont .ytThum { aspect-ratio: 1.777777; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media print, screen and (min-width: 768px) { .under_cont { padding-top: 11.5rem; margin-top: -11.5rem; }
  .under_cont .under_cont_tit { font-size: 1.875rem; font-weight: 500; margin-bottom: 1.875rem; }
  .under_cont .under_cont_tit::after { margin-left: 0.9375rem; } }
@media only screen and (max-width: 767px) { .under_cont { padding-top: 12vw; margin-top: -12vw; }
  .under_cont .under_cont_tit { font-size: 0.975rem; font-weight: 500; margin-bottom: 4.5333333333vw; }
  .under_cont .under_cont_tit::after { margin-left: 1.6vw; } }

/*feature_cont
--------------------*/
.feature_cont .feature_box { overflow: hidden; }
.feature_cont .feature_box .img_area { overflow: hidden; }
.feature_cont .feature_box .img_area a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; }
.feature_cont .feature_box .img_area a::after { content: ""; display: block; background-size: 100% 100%; background-image: url("../img/pro/yt_btn02.png"); position: absolute; top: 50%; left: 50%; z-index: 0; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.feature_cont .feature_box .box_tit { line-height: 1.4; }
.feature_cont .feature_box .feature_box_btn { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.feature_cont .feature_box.new { position: relative; }
.feature_cont .feature_box.new::after { content: "NEW"; position: absolute; top: 0; left: 0; z-index: 0; color: #fff; background: #C8A700; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
@media print, screen and (min-width: 768px) { .feature_cont .feature_box_wrap { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 101.7857142857%; margin-left: -0.8928571429%; margin-right: -0.8928571429%; padding-bottom: 2.8125rem; }
  .feature_cont .feature_box { border-radius: 0.3125rem; margin-bottom: 1.5625rem; }
  .feature_cont .feature_box.new::after { width: 5.1875rem; height: 2.6875rem; border-radius: 0 0 0.3125rem 0; font-size: 1.5rem; font-weight: 500; }
  .feature_cont .feature_box .img_area a { -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
  .feature_cont .feature_box .img_area a img { -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
  .feature_cont .feature_box .img_area a::after { width: 6rem; height: 6rem; }
  .feature_cont .feature_box .img_area a:hover { opacity: 0.7; }
  .feature_cont .feature_box .img_area a:hover img { -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
  .feature_cont .feature_box .box_tit { font-size: 1.3125rem; font-weight: bold; padding-bottom: 0.625rem; }
  .feature_cont .feature_box .box_txt { font-size: 1.125rem; font-weight: 300; line-height: 1.6666666667; margin-top: calc(1.25rem - (((1em*1.6666666667) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.6666666667) - 1em)/2)); }
  .feature_cont .feature_box .feature_box_btn { width: 22.5rem; height: 4.0625rem; border-radius: 0.3125rem; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
  .feature_cont .box_S { width: 31.5789473684%; margin-left: 0.8771929825%; margin-right: 0.8771929825%; padding-bottom: 1.1875rem; position: relative; }
  .feature_cont .box_S .img_area { position: relative; width: 100%; height: 0; padding-top: 66.6666666667%; margin-bottom: 1.0625rem; }
  .feature_cont .box_S .img_area img { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit:cover; object-position:50% 50%; "; vertical-align: unset; }
  .feature_cont .box_S .txt_area { padding: 0 4.2222222222% 5.5rem; }
  .feature_cont .box_S .feature_box_btn { max-width: 91.5555555556%; position: absolute; left: 50%; z-index: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 1.1875rem; }
  .feature_cont .box_L { width: 98.2456140351%; margin-left: auto; margin-right: auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
  .feature_cont .box_L .img_area { position: relative; width: 50%; padding-top: 33.3571428571%; }
  .feature_cont .box_L .img_area img { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit:cover; object-position:50% 50%; "; vertical-align: unset; }
  .feature_cont .box_L .txt_area { width: 50%; padding: 1.1875rem 3.2142857143%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; justify-content: center; position: relative; }
  .feature_cont .box_L .txt_area .box_tit { margin-top: auto; }
  .feature_cont .box_L .txt_area .box_txt { margin-bottom: auto; }
  .feature_cont .box_L .txt_area .feature_box_btn { margin: 1.1875rem auto 0; } }
@media only screen and (max-width: 767px) { .feature_cont { padding-bottom: 8.9333333333vw; }
  .feature_cont .feature_box_wrap { width: 100%; }
  .feature_cont .feature_box { border-radius: 0.6666666667vw; position: relative; padding-bottom: 3.4666666667vw; }
  .feature_cont .feature_box.new::after { width: 11.0666666667vw; height: 5.7333333333vw; border-radius: 0 0 0.6666666667vw 0; font-size: 0.78rem; font-weight: 500; }
  .feature_cont .feature_box:not(:last-child) { margin-bottom: 8.2666666667vw; }
  .feature_cont .feature_box .img_area { position: relative; width: 100%; height: 53.7333333333vw; margin-bottom: 3.0666666667vw; }
  .feature_cont .feature_box .img_area a::after { width: 17.4666666667vw; height: 17.4666666667vw; }
  .feature_cont .feature_box .img_area img { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit:cover; object-position:50% 50%; "; vertical-align: unset; }
  .feature_cont .feature_box .txt_area { padding: 0 5.3333333333vw; }
  .feature_cont .feature_box .box_tit { font-size: 0.975rem; font-weight: bold; padding-bottom: 0.9333333333vw; }
  .feature_cont .feature_box .box_txt { font-size: 0.845rem; font-weight: 300; line-height: 1.7307692308; margin-top: calc(2.9333333333vw - (((1em*1.7307692308) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.7307692308) - 1em)/2)); }
  .feature_cont .feature_box .feature_box_btn { width: 64.6666666667vw; height: 11.6666666667vw; margin: 2.9333333333vw auto 0; border-radius: 0.6666666667vw; } }

/*sample_cont
--------------------*/
.sample_cont .sample_box_wrap { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.sample_cont .sample_box { overflow: hidden; }
.sample_cont .sample_box a { display: block; width: 100%; height: 100%; position: relative; }
.sample_cont .sample_box a img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit:cover; object-position:50% 50%; "; vertical-align: unset; }
.sample_cont .sample_box figure:not(.ytThum) { position: relative; width: 100%; height: 100%; }
@media print, screen and (min-width: 768px) { .sample_cont:not(:last-of-type) { margin-bottom: 1.875rem; }
  .sample_cont:last-of-type { margin-bottom: 4rem; }
  .sample_cont .sample_box { width: 23.5714285714%; aspect-ratio: 330/220; border-radius: 0.3125rem; }
  .sample_cont .sample_box:not(:nth-child(4n)) { margin-right: 1.9047619048%; }
  .sample_cont .sample_box:not(:nth-child(-n + 4)) { margin-top: 1.9047619048%; }
  .sample_cont .sample_box a figcaption { opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; position: absolute; bottom: 1.875rem; left: 0; z-index: 2; font-size: 1.125rem; font-weight: bold; line-height: 1.4; margin-top: calc(0px - (((1em*1.4) - 1em)/2)); margin-bottom: calc(0px - (((1em*1.4) - 1em)/2)); padding: 0 0.625rem; }
  .sample_cont .sample_box a:hover figcaption, .sample_cont .sample_box a:hover figure::before { opacity: 1; }
  .sample_cont .sample_box figure::before { opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; position: absolute; top: 0; left: 0; z-index: 1; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
  .sample_cont .sample_box figure figcaption { color: #fff; }
  .sample_cont .sample_box .ytThum figcaption { width: 84.38%; position: absolute; left: 50%; z-index: 2; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } }
@media only screen and (max-width: 767px) { .sample_cont:not(:last-of-type) { margin-bottom: 4vw; }
  .sample_cont:last-of-type { margin-bottom: 10.6666666667vw; }
  .sample_cont .sample_box { width: 48.5714285714%; aspect-ratio: 340/227; border-radius: 0.6666666667vw; }
  .sample_cont .sample_box:not(:nth-child(2n)) { margin-right: 2.8571428571%; }
  .sample_cont .sample_box:not(:nth-child(-n + 2)) { margin-top: 2.8571428571%; } }