@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:960px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
::-webkit-scrollbar{
display: none;
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
color:#000000;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}



.pc{
display:none;
}
@media screen and (min-width:960px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
}
body.stop{
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}
@media screen and (min-width:960px) {
body{
background: #00d2e6;
}
body::before{
content: "";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/ofr_cmn_bg.png");
background-size: 840rem auto;
transform: rotate(-16deg);
z-index: -1;
opacity: 0.24;
animation: bg 32s linear 0s infinite normal forwards;
}
}
@keyframes bg {
from { background-position: -840rem 0; }
to { background-position: 0 0; }
}



/* ==============================================
header
============================================== */

header{
}



header .gdo{
position: absolute;
top: 16rem;
left: 16rem;
z-index: 10;
}
#page-after header .gdo,
#page-select header .gdo{
display: none;
}
@media screen and (min-width:1300px) {
header .gdo{
position: fixed;
display: block!important;
}
}
header .gdo a{
}
header .gdo a img{
max-width: 51rem;
}



header .gdo + .logo{
position: absolute;
top: 10rem;
left: 10rem;
z-index: 10;
}
@media screen and (min-width:1300px) {
header .gdo + .logo{
position: fixed;
top: 0;
bottom: 40px;
left: 0;
margin: auto;
width: calc(50% - 300px);
height: 400px;
text-align: center;
}
}
#page-top header .gdo + .logo{
opacity: 0;
transition: 0.4s ease-out;
}
@media screen and (min-width:1300px) {
#page-top header .gdo + .logo.on{
opacity: 1;
}
}
header .gdo + .logo a{
display: inline-block;
}
#page-top header .gdo + .logo a{
pointer-events: none;
}
header .gdo + .logo a img{
max-width: 83rem;
}
header .gdo + .logo a img:nth-child(2){
display: none;
}
@media screen and (min-width:1300px) {
header .gdo + .logo a img{
max-width: 360px;
}
header .gdo + .logo a img:nth-child(1){
display: none;
}
header .gdo + .logo a img:nth-child(2){
display: block;
}
}



header .menu{
position: fixed;
top: 18rem;
right: 16rem;
z-index: 1000;
}
@media screen and (min-width:960px) {
header .menu{
display: none;
}
}
header .menu a{
display: block;
width: 42rem;
height: 42rem;
}
header .menu.on a{
background: url("../images/ofr_hdr_icn-close.png");
background-size: 42rem 42rem;
}
header .menu a img{
max-width: 42rem;
}
header .menu.on a img{
opacity: 0;
}
header nav{
position: fixed;
bottom: calc(-100% - 188rem);
left: 0;
width: 100%;
height: calc(100% + 188rem);
background: #00d2e6;
z-index: 100;
border-radius: 188rem 188rem 0 0;
overflow: hidden;
transition: 0.4s ease-out;
}
@media screen and (min-width:960px) {
header nav{
bottom: 0;
left: inherit;
right: 0;
width: calc(100% - 600px);
height: 100%;
background: none;
border-radius: 0;
}
}
@media screen and (min-width:1300px) {
header nav{
width: calc(50% - 300px);
}
}
header nav.on{
bottom: 0;
}
header nav .logo{
position: absolute;
top: 198rem;
left: 10rem;
z-index: 10;
}
@media screen and (min-width:960px) {
header nav .logo{
display: none;
}
}
header nav .logo a img{
max-width: 83rem;
}
header nav h2{
position: absolute;
top: 0;
bottom: 210rem;
left: 0;
right: 0;
margin: auto;
height: 61rem;
}
@media screen and (min-width:960px) {
header nav h2{
bottom: 450px;
margin: auto;
width: 360px;
height: 60px;
}
}
header nav h2 img{
}
header nav ul{
position: absolute;
top: 240rem;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: url("../images/ofr_tp_mn_bg.png");
background-size: 375rem 355rem;
width: 375rem;
height: 355rem;
text-align: center;
padding: 1rem 0 0 0;
}
@media screen and (min-width:960px) {
header nav ul{
top: 0;
background: url("../images/ofr_tp_mn_bg.png") no-repeat;
background-size: 360px auto;
width: 360px;
height: 360px;
}
}
header nav ul li{
display: inline-block;
}
header nav ul li.off{
}
header nav ul li a{
display: block;
padding: 16rem 12rem 14rem 12rem;
}
header nav ul li a img{
max-width: 50rem;
}
@media screen and (min-width:960px) {
header nav ul li a{
padding: 16px 10px 14px 10px;
}
header nav ul li a img{
max-width: 48px;
}
}
header nav ul li.off a{
pointer-events: none;
}
header nav .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/ofr_cmn_bg.png");
background-size: 840rem auto;
transform: rotate(-16deg);
z-index: -1;
opacity: 0.24;
animation: bg 32s linear 0s infinite normal forwards;
}
@media screen and (min-width:960px) {
header nav .bg{
display: none;
}
}



