@charset "utf-8";

@media screen and (max-width: 640px) {

/*============================
#topPanelArea
============================*/
#topPanelArea {}
#topPanelArea .ja { font-size: 0.875em; }
#topPanelArea h1 { margin-top: 10px; }

/*============================
#realityArea
============================*/
#realityArea {}
#realityArea .topCopy { padding-bottom: 30px; font-size: 1em; line-height: 1.75; }
#realityArea .wrapper { padding: 30px 20px 80px 20px; border-radius: 10px; width: 100vw; left: 50%; position: relative; transform: translateX(-50%); }
#realityArea .wrapper .container {}

/* .container 汎用スタイル */
#realityArea .wrapper .container .content {}
#realityArea .wrapper .container .content .title {}
#realityArea .wrapper .container .content .title .bubble { width: 55px; height: 55px; }
#realityArea .wrapper .container .content .title .bubble:before { bottom: -10px; }
#realityArea .wrapper .container .content .title .bubble span { font-size: 0.875em; }
#realityArea .wrapper .container .content .title .main { margin-top: 20px; font-size: 1.65em; }
#realityArea .wrapper .container .content .title .main span {}
#realityArea .wrapper .container .content .title .main span:after { height: 35px; }
#realityArea .wrapper .container .content .copy { font-size: 1em; letter-spacing: 0.05em; font-weight: 500; line-height: 2.5; width: 100%; }
#realityArea .wrapper .container .content .image {}
#realityArea .wrapper .container .content .image img {}

/* .container.maximum スタイル */
#realityArea .wrapper .container.maximum { padding: 30px 0 60px; }
#realityArea .wrapper .container.maximum:last-child {}
#realityArea .wrapper .container.maximum .content {}
#realityArea .wrapper .container.maximum .content .title {}
#realityArea .wrapper .container.maximum .content .title .bubble {}
#realityArea .wrapper .container.maximum .content .title .bubble span {}
#realityArea .wrapper .container.maximum .content .title .main {}
#realityArea .wrapper .container.maximum .content .title .main span {}
#realityArea .wrapper .container.maximum .content .title .main span:after {}
#realityArea .wrapper .container.maximum .content .detail { flex-direction: column; margin-top: 20px; }
#realityArea .wrapper .container.maximum .content .copy {}
#realityArea .wrapper .container.maximum .content .image {}
#realityArea .wrapper .container.maximum .content .image img {}

/* .container.half スタイル */
#realityArea .wrapper .container.half { flex-direction: column; padding: 40px 0 60px; }
#realityArea .wrapper .container.half:before { content: none; }
#realityArea .wrapper .container.half .content { width: 100%; }
#realityArea .wrapper .container.half .content .title {}
#realityArea .wrapper .container.half .content .title .bubble {}
#realityArea .wrapper .container.half .content .title .bubble:before {}
#realityArea .wrapper .container.half .content .title .bubble span {}
#realityArea .wrapper .container.half .content .title .main {}
#realityArea .wrapper .container.half .content .title .main span {}
#realityArea .wrapper .container.half .content .title .main span:after {}
#realityArea .wrapper .container.half .content .copy {}
#realityArea .wrapper .container.half .content .image {}
#realityArea .wrapper .container.half .content .image img {}


/* --- content.first --- */
#realityArea .wrapper .container.maximum .content.first {}
#realityArea .wrapper .container.maximum .content.first .title {}
#realityArea .wrapper .container.maximum .content.first .title .bubble {}
#realityArea .wrapper .container.maximum .content.first .title .bubble span {}
#realityArea .wrapper .container.maximum .content.first .title .main {}
#realityArea .wrapper .container.maximum .content.first .copy {}
#realityArea .wrapper .container.maximum .content.first .image { position: relative; right: inherit; top: 30px; margin: 0 auto; width: 80%; height: auto; }
#realityArea .wrapper .container.maximum .content.first .image img {}

/* --- content.second --- */
#realityArea .wrapper .container.half .content.second { padding-bottom: 60px; border-bottom: 1px solid #ddd; }
#realityArea .wrapper .container.half .content.second .title {}
#realityArea .wrapper .container.half .content.second .title .bubble {}
#realityArea .wrapper .container.half .content.second .title .bubble span {}
#realityArea .wrapper .container.half .content.second .title .main {}
#realityArea .wrapper .container.half .content.second .title .main span {}
#realityArea .wrapper .container.half .content.second .image { margin: 30px auto; width: 80%; height: auto; }
#realityArea .wrapper .container.half .content.second .image img {}
#realityArea .wrapper .container.half .content.second .copy {}

/* --- content.third --- */
#realityArea .wrapper .container.half .content.third { padding-top: 30px; }
#realityArea .wrapper .container.half .content.third .title {}
#realityArea .wrapper .container.half .content.third .title .bubble {}
#realityArea .wrapper .container.half .content.third .title .bubble span {}
#realityArea .wrapper .container.half .content.third .title .main {}
#realityArea .wrapper .container.half .content.third .title .main span {}
#realityArea .wrapper .container.half .content.third .image { margin: 0 auto 30px; width: 80%; height: auto; }
#realityArea .wrapper .container.half .content.third .image img {}
#realityArea .wrapper .container.half .content.third .copy {}

/* --- content.forth --- */
#realityArea .wrapper .container.maximum .content.forth {}
#realityArea .wrapper .container.maximum .content.forth .title { white-space: nowrap; }
#realityArea .wrapper .container.maximum .content.forth .title .bubble {}
#realityArea .wrapper .container.maximum .content.forth .title .bubble span {}
#realityArea .wrapper .container.maximum .content.forth .title .main {}
#realityArea .wrapper .container.maximum .content.forth .title .main span {}
#realityArea .wrapper .container.maximum .content.forth .copy {}
#realityArea .wrapper .container.maximum .content.forth .image { position: relative; margin: 0 auto; right: inherit; top: -20px; width: 80%; height: auto; }
#realityArea .wrapper .container.maximum .content.forth .image img {}

/* --- content.fifth --- */
#realityArea .wrapper .container.half .content.fifth { padding-bottom: 60px; border-bottom: 1px solid #ddd; }
#realityArea .wrapper .container.half .content.fifth .title {}
#realityArea .wrapper .container.half .content.fifth .title .bubble {}
#realityArea .wrapper .container.half .content.fifth .title .bubble span {}
#realityArea .wrapper .container.half .content.fifth .title .main {}
#realityArea .wrapper .container.half .content.fifth .title .main span {}
#realityArea .wrapper .container.half .content.fifth .image { margin: 30px auto; width: 80%; height: auto; }
#realityArea .wrapper .container.half .content.fifth .image img {}
#realityArea .wrapper .container.half .content.fifth .copy {}

/* --- content.sixth --- */
#realityArea .wrapper .container.half .content.sixth { padding-top: 30px; }
#realityArea .wrapper .container.half .content.sixth .title {}
#realityArea .wrapper .container.half .content.sixth .title .bubble {}
#realityArea .wrapper .container.half .content.sixth .title .bubble span {}
#realityArea .wrapper .container.half .content.sixth .title .main {}
#realityArea .wrapper .container.half .content.sixth .title .main span {}
#realityArea .wrapper .container.half .content.sixth .image { margin: 30px auto; width: 55%; height: auto; }
CALES#realityArea .wrapper .container.half .content.sixth .image img {}
#realityArea .wrapper .container.half .content.sixth .copy {}

/* --- content.seventh --- */
#realityArea .wrapper .container.maximum .content.seventh {}
#realityArea .wrapper .container.maximum .content.seventh .title {}
#realityArea .wrapper .container.maximum .content.seventh .title .bubble {}
#realityArea .wrapper .container.maximum .content.seventh .title .bubble span {}
#realityArea .wrapper .container.maximum .content.seventh .title .main {}
#realityArea .wrapper .container.maximum .content.seventh .title .main span {}
#realityArea .wrapper .container.maximum .content.seventh .copy {}
#realityArea .wrapper .container.maximum .content.seventh .image { position: relative; margin: 0 auto; right: inherit; top: -20px; width: 80%; height: auto; }
#realityArea .wrapper .container.maximum .content.seventh .image img {}

/* --- content.eighth --- */
#realityArea .wrapper .container.maximum .content.eighth {}
#realityArea .wrapper .container.maximum .content.eighth .title {}
#realityArea .wrapper .container.maximum .content.eighth .title .bubble {}
#realityArea .wrapper .container.maximum .content.eighth .title .bubble span {}
#realityArea .wrapper .container.maximum .content.eighth .title .main {}
#realityArea .wrapper .container.maximum .content.eighth .title .main span {}
#realityArea .wrapper .container.maximum .content.eighth .image { margin: 30px auto 0; width: 80%; height: auto; }
#realityArea .wrapper .container.maximum .content.eighth .image img {}
#realityArea .wrapper .container.maximum .content.eighth .copy { margin-top: 30px; }

}