@charset "UTF-8";
.bgimg_library {
background-image: url("/asset/img/library/cat_mainimg.jpg");
}
/* ライブラリートップ ------------------------- */
#library_photo_menu {
margin-bottom: 44px;
}
#lib_ph_menu, 
#lib_mv_menu {
display: flex;
flex-wrap: wrap;
}
#lib_ph_menu li {
width: 268px;
margin: 0 36px 36px 0;
}
#lib_ph_menu li a {
display: block;
}
#lib_ph_menu li:nth-child(4n) {
margin-right: 0px;
}
#lib_ph_menu .ahover_ul {
position: absolute;
right: 0;
bottom: 0;
font-size: 1.5rem;
font-weight: bold;
padding: 6px 0 0 12px;
height: 40px;
background-color: #f9f7f5;
width: 226px;
}
#lib_ph_menu li a:hover {
opacity: 1;
}
#lib_ph_menu li a:hover .ahover_ul {
opacity: 1;
color: #2ea7e0;
}
#lib_ph_menu li a:hover .ahover_ul::after {
transform: scale(1, 1);
}
#lib_mv_menu li {
font-size: 1.6rem;
}
#lib_mv_menu li a {
border: solid 1px #d4d4d4;
display: block;
padding: 16px 20px;
position: relative;
}
#lib_mv_menu li a:hover {
border: solid 1px #2ea7e0;
opacity: 1;
}
#lib_mv_menu li:first-child {
margin-right: 36px;
width: 572px;
}
#lib_mv_menu li:first-child a {
background-image: linear-gradient(-45deg, #edf7fd 30px, transparent 0);
}
#lib_mv_menu li:first-child a:hover {
color: #2ea7e0;
}
#lib_mv_menu li:nth-child(2) {
width: 342px;
background-color: #3c3c3c;
color: #fff;
}
#lib_mv_menu li:nth-child(2) a:hover {
background-color: #2ea7e0;
}
#lib_mv_menu li:nth-child(2) h3 {
font-weight: normal;
}
#lib_mv_menu h3 i {
margin-right: 16px;
}
#lib_mv_menu li:nth-child(2)  h3 i {
width: 22px;
height: 22px;
vertical-align: -4px;
}
#library_guide_wrap h4, 
#library_kiyaku_wrap h4 {
margin-bottom: 40px;
}
#library_guide_wrap {
margin-bottom: 60px;
}
#library_kiyaku_wrap {
position: relative;
}
#lib_kiyaku {
position: absolute;
top: -70px;
left: 0;
}
.library_guide {
padding: 50px;
background-color: #fff;
}
.library_guide p {
font-size: 1.5rem;
margin-bottom: 20px;
}
.lib_guide_con:not(:last-child) {
margin-bottom: 20px;
}
.lib_guide_con div {
background-color: #f5f1ed;
padding: 40px;
font-weight: bold;
position: relative;
}
.lib_guide_con .btn01 {
width: 400px;
background-color: #2ea7e0;
font-size: 1.6rem;
text-align: left;
padding: 14px 20px;
position: absolute;
right: 40px;
bottom:40px;
}
.lib_guide_con .btn01 i {
width: 18px;
height: 18px;
vertical-align: -3px;
}
.lib_kiyaku_con dt {
border-bottom: 1px dotted #d4d4d4;
border-top: 1px dotted #d4d4d4;
font-size: 1.6rem;
padding-top: 15px;
padding-bottom: 15px;
font-weight: bold;
}
.lib_kiyaku_con dd {
padding-top: 30px;
padding-left: 30px;
}
.lib_kiyaku_con ul {
padding-left: 20px;
padding-bottom: 50px;
list-style-type: disc;
}
.lib_kiyaku_con ul li {
list-style-type: disc;
}
#library_kiyaku p {
margin-bottom: 30px;
}
#library_kiyaku span {
display: block;
padding-top: 30px;
border-top:solid 1px #d4d4d4;
text-align: right;
}
/* ライブラリーカテゴリアーカイブ ------------------------- */
.lib_guide_ttl {
display: flex;
justify-content: space-between;
height: 60px;
background-color: #f9f7f5;
font-size: 1.6rem;
line-height: 60px;
cursor: pointer;
padding: 0 15px 0 24px;
}
.lib_guide_ttl div {
font-size: 1.8rem;
font-weight: bold;
}
.sserch_arrow {
display: block;
width: 30px;
height: 30px;
background-color: #2ea7e0;
margin-top: 15px;
}
.sserch_arrow i {
display: block;
width: 12px;
height: 12px;
margin: 8px auto 0;
}
#lib_guide_box .library_guide, 
#lib_menu_box .library_guide {
background-color: #fff;
border-bottom: 10px solid #f9f7f5;
border-left: 10px solid #f9f7f5;
border-right: 10px solid #f9f7f5;
padding: 40px 40px;
}
#lib_menu_box {
margin-bottom: 20px;
}
.lib_menu_ul {
display: flex;
flex-wrap: wrap;
}
.lib_menu_ul li {
width: calc((100% - 80px) / 5);
margin: 0 20px 10px 0;
}
.lib_menu_ul li:nth-child(5n) {
margin-right: 0px;
}
.lib_menu_ul .ahover_ul {
font-size: 1.5rem;
font-weight: bold;
padding-top: 4px;
height: 40px;
}
.lib_menu_ul .ahover_ul i {
width: 14px;
height: 14px;
}
.lib_menu_ul .btn02 {
padding: 0px;
line-height: 40px;
height: 40px;
}