/* ==============================================
footer
============================================== */

footer{
position: relative;
margin: -48rem 0 0 0;
z-index: 1;
}
footer p{
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.2rem;
text-align: center;
}
@media screen and (min-width:960px) {
footer{
width: 600px;
margin: -48rem 0 0 0;
}
}
@media screen and (min-width:1300px) {
footer{
margin: -48rem auto 0 auto;
}
}



/* ==============================================
main
============================================== */

main{
}
@media screen and (min-width:960px) {
main{
position: relative;
width: 600px;
margin: inherit;
}
#page-select main{
background: #fff;
}
main::before{
content: "";
position: absolute;
top: 0;
left: -64px;
width: 64px;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.16) 100%);
z-index: 1;
}
main::after{
content: "";
position: absolute;
top: 0;
right: -64px;
width: 64px;
height: 100%;
background: linear-gradient(-90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.16) 100%);
z-index: 1;
}
}
@media screen and (min-width:1300px) {
main{
margin: auto;
}
}
main section{
}



main section .steam-16{
display: block;
background: url("../images/ofr_cmn_icn-steam32.png");
background-size: 16rem auto;
width: 16rem;
height: 16rem;
position: absolute;
z-index: 1;
}
main section .steam-24{
display: block;
background: url("../images/ofr_cmn_icn-steam48.png");
background-size: 24rem auto;
width: 24rem;
height: 24rem;
position: absolute;
z-index: 1;
}
main section .steam-32{
display: block;
background: url("../images/ofr_cmn_icn-steam64.png");
background-size: 32rem auto;
width: 32rem;
height: 32rem;
position: absolute;
z-index: 1;
}
main section .steam-48{
display: block;
background: url("../images/ofr_cmn_icn-steam96.png");
background-size: 48rem auto;
width: 48rem;
height: 48rem;
position: absolute;
z-index: 1;
}
main section .steam-64{
display: block;
background: url("../images/ofr_cmn_icn-steam128.png");
background-size: 64rem auto;
width: 64rem;
height: 64rem;
position: absolute;
z-index: 1;
}



/* ==============================================
#page-top #hero
============================================== */

#page-top #hero{
overflow: hidden;
padding: 0 0 4rem 0;
}
#page-top #hero .inner{
position: relative;
background: #00d2e6;
z-index: 1;
}
@media screen and (min-width:960px) {
#page-top #hero .inner{
background: none;
}
}
#page-top #hero .inner h1{
padding: 76rem 0 96rem 0;
}
#page-top #hero .inner h1 img{
animation: h1 8s linear 0s 1 normal forwards;
}
@keyframes h1 {
from {
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
#page-top #hero .inner .news{
position: absolute;
bottom: -4rem;
left: 0;
width: 100%;
height: 45rem;
background: url("../images/ofr_tp_hr_bg.png") repeat-x;
background-size: 40rem 45rem;
animation: news 2s linear 0s infinite normal forwards;
}
@keyframes news {
from { background-position: -40rem 0; }
to { background-position: 0 0; }
}
#page-top #hero .inner .news h2{
position: absolute;
top: -22rem;
left: 8rem;
}
#page-top #hero .inner .news h2 img{
max-width: 52rem;
}
#page-top #hero .inner .news p{
}
#page-top #hero .inner .news p a{
display: block;
text-align: center;
height: 45rem;
padding: 15rem 0 0 0;
}
#page-top #hero .inner .news p a img{
max-width: 190rem;
}
#page-top #hero .inner .news p a span{
display: inline-block;
vertical-align: middle;
margin: -4rem 6rem 0 6rem;
}
#page-top #hero .inner .news p a span img{
max-width: 12rem;
}
#page-top #hero .inner .news p a font{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 700;
display: inline-block;
transform: scale(1,0.84);
}
#page-top #hero .inner .news figure{
position: absolute;
top: -12rem;
right: 8rem;
}
#page-top #hero .inner .news figure img{
max-width: 56rem;
}
#page-top #hero .inner .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/ofr_cmn_bg.png");
background-size: 840rem auto;
transform: rotate(-16deg);
z-index: -1;
opacity: 0.24;
animation: bg 32s linear 0s infinite normal forwards;
}
@media screen and (min-width:960px) {
#page-top #hero .inner .bg{
display: none;
}
}



/* ==============================================
#page-top #concept
============================================== */

