/**************** COMMON ****************/ /* #page-top ボタンタグのリセットCSS */ #page-top { border: none; cursor: pointer; outline: none; padding: 0; appearance: none; position: fixed; bottom: 50px; right: 50px; z-index: 10000; } #page-top a { text-decoration: none; color: #fff; text-align: center; font-weight: bold; display: block; transition: transform 0.3s ease; } #page-top a:hover { text-decoration: none; transform: translateY(-10px); } #page-top a img { width: 75px; height: auto; } @media only screen and (max-width: 767px) { #page-top { bottom: 100px; right: 10px; } #page-top a img { width: 50px; } } @media only screen and (min-width: 768px) { #page-top a img { width: 75px; } } /* フェード/スライドアニメーション */ .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; } .fadein { opacity: 0; animation: fadein 4s 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: 0.2s; } .txt06 { animation-delay: 2.1s; } /**************** STORY TAB ****************/ input[type="radio"] { display: none; } /* タブエリア */ .tab_area { display: flex; flex-wrap: wrap-reverse; justify-content: flex-start; font-size: 0; margin: 1rem auto; gap: 1rem; } @media only screen and (max-width: 751px) { .tab_area label { display: inline-block; text-align: center; font-size: 22px; font-family: "yu-mincho-pr6n", sans-serif; font-weight: 700; font-style: normal; color: #fff; cursor: pointer; padding: 0 10px; box-sizing: border-box; transition: all 0.3s ease; } } @media only screen and (min-width: 751px) { .tab_area label { display: inline-block; line-height: 1; text-align: center; color: #fff; font-size: 34px; font-family: "yu-mincho-pr6n", sans-serif; font-weight: 700; font-style: normal; cursor: pointer; padding: 10px; box-sizing: border-box; transition: all 0.3s ease; } } /* 選択状態（色変化） */ #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, #tab35:checked ~ .tab_area .tab35_label, #tab36:checked ~ .tab_area .tab36_label, #tab37:checked ~ .tab_area .tab37_label, #tab38:checked ~ .tab_area .tab38_label, #tab39:checked ~ .tab_area .tab39_label, #tab40:checked ~ .tab_area .tab40_label, #tab41:checked ~ .tab_area .tab41_label, #tab42:checked ~ .tab_area .tab42_label, #tab43:checked ~ .tab_area .tab43_label, #tab44:checked ~ .tab_area .tab44_label, #tab45:checked ~ .tab_area .tab45_label{ color: #fff; background-color: #c58623; } /**************** パネルエリア ****************/ .tab_panel { width: 100%; padding: 0; display: none; box-sizing: border-box; } #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, #tab35:checked ~ .panel_area #panel35, #tab36:checked ~ .panel_area #panel36, #tab37:checked ~ .panel_area #panel37, #tab38:checked ~ .panel_area #panel38, #tab39:checked ~ .panel_area #panel39, #tab40:checked ~ .panel_area #panel40, #tab41:checked ~ .panel_area #panel41, #tab42:checked ~ .panel_area #panel42, #tab43:checked ~ .panel_area #panel43, #tab44:checked ~ .panel_area #panel44, #tab45:checked ~ .panel_area #panel45 { display: block; } @media only screen and (min-width: 751px) { .panel_area { padding-top: 1em; margin-bottom: 2em; } } /**************** slickやbox ****************/ .slick-track{ margin:0; } .box{ box-sizing:border-box; padding:0; position:relative; } .box img{ width:100%; height:auto; display:block; margin:0 auto; } button.slick-next{ display:block; } .slick-initialized .slick-slide { margin: 0; } /**************** MOBILE ****************/ @media only screen and (min-width: 768px) and (max-width: 1024px) { #page-top { border: none; cursor: pointer; outline: none; padding: 0; appearance: none; position: fixed; bottom: 50px; right: 20px; z-index: 10000; } } @media only screen and (min-width: 751px) and (max-width: 1024px) { .tab_area label { font-family: "yu-mincho-pr6n", sans-serif; font-weight: 400; font-style: normal; font-size: 25px; padding: 12px 14px; } }