@charset "utf-8";
/* CSS Document */

/*============================
#topPanelArea
============================*/
#topPanelArea {}
#topPanelArea .ja { font-size: 1.5em; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; color: #fff; }
#topPanelArea h1 { margin-top: 20px; }

/*============================
#realityArea
============================*/
#realityArea {}
#realityArea .topCopy { padding-bottom: 80px; font-size: 1.375em; line-height: 2; font-weight: 500; font-feature-settings: 'palt'; }
#realityArea .wrapper { padding: 60px 60px 120px 60px; border-radius: 20px; box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2); background-color: #fff; }
#realityArea .wrapper .container { width: 100%; }

/* .container 汎用スタイル */
#realityArea .wrapper .container .content {}
#realityArea .wrapper .container .content .title {}
#realityArea .wrapper .container .content .title .bubble { position: relative; margin: 0 auto; width: 70px; height: 70px; background-color: #00377e; border-radius: 50%; }
#realityArea .wrapper .container .content .title .bubble:before { content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 16px solid #00377e; border-bottom: 0; }
#realityArea .wrapper .container .content .title .bubble span { position: absolute; text-align: center; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; color: #fff; font-size: 1.125em; }
#realityArea .wrapper .container .content .title .main { text-align: center; margin-top: 30px; font-size: 2em; color: #00377e; line-height: 1.5; }
#realityArea .wrapper .container .content .title .main span { position: relative; color: #fff; padding: 10px 6px; z-index: 0; }
#realityArea .wrapper .container .content .title .main span:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url("../../imageFile/global/bg_letter01.png"); background-size: cover; width: 100%; height: 45px; z-index: -1; }
#realityArea .wrapper .container .content .copy { 
    display: inline-block; /* inlineだとwidthが効かないため修正 */
    font-size: 1.125em;
    font-weight: 500;
    line-height: 3; 
    width: 54%; 
    text-decoration-line: underline; 
    text-decoration-style: dotted; 
    text-decoration-thickness: 4px; 
    text-underline-offset: 8px; 
    text-decoration-color: #ddd; 
}
#realityArea .wrapper .container .content .image {}
#realityArea .wrapper .container .content .image img {}

/* .container.maximum スタイル */
#realityArea .wrapper .container.maximum { padding: 40px 0 120px; border-bottom: 1px solid #ddd; }
#realityArea .wrapper .container.maximum:last-child { border-bottom: none; padding-bottom: 0; }
#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 { display: flex; justify-content: space-between; position: relative; margin-top: 80px; }
#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 { display: flex; justify-content: space-between; position: relative; padding: 40px 0 80px; border-bottom: 1px solid #ddd; }
#realityArea .wrapper .container.half:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1px; height: 88%; background-color: #ddd; }
#realityArea .wrapper .container.half .content { width: 45%; }
#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 { width: 100%; }
#realityArea .wrapper .container.half .content .image { margin: 0 auto; /* typo: marign -> margin */ }
#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 .title .main span {} */ /* 空のため削除 */
#realityArea .wrapper .container.maximum .content.first .copy {}
#realityArea .wrapper .container.maximum .content.first .image { position: absolute; right: 20px; top: -90px; width: 483px; height: 293px; }
#realityArea .wrapper .container.maximum .content.first .image img { width: 100%; height: auto; }

/* --- content.second --- */
#realityArea .wrapper .container.half .content.second {}
#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: 78px auto; width: 475px; height: 192px; }
#realityArea .wrapper .container.half .content.second .image img { width: 100%; height: auto; }
#realityArea .wrapper .container.half .content.second .copy {}

/* --- content.third --- */
#realityArea .wrapper .container.half .content.third {}
#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: 39px auto; width: 452px; height: 222px; } /* .second .image とマージンを合わせるため 39px auto に変更 */
#realityArea .wrapper .container.half .content.third .image img { width: 100%; height: auto; }
#realityArea .wrapper .container.half .content.third .copy {}

/* --- content.forth --- */
#realityArea .wrapper .container.maximum .content.forth {}
#realityArea .wrapper .container.maximum .content.forth .title {}
#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: absolute; right: 25px; top: -150px; width: 480px; height: 361px; }
#realityArea .wrapper .container.maximum .content.forth .image img { width: 100%; height: auto; }

/* --- content.fifth --- */
#realityArea .wrapper .container.half .content.fifth {}
#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: 50px auto; width: 282px; height: 181px; }
#realityArea .wrapper .container.half .content.fifth .image img { width: 100%; height: auto; }
#realityArea .wrapper .container.half .content.fifth .copy {}

/* --- content.sixth --- */
#realityArea .wrapper .container.half .content.sixth {}
#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: 50px auto; width: 212px; height: 227px; }
CALES#realityArea .wrapper .container.half .content.sixth .image img { width: 100%; height: auto; }
#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: absolute; right: 0; top: -150px; width: 528px; height: 413px; }
#realityArea .wrapper .container.maximum .content.seventh .image img { width: 100%; height: auto; }

/* --- 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: 50px auto 0; width: 503px; height: 308px; }
#realityArea .wrapper .container.maximum .content.eighth .image img { width: 100%; height: auto; }
#realityArea .wrapper .container.maximum .content.eighth .copy { display: inline-block; margin-top: 50px; width: 100%; }