#page-top #concept{
}
#page-top #concept .inner{
position: relative;
padding: 64rem 0 148rem 0;
}



#page-top #concept .inner h2{
position: relative;
height: 166rem;
z-index: 1;
}
#page-top #concept .inner h2 span:first-child{
display: block;
position: absolute;
top: 46rem;
left: 0;
width: 100%;
height: 68rem;
background: url("../images/ofr_tp_cnc_bg.png") repeat-x;
background-size: 538rem 68rem;
z-index: -1;
animation: ofuro 16s linear 0s infinite normal forwards;
}
@keyframes ofuro {
from { background-position: 538rem 0; }
to { background-position: 0 0; }
}

#page-top #concept .inner h2 span + span{
display: block;
width: 160rem;
height: 166rem;
overflow: hidden;
margin: auto;
animation-name: concept;
}
@keyframes concept {
0% {
height: 0;
}
100% {
height: 166rem;
}
}
#page-top #concept .inner h2 span + span img{
width: 160rem;
height: 166rem;
}
#page-top #concept .inner p{
font-size: 13rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #3c46c8;
text-align: center;
margin: 24rem 0 0 0;
}
#page-top #concept .inner figure{
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
z-index: -1;
}
@media screen and (min-width:960px) {
#page-top #concept .inner figure{
position: absolute;
top: -16px;
height: calc(100% + 16px);
}
}
#page-top #concept .inner figure::before{
content: "";
background: url("../images/ofr_cmn_bg-steam.jpg") bottom no-repeat;
background-size: 140% auto;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
#page-top #concept .inner figure::after{
content: "";
background: url("../images/ofr_cmn_bg-steam.jpg") bottom no-repeat;
background-size: 140% auto;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
#page-top #concept .inner figure img{
width: 100%;
height: 100%;
object-fit: cover;
}



#page-top #concept .inner .steam-16{
top: 170rem;
right: 40rem;
}
#page-top #concept .inner .steam-32{
bottom: 340rem;
left: 60rem;
}
#page-top #concept .inner .steam-48{
bottom: 80rem;
right: 20rem;
}
#page-top #concept .inner .steam-64{
bottom: 60rem;
left: -20rem;
}



/* ==============================================
#page-top #menu
============================================== */

#page-top #menu{
}
#page-top #menu .inner{
position: relative;
background: #00d2e6;
padding: 48rem 0 0 0;
}
#page-top #menu .inner::before{
content: "";
background: url("../images/ofr_tp_mn_img.png");
background-size: 375rem 88rem;
width: 375rem;
height: 88rem;
position: absolute;
top: -88rem;
left: 0;
}
#page-top #menu .inner h2{
position: absolute;
top: -32rem;
left: 0;
width: 100%;
}
#page-top #menu .inner h2 img{
}
#page-top #menu .inner ul{
background: url("../images/ofr_tp_mn_bg.png");
background-size: 375rem 355rem;
width: 375rem;
height: 355rem;
text-align: center;
padding: 1rem 0 0 0;
}
#page-top #menu .inner ul li{
display: inline-block;
}
#page-top #menu .inner ul li.off{
pointer-events: none;
}
#page-top #menu .inner ul li a{
display: block;
padding: 16rem 12rem 14rem 12rem;
}
#page-top #menu .inner ul li a img{
max-width: 50rem;
}



/* ==============================================
#page-top .contents
============================================== */

#page-top .contents{
}
#page-top .contents .inner{
}
#page-top .contents .inner h2{
}
#page-top .contents .inner h2 span{
display: block;
position: absolute;
width: 96rem;
height: 64rem;
border-radius: 50%;
background: #f0fa3c;
border: solid 1rem #000000;
padding: 13rem 0 0 0;
}
#page-top .contents .inner h2 span img{
display: block;
max-width: 57rem;
margin: 0 auto 1rem auto;
}
#page-top .contents .inner h2 span font{
font-size: 13rem;
line-height: 15rem;
letter-spacing: 0.4rem;
font-weight: 500;
text-align: center;
display: block;
transform: scale(1, 0.84);
}



/* ==============================================
#page-top #after
============================================== */

#page-top #after{
}
#page-top #after .inner{
position: relative;
background: #00d2e6;
padding: 58rem 0 112rem 0;
}
#page-top #after .inner h2{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#page-top #after .inner h2 img{
}
#page-top #after .inner h2 span{
position: absolute;
top: 48rem;
left: 16rem;
}
#page-top #after .inner h2 span img{
}
#page-top #after .inner figure{
position: relative;
width: 218rem;
height: 342rem;
}
#page-top #after .inner figure img{
width: 218rem;
height: 342rem;
object-fit: cover;
}
#page-top #after .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
margin: 48rem 32rem 0 32rem;
}
#page-top #after .inner .button{
text-align: center;
margin: 20rem 0 0 0;
}
#page-top #after .inner .button a{
}
#page-top #after .inner .button a img{
max-width: 311rem;
}



