@charset "utf-8";
body {font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}
input{display:none;}
.TOP{background:#ffffff;
img-align:center;
margin:0 auto;
padding:0px;
background-image:url("../practice_image_folder/html_lesson.png");
background-position:center; 
background-repeat:no-repeat;
width:900px;
height:200px;
object-fit:fill;}
h1{text-align:center;
color:#007f6f;
margin-top:30px;
margin-bottom:10px;
font-size:280%;
font-weight:bold;}
h2{margin-top:10px;
background-color:#abcdef;
color:#000000;}
h3{text-align:center;
color:#007f6f;
margin-top:24px;
margin-bottom:10px;
font-size:400%;
font-weight:bold;}
h4{text-align:center;
color:#007f6f;
margin-top:24px;
margin-bottom:10px;
font-size:180%;
font-weight:bold;}
.CLOSED{font-size:60px;
color:#888888;
background-color:#ddffdd;
position:absolute;
bottom:20px;
right:20px;}
#FRANK-GANBALE{max-width:1000px;
margin:3px auto;}
.PRACTICE {position:relative;}
.PRACTICE:hover{cursor:pointer;}
.WINDOW {position:absolute;
opacity:1;
width: 33.333%;
transition:all 0.5s ease;}
#LESSON-01{padding-top:0;left:0;}
#LESSON-02{padding-top:0;left:33.333%;}
#LESSON-03{padding-top:0;left:66.666%;}
#LESSON-06{padding-top:33.333%;left:0%;}
#LESSON-07{padding-top:33.333%;left:33.333%;}
#LESSON-08{padding-top:33.333%;left:66.666%;}
#LESSON-11{padding-top:66.666%;left:0%;}
#LESSON-12{padding-top:66.666%;left:33.333%;}
#LESSON-13{padding-top:66.666%;left:66.666%;}
#BOX-01:checked ~ .PRACTICE label:not([for="BOX-01"]) > .WINDOW,
#BOX-02:checked ~ .PRACTICE label:not([for="BOX-02"]) > .WINDOW,
#BOX-03:checked ~ .PRACTICE label:not([for="BOX-03"]) > .WINDOW,
#BOX-06:checked ~ .PRACTICE label:not([for="BOX-06"]) > .WINDOW,
#BOX-07:checked ~ .PRACTICE label:not([for="BOX-07"]) > .WINDOW,
#BOX-08:checked ~ .PRACTICE label:not([for="BOX-08"]) > .WINDOW,
#BOX-11:checked ~ .PRACTICE label:not([for="BOX-11"]) > .WINDOW,
#BOX-12:checked ~ .PRACTICE label:not([for="BOX-12"]) > .WINDOW,
#BOX-13:checked ~ .PRACTICE label:not([for="BOX-13"]) > .WINDOW{ 
width:0; 
opacity:0;}
#BOX-01:checked ~ .PRACTICE label #LESSON-01,
#BOX-02:checked ~ .PRACTICE label #LESSON-02,
#BOX-03:checked ~ .PRACTICE label #LESSON-03,
#BOX-06:checked ~ .PRACTICE label #LESSON-06,
#BOX-07:checked ~ .PRACTICE label #LESSON-07,
#BOX-08:checked ~ .PRACTICE label #LESSON-08,
#BOX-11:checked ~ .PRACTICE label #LESSON-11,
#BOX-12:checked ~ .PRACTICE label #LESSON-12,
#BOX-13:checked ~ .PRACTICE label #LESSON-13
{padding-top: 0;
left:0;
width:100%;
cursor:auto;}
#WINDOW-CLOSED-ON:checked ~ .PRACTICE label .WINDOW{width:33.333%;
pointer-events: auto;}
#WINDOW-CLOSED-ON:checked ~ .PRACTICE label .WINDOW .WORLD-TOUR {display:block;}
#WINDOW-CLOSED-ON:checked ~ .PRACTICE label #OUT-WORLD {display:none;}
#WINDOW-CLOSED-ON:checked ~ .PRACTICE label .WINDOW {}
.STOP-MOTION:checked ~ .PRACTICE label .WINDOW .WORLD-TOUR {display: none;}
.STOP-MOTION:checked ~ .PRACTICE label .WINDOW {pointer-events: none;}
.STOP-MOTION:checked ~ .PRACTICE label #OUT-WORLD {display:block;}
.WINDOW img{width:100%;
border: 2px #ffffff solid;}
.WINDOW:hover > .WORLD-TOUR{background-color:rgba(0,100,60,0.3);
box-shadow: -5px -5px 10px 1px #abcdef inset;}
.WINDOW:hover >.AMAZON{opacity:1;}
.WORLD-TOUR {background-color: rgba(255,255,255,0);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;}
.AMAZON{position:absolute;
margin-top:5%;
margin-left:5%;
color:#ff0000;
font-weight:bold;
font-size:60px;
display:block;
opacity:0;
transition:opacity 1s ease;}
#OUT-WORLD{position:absolute;
top:22px;
right:0;
display:none;}
#OUT-WORLD img{width:100%;}
#EXERCISE{position:relative;
margin-top:0px;}
.SECRET-SERVICE{opacity:0;
margin-top:-26%;
transition:all 0.5s ease;
position:absolute;
max-width:960px;}
#BOX-01:checked ~ #EXERCISE #DOMINANT-01{opacity:1;
margin-top:-400;}
#BOX-02:checked ~ #EXERCISE #DOMINANT-02{opacity:1;
margin-top:-400;}
#BOX-03:checked ~ #EXERCISE #DOMINANT-03{opacity:1;
margin-top:-400;}
#BOX-06:checked ~ #EXERCISE #DOMINANT-06{opacity:1;
margin-top:-400;}
#BOX-07:checked ~ #EXERCISE #DOMINANT-07{opacity:1;
margin-top:-400;}
#BOX-08:checked ~ #EXERCISE #DOMINANT-08{opacity:1;
margin-top:-400;}
#BOX-11:checked ~ #EXERCISE #DOMINANT-11{ opacity:1;
margin-top:-400;}
#BOX-12:checked ~ #EXERCISE #DOMINANT-12{opacity:1;
margin-top:-400;}
#BOX-13:checked ~ #EXERCISE #DOMINANT-13{opacity:1;
margin-top:-400;}
.CLOSED-WINDOW:hover{cursor:pointer;}
.SUISUI{position:relative;
max-width:1000px;
margin:0 auto;
transition:all 1s ease;
z-index:100;}
.SUISUI iframe{position:absolute;
width:100%;
height:700px;
background-color:#ffffff;}
.STOP-MOTION:checked ~ .SUISUI{opacity:0;
margin-top:50px;
z-index:-1;}
#WINDOW-CLOSED-ON:checked ~ .SUISUI{opacity:1;
margin-top:0px;
z-index:100;}
div.BOTTOM-SQUARE{width:1000px;
height:400px;
background-color:#ffffff;
position:absolute;
top:-20px;}
div.BOTTOM-SQUARE-1{width:300px;
height:300px;
background-color:#ffffff;
position:absolute;
top:10px;
left:10px;} 
div.BOTTOM-SQUARE-2{width:670px;
height:300px;
background-color:#ffffff;
position:absolute;
top:10px;
left:500px;}