@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; }

#contents .youtubeGalleryList { display: flex; padding: 35px 10px; background-color: #eef0f2; justify-content: center; }

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

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

@media screen and (max-width: 767px) { #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 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.youtube_left::after{content: "";display: block;width: 470px;}