#page-top #after .inner .steam-16{
bottom: 300rem;
right: 20rem;
}
#page-top #after .inner .steam-32{
bottom: 370rem;
right: 90rem;
}
#page-top #after .inner .steam-48{
bottom: 340rem;
left: 20rem;
}



/* ==============================================
#page-top #select
============================================== */

#page-top #select{
}
#page-top #select .inner{
position: relative;
background: #b4dc32;
padding: 32rem 0 112rem 0;
padding: 32rem 0 32rem 0;
z-index: 1;
}
#page-top #select .inner::before{
content: "";
background: url("../images/ofr_tp_slc_bg.png");
background-size: 375rem 88rem;
width: 375rem;
height: 88rem;
position: absolute;
top: -88rem;
left: 0;
}
#page-top #select .inner h2{
position: absolute;
top: 16rem;
left: 0;
width: 100%;
z-index: 1;
}
#page-top #select .inner h2 img{
}
#page-top #select .inner h2 span{
position: absolute;
top: 0;
right: 24rem;
}
#page-top #select .inner h2 span img{
}
#page-top #select .inner figure{
position: relative;
width: 343rem;
height: 343rem;
margin: auto;
}
#page-top #select .inner figure::before{
content: "";
background: url("../images/ofr_cmn_bg-steam.jpg") bottom no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
opacity: 0.64;
}
#page-top #select .inner figure img{
width: 343rem;
height: 343rem;
object-fit: cover;
}
#page-top #select .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
margin: 12rem 32rem 0 32rem;
}
#page-top #select .inner .button{
text-align: center;
margin: 20rem 0 0 0;
}
#page-top #select .inner .button a{
}
#page-top #select .inner .button a img{
max-width: 311rem;
}



#page-top #select .inner .steam-16{
bottom: 240rem;
bottom: 160rem;
right: 130rem;
}
#page-top #select .inner .steam-32{
bottom: 320rem;
bottom: 240rem;
right: 10rem;
}
#page-top #select .inner .steam-48{
bottom: 250rem;
bottom: 170rem;
left: 110rem;
}



/* ==============================================
#page-top #doctor
============================================== */

#page-top #doctor{
display: none;
}
#page-top #doctor .inner{
position: relative;
background: #e8e8ea;
padding: 0 0 32rem 0;
z-index: 1;
}
#page-top #doctor .inner h2{
padding: 32rem 0 0 0;
}
#page-top #doctor .inner h2 img{
}



#page-top #doctor .inner .profile{
}
#page-top #doctor .inner .profile h3{
font-size: 21rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #222222;
width: 200rem;
text-align: right;
margin: 12rem 0 0 32rem;
transform: scale(1,0.84);
}
#page-top #doctor .inner .profile h3 span{
font-size: 13rem;
line-height: 13rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #222222;
display: block;
margin: 6rem 0 0 0;
}
#page-top #doctor .inner .profile h3 + p{
font-size: 11rem;
line-height: 15rem;
letter-spacing: 0.2rem;
font-weight: 500;
color: #222222;
width: 200rem;
text-align: justify;
margin: 8rem 0 0 32rem;
}
#page-top #doctor .inner .profile figure{
position: absolute;
top: -88rem;
left: 0;
width: 100%;
z-index: -1;
}
#page-top #doctor .inner .profile figure img{
}



#page-top #doctor .inner .article{
position: relative;
margin: 20rem 0 0 0 ;
padding: 67rem 16rem 0 16rem;
overflow: hidden;
}
#page-top #doctor .inner .article h3{
position: absolute;
top: 0;
left: 16rem;
background: url("../images/ofr_tp_dct_sttl.png");
background-size: 343rem 67rem;
width: 343rem;
height: 67rem;
padding: 10rem 0 0 0;
}
#page-top #doctor .inner .article h3 span{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #f0fa3c;
text-align: center;
display: block;
margin: 0 0 2rem 0;
transform: scale(1,0.84);
}
#page-top #doctor .inner .article h3 font{
font-size: 21rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #FFF;
text-align: center;
display: block;
transform: scale(1,0.84);
}


