@import url(base.css);
@import url(ivftourBase.css);

.ctrl{width:100%;} 
.ctrl dl{width:80%; text-align: center;  border-radius:1.9em; overflow: hidden;}
.ctrl dl dd{padding:1em; height:calc(0.8 * 232px); font-size:0.8rem; color:#fff; background:url("ivftourtop.jpg") no-repeat 0 0; background-size:100% 100%;}
.ctrl dl dt{line-height:2; background-color:#fff;}

.ctrl ul{margin:2em auto;padding:0; width:90%; font-size:0.8rem; border-top:#333 1px dashed; display:flex; justify-content: space-between;}
.ctrl ul li{padding-top:1.5em; width:2em; text-align: center; position:relative;}
.ctrl ul li:before{margin:0 auto; width:0.7em; height:0.7em; content: ""; border:gray 1px solid; background-color:darkgray; border-radius:100%; display: block; position: absolute; left:50%; top:0; transform:translate(-50%,-50%);}
.ctrl ul li.c:before{border:#f36060 3px solid; background-color:red;}



#content{margin-top:2em; padding:0 1em; webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#content a{margin-top:1em; font-size:1.2em; display: block;}
#content a::before{width:0.5em; height:0.5em; content: ""; background-color:red; display: inline-block; vertical-align: middle; margin-right:0.5em; border-radius:100%;}
#content>div.block{padding:1em 1em 5em 1em; background-color: white; border-radius:1em; box-shadow:#f1f1f1 0 0 5px; position:relative}
#content>div.block::after{content: ""; position:absolute; right:0; bottom:0; border-right:3em red solid; border-top:transparent 4em solid; border-left:2em transparent solid; border-radius: 0 0 1em 0;}
#content>div.block h2{margin:0; font-weight: normal; display:block; position:relative}
#content>div.block h2::before{font:0.8em/1.2 "Times New Roman"; color:lightgray; content: "PHASE "attr(data-count); display: block;}
#content>div.block h2::after{width:1em; height:1em; content: ""; position:absolute; right:0; top:0; background:url("ivftouricon.png") no-repeat 0 0; background-size:auto 1em; display:block;}
#content>div.block h2+p{padding:1em 0; line-height: 2;}

#content>div.block:nth-of-type(1) h2::after{background-position:0 0;}
#content>div.block:nth-of-type(2) h2::after{background-position:-1em 0;}
#content>div.block:nth-of-type(3) h2::after{background-position:-2em 0;}
#content>div.block:nth-of-type(4) h2::after{background-position:-3em 0;}
#content>div.block:nth-of-type(5) h2::after{background-position:-4em 0;}
#content>div.block:nth-of-type(6) h2::after{background-position:-5em 0;}
#content>div.block:nth-of-type(7) h2::after{background-position:-6em 0;}
#content>div.block:nth-of-type(8) h2::after{background-position:-7em 0;}


#content section{margin:1em auto; width:100%; }
#content section h3{width:100%; font:1.2rem normal; display: inline-block}
#content section div{padding:1em; }
#content section div a{width:auto; font-size:0.9em; display: block;}

@media screen and ( max-width:640px ){
    .ctrl dl{border-radius:1.5em;}
    .ctrl dl dd{height:calc(100vw * 0.8 * 232 / 640);}
}