Theme Name: With Kobe a, a:hover{ height:auto; } #BlockHeader{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:0 auto;padding:30px 20px;width:100%;max-width:1380px;position:relative;box-sizing:border-box;} #BlockHeader h1{display:block;margin:0;padding:0;width:323px;height:31px;background:url(/common/img/h1_2.png) top left no-repeat;box-sizing:border-box;text-indent:-9999px;flex-shrink:0;} #BlockHeader h1 a{display:block;width:100%;height:100%;} #BlockHeaderUtil{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin:0;padding:0;height:31px;} #BlockSearch{display:block;margin:0 15px 0 0;width:260px;height:30px;position:relative;} #SearchForm{display:block;background:#F4F4F4;padding:0 35px 0 10px;border:0;border-radius:15px;width:100%;height:30px;float:none;box-sizing:border-box;} #SearchButton{display:block;position:absolute;top:7px;right:10px;margin:0;width:14px;height:16px;background:url(/common/img/btn_search2.png) top left no-repeat;border:none;cursor:pointer;float:none;padding:0;} #BlockFontMod{display:block;margin:0;padding:0;height:31px;} #BlockFontMod ul{display:flex;justify-content:flex-start;align-items:center;margin:0;padding:0;height:31px;} #BlockFontMod ul li{display:block;margin:0 0 0 8px;padding:0;border:0;float:none;list-style:none;} #BlockFontMod ul li a{display:block;padding:5px 8px;text-decoration:none;font-size:1.3rem;border:1px solid transparent;} #BlockFontMod ul li a{color:#999999;font-weight:normal;} #BlockFontMod ul li a.is-active{color:#4690E8;font-weight:bold;border-color:#4690E8;} #BlockFontMod ul li a:hover{color:#4690E8;font-weight:bold;} #HamburgerButton{display:none;position:absolute;top:50%;right:20px;transform:translateY(-50%);width:44px;height:44px;padding:10px;border:none;background-color:transparent;cursor:pointer;z-index:1100;box-sizing:border-box;} .hamburger-box{display:inline-block;position:relative;width:100%;height:100%;} .hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{content:'';display:block;position:absolute;left:0;width:100%;height:3px;background-color:#333;border-radius:2px;transition:transform 0.3s ease, top 0.3s ease, background-color 0.3s ease;} .hamburger-inner{top:50%;transform:translateY(-50%);} .hamburger-inner::before{top:-8px;} .hamburger-inner::after{top:8px;} nav#GlobalNav{display:block;margin:0 0 30px 0;padding:0;width:100%;height:50px;} nav#GlobalNav ul{display:flex;justify-content:flex-start;flex-wrap:wrap;align-items:stretch;margin:0 auto;padding:0;width:100%;max-width:1380px;height:50px;list-style:none;box-sizing:border-box;} nav#GlobalNav ul li{display:block;margin:0;padding:0;border:0;flex-grow:1;height:50px;position:relative;min-width:130px;} nav#GlobalNav ul li a{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0 10px;box-sizing:border-box;color:#333333;font-size:1.6rem;text-decoration:none;border-left:1px solid #E2E2E2;text-align:center;transition:background-color 0.2s;} nav#GlobalNav ul li:first-child a{border-left:none;} nav#GlobalNav ul li a:hover{background-color:#eee;} nav#GlobalNav ul li.nav07{width:177px;flex-grow:0;flex-shrink:0;} nav#GlobalNav ul li.nav07 a{background:#E8492A;color:#FFFFFF;border-left:1px solid #E2E2E2;} nav#GlobalNav ul li.nav07 a:hover{background:#c73e20;} @media screen and (max-width:1380px){#BlockHeaderUtil{display:none;}} @media screen and (max-width:1300px){#HamburgerButton{display:block;}nav#GlobalNav{display:none;position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:70px 0 20px 0;background-color:rgba(255,255,255,0.98);border:none;overflow-y:auto;z-index:1000;box-sizing:border-box;}nav#GlobalNav ul{display:block;flex-direction:column;width:100%;max-width:none;height:auto;padding:0;align-items:stretch;}nav#GlobalNav ul li{display:block;width:100%;height:auto;flex:none;min-width:auto;}nav#GlobalNav ul li a{display:block;width:100%;height:auto;padding:18px 20px;text-align:left;border-left:none;border-top:1px solid #eee;font-size:1.6rem;justify-content:flex-start;align-items:center;}nav#GlobalNav ul li:first-child a{border-top:none;}nav#GlobalNav ul li.nav07{width:100%;}nav#GlobalNav ul li.nav07 a{text-align:center;border-left:none;}nav#GlobalNav ul li a:hover{background-color:#f0f0f0;}nav#GlobalNav ul li.nav07 a:hover{background:#c73e20;}} body.menu-open #HamburgerButton .hamburger-inner{background-color:transparent;} body.menu-open #HamburgerButton .hamburger-inner::before{top:0;transform:rotate(45deg);background-color:#333;} body.menu-open #HamburgerButton .hamburger-inner::after{top:0;transform:rotate(-45deg);background-color:#333;} @media screen and (max-width:1300px){body.menu-open nav#GlobalNav{display:block;}body.menu-open{overflow:hidden;} #BlockHeader{padding:30px 80px 30px 20px;} #BlockHeader h1{display:block;margin:0;padding:0;width:100%;height:31px;background:url(/common/img/h1_2.png) top left no-repeat; background-size:contain; box-sizing:border-box;text-indent:-9999px;flex-shrink:0;} } footer { display:block; width:100%; margin:0; padding:0; } #BlockBannerF { display:block; margin:0 0 70px 0; padding:30px 0; width:100%; height:136px; background:none; box-sizing:border-box; } #BlockFooter{ margin:0; padding:60px 0 0 0; width:100%; background:none; color:#333333; border-top:1px solid #E2E2E2;} #BlockFooterInner{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:60px; padding:0; width:1380px; } #BlockFooterInnerL{ display:block; margin:0; padding:0; width:350px; } #BlockFooterLogo { display:block; margin:0; margin-bottom:40px; padding:0; } #BlockFooterAddress { margin:0 0 40px 0; padding:0; color:#333333; font-size:1.4rem; font-weight:700; } @media screen and (max-width:1380px) { footer { display:block; width:100%; margin:0; padding:0 20px; box-sizing:border-box; } #BlockBannerF { display:block; margin:0 0 70px 0; padding:30px 0; width:100%; height:136px; background:none; box-sizing:border-box; } #BlockFooter{ margin:0; padding:60px 0 0 0; width:100%; background:none; color:#333333; border-top:1px solid #E2E2E2;} #BlockFooterInner{ display:block; margin:0 auto; padding:0; width:100%; max-width:1380px; } #BlockFooterInnerL{ display:block; margin:0 0 40px 0; padding:0; width:100%; text-align:center; } #BlockFooterLogo { display:block; margin:0 auto; margin-bottom:20px; padding:0; } #BlockFooterAddress { margin:0 0 40px 0; padding:0; color:#333333; font-size:2.0rem; line-height:150%; font-weight:700; } } #BlockFooterInnerR{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0; padding:0; width:calc(100% - 350px); } #BlockFooterInnerR ul{ display:block; margin:0 30px 0 0; padding:0; width:235px; } #BlockFooterInnerR ul:last-of-type{ display:block; margin:0; padding:0; width:235px; } #BlockFooterInnerR ul li{ display:block; margin:0 0 40px 0; padding:0; } #BlockFooterInnerR ul li a, #BlockFooterInnerR ul li h3{ display:block; margin:0 0 30px 0; padding:0 0 20px 0; border-bottom:1px solid #E2E2E2; color:#333333; text-decoration:none; font-weight:700; font-size:1.6rem;} #BlockFooterInnerR ul li ul{ display:block margin:0; padding:0; } #BlockFooterInnerR ul li ul li{ display:block; margin:0 0 5px 0; padding:0; } #BlockFooterInnerR ul li ul li a{ display:block; margin:0; padding:0 0 0 30px; border-bottom:0; background: url(/common/img/arrow02.png) top 5px left no-repeat; font-size:1.4rem; } #BlockFooterInnerR ul li.red a{ color:#E8492A;} @media screen and (max-width: 1300px) { #BlockFooterInnerR { display: block; margin: 0; padding: 0; width: 100%; }#BlockFooterInnerR ul li{ margin-bottom:0;} #BlockFooterInnerR ul:last-of-type{ display:block; margin:0; padding:0; width:100%; } #BlockFooterInnerR > ul { display: block; margin: 0; padding: 0; width: 100% !important; box-sizing: border-box; } #BlockFooterInnerR > ul:last-of-type { margin: 0; padding: 0; width: 100%; } #BlockFooterInnerR > ul > li:has(h3) { margin-bottom: 30px; } #BlockFooterInnerR > ul > li > h3 { display: block; position: relative; margin: 0; padding: 15px 0 25px 0; border-bottom: 1px solid #E2E2E2; color: #333333; text-decoration: none; font-weight: 700; font-size: 1.6rem; cursor: pointer; } #BlockFooterInnerR > ul > li > h3::after { content: '+'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 2.0rem; font-weight: bold; color: #333333; } #BlockFooterInnerR > ul > li.is-open > h3::after { content: '−'; } #BlockFooterInnerR > ul > li > ul { display: none; margin: 15px 0 0 0 !important; padding: 0 0 0 15px !important; width: auto; } #BlockFooterInnerR > ul > li > ul li { display: block; margin: 0 0 8px 0; padding: 0; } #BlockFooterInnerR > ul > li > ul li a { display: block; margin: 0; padding: 0 0 0 25px; border-bottom: 0; background: url(/common/img/arrow02.png) top 5px left no-repeat; font-size: 1.4rem; font-weight: normal; color: #333333; } #BlockFooterInnerR ul li a{ } #BlockFooterInnerR ul li.red a{ color:#E8492A; } } #BlockFooterCopy{margin:0; padding:30px 0 0 0; width:100%; color:#333333; border-top:1px solid #E2E2E2;} #BlockFooterCopyInner{ display:flex; justify-content:space-between; flex-wrap:wrap; margin:0 auto; padding:0; width:100%; max-width:1380px;} #BlockFooterCopyInner ul{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0; padding:0; list-style:none;} #BlockFooterCopyInner ul li{ margin:0 15px 0 0; padding:0;} #BlockFooterCopyInner ul li a{ margin:0; padding:0; color:#333333; text-decoration:none; font-size:1.2rem; font-weight:700;} @media screen and (max-width:1380px) { #BlockFooterCopy{margin:0; padding:20px 0 0 0; width:100%; color:#333333; border-top:1px solid #E2E2E2;} #BlockFooterCopyInner{ display:block; margin:0 auto; padding:0; width:100%; max-width:1380px; text-align:center;} #BlockFooterCopyInner ul{ display:flex; justify-content:center; flex-wrap:wrap; margin:0 0 10px 0; padding:0; list-style:none;} #BlockFooterCopyInner ul li{ margin:0 15px 0 0; padding:0;} #BlockFooterCopyInner ul li a{ margin:0; padding:0; color:#333333; text-decoration:none; font-size:1.2rem; font-weight:700;} } #BlockFooterSNS { display:block; margin:0; padding:0; } #BlockFooterSNS ul{ margin:0; padding:0; width:220px; list-style:none;} #BlockFooterSNS ul li{ margin:0 0 10px 0; padding:0;} #BlockFooterSNS ul li a{ display:block; margin:0; padding:8px 0; border:1px solid #E2E2E2; border-radius:15px; text-align:center; color:#333333; text-decoration:none;} #BlockFooterSNS ul li.googlemap a{ background: url(/common/img/icon_googlemap.png) center left 20px no-repeat;} #BlockFooterSNS ul li.facebook a{ background: url(/common/img/icon_facebook.png) center left 20px no-repeat;} #BlockFooterSNS ul li.youtube a{ background: url(/common/img/icon_youtube.png) center left 20px no-repeat;} @media screen and (max-width:1380px) { #BlockFooterSNS { display:none; margin:0; padding:0; } } #BlockFooterSNSsp { display:none; margin:0; padding:0; } @media screen and (max-width:1380px) { #BlockFooterSNSsp { display:block; margin:0; padding:0; } #BlockFooterSNSsp ul{ margin:0 auto !important; padding:0; width:220px !important; list-style:none;} #BlockFooterSNSsp ul li{ margin:0 auto; margin-bottom:14px; padding:0;} #BlockFooterSNSsp ul li a{ display:block; margin:0; padding:8px 0; border:1px solid #E2E2E2; border-radius:15px; text-align:center; color:#333333; text-decoration:none;} #BlockFooterSNSsp ul li.googlemap a{ background: url(/common/img/icon_googlemap.png) center left 20px no-repeat;} #BlockFooterSNSsp ul li.facebook a{ background: url(/common/img/icon_facebook.png) center left 20px no-repeat;} #BlockFooterSNSsp ul li.youtube a{ background: url(/common/img/icon_youtube.png) center left 20px no-repeat;} } #SplashB { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:70px; padding:0; width:100%; text-align:center; overflow:hidden; } #SplashBInner { display:block; margin:0 auto; margin-bottom:70px; padding:0; width:75%; text-align:center; } #SplashBInner2 { display:flex; justify-content:flex-start; align-items:flex-end; flex-wrap:wrap; margin:0 auto; margin-bottom:70px; padding:0; width:25%; text-align:center; background:url(/common/img/bg_splashBIInner2.jpg) top right no-repeat; background-size:cover; } #BlockTop01 { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:120px; padding:0; width:100%; max-width:1300px; } #BlockTop01L { display:block; margin:0 60px 0 0; padding:0; width:870px; } #BlockTop01LInner { display:block; margin:0 0 30px 0; padding:0; box-sizing:border-box; height:100%; } #BlockTop01L h3 { position: relative; color: #333; font-size: 2.2rem; font-weight: bold; text-align: left; margin-bottom:40px; } #BlockTop01L h3::before { content: ''; position: absolute; top: 48%; left: 0; right: 0; border-top: 1px solid #333; } #BlockTop01L h3 > span { position: relative; display: inline-block; padding: 0 8px; background-color: #fff; } #CatMenu { display: block; margin: 40px 0; padding: 0; width: 100%; box-sizing: border-box; position: relative; } #CatMenuList { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; width: 100%; box-sizing: border-box; } #CatMenuList li { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } #CatMenuList li a { display: inline-block; padding: 0 0 3px 0; color: #999999; font-size: 1.6rem; text-decoration: none; cursor: pointer; border-bottom: solid 3px transparent; } #CatMenuList li a.active, #CatMenuList li a:hover { color: #4690E8; border-bottom: solid 3px #4690E8; text-decoration: none; } #CatMenuTrigger { display: none; width: 100%; padding: 10px 15px; font-size: 1.6rem; text-align: left; background-color: #f8f8f8; border: 1px solid #ccc; cursor: pointer; position: relative; box-sizing: border-box; } #CatMenuTrigger::after{ content: '▼'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 0.8em; color: #666; } @media (max-width: 1300px) { #CatMenuList { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; border: 1px solid #ccc; border-top: none; z-index: 100; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); flex-direction: column; justify-content: flex-start; align-items: stretch; } #CatMenu.is-open #CatMenuList { display: block; } #CatMenuList li { width: 100%; margin: 0; } #CatMenuList li a { display: block; padding: 12px 15px; color: #333; border-bottom: 1px solid #eee; font-size: 1.6rem; } #CatMenuList li:last-child a { border-bottom: none; } #CatMenuList li a.active, #CatMenuList li a:hover { background-color: #f0f0f0; color: #4690E8; border-bottom-color: #eee; } #CatMenuList li a.active { border-bottom: 1px solid #eee; } #CatMenuList li:last-child a.active{ border-bottom: none; } #CatMenuTrigger { display: block; } #CatMenu.is-open #CatMenuTrigger::after { content: '▲'; } } @media screen and (max-width:1300px) { #BlockTop01 { display:block; margin:0 auto; margin-bottom:60px; padding:0 20px; width:100%; max-width:1300px; box-sizing:border-box; } #BlockTop01L { display:block; margin:0 0 30px 0; padding:0; width:100%; max-width:none; } } #BlockTopTopics { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockTopTopics dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:flex-start; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockTopTopics dl dt{display:flex;justify-content:flex-start;flex-wrap:wrap;margin:0 15px 0 0;padding:0;font-size:1.6rem;font-weight:bold;width:245px;} #BlockTopTopics dl dt span{display:flex;justify-content:center;align-items:center;margin:0 0 0 10px;padding:0;font-size:1.1rem;font-weight:normal;width:120px;height:auto;line-height:170%;text-align:center;border:1px solid #E2E2E2;border-radius:10px;} #BlockTopTopics dl dt span.genre01{color:#000000} #BlockTopTopics dl dt span.genre02{color:#9E2DE0} #BlockTopTopics dl dt span.genre03{color:#E26BE8} #BlockTopTopics dl dt span.genre04{color:#EA9E6A} #BlockTopTopics dl dt span.genre05{color:#E81F1F} #BlockTopTopics dl dt span.genre06{color:#AEC94C} #BlockTopTopics dl dt span.genre07{color:#4690E8} #BlockTopTopics dl dd{display:block;margin:0;padding:0;width:calc(100% - 260px)} #BlockTopTopics dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTopTopics a{ color:#444444; text-decoration:none; } @media screen and (max-width:1300px) { #BlockTopTopics { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockTopTopics dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockTopTopics dl dt{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 10px 0; padding:0; font-size:1.6rem; font-weight:bold; width:245px; } #BlockTopTopics dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockTopTopics dl dt span.genre01{color:#000000} #BlockTopTopics dl dt span.genre02{color:#9E2DE0} #BlockTopTopics dl dt span.genre03{color:#E26BE8} #BlockTopTopics dl dt span.genre04{color:#EA9E6A} #BlockTopTopics dl dt span.genre05{color:#E81F1F} #BlockTopTopics dl dt span.genre06{color:#AEC94C} #BlockTopTopics dl dt span.genre07{color:#4690E8} #BlockTopTopics dl dd{ display:block; margin:0; padding:0; width:100% } #BlockTopTopics dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTopTopics a{ color:#444444; text-decoration:none; } } #BlockTop01R { display:block; margin:0; padding:0; width:370px; box-sizing:border-box; } #BlockTop01RInner { display:block; margin:0 0 30px 0; padding:29px; width:370px; border:1px solid #E2E2E2; box-sizing:border-box; height:100%; } #BlockTop01RInner h3{ display:block; margin:0 0 20px 0; } #BlockTop01RInner dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockTop01RInner dl dt{ display:block; margin:0 0 15px 0; padding:0; font-size:1.6rem; font-weight:700; } #BlockTop01RInner dl dd{ display:block; margin:0; padding:0; } #BlockTop01RInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTop01RInner a{ color:#444444; text-decoration:none; } @media screen and (max-width:1300px) { #BlockTop01R { display:block; margin:0; padding:0; width:100%; box-sizing:border-box; } #BlockTop01RInner { display:block; margin:0 0 30px 0; padding:29px; width:100%; border:1px solid #E2E2E2; box-sizing:border-box; height:100%;text-align:center } #BlockTop01RInner img{ display:block; margin:0 0 20px 0; } #BlockTop01RInner dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; text-align:left; } #BlockTop01RInner dl dt{ display:block; margin:0 0 15px 0; padding:0; font-size:1.6rem; font-weight:700; } #BlockTop01RInner dl dd{ display:block; margin:0; padding:0; } #BlockTop01RInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTop01RInner a{ color:#444444; text-decoration:none; } } .btn_more{ display:flex; justify-content:flex-end; flex-wrap:wrap; align-content:center; color:#333333; text-decoration:none;} .btn_more span{ display:block; font-size:1.6rem; margin:2px 10px 0 0; color:#333333; text-decoration:none; } #BlockTop02 { display:block; margin:0 0 100px 0; padding:0; } #BlockTop02Inner { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:0; border-top:1px solid #E2E2E2; width:100%; max-width:1300px; } #BlockTop02 dl{ display:block; margin:0; padding:0 30px 0 30px; text-align:center; width:325px; border-right:1px solid #E2E2E2; border-bottom:1px solid #E2E2E2; box-sizing:border-box; } #BlockTop02 dl:nth-of-type(4n){ border-right:0; } #BlockTop02 dl dt{ display:flex; justify-content:center; align-items:center; margin:0; padding:0; height:220px; box-sizing:border-box;} #BlockTop02 dl dd{ } #BlockTop02 dl dd h3 a{ display:flex; justify-content:space-between; align-items:center; margin:0 0 40px 0; padding:0; text-align:left; font-size:2.4rem; box-sizing:border-box; letter-spacing:2px; text-decoration:none;} #BlockTop02 dl dd h3.cat01 a{ color:#F48CA0;} #BlockTop02 dl dd h3.cat02 a{ color:#AEC94C;} #BlockTop02 dl dd h3.cat03 a{ color:#E5C12C;} #BlockTop02 dl dd h3.cat04 a{ color:#53CDD3;} #BlockTop02 dl dd h3.cat05 a{ color:#DD4426;} #BlockTop02 dl dd h3.cat06 a{ color:#6AC682;} #BlockTop02 dl dd h3.cat07 a{ color:#EA9154;} #BlockTop02 dl dd p{ display:block; margin:0; padding:0; text-align:left; font-size:1.6rem; box-sizing:border-box;} @media screen and (max-width:1300px) { #BlockTop02 { display:block; margin:0; padding:0; } #BlockTop02Inner { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:50px; padding:0; border-top:1px solid #E2E2E2; width:100%; max-width:1300px; } #BlockTop02 dl{ display:flex; flex-direction:column; justify-content:center; flex-wrap:wrap; margin:0; padding:20px 10px; border-left:1px solid #E2E2E2; border-right:1px solid #E2E2E2; text-align:center; width:calc(50% - 2px); height:auto; border-right:0; border-bottom:1px solid #E2E2E2; box-sizing:border-box; } #BlockTop02 dl:nth-of-type(2n), #BlockTop02 dl:last-of-type{border-right:1px solid #E2E2E2;} #BlockTop02 dl dt{ height:auto; min-height:220px;} #BlockTop02 dl dd{ display:block; width:100%; margin:0;} #BlockTop02 dl dd span{ display:block; margin-bottom:20px; text-align:center;} #BlockTop02 dl dd img{ display:block; margin-left: auto;} #BlockTop02 dl dd h3 a{ display:block; margin:0; padding:0; text-align:left; font-size:2.2rem; box-sizing:border-box; letter-spacing:2px; text-decoration:none;} #BlockTop02 dl dd h3.cat01 a{ color:#F48CA0;} #BlockTop02 dl dd h3.cat02 a{ color:#AEC94C;} #BlockTop02 dl dd h3.cat03 a{ color:#E5C12C;} #BlockTop02 dl dd h3.cat04 a{ color:#53CDD3;} #BlockTop02 dl dd h3.cat05 a{ color:#DD4426;} #BlockTop02 dl dd h3.cat06 a{ color:#6AC682;} #BlockTop02 dl dd h3.cat07 a{ color:#EA9154;} } #BlockTop03 { display:block; margin:0; margin-bottom:100px; padding:0; } #BlockTop04 { display:block; margin:0 auto; margin-bottom:100px; padding:0; width:100%; max-width:1300px; } #BlockTop04 h3{ display:block; margin:0 auto; margin-bottom:50px; padding:0; color:#333333; font-size:2.4rem; font-weight:700; text-align:center; } #BlockTop04 ul{ display:flex; justify-content:center; flex-wrap:wrap; margin:0 auto; padding:0; width:100%; max-width:720px; border:1px solid #E2E2E2; box-sizing:border-box;} #BlockTop04 ul li{ display:block; margin:0 auto; padding:0; width:100%; max-width:359px; box-sizing:border-box; } #BlockTop04 ul li a{ display:block; margin:0 auto; padding:40px 30px; width:100%; box-sizing:border-box; background: url(/common/img/arrow03.png) center right 30px no-repeat; color:#333333; text-decoration:none; font-size:1.6rem; font-weight:700; letter-spacing:3px; } #BlockTop04 ul li:first-of-type a{ border-right:1px solid #E2E2E2;} @media screen and (max-width:720px) { #BlockTop04 { display:block; margin:0 auto; margin-bottom:100px; padding:0 20px; width:100%; max-width:1300px; box-sizing:border-box; } #BlockTop04 h3{ display:block; margin:0 auto; margin-bottom:50px; padding:0; color:#333333; font-size:2.4rem; font-weight:700; text-align:center; } #BlockTop04 ul{ display:block; margin:0 auto; padding:0; width:100%; max-width:720px; border:1px solid #E2E2E2; box-sizing:border-box;} #BlockTop04 ul li{ display:block; margin:0 auto; padding:0; width:100%; max-width:none; box-sizing:border-box; } #BlockTop04 ul li a{ display:block; margin:0 auto; padding:40px 30px; width:100%; box-sizing:border-box; background: url(/common/img/arrow03.png) center right 30px no-repeat; color:#333333; text-decoration:none; font-size:1.6rem; font-weight:700; letter-spacing:3px; text-align:center; } #BlockTop04 ul li:first-of-type a{ border-right:0; border-bottom:1px solid #E2E2E2;} } #BlockContents2 { display:block; margin:0 auto; margin-bottom:50px; padding:0; width:100%; max-width:1380px; } #Title2 h2{ display:flex; justify-content:center; align-items:center; margin:0 auto; margin-bottom:80px; padding:20px 0; width:100%; box-sizing:border-box; text-align:center; font-size:2.4rem; font-weight:bold; color:#FFFFFF; background: url(/common/img/bg_title2.png) center center no-repeat; width:100%; max-width:1380px; height:300px; } #Title2 h2 span{ display:block; margin:0 auto; padding:0; text-align:center; font-size:2.4rem; font-weight:700; color:#FFFFFF; line-height: 200%; } @media screen and (max-width:1380px) { #Title2 h2{ display:flex; justify-content:center; align-items:center; margin:0 auto; margin-bottom:40px; padding:20px 0; width:100%; box-sizing:border-box; text-align:center; font-size:1.8rem; font-weight:bold; color:#FFFFFF; background: url(/common/img/bg_title2.png) center center no-repeat; width:100%; max-width:1380px; height:300px; } #Title2 h2 span{ display:block; margin:0 auto; padding:0; text-align:center; font-size:1.8rem; font-weight:700; color:#FFFFFF; line-height: 200%; } } #BlockMerge{ display:block; margin:0 auto; padding:0; box-sizing:border-box; max-width:1300px;} #BlockMerge h3{ display:block; margin:0 0 60px 0; font-size:2.0rem; font-weight:700; color:#333333; text-align:center; line-height:200%; } #BlockMergeInner{ display:flex; justify-content:flex-start; flex-wrap:wrap; flex-direction:row-reverse; padding:0 40px; margin-bottom:200px; box-sizing:border-box; } #BlockMergeOverlay{ display: block; margin: 0; padding: 0; position: absolute; top: 1100px; width: 100vw; left: 0; } #BlockMergeOverlay img{ width:100%; height:auto; } #BlockMergeInnerL{ display:block; margin:0; padding:0 70px 50px 0; width:calc(100% - 630px); box-sizing:border-box; background: url(/common/img/bg_merge.png) bottom left no-repeat;} #BlockMergeInnerL p{ display:block; margin:0; padding:0 0 80px 0; font-size:1.6rem; color:#333333; line-height:220%;} #BlockMergeInnerL img{ display:none;} #BlockMergeInnerR{ display:block; margin:0; padding: 0 0 80px 0; width:630px;} @media screen and (max-width:1300px) { #BlockMerge{ display:block; margin:0 auto; padding:0 20px; box-sizing:border-box; max-width:1300px; box-sizing:border-box;} #BlockMerge h3{ display:block; margin:0 0 40px 0; font-size:1.8rem; font-weight:700; color:#333333; text-align:center; line-height:200%; } #BlockMergeInner{ display:block; padding:0; margin-bottom:60px; box-sizing:border-box; } #BlockMergeOverlay{ display: none; margin: 0; padding: 0; position: absolute; top: 1100px; width: 100vw; left: 0; } #BlockMergeOverlay img{ width:100%; height:auto; } #BlockMergeInnerL{ display:block; margin:0 0 30px 0; padding:0; width:100%; box-sizing:border-box; background: mpme; background-size:contain;} #BlockMergeInnerL p{ display:block; margin:0; padding:0; font-size:1.6rem; color:#333333; line-height:220%;} #BlockMergeInnerL img{ display:block;} #BlockMergeInnerR{ display:block; margin:0 0 10px 0; padding: 0; width:100%;} } #BlockMergeInner2{ display:block; padding:0 40px; margin-bottom:200px; box-sizing:border-box; position:relative; z-index:10000; } #BlockMergeInner2 h3 { position: relative; color: #333; font-size: 2.2rem; font-weight: bold; text-align: left; margin-bottom:40px; } #BlockMergeInner2 h3::before { content: ''; position: absolute; top: 48%; left: 0; right: 0; border-top: 1px solid #333; } #BlockMergeInner2 h3 > span { position: relative; display: inline-block; padding: 0 8px; background-color: #fff; } #BlockMergeTopics { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockMergeTopics dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockMergeTopics dl dt{ display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin:0 15px 0 0; padding:0; font-size:1.6rem; font-weight:bold; width:235px; } #BlockMergeTopics dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockMergeTopics dl dt span{color:#468EE6} #BlockMergeTopics dl dd{ display:block; margin:0; padding:0; width:calc(100% - 250px) } #BlockMergeTopics dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockMergeTopics a{ color:#444444; text-decoration:none; } @media screen and (max-width:1300px) { #BlockMergeInner2{ display:block; padding:0; margin-bottom:60px; box-sizing:border-box; position:relative; z-index:10000; } #BlockMergeInner2 h3 { position: relative; color: #333; font-size: 2.2rem; font-weight: bold; text-align: left; margin-bottom:40px; } #BlockMergeInner2 h3::before { content: ''; position: absolute; top: 48%; left: 0; right: 0; border-top: 1px solid #333; } #BlockMergeInner2 h3 > span { position: relative; display: inline-block; padding: 0 8px; background-color: #fff; } #BlockMergeTopics { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockMergeTopics dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockMergeTopics dl dt{ display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; margin:0 0 10px 0; padding:0; font-size:1.6rem; font-weight:bold; width:100%; } #BlockMergeTopics dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockMergeTopics dl dt span{color:#468EE6} #BlockMergeTopics dl dd{ display:block; margin:0; padding:0; width:100%;} #BlockMergeTopics dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockMergeTopics a{ color:#444444; text-decoration:none; } } #BlockMergeInner3{ display:block; padding:60px 40px; margin-bottom:100px; box-sizing:border-box; border:1px solid #E0E0E0;} #BlockMergeInner3 ul{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:0; box-sizing:border-box; max-width:998px;border:1px solid #E0E0E0; } #BlockMergeInner3 ul li{ display:block; padding:0; margin:0 box-sizing:border-box; border:1px solid #E0E0E0;} #BlockMergeInner3 ul li a{ display:flex; justify-content:center; align-items:center; padding:0; margin:0 box-sizing:border-box; width:330px; height:90px; color:#333333; text-decoration:none; letter-spacing:2px; background: url(/common/img/arrow03.png) center right 20px no-repeat;} @media screen and (max-width:1300px) { #BlockMergeInner3{ display:block; padding:0; margin-bottom:60px; box-sizing:border-box; border:0;} #BlockMergeInner3 ul{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; padding:0; box-sizing:border-box; width:100%; max-width:666px; border:1px solid #E0E0E0; } #BlockMergeInner3 ul li{ display:block; padding:0; margin:0 box-sizing:border-box; border:1px solid #E0E0E0;width:100%; max-width:330px;} #BlockMergeInner3 ul li a{ display:flex; justify-content:center; align-items:center; padding:0; margin:0 box-sizing:border-box; width:100%; max-width:330px; height:90px; color:#333333; text-decoration:none; letter-spacing:2px; background: url(/common/img/arrow03.png) center right 20px no-repeat;} } @media screen and (max-width:710px) { #BlockMergeInner3{ display:block; padding:0; margin-bottom:60px; box-sizing:border-box; border:0;} #BlockMergeInner3 ul{ display:block; margin:0 auto; padding:0; box-sizing:border-box; width:100%; max-width:330px; border:1px solid #E0E0E0; } #BlockMergeInner3 ul li{ display:block; padding:0; margin:0 box-sizing:border-box; border:1px solid #E0E0E0;width:100%; max-width:330px;} #BlockMergeInner3 ul li a{ display:flex; justify-content:center; align-items:center; padding:0; margin:0 box-sizing:border-box; width:100%; max-width:330px; height:90px; color:#333333; text-decoration:none; letter-spacing:2px; background: url(/common/img/arrow03.png) center right 20px no-repeat;} } /*==================================================================== # swiper ====================================================================*/ #BlockBannerF { height: 100%; position:relative; width: 100%; margin:0 auto; overflow:hidden; width:100%; max-width:1300px; margin-bottom:60px; } @media screen and (max-width:1300px) { } .swiper-container, { position: relative; overflow: hidden; width: 100%; max-width:1200px; margin:0 auto; }.swiper-containerb { position: relative; width: 100%; max-width:1200px; margin:0 auto; overflow:hidden; } .swiper-wrapper{ width:100%; margin:0 auto; } .swiper__box { max-width: 100%; display: block; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; margin-bottom:20px; } .gallery-slider .swiper-slide{ width:450px !important; margin:0 10px;} .gallery-slider .swiper-wrapper{ transition-timing-function: linear; } @media (max-width: 1200px){ .gallery-slider { margin-bottom:60px;} } #SplashB{ position:relative; } #SplashBInner .swiper-container { overflow: hidden; max-width:100%; } #SplashBInner2 .swiper-container { overflow: hidden; max-width:100%; } #SplashB .swiper-wrapper { transition-property: transform; transform:none !important; box-sizing: content-box; } #SplashC{ position:relative; } #SplashCInner .swiper-container { overflow: hidden; max-width:100%; } #SplashC .swiper-container { overflow: hidden; max-width:100%; } #SplashC .swiper-wrapper { display: flex; transition-property: transform; transform:none !important; box-sizing: content-box; } .swiper-splash .swiper-slide img { display: block; max-width: 100%; height: auto; } .swiper-splash2 .swiper-slide img { display: block; max-width: 100%; height: auto; } .swiper-splash3 .swiper-slide img { display: block; max-width: 100%; height: auto; } .swiper-splash .swiper-slide .SplashTitle{ display:block; position:absolute; bottom:80px; left:40px; } #SplashB h2{ display:block; margin-bottom:20px; color:#FFFFFF; font-size:5.0rem; font-weight:normal; text-align:left; line-height:3.5rem;} #SplashB h2 span{ font-size:2.6rem;line-height:100%;font-weight:normal;} #SplashB h3{ display:block; color:#FFFFFF; font-size:1.5rem; font-weight:bold; text-align:left; line-height:3.0rem; line-height:150%;} [class^="swiper-button-"]::after{ content: ""; } /*矢印のサイズ調整*/ [class^="swiper-button-"]{ width: 32px; height: 21px; } /*矢印の位置調整*/ .swiper-button-next{ right: 0; margin-top:-10px; } .swiper-button-prev{ left: 0;margin-top:-10px; } #SplashC{ display:none;} @media screen and (max-width:1300px) { .swiper-splash .swiper-slide .SplashTitle h2{ display:block; margin-bottom:20px; color:#FFFFFF; font-size:5.0rem; font-weight:normal; text-align:left; line-height:3.5rem;} .swiper-splash .swiper-slide .SplashTitle h2 span{ font-size:2.6rem;line-height:100%;font-weight:normal;} .swiper-splash .swiper-slide .SplashTitle h3{ display:block; color:#FFFFFF; font-size:1.2rem; font-weight:bold; text-align:left; line-height:3.0rem; line-height:150%;} #SplashB{ display:none !important;} #SplashC{ display:block; margin-bottom:30px; width:100%;} #SplashC img{ display:block; width:100%; height:auto;} #SplashC ul li{width: 100%; flex-shrink: 0; position:relative;} #SplashC .SplashTitle{ display:block; position:absolute; bottom:40px; left:40px; } #SplashC .SplashTitle h2{ display:block; color:#FFFFFF; font-size:5.0rem; font-weight:normal; text-align:left; line-height:4.0rem;} #SplashC .SplashTitle h2 span{ font-size:2.6rem;line-height:100%;font-weight:normal;} #SplashC h3{ display:block; color:#000000; font-size:2.2rem; font-weight:normal; text-align:left; line-height:3.0rem; line-height:190%; padding:20px 20px 10px 20px; box-sizing:border-box;} } .swiper-splash .swiper-slide { width: 100% !important; } .swiper-splash .swiper-slide-active{ width: 100% !important; } .swiper-splash2 .swiper-slide { width: 100% !important; padding-left:60px; } .swiper-splash2 .swiper-slide-active{ width: 100% !important; } .swiper-splash3 .swiper-slide { width: 100% !important; } .swiper-splash3 .swiper-slide-active{ width: 100% !important; } @media screen and (max-width:450px) { .swiper-splash .swiper-slide .SplashTitle h2{ display:block; margin-bottom:20px; color:#FFFFFF; font-size:5.0rem; font-weight:normal; text-align:left; line-height:3.5rem;} .swiper-splash .swiper-slide .SplashTitle h2 span{ font-size:2.6rem;line-height:100%;font-weight:normal;} .swiper-splash .swiper-slide .SplashTitle h3{ display:block; color:#FFFFFF; font-size:1.2rem; font-weight:bold; text-align:left; line-height:3.0rem; line-height:150%;} #SplashB{ display:none !important;} #SplashC{ display:block; margin-bottom:30px; width:100%;} #SplashC img{ display:block; width:100%; height:auto;} #SplashC ul li{width: 100%; flex-shrink: 0; position:relative;} #SplashC .SplashTitle{ display:block; position:absolute; bottom:20px; left:20px; } #SplashC .SplashTitle h2{ display:block; color:#FFFFFF; font-size:3.0rem; font-weight:normal; text-align:left; line-height:3.0rem;} #SplashC .SplashTitle h2 span{ font-size:1.7rem;line-height:100%;font-weight:normal;} #SplashC h3{ display:flex; justify-content:flex-start; align-content:flex-start; flex-wrap:wrap; color:#000000; font-size:1.4rem; font-weight:bold; text-align:left; line-height:190%; padding:10% 40% 10px 10px; box-sizing:border-box; background:url(/common/img/splash/splash02sp.jpg) top right no-repeat; background-size:contain;} .swiper-container3{ width:90%;} } .swiper-banner{ border-left: 1px solid #E2E2E2; box-sizing:border-box; padding-left: 6px;} .swiper-banner .swiper-slide{ border-left:1px solid #E2E2E2; padding-bottom:0; box-sizing:border-box;margin-left: -1px; } .swiper-banner .swiper-slide .swiper__box{ margin-bottom:0; } .BlockTxt ul.list_01{ display:block; margin:0 0 20px 0; padding:0 0 0 30px; font-size:1.1rem; color:#1F1F1F; font-weight:normal; letter-spacing:2px; list-style:inside; } .BlockTxt ul.list_01 li{ display:inline-block; margin:0 0 10px 0; padding:0 0 0 1.2rem; text-indent:-1.2rem; background:none; } #BlockTopicsList { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:120px; padding:0; width:100%; max-width:1300px; } #BlockTopicsListOuter { display:block; margin:0 60px 0 0; padding:0; width:1300px; overflow:hidden; } #BlockTopicsListInner { display:block; margin:0 0 30px 0; padding:0; box-sizing:border-box; height:100%; } #BlockTopicsListOuter h3 { position: relative; color: #333; font-size: 2.2rem; font-weight: bold; text-align: left; margin-bottom:40px; } #BlockTopicsListOuter h3::before { content: ''; position: absolute; top: 48%; left: 0; right: 0; border-top: 1px solid #333; } #BlockTopicsListOuter h3 > span { position: relative; display: inline-block; padding: 0 8px; background-color: #fff; } @media screen and (max-width:1300px) { #BlockTopicsList { display:block; margin:0 auto; margin-bottom:60px; padding:0 20px; width:100%; max-width:1300px; box-sizing:border-box; } #BlockTopicsListOuter { display:block; margin:0 0 30px 0; padding:0; width:100%; max-width:none; } } #BlockTopicsListInner { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockTopicsListInner dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:flex-start; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockTopicsListInner dl dt{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 15px 0 0; padding:0; font-size:1.6rem; font-weight:bold; width:245px; } #BlockTopicsListInner dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockTopicsListInner dl dt span.genre01{color:#000000} #BlockTopicsListInner dl dt span.genre02{color:#9E2DE0} #BlockTopicsListInner dl dt span.genre03{color:#E26BE8} #BlockTopicsListInner dl dt span.genre04{color:#EA9E6A} #BlockTopicsListInner dl dt span.genre05{color:#E81F1F} #BlockTopicsListInner dl dt span.genre06{color:#AEC94C} #BlockTopicsListInner dl dt span.genre07{color:#4690E8} #BlockTopicsListInner dl dd{ display:block; margin:0; padding:0; width:calc(100% - 260px) } #BlockTopicsListInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTopicsListInner a{ color:#444444; text-decoration:none; } @media screen and (max-width:1300px) { #BlockTopicsListInner { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockTopicsListInner dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockTopicsListInner dl dt{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 10px 0; padding:0; font-size:1.6rem; font-weight:bold; width:245px; } #BlockTopicsListInner dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockTopicsListInner dl dt span.genre01{color:#000000} #BlockTopicsListInner dl dt span.genre02{color:#9E2DE0} #BlockTopicsListInner dl dt span.genre03{color:#E26BE8} #BlockTopicsListInner dl dt span.genre04{color:#EA9E6A} #BlockTopicsListInner dl dt span.genre05{color:#E81F1F} #BlockTopicsListInner dl dt span.genre06{color:#AEC94C} #BlockTopicsListInner dl dt span.genre07{color:#4690E8} #BlockTopicsListInner dl dd{ display:block; margin:0; padding:0; width:100% } #BlockTopicsListInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockTopicsListInner a{ color:#444444; text-decoration:none; } } #BlockMachikatsuList { display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 auto; margin-bottom:120px; padding:0; width:100%; max-width:1300px; } #BlockMachikatsuOuter { display:block; margin:0 60px 0 0; padding:0; width:1300px; overflow:hidden; } #BlockMachikatsuInner { display:block; margin:0 0 30px 0; padding:0; box-sizing:border-box; height:100%; } #BlockMachikatsuOuter h3 { position: relative; color: #333; font-size: 2.2rem; font-weight: bold; text-align: left; margin-bottom:40px; } #BlockMachikatsuOuter h3::before { content: ''; position: absolute; top: 48%; left: 0; right: 0; border-top: 1px solid #333; } #BlockMachikatsuOuter h3 > span { position: relative; display: inline-block; padding: 0 8px; background-color: #fff; } @media screen and (max-width:1300px) { #BlockMachikatsuList { display:block; margin:0 auto; margin-bottom:60px; padding:0 20px; width:100%; max-width:1300px; box-sizing:border-box; } #BlockMachikatsuOuter { display:block; margin:0 0 30px 0; padding:0; width:100%; max-width:none; } } #BlockMachikatsuInner { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockMachikatsuInner dl{ display:flex; justify-content:flex-start; flex-wrap:wrap; align-items:flex-start; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockMachikatsuInner dl dt{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 15px 0 0; padding:0; font-size:1.6rem; font-weight:bold; width:125px; } #BlockTopicsListInner dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockMachikatsuInner dl dt span.genre01{color:#000000} #BlockMachikatsuInner dl dt span.genre02{color:#9E2DE0} #BlockMachikatsuInner dl dt span.genre03{color:#E26BE8} #BlockMachikatsuInner dl dt span.genre04{color:#EA9E6A} #BlockMachikatsuInner dl dt span.genre05{color:#E81F1F} #BlockMachikatsuInner dl dt span.genre06{color:#AEC94C} #BlockMachikatsuInner dl dt span.genre07{color:#4690E8} #BlockMachikatsuInner dl dd{ display:block; margin:0; padding:0; width:calc(100% - 140px) } #BlockMachikatsuInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockMachikatsuInner a{ color:#444444; text-decoration:none; } @media screen and (max-width:1300px) { #BlockMachikatsuInner { display:block; margin:0; padding:0; width:100%; background:none; text-align:left; box-sizing:border-box; } #BlockMachikatsuInner dl{ display:block; margin:0 0 20px 0; padding:0 0 20px 0; list-style:none; border-bottom:1px dotted #E2E2E2; } #BlockMachikatsuInner dl dt{ display:flex; justify-content:flex-start; flex-wrap:wrap; margin:0 0 10px 0; padding:0; font-size:1.6rem; font-weight:bold; width:125px; } #BlockMachikatsuInner dl dt span{ display:flex; justify-content:center; align-items:center; margin:0 0 0 10px; padding:0; font-size:1.1rem; font-weight:normal; width:120px; height:auto; line-height:170%; text-align: center; border:1px solid #E2E2E2; border-radius:10px; } #BlockMachikatsuInner dl dt span.genre01{color:#000000} #BlockMachikatsuInner dl dt span.genre02{color:#9E2DE0} #BlockMachikatsuInner dl dt span.genre03{color:#E26BE8} #BlockMachikatsuInner dl dt span.genre04{color:#EA9E6A} #BlockMachikatsuInner dl dt span.genre05{color:#E81F1F} #BlockMachikatsuInner dl dt span.genre06{color:#AEC94C} #BlockMachikatsuInner dl dt span.genre07{color:#4690E8} #BlockMachikatsuInner dl dd{ display:block; margin:0; padding:0; width:100% } #BlockMachikatsuInner dl dd:hover{ display:block; margin:0; padding:0; text-decoration:none; } #BlockMachikatsuInner a{ color:#444444; text-decoration:none; } } .pager{margin-top:30px;} .pager .page-numbers{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;} .pager .page-numbers li{margin:0;padding:0;} .pager .page-numbers a.page-numbers, .pager .page-numbers span.page-numbers{ transition:opacity 0.5s ease; display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border:1px solid currentColor; background:#4690e8; color:#FFFFFF !important; border-radius:6px; text-decoration:none; line-height:1; font-size:1.4rem; box-sizing:border-box; } .pager .page-numbers span.current{font-weight:normal;pointer-events:none;background:#1e4fa3;} .pager .page-numbers a.page-numbers:hover{opacity:0.5;} .pager .page-numbers a.prev, .pager .page-numbers a.next{min-width:auto;padding:0 14px;} .pager .page-numbers .disabled{opacity:0.4;pointer-events:none;}