#page-top #doctor .inner .article div{
margin: 16rem 0 0 0;
}
#page-top #doctor .inner .article div h4{
font-size: 13rem;
line-height: 19rem;
letter-spacing: 0.2rem;
font-weight: 700;
color: #222222;
position: relative;
background: #fff;
border: solid 1rem #000;
border-radius: 16rem;
margin: 16rem 0 0 32rem;
padding: 14rem 16rem 14rem 16rem;
}
#page-top #doctor .inner .article div h4::before{
content: "";
background: url("../images/ofr_tp_dct_icn-q.png");
background-size: 52rem 51rem;
width: 52rem;
height: 51rem;
position: absolute;
top: -4rem;
left: -40rem;
}
#page-top #doctor .inner .article div h4::after{
content: "";
background: url("../images/ofr_tp_dct_arw-q.png");
background-size: 13rem 13rem;
width: 13rem;
height: 13rem;
position: absolute;
top: 52rem;
left: -12rem;
}
#page-top #doctor .inner .article div p{
font-size: 13rem;
line-height: 19rem;
letter-spacing: 0.2rem;
font-weight: 500;
color: #222222;
position: relative;
background: #f0fa3c;
border: solid 1rem #000;
border-radius: 16rem;
margin: 8rem 32rem 0 0;
padding: 14rem 16rem 14rem 16rem;
}
#page-top #doctor .inner .article div p::before{
content: "";
background: url("../images/ofr_tp_dct_icn-a.png");
background-size: 52rem 51rem;
width: 52rem;
height: 51rem;
position: absolute;
top: -4rem;
right: -40rem;
}
#page-top #doctor .inner .article div p::after{
content: "";
background: url("../images/ofr_tp_dct_arw-a.png");
background-size: 13rem 13rem;
width: 13rem;
height: 13rem;
position: absolute;
top: 52rem;
right: -12rem;
}
#page-top #doctor .inner .article .next{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #f02800;
text-align: center;
height: 160rem;
background: url("../images/ofr_tp_dct_bg.png") center no-repeat;
background-size: 160rem 160rem;
margin: 32rem 0 0 0;
padding: 44rem 0 0 0;
}



#page-top #doctor .inner .steam-16{
top: 190rem;
left: 100rem;
}
#page-top #doctor .inner .steam-24{
top: 90rem;
right: 10rem;
}
#page-top #doctor .inner .steam-32{
top: 170rem;
left: 20rem;
}



/* ==============================================
#page-top #sns
============================================== */

#page-top #sns{
position: relative;
background: #00d2e6;
z-index: 1;
overflow: hidden;
padding: 128rem 0 76rem 0;
}
@media screen and (min-width:960px) {
#page-top #sns{
background: none;
}
}
#page-top #sns::before{
content: "";
background: url("../images/ofr_tp_sns_img.png");
background-size: 375rem 88rem;
width: 375rem;
height: 88rem;
position: absolute;
top: 0;
left: 0;
}
#page-top #sns .inner{
background: url("../images/ofr_tp_sns_bg.png") center top no-repeat;
background-size: 375rem 482rem;
height: 482rem;
}
#page-top #sns .inner h2{
text-align: center;
padding: 72rem 0 0 0;
}
#page-top #sns .inner h2 img{
}
#page-top #sns .inner p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
text-align: center;
}
#page-top #sns .inner .button{
text-align: center;
margin: 20rem 0 0 0;
}
#page-top #sns .inner .button + .button{
margin: 8rem 0 0 0;
}
#page-top #sns .inner .button a{
}
#page-top #sns .inner .button a img{
max-width: 308rem;
}
#page-top #sns .inner .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/ofr_cmn_bg.png");
background-size: 840rem auto;
transform: rotate(-16deg);
z-index: -1;
opacity: 0.24;
animation: bg 32s linear 0s infinite normal forwards;
}
@media screen and (min-width:960px) {
#page-top #sns .inner .bg{
background: none;
display: none;
}
}



/* ==============================================
#page-after #hero
============================================== */

#page-after #hero{
background: #fff;
}
#page-after #hero .inner{
position: relative;
}
#page-after #hero .inner h1{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#page-after #hero .inner h1 img{
}
#page-after #hero .inner h1 span{
display: block;
position: absolute;
bottom: -40rem;
right: 16rem;
}
#page-after #hero .inner h1 span img{
max-width: 180rem;
}
#page-after #hero .inner figure{
position: relative;
padding: 106rem 0 0 0;
text-align: center;
}
#page-after #hero .inner figure img{
width: 343rem;
height: 494rem;
object-fit: cover;
}
#page-after #hero .inner .steam-24{
bottom: 10rem;
left: 100rem;
}
#page-after #hero .inner .steam-48{
bottom: -30rem;
left: 30rem;
}



/* ==============================================
#page-after #article
============================================== */

