@charset "UTF-8";
#contents { /* ------ Youtubeポップアップ ------ */ /* ------ Youtubeフロート ------ */ /* ------ Youtubeギャラリー ------ */ }

#contents .youtubeFloat .button, #contents .youtubeGalleryList_item-thumb .button { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; background-color: rgba(0, 0, 0, 0.6); border-radius: 38px; transform: translate(-50%, -50%); transition: all 0.3s ease; }

#contents .youtubeFloat .button:before, #contents .youtubeGalleryList_item-thumb .button:before { content: ''; position: absolute; top: 50%; left: 56%; display: block; width: 0; height: 0; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translate(-50%, -50%); }

#contents .youtubePopup { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; }

#contents .youtubePopup .player { position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; max-width: 960px; max-height: 540px; transform: translate(-50%, -50%); }

#contents .youtubePopup .player iframe { width: 100%; height: 100%; }

@media screen and (max-width: 767px) { #contents .youtubePopup .player { max-height: 47vw; } }

#contents .youtubePopup .close { position: absolute; top: 20px; right: 20px; display: block; width: 40px; height: 40px; }

#contents .youtubePopup .close:before, #contents .youtubePopup .close:after { content: ''; position: absolute; top: 18px; left: 0; right: 0; display: block; height: 1px; background-color: #fff; }

#contents .youtubePopup .close:before { transform: rotate(45deg); }

#contents .youtubePopup .close:after { transform: rotate(-45deg); }

#contents .youtubePopup_contact { max-width: 320px; height: 55px; margin: 30px auto 0; text-align: center; }

#contents .youtubePopup_contact a { position: relative; display: block; width: 100%; height: 100%; background-color: #ff892a; border-radius: 2px; color: #fff; font-size: 114.28%; line-height: 55px; box-sizing: border-box; backface-visibility: hidden; }

#contents .youtubePopup_contact a:after { position: absolute; top: 50%; right: 20px; content: url(/common/images/ico_pop_05.png); transform: translateY(-50%); }

#contents .youtubePopup_contact a:hover { text-decoration: none; }

@media screen and (min-width: 768px) { #contents .youtubePopup_contact a { transition: opacity 0.3s ease; }
  #contents .youtubePopup_contact a:hover { opacity: 0.7; } }

#contents .youtubeFloat { position: fixed; right: 0; bottom: 60px; width: 252px; z-index: 998; background-color: #fff; border: 1px solid #e2e2e2; }

@media screen and (max-width: 767px) { #contents .youtubeFloat { display: none; } }

#contents .youtubeFloat .title { position: relative; line-height: 32px; background-color: #edf4fb; color: #005ab4; text-align: center; font-weight: bold; }

#contents .youtubeFloat .annotation { padding-bottom: 5px; font-size: 8px; text-align: center; }

#contents .youtubeFloat .close { position: absolute; top: 0; right: 0; display: block; width: 32px; height: 32px; background-color: #d8e7f6; cursor: pointer; transition: opacity 0.3s ease; }

#contents .youtubeFloat .close:hover { opacity: 0.7; }

#contents .youtubeFloat .close:before, #contents .youtubeFloat .close:after { content: ''; position: absolute; top: 15px; left: 6px; display: block; width: 60%; height: 1px; background-color: #005ab4; }

#contents .youtubeFloat .close:before { transform: rotate(45deg); }

#contents .youtubeFloat .close:after { transform: rotate(-45deg); }

#contents .youtubeFloat a { position: relative; display: block; width: 240px; padding: 5px; }

#contents .youtubeFloat a:hover .button { background-color: #005ab4; }

#contents .youtubeFloat img { width: 100%; height: auto; }

@media screen and (max-width: 767px) { #contents .youtubeFloat { display: none; } }

#contents .youtubeGalleryArea { margin-bottom: 60px; }

#contents .youtubeGalleryArea .annotation { margin-top: 10px; font-size: 12px; }

@media screen and (max-width: 767px) { #contents .youtubeGalleryArea .contentsInner { padding-left: 0; padding-right: 0; }
  #contents .youtubeGalleryArea .blockDescription, #contents .youtubeGalleryArea .annotation { padding-right: 5.33333vw; padding-left: 5.33333vw; } }

#contents .youtubeGalleryRecommend { margin-bottom: 30px; padding-bottom: 25px; background-color: #fff; border: 3px solid #b0d3f7; border-radius: 6px; }

#contents .youtubeGalleryRecommend_header { padding: 20px 25px 15px; }

#contents .youtubeGalleryRecommend_title { position: relative; display: inline-block; font-size: 18px; font-weight: bold; }

#contents .youtubeGalleryRecommend_title::after { content: ''; display: block; background-color: #005ab4; width: 100%; height: 2px; margin-top: 2px; }

#contents .youtubeGalleryRecommend_txt { margin-top: 10px; color: #005ab4; font-size: 18px; font-weight: bold; }

#contents .youtubeGalleryList { display: flex; padding-right: 10px; padding-left: 10px; justify-content: center; }

@media screen and (max-width: 767px) { #contents .youtubeGalleryList { display: block; padding-right: 0; padding-left: 0; } }

#contents .youtubeGalleryList_wrap { padding: 10px 10px 25px; background-color: #eef0f2; border-radius: 6px; }

@media screen and (max-width: 767px) { #contents .youtubeGalleryList_wrap { padding-bottom: 30px; border-radius: 0; } }

#contents .youtubeGalleryList_item { flex: 0 1 50%; max-width: 100%; padding: 0 15px; }

@media screen and (max-width: 767px) { #contents .youtubeGalleryList_item { max-width: 430px; margin: 0 auto; }
  #contents .youtubeGalleryList_item:not(:last-child) { margin-bottom: 30px; } }

#contents .youtubeGalleryList_item-link:hover .button { background-color: #005ab4; }

#contents .youtubeGalleryList_item-thumb { position: relative; }

#contents .youtubeGalleryList_item-thumb.outline { border: 1px solid #dfdfdf; }

#contents .youtubeGalleryList_item-thumb img { width: 100%; height: auto; }

#contents .youtubeGalleryList_item-title { margin-top: 15px; }

@media screen and (max-width: 767px) { #contents .youtubeGalleryList_item-title { color: #333; } }

#contents .youtubeGalleryList_more { margin-top: 40px; }

#contents .youtubeGalleryList_more a { position: relative; display: block; max-width: 300px; height: 50px; margin: 0 auto; background-color: #005ab4; border-radius: 4px; color: #fff; font-weight: bold; font-size: 114.28%; line-height: 50px; text-align: center; transition: all 0.3s ease; }

@media screen and (min-width: 768px) { #contents .youtubeGalleryList_more a:hover { opacity: 0.7; text-decoration: none; } }

#contents .youtubeGalleryList_more a:after { content: ''; position: absolute; top: 50%; right: 20px; display: block; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); }

#contents .youtubeGalleryList_more a[target="_blank"]:after { content: url("/common/images/ico_pop_05.png"); width: auto; height: auto; border: 0; transform: translateY(-50%); }