/* -------------------------- */

.open_wrapper{ overflow: hidden; }
.open_contents{ opacity: 0; }
.open .open_contents{ opacity: 1; }
.open_wrapper,
.open_contents{
transition:all 0.3s ease 0s;
}
.lib_guide_ttl i{ transition:transform 0.3s ease 0s; }
.open .lib_guide_ttl i{ transform: rotate(180deg); }

/* -------------------------- */

.library_list {
margin-bottom: 14px;
}
.library_list .list_item {
border: solid 1px #d4d4d4;
position: relative;
}
.library_list .img_wrap {
height: 268px;
background-color: #f5f1ed;
display: flex;
align-items: center;
position: relative;
}
.library_list .list_item img {
max-width: 240px;
max-height: 240px;
height: auto;
width: auto;
margin: 0 auto;
}
.library_list .img_wrap span {
position: absolute;
right: 0;
bottom:0;
display: block;
color: #fff;
background-color: #e6893e;
font-weight: bold;
line-height: 1;
padding: 6px 8px;
}
.spot_list .list_item:nth-child(4n) {
margin-right: 0px;
}
.list_item .txt_wrap {
padding: 20px 20px 70px;
}
.list_item h3 {
margin-bottom: 12px;
}
.list_item .btn_wrap {
display: block;
width: 170px;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
bottom: 20px;
font-weight: bold;
}
.list_item .btn_wrap a {
border-radius: 15px;
padding: 8px;
}
.library_list .list_item:nth-child(4n) {
    margin-right: 0px;
}
.list_item .lib_youtube,
.list_item .youtube_on{
width: 240px;
margin: auto;
}
.list_item .youtube_on iframe{
width: 100%;
height: auto;
}
#library_detail_wrap .youtube.youtube_on iframe{
width: 570px!important;
}
/* ライブラリー詳細 ------------------------- */
#library_detail_wrap {
padding: 60px;
}
.libd_item_wrap {
width: 570px;
}
.libd_txt_wrap {
width: 440px;
}
.libd_txt_wrap h2 {
padding: 0 0 20px 0;
line-height: 1.6;
}
.libd_txt_wrap p {
font-size: 1.5rem;
margin-bottom: 30px;
}
.libd_item_info {
border-top: solid 1px #d4d4d4;
margin-bottom: 36px;
}
.libd_item_info dl {
border-bottom: solid 1px #d4d4d4;
display: flex;
justify-content: space-between;
padding: 14px 0;
}
#spot_dinfo dl dt {
width: 110px;
font-size: 1.5rem;
}
#spot_dinfo dl dd {
width: calc( 100% - 110px );
font-size: 1.5rem;
padding-left: 20px;
}
.libd_link_btn {
display: flex;
justify-content: space-between;
}
.libd_link_btn li {
width: calc( (100% - 20px) / 2 );
}
.libd_link_btn li a {
display: block;
font-weight: bold;
}
.libd_link_btn li a i {
width: 16px;
height: 16px;
}
.libd_link_btn li a i.libdic_youtube {
vertical-align: -2px;
}
.libd_link_btn li:first-child a {
border:solid 1px #d4d4d4;
height: 40px;
line-height: 40px;
text-align: center;
}
.libd_link_btn li:last-child a {
background-color: #3c3c3c;
color: #fff;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 1.5rem;
}
.libd_txt_wrap span {
display: block;
color: #fff;
width: 100px;
text-align: center;
background-color: #e6893e;
font-weight: bold;
line-height: 1;
padding: 6px 8px;
margin-bottom: 10px;
}

/* ---------------------- */