#page-after #article{
background: #fff;
}
#page-after #article .inner{
padding: 44rem 0 0 0;
}
#page-after #article .inner h2{
font-size: 25rem;
line-height: 37rem;
letter-spacing: 0.8rem;
font-weight: 900;
color: #222222;
margin: 0 0 -12rem 0;
padding: 54rem 16rem 4rem 16rem;
transform: scale(1,0.8);
}
#page-after #article .inner p{
font-size: 15rem;
line-height: 25rem;
letter-spacing: 0.2rem;
font-weight: 400;
color: #222222;
margin: 14rem 16rem 0 16rem;
}
#page-after #article .inner figure + p{
margin: 18rem 16rem 0 16rem;
}
#page-after #article .inner figure{
position: relative;
margin: 26rem 0 0 0;
text-align: center;
}
#page-after #article .inner figure::before{
content: "";
background: url("../images/ofr_aft_art_frm-01.png");
background-size: 375rem 600rem;
width: 375rem;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#page-after #article .inner figure::after{
content: "";
background: url("../images/ofr_aft_art_frm-02.png");
background-size: 375rem 96rem;
width: 375rem;
height: 96rem;
position: absolute;
bottom: 0;
right: 0;
}
#page-after #article .inner figure.set::after{
background: url("../images/ofr_aft_art_frm-04.png");
background-size: 375rem 96rem;
}
#page-after #article .inner figure.set + figure.set::before{
background: url("../images/ofr_aft_art_frm-03.png");
background-size: 375rem 600rem;
}
#page-after #article .inner figure.set + figure.set::after{
background: url("../images/ofr_aft_art_frm-02.png");
background-size: 375rem 96rem;
}
#page-after #article .inner figure img{
width: 343rem;
}



/* ==============================================
#page-after #offshot
============================================== */

#page-after #offshot{
background: #fff;
}
#page-after #offshot .inner{
padding: 0 0 80rem 0;
}
#page-after #offshot .inner h2{
text-align: center;
padding: 22rem 0 0 0;
}
#page-after #offshot .inner h2 img{
max-width: 58rem;
}



#page-after #offshot .inner .slider{
position: relative;
overflow: hidden;
padding: 32rem 0 48rem 0;
}



#page-after #offshot .inner .slider .slick-dots {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
text-align: center;
}
#page-after #offshot .inner .slider .slick-dots li {
position: relative;
display: inline-block;
width: 16rem;
height: 16rem;
}
#page-after #offshot .inner .slider .slick-dots li button {
display: block;
width: 8rem;
height: 8rem;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
#page-after #offshot .inner .slider .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 8rem;
height: 8rem;
background: #222222;
border-radius: 4rem;
content: ' ';
}
#page-after #offshot .inner .slider .slick-dots li.slick-active button:before {
background-color: #f02800;
}



#page-after #offshot .inner .slider .slick-prev,
#page-after #offshot .inner .slider .slick-next {
font-size: 0;
line-height: 0;
display: block;
position: absolute;
top: 116rem;
padding: 0;
width: 44rem;
height: 44rem;
cursor: pointer;
border: none;
outline: none;
z-index: 1;
background: url("../images/ofr_cmn_sld_arw.png") right no-repeat;
background-size: 24rem 44rem;
}
#page-after #offshot .inner .slider .slick-prev{
left: 0;
transform: scale(-1, 1);
}
#page-after #offshot .inner .slider .slick-next{
right: 0;
}



#page-after #offshot .inner .slider .slick-track{
display:flex;
flex-wrap:wrap;
}
#page-after #offshot .inner .slider .slick-slide{
position: relative;
text-align: center;
padding: 10rem 0 0 0;
}
#page-after #offshot .inner .slider .slick-slide::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
background: url("../images/ofr_aft_off_img.png");
background-size: 375rem 215rem;
width: 375rem;
height: 215rem;
}
#page-after #offshot .inner .slider .slick-slide img{
width: 291rem;
height: 194rem;
object-fit: cover;
}



/* ==============================================
#page-after #course
============================================== */

