/**************** COMMON ****************/ a:hover { text-decoration:none; } #page-top { } #page-top a { text-decoration: none; color: #fff; text-align: center; font-weight: bold; display: block; } #page-top a:hover { text-decoration: none; opacity:0.7; } @media only screen and (max-width:767px){ #page-top a,#page-top a img {width:30px; position: fixed; bottom: 100px; right: 10px;z-index: 10000;} } @media only screen and (min-width:768px){ #page-top a,#page-top a img {width:60px;position: fixed; bottom: 50px; right: 50px;z-index: 10000;} } /* 上からフェードイン */ .slide-top { opacity: 0; transform: translate(0, -20px); transition: all 0.5s ease-out; } /* 下からフェードイン */ .slide-bottom { opacity: 0; transform: translate(0, 20px); transition: all 0.5s ease-out; } /* 左からフェードイン */ .slide-left { opacity: 0; transform: translate(-20px, 0); transition: all 0.5s ease-out; } /* 右からフェードイン */ .slide-right { opacity: 0; transform: translate(20px, 0); transition: all 0.5s ease-out; } .slide-right02 { opacity: 0; transform: translate(20px, 0); transition: all 0.5s ease-out; } .slide-right03 { opacity: 0; transform: translate(20px, 0); transition: all 1.5s ease-out; } .slide-right04 { opacity: 0; transform: translate(20px, 0); transition: all 2s ease-out; } /*-----------TOPのの動き-------------*/ /*以下フェードイン表示の指定*/ .fadein { opacity: 0; animation: fadein 6s ease forwards; } @keyframes fadein { 100% { opacity: 1;} } /*以下遅延の指定*/ .txt01 {animation-delay: 0.2s;} .txt02 {animation-delay: 0.5s;} .txt03 {animation-delay: 0.8s;} .txt04 {animation-delay: 1.1s;} .txt05 {animation-delay: 1.5s;} .txt06 {animation-delay: 2.1s;} /*-----------TOP動画-------------*/ /**************** STORY TAB ****************/ input[type="radio"]{display:none;} .tab_area{ font-size:0; margin:0 0 15px 0; display: flex; flex-wrap:wrap-reverse; } .tab_area label{ line-height: 1; text-align: center; color: #fff; border-bottom: 3px solid #000; font-size:20px; font-family: "garamond-atf-text", serif; font-weight: 400; font-style: normal; cursor:pointer; margin:0 12px 10px 0; padding: 0; } .tab_panel{ width:100%; padding:0; display:none; box-sizing:border-box; } .tab_panel p{ font-size:14px; letter-spacing:1px; text-align:center; } /**/ #tab1:checked ~ .tab_area .tab1_label, #tab2:checked ~ .tab_area .tab2_label, #tab3:checked ~ .tab_area .tab3_label, #tab4:checked ~ .tab_area .tab4_label, #tab5:checked ~ .tab_area .tab5_label, #tab6:checked ~ .tab_area .tab6_label, #tab7:checked ~ .tab_area .tab7_label, #tab8:checked ~ .tab_area .tab8_label, #tab9:checked ~ .tab_area .tab9_label, #tab10:checked ~ .tab_area .tab10_label, #tab11:checked ~ .tab_area .tab11_label, #tab12:checked ~ .tab_area .tab12_label, #tab13:checked ~ .tab_area .tab13_label, #tab14:checked ~ .tab_area .tab14_label, #tab15:checked ~ .tab_area .tab15_label, #tab16:checked ~ .tab_area .tab16_label, #tab17:checked ~ .tab_area .tab17_label, #tab18:checked ~ .tab_area .tab18_label, #tab19:checked ~ .tab_area .tab19_label, #tab20:checked ~ .tab_area .tab20_label, #tab21:checked ~ .tab_area .tab21_label, #tab22:checked ~ .tab_area .tab22_label, #tab23:checked ~ .tab_area .tab23_label, #tab24:checked ~ .tab_area .tab24_label, #tab25:checked ~ .tab_area .tab25_label, #tab26:checked ~ .tab_area .tab26_label, #tab27:checked ~ .tab_area .tab27_label, #tab28:checked ~ .tab_area .tab28_label, #tab29:checked ~ .tab_area .tab29_label, #tab30:checked ~ .tab_area .tab30_label, #tab31:checked ~ .tab_area .tab31_label, #tab32:checked ~ .tab_area .tab32_label, #tab33:checked ~ .tab_area .tab33_label, #tab34:checked ~ .tab_area .tab34_label { color: #ceba1d;border-bottom: 3px solid #ceba1d; } #tab1:checked ~ .panel_area #panel1, #tab2:checked ~ .panel_area #panel2, #tab3:checked ~ .panel_area #panel3, #tab4:checked ~ .panel_area #panel4, #tab5:checked ~ .panel_area #panel5, #tab6:checked ~ .panel_area #panel6, #tab7:checked ~ .panel_area #panel7, #tab8:checked ~ .panel_area #panel8, #tab9:checked ~ .panel_area #panel9, #tab10:checked ~ .panel_area #panel10, #tab11:checked ~ .panel_area #panel11, #tab12:checked ~ .panel_area #panel12, #tab13:checked ~ .panel_area #panel13, #tab14:checked ~ .panel_area #panel14, #tab15:checked ~ .panel_area #panel15, #tab16:checked ~ .panel_area #panel16, #tab17:checked ~ .panel_area #panel17, #tab18:checked ~ .panel_area #panel18, #tab19:checked ~ .panel_area #panel19, #tab20:checked ~ .panel_area #panel20, #tab21:checked ~ .panel_area #panel21, #tab22:checked ~ .panel_area #panel22, #tab23:checked ~ .panel_area #panel23, #tab24:checked ~ .panel_area #panel24, #tab25:checked ~ .panel_area #panel25, #tab26:checked ~ .panel_area #panel26, #tab27:checked ~ .panel_area #panel27, #tab28:checked ~ .panel_area #panel28, #tab29:checked ~ .panel_area #panel29, #tab30:checked ~ .panel_area #panel30, #tab31:checked ~ .panel_area #panel31, #tab32:checked ~ .panel_area #panel32, #tab33:checked ~ .panel_area #panel33, #tab34:checked ~ .panel_area #panel34{display: block;} .tab1_label:hover, .tab2_label:hover, .tab3_label:hover, .tab4_label:hover, .tab5_label:hover, .tab6_label:hover, .tab7_label:hover, .tab8_label:hover, .tab9_label:hover, .tab10_label:hover, .tab11_label:hover, .tab12_label:hover, .tab13_label:hover, .tab14_label:hover, .tab15_label:hover, .tab16_label:hover, .tab17_label:hover, .tab18_label:hover, .tab19_label:hover, .tab20_label:hover, .tab21_label:hover, .tab22_label:hover, .tab23_label:hover, .tab24_label:hover, .tab25_label:hover, .tab26_label:hover, .tab27_label:hover, .tab28_label:hover, .tab29_label:hover, .tab30_label:hover, .tab31_label:hover, .tab32_label:hover, .tab33_label:hover, .tab34_label:hover { color: #fff; border-bottom: 3px solid #fff; } .slick-track{ margin:0; } .box{ box-sizing:border-box; padding:0; background:#000; position:relative; } .box img{ width:100%; height:auto; display:block; margin:0 auto; } button.slick-next{ display:block; } .slick-initialized .slick-slide { margin: 0; } /**************** PC ****************/ /* PC用 */ /**************** PC ****************/ @media only screen and (min-width:751px){ .tab_area label{ display:inline-block; text-align: center; font-size:30px; line-height: 1.2; margin:0 25px 0 0; } .panel_area { padding-top: 0; margin-bottom: 1.5em; } } /**************** MOBILE ****************/ /* モニター幅750px以下 */ /**************** MOBILE ****************/ @media only screen and (max-width:750px){ .panel_area { } }