/*---------------------------------------------------- #top --------------------------------------------------- */ #top{ position: relative; width: 100%; height: 100%; overflow: hidden; background: url(../img/top/visual.jpg) right top,url(../img/top/cover02.svg) no-repeat center center; background-blend-mode: Luminosity; background-size: cover; } #top .cover{ position: absolute; top: 0; left:0; width: 100%; height: 100%; background: url(../img/top/cover01.svg) no-repeat center center; background-size: cover; text-indent: -9999px; } #top .menu{ position: absolute; top: 72.5%; left: 0; width: 100%; letter-spacing: -0.4em; text-align: center; } #top .menu li{ margin: 0 12px; font-size: 14px; letter-spacing: normal; display: inline-block; } #top .menu li:nth-child(1), #top .menu li:nth-child(2), #top .menu li:nth-child(3), #top .menu li:nth-child(4), #top .menu li:nth-child(5), #top .menu li:nth-child(6), #top .menu li:nth-child(7), #top .menu li:nth-child(8), #top .menu li:nth-child(9){ opacity: 0; -webkit-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); } #top .menu.view li:nth-child(1){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(2){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(3){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(4){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(5){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(6){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(7){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(8){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu.view li:nth-child(9){ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0%,0px) rotate(0deg); -webkit-transition: all 0.5s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.5s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: all 0.5s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 0.5s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.5s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #top .menu li a{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #top .menu li a:hover{ color: #FFF; } #top .sns{ position: absolute; top: 80%; left: 0; width: 100%; letter-spacing: -0.4em; text-align: center; opacity: 0; -webkit-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg); } #top .sns.view{ opacity: 1; -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg); -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg); -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg); -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg); transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #top .sns li{ margin: 0 12px; font-size: 18px; letter-spacing: normal; display: inline-block; } #top .sns li a{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #top .sns li a:hover{ color: #FFF; } #top a.scroll{ width: 40px; height: 36px; display: block; position: absolute; bottom: 5%; left: 50%; margin-left: -20px; background: url(../img/top/scroll.png) no-repeat bottom; text-align: center; font-size: 10px; color: #FFF; line-height: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #top a.scroll:hover{ -webkit-transform: scale3d(1,1,1) translate3d(0px,10px,0px); -moz-transform: scale3d(1,1,1) translate3d(0px,10px,0px); -ms-transform: scale3d(1,1,1) translate3d(0px,10px,0px); -o-transform: scale3d(1,1,1) translate3d(0px,10px,0px); transform: scale3d(1,1,1) translate3d(0px,10px,0px); } @media only screen and (max-width: 375px) { #top{ position: relative; width: 100%; height: 100%; overflow: hidden; background: url(../img/top/visual_sp.jpg) center center,url(../img/top/cover02_sp.svg) no-repeat center center; background-blend-mode: Luminosity; background-size: cover; } #top .cover{ position: absolute; top: 0; left:0; width: 100%; height: 100%; background: url(../img/top/cover01_sp.svg) no-repeat center center; background-size: cover; text-indent: -9999px; } #top .menu{ display: none; } #top .sns{ display: none; } #top a.scroll{ width: 40px; height: 36px; display: block; position: absolute; bottom: 18.99%; left: 20px; margin-left: 0px; background: url(../img/top/scroll.png) no-repeat bottom; text-align: center; font-size: 10px; color: #FFF; line-height: 1; } #top .cover_sp{ position: absolute; top: 0; left:0; width: 100%; height: 100%; background: url(../img/top/top_cover.png) no-repeat center bottom; background-size: contain; } } /*---------------------------------------------------- #topNews --------------------------------------------------- */ #topNews{ position: relative; width: 100%; background: #8cdcd2; padding: 45px 0; text-align: center; color: #FFF; } #topNews h2{ font-size: 26px; margin-bottom: 40px; } #topNews h2 span{ display: block; font-size: 8px; padding-top: 4px; } #topNews .list{ overflow: hidden; letter-spacing: -0.4em; } #topNews .list .column{ width: 300px; letter-spacing: normal; display: inline-block; margin: 0 20px; vertical-align: top; position: relative; } #topNews .list .column a{ text-align: left; } #topNews .list .column a figure, #topNews .list .column a .noImage { width: 100%; height: 220px; background: #FFF; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #topNews .list .column a figure img{ width: 100%; height: auto; opacity: 0; } #topNews .list .column a:hover figure, #topNews .list .column a:hover .noImage{ opacity: 0.5; } #topNews .list .column a .noImage { background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #topNews .list .column .date{ font-size: 20px; line-height: 1; text-align: left; color: #000; } #topNews .list .column .date .category, #topNews .list .column .date .category a{ color: #FFF; } #topNews .list .column .title{ font-size: 13px; line-height: 180%; } @media only screen and (max-width: 375px) { #topNews{ width: auto; padding:20px 0; position: relative; z-index: 1; padding-bottom: 230px; } #topNews h2{ position: absolute; top: -60px; left: 20px; text-align: left; font-size: 26px; } #topNews h2 span{ font-size: 8px; padding-top: 4px; } #topNews .list .column{ width: 100%; margin: 0; position: relative; } #topNews .list > .column > a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } #topNews .list > .column .textArea { width: 100%; display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #topNews .list .column:last-child{ margin-bottom: 0px; } #topNews .list .column a figure{ width: 100%; height: 220px; overflow: hidden; margin-bottom: 0; } #topNews .list .column a figure img{ display: none; } #topNews .list .column a .noImage { margin: 0; } #topNews .list .column .date{ margin-bottom: 5px; padding: 0 15px; } #topNews .list .column .date a { color: #8cdcd2; display: block; } #topNews .list .column .title{ padding: 0 15px; color: #fff; } #topNews .list .column .date .category { display: none; } } /*---------------------------------------------------- #topSchedule --------------------------------------------------- */ #topSchedule{ position: relative; width: 100%; background: #e6e650; padding: 45px 0; text-align: center; color: #FFF; } #topSchedule h2{ font-size: 26px; margin-bottom: 40px; } #topSchedule h2 span{ display: block; font-size: 8px; padding-top: 4px; } #topSchedule .list{ overflow: hidden; letter-spacing: -0.4em; } #topSchedule .list .column{ width: 300px; letter-spacing: normal; display: inline-block; margin: 0 20px; vertical-align: top; position: relative; } #topSchedule .list .column:nth-child(3n){ margin-right: 0%; } #topSchedule .list .column a{ text-align: left; } #topSchedule .list .column a figure, #topSchedule .list .column a .noImage{ width: 100%; height: 220px; background: #FFF; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #topSchedule .list .column a figure img{ width: 100%; height: auto; opacity: 0; } #topSchedule .list .column a:hover figure, #topSchedule .list .column a:hover .noImage{ opacity: 0.5; } #topSchedule .list .column a .noImage{ background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #topSchedule .list .column .date{ font-size: 20px; line-height: 1; text-align: left; color: #000; } #topSchedule .list .column .date .category, #topSchedule .list .column .date .category a{ color: #FFF; } #topSchedule .list .column .title{ font-size: 13px; line-height: 180%; } @media only screen and (max-width: 375px) { #topSchedule{ width: auto; padding:20px 0 0; position: relative; z-index: 2; } #topSchedule .header{ background: url(../img/top/schedule_title.png) no-repeat bottom; background-size: contain; position: absolute; top: -230px; left: 0px; width: 100%; height: 230px; } #topSchedule h2{ position: absolute; bottom: 25px; left: 20px; text-align: left; font-size: 26px; margin-bottom: 0px; } #topSchedule .list .column{ width: 100%; margin: 0; } #topSchedule .list .column:last-child{ margin-bottom: 0px; } #topSchedule .list > .column > a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } #topSchedule .list .column a figure{ width: 100%; height: 220px; overflow: hidden; margin-bottom: 0; } #topSchedule .list .column a .noImage { margin: 0; } #topSchedule .list .column a figure img{ display: none; } #topSchedule .list > .column .textArea { width: 100%; display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #topSchedule .list .column .date{ margin-bottom: 5px; padding: 0 15px; } #topSchedule .list .column .date a { color: #e6e650; display: block; } #topSchedule .list .column .date .category { display: none; } #topSchedule .list .column .title{ padding: 0 15px; color: #fff; } } /*---------------------------------------------------- #topSocial --------------------------------------------------- */ #topSocial{ position: relative; width: 100%; background: #a08c8c; padding: 45px 0; text-align: center; color: #FFF; } #topSocial h2{ font-size: 26px; margin-bottom: 40px; } #topSocial h2 span{ display: block; font-size: 8px; padding-top: 4px; } #topSocial .list{ overflow: hidden; letter-spacing: -0.4em; } #topSocial .list .column01{ width: 500px; height: 160px; letter-spacing: normal; display: inline-block; margin-right: 40px; vertical-align: top; position: relative; text-align: left; } #topSocial .list .column02{ width: 440px; letter-spacing: normal; display: inline-block; margin-right: 0px; vertical-align: top; position: relative; text-align: left; color: #000; } #topSocial .list .column02 iframe{ margin-bottom: 10px; } @media only screen and (max-width: 375px) { #topSocial{ width: auto; padding:20px 10px; position: relative; z-index: 2; padding-bottom: 90px; } #topSocial .header{ background: url(../img/top/social_title.png) no-repeat bottom; background-size: contain; position: absolute; top: -230px; left: 0px; width: 100%; height: 230px; } #topSocial h2{ position: absolute; bottom: 25px; left: 20px; text-align: left; font-size: 26px; margin-bottom: 0px; } #topSocial .sns{ width: 100%; letter-spacing: -0.4em; text-align: center; margin-bottom: 50px; } #topSocial .sns li{ margin: 0 7px; font-size: 30px; letter-spacing: normal; display: inline-block; } #topSocial .list .column01{ width: 100%; height: auto; margin-right: 0px; margin-bottom: 35px; color: #000; } #topSocial .list .column01 h3{ padding-left: 10px; margin-bottom: 10px; } #topSocial .list .column02{ width: 100%; height: auto; margin-right: 0px; color: #000; } #topSocial .list .column02 h3{ padding-left: 10px; margin-bottom: 10px; } #topSocial .list .column02 p{ padding-left: 10px; } } /*---------------------------------------------------- #topBlog --------------------------------------------------- */ #topBlog{ position: relative; width: 100%; overflow: hidden; background: #a08c8c; padding: 45px 0; text-align: center; color: #FFF; } #topBlog h2{ font-size: 26px; margin-bottom: 40px; } #topBlog h2 span{ display: block; font-size: 8px; padding-top: 4px; } #topBlog .list{ overflow: hidden; letter-spacing: -0.4em; } #topBlog .list .column{ width: 300px; letter-spacing: normal; display: inline-block; margin: 0 20px; vertical-align: top; position: relative; } #topBlog .list .column a{ text-align: left; } #topBlog .list .column a figure, #topBlog .list .column a .noImage { width: 100%; height: 220px; background: #FFF; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #topBlog .list .column a figure img{ width: 100%; height: auto; opacity: 0; } #topBlog .list .column a:hover figure, #topBlog .list .column a:hover .noImage{ opacity: 0.5; } #topBlog .list .column a .noImage { background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #topBlog .list .column .date{ font-size: 20px; line-height: 1; text-align: left; color: #000; } #topBlog .list .column .date .category, #topBlog .list .column .date .category a{ color: #FFF; } #topBlog .list .column .title{ font-size: 13px; line-height: 180%; } @media only screen and (max-width: 375px) { #topBlog .list .column{ width: 100%; margin: 0; position: relative; } #topBlog .list > .column > a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } #topBlog .list > .column .textArea { width: 100%; display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #topBlog .list .column:last-child{ margin-bottom: 0px; } #topBlog .list .column a figure{ width: 100%; height: 220px; overflow: hidden; margin-bottom: 0; } #topBlog .list .column a figure img{ display: none; } #topBlog .list .column a .noImage { margin: 0; } #topBlog .list .column .date{ margin-bottom: 5px; padding: 0 15px; } #topBlog .list .column .date a { color: #a08c8c; display: block; } #topBlog .list .column .title{ padding: 0 15px; color: #fff; } #topBlog .list .column .date .category { display: none; } } /*---------------------------------------------------- #main --------------------------------------------------- */ #main{ width: 980px; margin: 0 auto; position: relative; padding-bottom: 40px; } #main h1{ text-align: center; color: #000; font-size: 26px; padding: 40px 0; } #main.news h1{ color: #8cdcd2; font-size: 26px; padding: 40px 0; } #main.schedule h1{ color: #e6e650; font-size: 26px; padding: 40px 0; } #main.works h1{ color: #a0d2f0; font-size: 26px; padding: 40px 0; } #main.biography h1{ color: #ffb4c8; font-size: 26px; padding: 40px 0; } #main.discography h1{ color: #b4dcb4; font-size: 26px; padding: 40px 0; } #main.movie h1{ color: #dcb4c8; font-size: 26px; padding: 40px 0; } #main.blog h1{ color: #a08c8c; font-size: 26px; padding: 40px 0; } #main.contact h1{ color: #a08c8c; font-size: 26px; padding: 40px 0; } #main h1 span{ display: block; font-size: 8px; padding-top: 4px; } /*NEWS*/ #main .newsList.archive{ letter-spacing: -0.4em; } #main .newsList.archive .column{ width: 300px; display: inline-block; vertical-align: top; margin-right: 40px; letter-spacing: normal; overflow: hidden; margin-bottom: 20px; } #main .newsList.archive .column:nth-child(3n) { margin-right: 0; } #main .newsList.archive .column a figure, #main .newsList.archive .column a .noImage { width: 100%; height: 0; padding-top: 300px; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main .newsList.archive .column a .noImage { background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #main .newsList.archive .column a:hover figure { opacity: 0.5; } #main .newsList.archive .column figcaption { letter-spacing: -0.4em; } #main .newsList.archive .column figcaption > * { display: inline-block; letter-spacing: normal; vertical-align: middle;; } #main .newsList.archive .column figcaption .date { display: block; } #main .newsList.archive .column .category { display: inline-block; margin-left: 15px; } #main.news .newsList.archive .column .category { color: #8cdcd2; } #main.news .newsList.archive .column .category a { color: #8cdcd2; } #main.schedule .newsList.archive .column .category { color: #e6e650; } #main.schedule .newsList.archive .column .category a { color: #e6e650; } #main .newsList .column.single_detail { overflow: hidden; } #main .newsList .column .header{ width: 260px; float: left; } #main.news .newsList .column .headerInner, #main.schedule .newsList .column .headerInner { width: 100%; display: table; } #main .newsList .column .header .date{ font-size: 20px; color: #000; margin-bottom: 20px; font-weight: bold; } #main .newsList .column .header .date span{ color: #8cdcd2; } #main .newsList .column .header .date span a{ color: #8cdcd2; } #main.schedule .newsList .column .header .date span, #main.schedule .newsList .column .header .date span a{ color: #e6e650; } #main .newsList .column .header .sns{ overflow: hidden; } #main .newsList .column .header .sns li{ float: left; margin-right: 18px; } #main .newsList .column .header .sns li a{ color: #000; font-size: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main .newsList .column .header .sns li a:hover{ color: #8cdcd2; } #main .newsList .column .detail{ float: right; width: 700px; font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; } #main .newsList .column h2{ font-size: 16px; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px #000 dotted; font-weight: bold; } #main.news .newsList .column .header h2, #main.schedule .newsList .column .header h2 { padding: 20px 0 0; margin-bottom: 0; border: none; display: table-cell; } #main.news .newsList .column .headerCaption, #main.schedule .newsList .column .headerCaption { display: table-caption; } #main .newsList .column h2 .title_text { font-weight: bold; } #main .newsList .column h2 .sp_date { display: none; } #main .newsList .column .entry{ position: relative; } #main .newsList .column .entry .image{ margin-bottom: 50px; } #main .newsList .column .entry .image img{ width: 100%; height: auto; } #main .newsList .column .entry p{ margin-bottom: 20px; font-size: 13px; word-break: break-all; } #main .newsList .column .entry p img { display: block; width: 100%; height: auto; } #main .newsList .column .entry iframe, #main .worksDetail .column .entry iframe { width: 100%; } #main.news .newsList .column .entry p strong, #main .worksDetail .column .entry p strong, #main.blog .newsList .column .entry p strong, #main.schedule .newsList .column .entry p strong { font-weight: bold; } #main .newsList .column .entry p a, #main .worksDetail .column .entry p a { text-decoration: underline; } #main .newsList .column .entry p a:hover, #main .worksDetail .column .entry p a:hover { opacity: 0.5; text-decoration: none; } @media only screen and (min-width: 376px) { #main .newsList .column .entry .image { background: none !important; } } @media only screen and (max-width: 375px) { #main{ width: 100%; margin: 0 auto; position: relative; padding-bottom: 40px; } #main .titeArea{ background: url(../img/common/contents_cover.png) no-repeat bottom; background-size: contain; position: absolute; top: -212px; left: 0px; width: 100%; height: 212px; } #main h1{ position: absolute; bottom: 25px; left: 20px; padding: 0; text-align: left; font-size: 26px; margin-bottom: 0px; } #main .newsList .column { padding-bottom: 0; } #main .newsList .column .header{ display: none; } #main .newsList .column .detail{ width: auto; float: none; margin: 0; position: relative; } #main .newsList .column h2{ padding-bottom: 0px; margin-bottom: 0; border-bottom:none; } #main .newsList .column h2 a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background: rgba(0,0,0,0.5); } #main .newsList .column h2 a .title_text { box-sizing: border-box; display: table; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding: 20px; color: #fff; font-weight: bold; } #main .newsList .column h2 a .sp_date { display: block; color: #8cdcd2; font-weight: bold; margin-bottom: 5px; font-size: 20px; } #main.schedule .newsList .column h2 a .sp_date { color: #e6e650; } #main .newsList .column .entry .image img{ display: none; } #main .newsList .column .entry .image, #main .newsList .column .noImage { width: 100%; height: 220px; margin-bottom: 0; } #main .newsList .column .noImage { background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #main .newsList .column .entry .image.detailPage { height: auto; text-align: center; } #main .newsList .column .entry .image.detailPage img { display: inline-block;; max-width: 100%; height: auto; } #main .newsList .column.single_detail { padding-bottom: 40px; } #main .newsList .column.single_detail .header { display: block; float: none; margin: 0 20px; } #main.news .newsList .column.single_detail .header, #main.schedule .newsList .column.single_detail .header { box-sizing: border-box; color: #fff; width: 100%; min-height: 110px; margin: 0 0 20px; position: relative; background-color: #8cdcd2; background-repeat: no-repeat; background-position: center center; background-size: cover; } #main.schedule .newsList .column.single_detail .header { background-color: #e6e650; } #main.news .newsList .column.single_detail .header:after, #main.schedule .newsList .column.single_detail .header:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 98; } #main.news .newsList .column.single_detail h2, #main.schedule .newsList .column.single_detail h2 { width: 100%; margin: 0; padding: 0 20px; } #main.news .newsList .column .header .date, #main.schedule .newsList .column .header .date { color: #fff; margin: 0 0 0px; } #main.news .newsList .column .headerInner, #main.schedule .newsList .column .headerInner { box-sizing: border-box; display: table; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 99; } #main.news .newsList .column .headerCaption, #main.schedule .newsList .column .headerCaption { width: 100%; box-sizing: border-box; padding: 0 20px; } #main .newsList .column .header .date { font-size: 13px; } #main .newsList .column.single_detail .header .sns { display: none; } #main .newsList .column.single_detail .detail { margin: 0 20px; } #main .newsList .column.single_detail h2 { margin-bottom: 20px; } #main .newsList .column.single_detail h2 a { position: static; background: none; } #main .newsList .column.single_detail .entry .image { width: 100%; margin: 0 auto 20px; } #main .newsList .column .entry p img { width: 100%; margin: 0 auto; } #main .newsList.archive .column { width: 100%; margin: 0; padding: 0; height: 220px; position: relative; } #main .newsList.archive .column > a { display: block; position: relative; } #main .newsList.archive .column > a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } #main .newsList.archive .column a figure, #main .newsList.archive .column a .noImage { height: 220px; padding: 0; margin: 0; } #main .newsList.archive .column a figure img { display: none; } #main .newsList.archive .column figcaption { display: table; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); text-align: center; } #main .newsList.archive .column figcaption a { color: #fff; margin: 0; padding: 0 15px; } #main.news .newsList.archive .column figcaption .date a { color: #8cdcd2; } #main.schedule .newsList.archive .column figcaption .date a { color: #e6e650; } #main.blog .newsList.archive .column figcaption .date a { color: #fff; } #main .newsList.archive .column figcaption .category { display: none; } } @media only screen and (min-width: 376px) { #main.news .newsList .column.single_detail .header, #main.schedule .newsList .column.single_detail .header { background: none !important; } } /*---------------------------------------------------- #works --------------------------------------------------- */ #main.works .worksList{ position: relative; width: 100%; text-align: center; } #main.works .worksList{ overflow: hidden; letter-spacing: -0.4em; width: 980px; margin: 0 auto; text-align: left; } #main.works .worksList .column{ width: 300px; letter-spacing: normal; display: inline-block; margin-right: 40px; vertical-align: top; position: relative; } #main.works .worksList .column:nth-child(3n){ margin-right: 0%; } #main.works .worksList .column a{ text-align: left; } #main.works .worksList .column a figure, #main.works .worksList .column a .noImage{ width: 100%; height: 220px; background: #FFF; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main.works .worksList .column a .noImage{ background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #main.works .worksList .column a figure img{ width: 100%; height: auto; opacity: 0; } #main.works .worksList .column a:hover figure, #main.works .worksList .column a:hover .noImage{ opacity: 0.5; } #main.works .worksList .column .title{ font-size: 13px; margin-bottom: 20px; line-height: 150%; text-align: left; color: #000; } @media only screen and (max-width: 375px) { #main.works .worksList{ width: auto; padding:20px 10px; position: relative; z-index: 2; padding-bottom: 230px; } #main.works .worksList .column{ width: 100%; margin-right: 0px; margin-bottom: 40px; } #main.works .worksList .column:last-child{ margin-bottom: 0px; } #main.works .worksList .column a figure{ width: 100%; height: auto; overflow: hidden; margin-bottom: 20px; } #main.works .worksList .column a figure img{ display: none; } #main.works .worksList .column .title > a { color: #fff; text-align: center; display: block; padding: 0 15px; } } /*詳細*/ #main .worksDetail{ } #main .worksDetail .column{ overflow: hidden; padding-bottom: 40px; } #main .worksDetail .column .header{ width: 260px; float: left; } #main .worksDetail .column .header h2{ font-size: 16px; color: #000; line-height: 150%; margin-bottom: 20px; font-weight: bold; } #main .worksDetail .column .header h2 span { font-weight: bold; } #main .worksDetail .column .header .sns{ overflow: hidden; } #main .worksDetail .column .header .sns li{ float: left; margin-right: 18px; } #main .worksDetail .column .header .sns li a{ color: #000; font-size: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main .worksDetail .column .header .sns li a:hover{ color: #8cdcd2; } #main .worksDetail .column .detail{ float: right; width: 700px; font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; } #main .worksDetail .column .entry{ position: relative; } #main .worksDetail .column .entry .image{ margin-bottom: 50px; } #main .worksDetail .column .entry .image img{ max-width: 700px; height: auto; } #main .worksDetail .column .entry p{ margin-bottom: 20px; font-size: 13px; } @media only screen and (max-width: 375px) { #main{ width: 100%; margin: 0 auto; position: relative; padding-bottom: 40px; } #main .titeArea{ background: url(../img/common/contents_cover.png) no-repeat bottom; background-size: contain; position: absolute; top: -212px; left: 0px; width: 100%; height: 212px; } #main.blog .titeArea { background: none; position: static; height: auto; } #main h1{ position: absolute; bottom: -20px; left: 20px; padding: 0; text-align: left; font-size: 26px; margin-bottom: 0px; } #main.blog h1 { position: static; padding: 23px 20px 0; margin-bottom: 40px; color: #000; } #main .worksDetail .column .header{ width: auto; float: none; margin: 0; } #main .worksDetail .column .header .sns{ display: none; } #main .worksDetail .column .detail{ width: auto; float: none; margin: 0 20px; } #main .worksDetail .column h2{ font-size: 16px; padding-bottom: 0px; margin: 0 20px 20px; border-bottom:none; font-weight: bold; } #main.works .worksDetail .column .header h2 { box-sizing: border-box; color: #fff; width: 100%; height: 110px; padding: 0 20px; margin: 0 0 20px; display: table; position: relative; background-color: #a0d2f0; background-repeat: no-repeat; background-position: center center; background-size: cover; } #main.works .worksDetail .column .header h2:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 98; } #main.works .worksDetail .column .header h2 > span { display: table-cell; vertical-align: middle; position: relative; z-index: 99; } #main .worksDetail .column .entry .image img{ max-width: 100%; height: auto; } #main .worksDetail .column .entry .image{ width: 100%; margin: 0 auto 20px; } #main .worksDetail .column .entry .movieBox, #main .newsList .column .entry .movieBox { width: 100%; height: auto;; position: relative; margin: 10px 0 5px; } #main .worksDetail .column .entry .movieBox iframe, #main .newsList .column .entry .movieBox iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #main .worksDetail .column .entry .movieBox:before, #main .newsList .column .entry .movieBox:before { content: ""; display: block; padding-top: 75%; } } /*---------------------------------------------------- #discography --------------------------------------------------- */ #main.discography .worksList{ position: relative; width: 100%; text-align: center; } #main.discography .worksList{ overflow: hidden; letter-spacing: -0.4em; width: 980px; margin: 0 auto; text-align: left; } #main.discography .worksList .column{ width: 300px; letter-spacing: normal; display: inline-block; margin-right: 40px; vertical-align: top; position: relative; } #main.discography .worksList .column:nth-child(3n){ margin-right: 0%; } #main.discography .worksList .column a{ text-align: left; } #main.discography .worksList .column a figure, #main.discography .worksList .column a .noImage{ width: 100%; height: 300px; background: #FFF; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main.discography .worksList .column a .noImage{ background: url(../img/common/noimage.jpg) no-repeat center center; background-size: cover; } #main.discography .worksList .column a figure img{ width: 100%; height: auto; opacity: 0; } #main.discography .worksList .column a:hover figure, #main.discography .worksList .column a:hover .noImage{ opacity: 0.5; } #main.discography .worksList .column .title{ font-size: 13px; margin-bottom: 20px; line-height: 150%; text-align: left; color: #000; } #main.discography .worksList .column .title span, #main.discography .worksList .column .title span a{ color: #b4dcb4; } @media only screen and (max-width: 375px) { #main.discography .worksList, #main.works .worksList{ width: auto; padding:20px 0; position: relative; z-index: 2; } #main.discography .worksList .column, #main.works .worksList .column{ width: 100%; height: 220px; margin-right: 0px; margin-bottom: 0; position: relative; } #main.discography .worksList .column:last-child{ margin-bottom: 0px; } #main.discography .worksList .column a figure, #main.works .worksList .column a figure{ width: 100%; height: 220px; overflow: hidden; margin-bottom: 0; } #main.discography .worksList .column a .noImage { height: 220px; margin: 0; } #main.works .worksList .column a .noImage{ margin-bottom: 0; } #main.discography .worksList .column > a, #main.works .worksList .column > a { display: block; position: relative; } #main.discography .worksList .column > a:after, #main.works .worksList .column > a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); } #main.discography .worksList .column a figure img{ display: none; } #main.discography .worksList .column .title, #main.works .worksList .column .title{ color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; margin: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); display: table; } #main.discography .worksList .column .title > a { color: #fff; padding-left: 15px; } #main.discography .worksList .column .title > span { padding-right: 15px; } } /*詳細*/ #main.discography .worksDetail{ } #main.discography .worksDetail .column{ overflow: hidden; padding-bottom: 40px; } #main.discography .worksDetail .column .header{ width: 260px; float: left; } #main.discography .worksDetail .column .header h2{ font-size: 16px; color: #000; line-height: 150%; margin-bottom: 20px; font-weight: bold; } #main.discography .worksDetail .column .header h2 span.category, #main.discography .worksDetail .column .header h2 span.category a{ color: #b4dcb4; } #main.discography .worksDetail .column .header .image{ width: 260px; margin-bottom: 50px; } #main.discography .worksDetail .column .header .image img{ max-width: 260px; height: auto; } #main.discography .worksDetail .column .header .sns{ overflow: hidden; } #main.discography .worksDetail .column .header .sns li{ float: left; margin-right: 18px; } #main.discography .worksDetail .column .header .sns li a{ color: #000; font-size: 30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main.discography .worksDetail .column .header .sns li a:hover{ color: #8cdcd2; } #main.discography .worksDetail .column .detail{ float: right; width: 680px; padding-top: 50px; font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; } #main.discography .worksDetail .column .entry{ position: relative; } #main.discography .worksDetail .column .entry .image{ margin-bottom: 50px; } #main.discography .worksDetail .column .entry .image img{ max-width: 680px; height: auto; } #main.discography .worksDetail .column .entry p{ margin-bottom: 20px; font-size: 13px; } @media only screen and (max-width: 375px) { #main{ width: 100%; margin: 0 auto; position: relative; padding-bottom: 0px; } #main.discography .titeArea{ background: url(../img/common/contents_cover.png) no-repeat bottom; background-size: contain; position: absolute; top: -212px; left: 0px; width: 100%; height: 212px; } #main.discography h1{ position: absolute; bottom: 25px; left: 20px; padding: 0; text-align: left; font-size: 26px; margin-bottom: 0px; } #main.discography .worksDetail .column .header{ width: auto; float: none; margin: 0; } #main.discography .worksDetail .column .header .sns{ display: none; } #main.discography .worksDetail .column .header .image img{ max-width: 100%; height: auto; } #main.discography .worksDetail .column .detail{ width: auto; float: none; margin: 0 20px; } #main.discography .worksDetail .column h2{ font-size: 16px; padding-bottom: 0px; margin-bottom: 20px; border-bottom:none; font-weight: bold; } #main.discography .worksDetail .column .entry .image img{ max-width: 100%; height: auto; } #main.discography .worksDetail .column .entry .image{ margin-bottom: 20px; } #main.discography .worksDetail .column .header h2 { box-sizing: border-box; color: #fff; box-sizing: border-box; width: 100%; height: 110px; display: table; padding: 0 20px; margin: 0 0 20px; position: relative; } #main.discography .worksDetail .column .header h2:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 98; } #main.discography .worksDetail .column .header h2 > span { display: table-cell; vertical-align: middle; position: relative; z-index: 99; } #main.discography .worksDetail .column .header .image { width: 100%; margin: 20px auto 0; } } @media only screen and (min-width: 376px) { #main .worksDetail .column .header h2 { background: none !important; } } /*---------------------------------------------------- #contact --------------------------------------------------- */ /*詳細*/ #main .contactDetail{ width: 500px; margin: 0 auto; font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; } #main .contactDetail .text{ font-size: 12px; color: #000; line-height: 150%; margin-bottom: 20px; } #main .contactDetail .subject{ margin-bottom: 10px; } #main .contactDetail .inputArea{ margin-bottom: 20px; } #main .contactDetail input[type="text"],#main .contactDetail input[type="email"],#main .contactDetail select{ width: 100%; height: 40px; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #c6c6c6; border-radius: 3px; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); font-size: 14px; font-weight: bold; color: #000; padding: 0 10px; margin-bottom: 10px; } #main .contactDetail textarea{ width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #c6c6c6; border-radius: 3px; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5); font-size: 14px; font-weight: bold; color: #000; padding:10px; margin-bottom: 10px; } #main .contactDetail input[type="submit"]{ width: 100%; height: 40px; border:none; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; background-color: #a08c8c; font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 10px; cursor: pointer; } #main .contactDetail .btn{ text-align: center; } .screen-reader-response{ margin-bottom: 20px; color: #FF0000; } .wpcf7-not-valid-tip{ color: #FF0000; } .screen-reader-response ul{ display: none; } .wpcf7-response-output{ display: none; } @media only screen and (max-width: 375px) { #main .contactDetail{ width: auto; margin: 0 10px; font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif; } } /*---------------------------------------------------- #main --------------------------------------------------- */ #pagenavi{ overflow: hidden; padding: 20px; text-align: center; } #pagenavi .pager{ overflow: hidden; text-align: center; } #pagenavi .pager{ display:inline-block; margin:0 10px; letter-spacing: normal; } #pagenavi .pager li{ display:inline-block; margin:0 10px; } #pagenavi .pager span{ display:inline-block; margin:0 10px; } #pagenavi .pager a{ margin:0 10px; display:inline-block; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #pagenavi .pager a:hover{ color: #8cdcd2; } #main .storeBtn { margin: 20px 0 20px; letter-spacing: -0.4em; word-spacing: 0.1em; } #main .storeBtn li { display: inline-block; margin: 0 10px 0 0; letter-spacing: normal; word-spacing: normal; } #main .storeBtn li a { display: block; color: #fff; font-weight: bold; padding: 10px 15px 8px; font-size: 11px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #main.news .storeBtn li a:hover, #main.schedule .storeBtn li a:hover, #main.works .storeBtn li a:hover, #main.discography .storeBtn li a:hover, #main.movie .storeBtn li a:hover, #main.blog .storeBtn li a:hover { background: #000; } #main .storeBtn li a> * { vertical-align: middle; } #main .storeBtn li a img { display: inline-block; margin-right: 6px; } #main .storeBtn li a span { font-weight: bold; } #main.news .storeBtn li a { background: #8cdcd2; } #main.schedule .storeBtn li a { background: #e6e650; } #main.works .storeBtn li a { background: #a0d2f0; } #main.discography .storeBtn li a { background: #b4dcb4; } #main.movie .storeBtn li a { background: #dcb4c8; } #main.blog .storeBtn li a { background: #a08c8c; } @media only screen and (max-width: 375px) { #main .storeBtn { margin: 20px 0 10px; } #main .storeBtn li { margin: 0 10px 10px 0; } }