#page-after #course{
position: relative;
}
#page-after #course h2{
position: absolute;
top: -30rem;
left: 0;
width: 100%;
text-align: center;
z-index: 10;
}
#page-after #course h2 img{
max-width: 91rem;
}
#page-after #course .inner{
position: relative;
background: #00d2e6;
z-index: 1;
overflow: hidden;
padding: 64rem 0 36rem 0;
}
@media screen and (min-width:960px) {
#page-after #course .inner{
background: none;
}
}
#page-after #course .inner::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4rem;
background: url("../images/ofr_aft_crs_bg.png") repeat-x;
background-size: 40rem 4rem;
animation: course 2s linear 0s infinite normal forwards;
}
#page-after #course .inner::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4rem;
background: url("../images/ofr_aft_crs_bg.png") repeat-x;
background-size: 40rem 4rem;
transform: scale(1, -1);
animation: course 2s linear 0s infinite normal forwards;
}
@keyframes course {
from { background-position: -40rem 0; }
to { background-position: 0 0; }
}
#page-after #course h3{
font-size: 21rem;
line-height: 29rem;
letter-spacing: 0.4rem;
font-weight: 900;
text-align: center;
transform: scale(1,0.8);
}
#page-after #course .inner h3 span{
font-size: 13rem;
line-height: 13rem;
letter-spacing: 0.4rem;
font-weight: 700;
display: block;
margin: 4rem 0 0 0;
}
#page-after #course .inner figure{
text-align: center;
margin: 12rem 0 0 0;
}
#page-after #course .inner figure img{
width: 311rem;
height: 311rem;
object-fit: cover;
border: solid #222 1rem;
border-radius: 2rem;
filter: drop-shadow(3rem 3rem 0 rgba(0,0,0,1));
}
#page-after #course .inner .button{
text-align: center;
margin: 19rem 0 0 0;
}
#page-after #course .inner .button a{
}
#page-after #course .inner .button a img{
max-width: 311rem;
}
#page-after #course .inner .bg{
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url("../images/ofr_cmn_bg.png");
background-size: 840rem auto;
transform: rotate(-16deg);
z-index: -1;
opacity: 0.24;
animation: bg 32s linear 0s infinite normal forwards;
}
@media screen and (min-width:960px) {
#page-after #course .inner .bg{
display: none;
}
}
#page-after #course .inner .steam-16{
bottom: 120rem;
left: 60rem;
}
#page-after #course .inner .steam-24{
bottom: 140rem;
left: 20rem;
}
#page-after #course .inner .steam-32{
bottom: 120rem;
right: 16rem;
}



/* ==============================================
#page-after #backnumber
============================================== */

#page-after #backnumber{
background: #fff;
display: none;
}
#page-after #backnumber .inner{
}
#page-after #backnumber .inner h2{
text-align: center;
padding: 32rem 0 0 0;
}
#page-after #backnumber .inner h2 img{
max-width: 84rem;
}
#page-after #backnumber .inner ul{
margin: 32rem 16rem 0 16rem;
}
#page-after #backnumber .inner ul li{
margin: 16rem 0 0 0;
}
#page-after #backnumber .inner ul li a{
font-size: 13rem;
line-height: 19rem;
letter-spacing: 0.2rem;
font-weight: 500;
color: #222222;
display: block;
position: relative;
min-height: 67rem;
padding: 0 0 0 79rem;
}
#page-after #backnumber .inner ul li a img{
width: 64rem;
height: 64rem;
object-fit: cover;
border-radius: 4rem;
border: solid 1rem #000;
position: absolute;
top: 0;
left: 0;
filter: drop-shadow(3rem 3rem 0 rgba(0,0,0,1));
}
#page-after #backnumber .inner ul li a span{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0;
font-weight: 900;
color: #222222;
display: block;
transform: scale(1,0.8);
}



/* ==============================================
#page-after #notes
============================================== */

#page-after #notes{
background: #fff;
}
#page-after #notes .inner{
padding: 28rem 0 96rem 0;
}
#page-after #notes .inner ul{
margin: 0 16rem;
}
#page-after #notes .inner ul li{
font-size: 11rem;
line-height: 19rem;
letter-spacing: 0.2rem;
font-weight: 400;
color: #222222;
text-indent: -11rem;
margin: 0 0 0 11rem;
}



/* ==============================================
#page-select #hero
============================================== */

#page-select #hero{
position: relative;
}
#page-select #hero .inner{
}
#page-select #hero .inner h1{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#page-select #hero .inner h1 img{
}
#page-select #hero .inner figure{
position: relative;
}
#page-select #hero .inner figure img{
width: 100%;
height: 450rem;
object-fit: cover;
}
#page-select #hero .inner figure::before{
content: "";
background: url("../images/ofr_cmn_bg-steam.jpg") bottom no-repeat;
background-size: 100% auto;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
opacity: 0.64;
}
#page-select #hero .inner p{
font-size: 13rem;
line-height: 23rem;
letter-spacing: 0.2rem;
font-weight: 400;
color: #222222;
margin: 16rem 32rem 0 32rem;
}



/* ==============================================
#page-select #area
============================================== */

#page-select #area{
}
#page-select #area .inner{
}
#page-select #area .inner h2{
text-align: center;
padding: 28rem 0 0 0;
}
#page-select #area .inner h2 img{
max-width: 77rem;
}
#page-select #area .inner ul{
margin: 16rem 32rem 0 32rem;
border-left: 1rem solid #222;
}
#page-select #area .inner ul li{
width: 14.285%;
float: left;
border-right: 1rem solid #222;
}
#page-select #area .inner ul li a{
display: block;
width: 100%;
text-align: center;
}
#page-select #area .inner ul li a img{
max-width: 21rem;
}



/* ==============================================
#page-select .area
============================================== */

#page-select .area{
}
#page-select #area-07{
padding: 0 0 96rem 0;
}
#page-select .area .inner{
}
#page-select .area .inner h2{
padding: 48rem 0 0 0;
}
#page-select .area .inner h2 img{
}



#page-select .area .inner .slider{
position: relative;
overflow: hidden;
padding: 0 0 48rem 0;
margin: 24rem 0 0 0;
}



#page-select .area .inner .slider .slick-dots {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0;
text-align: center;
}
#page-select .area .inner .slider .slick-dots li {
position: relative;
display: inline-block;
width: 16rem;
height: 16rem;
}
#page-select .area .inner .slider .slick-dots li button {
display: block;
width: 8rem;
height: 8rem;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
#page-select .area .inner .slider .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 8rem;
height: 8rem;
background: #222222;
border-radius: 4rem;
content: ' ';
}
#page-select .area .inner .slider .slick-dots li.slick-active button:before {
background-color: #f02800;
}



#page-select .area .inner .slider .slick-prev,
#page-select .area .inner .slider .slick-next {
font-size: 0;
line-height: 0;
display: block;
position: absolute;
top: 100rem;
padding: 0;
width: 44rem;
height: 44rem;
cursor: pointer;
border: none;
outline: none;
z-index: 1;
background: url("../images/ofr_cmn_sld_arw.png") right no-repeat;
background-size: 24rem 44rem;
}
#page-select .area .inner .slider .slick-prev{
left: 0;
transform: scale(-1, 1);
}
#page-select .area .inner .slider .slick-next{
right: 0;
}



#page-select .area .inner .slider .slick-track{
display:flex;
flex-wrap:wrap;
}
#page-select .area .inner .slider .slick-slide{
position: relative;
float: left;
padding: 0 32rem 60rem 32rem;
}
#page-select .area .inner .slider .slick-slide figure{
position: relative;
}
#page-select .area .inner .slider .slick-slide figure::after{
content: "";
position: absolute;
top: 0;
left: 0;
background: url("../images/ofr_slc_ar_img.png") no-repeat;
background-size: 311rem 240rem;
width: 311rem;
height: 240rem;
}
#page-select .area .inner .slider .slick-slide figure img{
width: 311rem;
height: 240rem;
object-fit: cover;
}
#page-select .area .inner .slider .slick-slide figure span{
display: block;
position: absolute;
bottom: -16rem;
left: -16rem;
z-index: 1;
}
#page-select .area .inner .slider .slick-slide figure span img{
width: 64rem;
height: 64rem;
}
#page-select .area .inner .slider .slick-slide h3{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #222222;
margin: 20rem 0 0 0;
transform: scale(1,0.8);
}
#page-select .area .inner .slider .slick-slide h3 span{
font-size: 13rem;
line-height: 13rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #222222;
display: block;
margin: 8rem 0 0 0;
}
#page-select .area .inner .slider .slick-slide h3 + p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.2rem;
font-weight: 400;
color: #222222;
margin: 8rem 0 0 0;
display: none;
}
#page-select .area .inner .slider .slick-slide .button{
position: absolute;
bottom: 0;
left: 32rem;
right: 32rem;
}
#page-select .area .inner .slider .slick-slide .button a{
}
#page-select .area .inner .slider .slick-slide .button a img{
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20rem);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20rem);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8,0.8);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}



.slideUp {
animation-name: slideUp;
animation-timing-function:linear;
}
@keyframes slideUp {
0% {
transform: translateY(40rem);
}

100% {
transform: translateY(0);
}
}



.pon {
animation-name: pon;
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(.5);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}



.move-s{
animation: move-s 2.0s ease-in-out 0s infinite normal forwards;
}
@keyframes move-s {
0% {
transform: translateY(0rem);
}
50% {
transform: translateY(-4rem);
}
100% {
transform: translateY(0rem);
}
}
.move-l{
animation: move-l 3.0s ease-in-out 0s infinite normal forwards;
}
@keyframes move-l {
0% {
transform: translateY(0rem);
}
50% {
transform: translateY(-8rem);
}
100% {
transform: translateY(0rem);
}
}