/* root */



@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root{
--yellow: #ffcd00;
--yellow-light: #ffeda4;
--orange: #ff9900;
--pink: #eeadfd;
--green: #05b763;
--field: #e6ecff;
--field-border: #0047e7;
--sim-type0: #00ac00;
--sim-type1: #ffdd00;
--sim-type2: #4485e6;
--sim-type3: #ff7f00;
--sim-type4: #ff3d00;
}



/* core */



*{-webkit-box-sizing: border-box; box-sizing: border-box; scrollbar-width: thin; -webkit-font-smoothing: antialiased;}
html{height: 100%; margin: 0; padding: 0;}
body{height: 100%; margin: 0; padding: 0; background: #fff; color: #000; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.4em;}
a{cursor: pointer; text-decoration: none; color: inherit;}
img{display: block; max-width: 100%; height: auto;}
ul,ol{list-style: none; margin: 0; padding: 0;}
@media all and (max-width:1200px){
body{font-size: 15px;}
}
@media all and (max-width: 900px){
body{font-size: 14px;}
}
@media all and (max-width: 600px){
body{font-size: 13px;}
}



/* font use */



h1{margin: 0.6em 0; font-family: 'Funnel Display', 'Open Sans', sans-serif; font-size: 4.0rem; line-height: 1.0em; font-weight: 600; text-align: center;}
h2{margin: 0.8em 0; font-family: 'Open Sans', sans-serif; font-size: 2.6rem; line-height: 1.2em; font-weight: 400; text-align: center;}
h3{margin: 0.8em 0; font-family: 'Open Sans', sans-serif; font-size: 2.0rem; line-height: 1.2em; font-weight: 600;}
h4{margin: 0.8em 0; font-family: 'Open Sans', sans-serif; font-size: 1.6rem; line-height: 1.3em; font-weight: 600;}
h1.x{margin: 0.4em 0; font-size: 6.0rem;}
p{margin: 1.2em 0; font-size: 1.0em; line-height: 1.4em;}
p.teaser{max-width: 800px; margin-top: 30px; margin-bottom: 30px; margin-left: auto; margin-right: auto; text-align: center; font-size: 1.4em !important; line-height: 1.4em !important; font-weight: 600;}
p.teaser.teaser-x{font-size: 1.6em !important; line-height: 1.4em !important;}
p a{text-decoration: underline; color: #444;}
p a:hover{color: #000;}
p strong{font-weight: 600;}
a.button{display: inline-table; padding: 18px 54px 18px 24px; background: #000 url(svg/arrow-w.svg) right 18px center / 24px auto no-repeat; border-radius: 8px; font-size: 1.2em; font-weight: 500; color: #fff; text-decoration: none; cursor: pointer;}
a.button:hover{color: var(--yellow);}
div.callback{text-align: center;}
div.callback p{max-width: 700px; margin-left: auto; margin-right: auto; font-size: 1.1em; line-height: 1.5em;}
div.callback p.mark{margin: 40px auto; padding: 20px; background: #fff; border-radius: 6px;}
div.callback div.mark{max-width: 700px; margin: 40px auto; padding: 30px; background: #fff; border-radius: 6px;}
div.callback div.mark>*:first-child{margin-top: 0;}
div.callback div.mark>*:last-child{margin-bottom: 0;}
div.callback div.mark p{font-size: 1.0em; line-height: 1.4em;}
@media all and (max-width:1200px){
h1.x{font-size: 4.0rem;}
}
@media all and (max-width: 900px){
h1{font-size: 3.0rem;}
h2{font-size: 2.0rem;}
h3{font-size: 1.8rem;}
h3{font-size: 1.4rem;}
h1.x{font-size: 3.6rem;}
}
@media all and (max-width: 600px){
h1{font-size: 2.6rem;}
h2{font-size: 1.6rem;}
h3{font-size: 1.4rem;}
h4{font-size: 1.2rem;}
h1.x{font-size: 3.2rem;}
a.button{padding: 14px 46px 14px 16px; background-position: right 16px center; background-size: 18px auto;}
}



/* form hold */



form{margin: 0; padding: 0;}
input,textarea,select{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
input:focus,textarea:focus,select:focus{outline: none;}
div.field-hold{width: 100%; max-width: 1100px; margin: 10px auto; padding: 20px; background: #fff; border: 3px solid #000; border-radius: 8px; overflow: hidden;}
div.field-name{margin: 0 0 14px 0; font-size: 1.2em; line-height: 1.5em; font-weight: 600;}
div.field-desc{margin: 0 0 14px 0; font-size: 0.9em; line-height: 1.5em; font-weight: 400; font-style: italic; color: #666;}
div.field-warn{margin: 0 0 14px 0; font-size: 0.9em; line-height: 1.3em; font-weight: 400; font-style: italic; color: #f00;}
div.field{display: block; overflow: hidden;}
div.nav{z-index: 20; position: sticky; bottom: 0; display: table; margin: 0 auto; padding: 20px 0; pointer-events: none;}
div.nav input[type=button],input[type=button].button{margin: 0 6px; padding: 15px 20px; background-color: var(--yellow); border: 3px solid #000; border-right-width: 5px; border-bottom-width: 5px; border-radius: 8px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: #000; pointer-events: all; cursor: pointer; -webkit-transition: background-color 100ms ease; transition: background-color 100ms ease;}
div.nav input[type=button]{padding-right: 50px; background-image: url(svg/arrow.svg); background-position: right 15px center; background-repeat: no-repeat; background-size: 25px auto; touch-action: manipulation;}
div.nav input[type=button]:hover,input[type=button].button:hover{background-color: #eebf00;}
div.nav input[type=button].prev{padding: 15px 20px 15px 50px; background: #fff url(svg/arrow-prev.svg) left 15px center / 25px auto no-repeat;}
div.nav input[type=button].prev:hover{background-color: #eeeeee;}
div.nav input[type=button]:disabled,input[type=button].button:disabled{display: none !important;}
div.progress-bar{width: 100%; max-width: 400px; margin: 20px auto; background: #fff; border-radius: 100px; overflow: hidden;}
div.progress-bar>div{width: 2%; height: 8px; background: #000; -webkit-transition: width 240ms ease; transition: width 240ms ease;}
body.lock-on div.nav input[type=button]{pointer-events: none;}
@media all and (max-width: 600px){
div.field-hold{padding: 16px; border-width: 2px;}
div.nav input[type=button]{margin: 0 4px; padding: 10px 45px 10px 15px; background-size: 20px auto; border-width: 2px; border-right-width: 4px; border-bottom-width: 4px; font-size: 1.1em;}
div.nav input[type=button].prev{padding: 10px 15px 10px 45px;}
}



/* form */



div.field-hold.field-type-text input[type=text],div.field-hold.field-type-number input[type=text]{margin: 0 4px 0 0; padding: 14px; background: #fff; border: 2px solid #ccc; border-radius: 6px; font-family: 'Open Sans', sans-serif; font-size: 1.0em; font-weight: 500; color: #000;}
div.field-hold.field-type-text input[type=text]:hover,div.field-hold.field-type-number input[type=text]:hover{border-color: #aaa;}
div.field-hold.field-type-text input[type=text]:focus,div.field-hold.field-type-number input[type=text]:focus{background: var(--field) !important; border-color: var(--field-border) !important;}
div.field-hold.field-type-textarea textarea{width: 100%; max-width: 600px; resize: none; margin: 0; padding: 14px; background: #fff; border: 2px solid #ccc; border-radius: 6px; font-family: 'Open Sans', sans-serif; font-size: 1.0em; font-weight: 500; color: #000;}
div.field-hold.field-type-textarea textarea:hover{border-color: #aaa;}
div.field-hold.field-type-textarea textarea:focus{background: var(--field) !important; border-color: var(--field-border) !important;}
div.field-hold.field-type-textarea div.char-count{display: table; margin-top: 10px; padding: 4px 12px; background: #ddd; border-radius: 100px; font-size: 0.9em; font-weight: 600;}
div.field-hold.field-type-range div.field,div.field-hold.field-type-check div.field,div.field-hold.field-type-radio div.field,div.field-hold.field-type-radio_choice div.field{margin: -4px; -webkit-user-select: none; user-select: none;}
div.field-hold.field-type-hidden{display: none;}
div.field.type-radio.item-per-row div.box{display: table; float: none; margin: 8px 4px;}
div.box{display: inline-block; float: left; margin: 4px;}
div.box>label{position: relative; display: inline-block;}
div.box>label>div{z-index: 2; position: relative; padding: 8px 14px; border-radius: 100px; background: #fff; border: 2px solid #ccc; font-weight: 500; -webkit-transition: background 100ms ease, border-color 100ms ease; transition: background 100ms ease, border-color 100ms ease;}
div.box>label>input{z-index: 4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; border-radius: 0; opacity: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;}
div.box>label>input:checked ~ div{background: var(--field) !important; border-color: var(--field-border) !important; color: var(--field-border);}
div.box>label>input:not(:disabled):hover ~ div{background: #efefef; border-color: #aaa;}
div.box.box-radio>label>div,div.box.box-check>label>div{padding-left: 40px;}
div.box.box-radio>label>div:before,div.box.box-check>label>div:before{content: ''; position: absolute; top: 50%; left: 10px; display: block; width: 20px; height: 20px; margin-top: -10px; background-color: #ccc; background-repeat: no-repeat; background-position: center center; background-size: 60% auto; border-radius: 6px;}
div.box.box-radio>label>div:before{border-radius: 50%;}
div.box.box-radio>label>input:checked ~ div:before,div.box.box-check>label>input:checked ~ div:before{background-image: url(svg/tick-w.svg); background-color: var(--field-border);}
@media all and (max-width: 600px){
div.field-hold.field-type-range div.box{display: block; float: none;}
}



/* form range */



input[type=range]{position: relative; width: 100%; margin: 0; background-color: transparent; -webkit-appearance: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;}
input[type=range]:before{position: absolute; top: 13px; left: 0; width: 100%; height: 4px; content: ''; display: block; background: #000; pointer-events: none;}
input[type=range]:focus{outline: none;}
input[type=range]::-webkit-slider-runnable-track{width: 100%; height: 30px; background: transparent; border: none; border-radius: 0; box-shadow: none; cursor: pointer;}
input[type=range]::-webkit-slider-thumb{width: 16px; height: 30px; background: #000; border: none; border-radius: 0; box-shadow: none; cursor: pointer; -webkit-appearance: none;}
input[type=range]::-moz-range-track{width: 100%; height: 30px; background: transparent; border: none; border-radius: 0; box-shadow: none; cursor: pointer;}
input[type=range]::-moz-range-thumb{width: 16px; height: 30px; background: #000; border: none; border-radius: 0; box-shadow: none; cursor: pointer;}
input[type=range]::-ms-track{width: 100%; height: 30px; background: transparent; border: none; color: transparent; cursor: pointer;}
input[type=range]::-ms-fill-lower{background: transparent; border: none; border-radius: 0; box-shadow: none;}
input[type=range]::-ms-fill-upper{background: transparent; border: none; border-radius: 0; box-shadow: none;}
input[type=range]::-ms-thumb{width: 16px; height: 30px; background: #000; border: none; border-radius: 0; box-shadow: none; cursor: pointer;}
div.slider-name{display: table; width: 100%; table-layout: fixed; margin-bottom: 18px;}
div.slider-name>div{display: table-cell; padding: 0 10px 0 0;}
div.slider-name>div:nth-child(2){padding: 0 0 0 10px; text-align: right;}
div.slider-name span{position: relative; display: inline-block; padding: 6px 10px; background: #ddd; font-size: 0.9em; font-weight: 500;}
div.slider-name span:before{content: ''; position: absolute; left: 0; bottom: -18px; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color: #ddd transparent transparent transparent;}
div.slider-name>div:nth-child(2) span:before{left: auto; right: 0; border-width: 0 20px 20px 0; border-color: transparent #ddd transparent transparent;}
div.type-range_slider div.slider-data{position: relative; overflow: hidden;}
div.type-range_slider div.slider-data-mark{z-index: 2; position: absolute; top: 0; left: 8px; right: 8px; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: stretch; align-items: stretch; pointer-events: none;}
div.type-range_slider div.slider-data-mark>div{-webkit-flex-grow: 1; flex-grow: 1; border-right: 1px solid #aaa;}
div.type-range_slider div.slider-data-mark>div:first-child{border-left: 1px solid #aaa;}
div.type-range_slider input[type=range]{z-index: 4;}
div.type-range_slider_double div.slider-type{margin-bottom: 14px;}
div.type-range_slider_double div.slider-type>div{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
div.type-range_slider_double div.slider-type>div>span{display: block; width: 1.0em; aspect-ratio: 1/1; margin-right: 0.6em; border-radius: 50%; background: #ddd;}
div.type-range_slider_double div.slider-type>div.type-a>span{background: #0047e7;}
div.type-range_slider_double div.slider-type>div.type-b>span{background: #ff00b8;}
div.type-range_slider_double div.slider-data{position: relative; height: 30px;}
div.type-range_slider_double div.slider-data:before{z-index: 2; position: absolute; top: 13px; left: 0; width: 100%; height: 4px; content: ''; display: block; background: #000; pointer-events: none;}
div.type-range_slider_double input[type=range]{z-index: 4; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none;}
div.type-range_slider_double input[type=range]:before{display: none;}
div.type-range_slider_double input[type=range].range-a::-webkit-slider-thumb{width: 30px; background: #0047e7; border-radius: 50%; pointer-events: all;}
div.type-range_slider_double input[type=range].range-a::-moz-range-thumb{width: 30px; background: #0047e7; border-radius: 50%; pointer-events: all;}
div.type-range_slider_double input[type=range].range-a::-ms-thumb{width: 30px; background: #0047e7; border-radius: 50%; pointer-events: all;}
div.type-range_slider_double input[type=range].range-b::-webkit-slider-thumb{width: 30px; background: #ff00b8; border-radius: 50%; pointer-events: all;}
div.type-range_slider_double input[type=range].range-b::-moz-range-thumb{width: 30px; background: #ff00b8; border-radius: 50%; pointer-events: all;}
div.type-range_slider_double input[type=range].range-b::::-ms-thumb{width: 30px; background: #ff00b8; border-radius: 50%; pointer-events: all;}



/* form sort */



div.field.type-sort ul.sortable{display: block;}
div.field.type-sort ul.sortable>li{display: table; margin: 6px 0;}
div.field.type-sort ul.sortable>li>div{padding: 8px 14px; background: #fff; border: 2px solid #ccc; border-radius: 6px; font-weight: 500; cursor: move;}
div.field.type-sort ul.sortable>li>div span.num{font-weight: 600;}



/* load */



div.load-bar{z-index: 300; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-animation: load_anim 200ms ease 1s 1 forwards; animation: load_anim 200ms ease 1s 1 forwards;}
div.load-bar:before{z-index: 2; position: fixed; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100vh; background: #000;}
div.load-bar>div{z-index: 4; position: relative; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
div.load-bar svg{display: block; width: 30vh;}
div.load-bar svg>path.animation{stroke-dasharray: 1; stroke-dashoffset: 1; -webkit-animation: load_anim_svg 0.6s ease 0.4s 1 normal forwards; animation: load_anim_svg 0.6s ease 0.4ms 1 normal forwards;}
@-webkit-keyframes load_anim{
to{opacity: 0;}
}
@keyframes load_anim{
to{opacity: 0;}
}
@-webkit-keyframes load_anim_svg{
to{stroke-dashoffset: 0;}
}
@keyframes load_anim_svg{
to{stroke-dashoffset: 0;}
}



/* head */



div.head-bar{z-index: 600; position: fixed; top: 0; left: 0; width: 100%; padding: 10px 20px; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-transition: transform 0.6s cubic-bezier(0.20,1,0.22,1); transition: transform 0.6s cubic-bezier(0.20,1,0.22,1);}
div.head-bar.hide{-webkit-transform: translateY(-100%); transform: translateY(-100%);}
div.head-bar>div{display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; background: var(--yellow); border-radius: 14px; border: 3px solid #000; border-right-width: 6px; border-bottom-width: 6px; overflow: hidden; pointer-events: all;}
div.head-bar-main{display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch;}
div.head-bar-main>div{-webkit-display: flex; display: flex; -webkit-align-items: center; align-items: center;}
div.head-bar-main>div.icon{padding: 12px 30px 12px 16px; background: #fff;}
div.head-bar-main>div.icon>img{height: 34px;}
div.head-bar-main>div.name{padding: 0 20px;}
div.head-bar-main>div.name>a>span{display: inline; font-size: 1.4em; line-height: 1.2em; font-weight: 500;}
div.head-bar-side{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
@media all and (max-width: 600px){
div.head-bar{padding: 10px;}
div.head-bar>div{border-radius: 10px; border-width: 2px; border-right-width: 4px; border-bottom-width: 4px;}
div.head-bar-main>div.icon{padding: 10px 24px 10px 16px;}
div.head-bar-main>div.icon>img{height: 28px;}
div.head-bar-main>div.name{padding: 0 16px;}
div.head-bar-main>div.name>a>span{display: block; font-size: 1.2em;}
}



/* bottom */



div.bottom-bar{width: 100%; aspect-ratio: 16/6; background: var(--yellow) url(png/bottom-a.png) center center / cover no-repeat; overflow: hidden;}
div.bottom-bar-end{padding: 20px; padding-bottom: 40px; background: #000; font-size: 0.8em; line-height: 1.4em; color: #aaa; text-align: center;}
div.bottom-bar-end a{color: #ddd;}
div.bottom-bar-end a:hover{text-decoration: underline;}
@media all and (max-width:1200px){
div.bottom-bar{aspect-ratio: 14/6;}
}
@media all and (max-width: 900px){
div.bottom-bar{aspect-ratio: 10/8; background-image: url(png/bottom-b.png);}
}
@media all and (max-width: 600px){
div.bottom-bar{aspect-ratio: 10/9;}
}



/* subscribe */



div.subscribe-bar{background: var(--yellow); overflow: hidden;}
div.subscribe-bar>div{padding: 80px 30px; text-align: center;}
div.subscribe-bar h1{margin-top: 0;}
div.subscribe-bar ul.icon{margin-top: 40px;}
@media all and (max-width: 600px){
div.subscribe-bar ul.icon{margin-top: 20px;}
}



/* menu */



div.menu-bar{z-index: 500; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); -webkit-transition: clip-path 600ms; transition: clip-path 600ms;}
div.menu-bar:before{z-index: 2; position: fixed; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100vh; background: #000 url(svg/ladder.svg) left 10% bottom -60% / auto 64vh no-repeat;}
div.menu-bar>div{z-index: 4; position: relative; width: 100%; height: 100%; color: #fff; text-align: center; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; -ms-overflow-style: none; scrollbar-width: none; opacity: 0; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease;}
div.menu-bar div.brand{width: 200px; height: 140px; margin: 0px auto; background: url(svg/brand-w.svg) center center / contain no-repeat;}
div.menu-btn{width: 80px; height: 58px; cursor: pointer; touch-action: manipulation;}
div.menu-btn>div{position: relative; width: 100%; height: 100%;}
div.menu-btn>div>div{position: absolute; top: 50%; left: 20%; width: 60%; height: 4px; margin-top: -2px; background: #000; -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: transform 120ms ease; transition: transform 120ms ease;}
div.menu-btn>div>div:nth-child(2){-webkit-transform: translateY(-8px); transform: translateY(-8px);}
body.menu-on div.menu-bar{pointer-events: all; -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%);}
body.menu-on div.menu-bar>div{opacity: 1;}
body.menu-on div.menu-btn>div>div{-webkit-transform: rotate(45deg) translateY(0); transform: rotate(45deg) translateY(0);}
body.menu-on div.menu-btn>div>div:nth-child(2){-webkit-transform: rotate(-45deg) translateY(0); transform: rotate(-45deg) translateY(0);}
@media all and (max-width: 600px){
div.menu-btn{height: 48px;}
div.menu-bar:before{background-size: auto 48vh; background-position: left 10% bottom -20%;}
div.menu-btn{width: 60px;}
}



/* menu ul */



ul.menu{display: table; margin: 2rem auto;}
ul.menu>li{display: block;}
ul.menu>li>a{display: block; font-size: 2.6em; line-height: 1.2em; font-weight: 500; text-align: center; color: var(--yellow); -webkit-transition: color 120ms ease; transition: color 120ms ease;}
ul.menu>li>a:hover{color: #fff;}
ul.icon{display: table; margin: 0 auto;}
ul.icon>li{display: inline-block; padding: 4px;}
ul.icon>li.icon1>a{background-image: url(svg/s1.svg);}
ul.icon>li.icon2>a{background-image: url(svg/s2.svg);}
ul.icon>li.icon3>a{background-image: url(svg/s3.svg);}
ul.icon>li.icon4>a{background-image: url(svg/s4.svg);}
ul.icon>li.icon5>a{background-image: url(svg/s5.svg);}
ul.icon>li>a{display: block; width: 60px; height: 60px; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: auto 40%; border: 3px solid #000; border-radius: 50%; -webkit-transition: border-color 120ms ease; transition: border-color 120ms ease;}
ul.icon>li>a:hover{border-color: #fff !important;}
div.menu-bar ul.icon>li>a{border-color: #666;}
@media all and (max-width: 900px){
ul.icon>li>a{width: 48px; height: 48px;}
}
@media all and (max-width: 600px){
ul.menu>li>a{font-size: 2.0em; line-height: 1.4em;}
ul.icon>li>a{width: 36px; height: 36px; border-width: 2px;}
}



/* lock */



div.spin{width: 40px; height: 40px; border: 4px solid transparent; border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.5); border-radius: 50%; -webkit-animation: rotate 0.8s infinite ease; animation: rotate 0.8s infinite ease; -webkit-animation-play-state: paused; animation-play-state: paused;}
div.lock{z-index: 990; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: opacity 200ms ease, visibility 0s linear 200ms; transition: opacity 200ms ease, visibility 0s linear 200ms; opacity: 0; visibility: hidden;}
body.lock-on div.lock{-webkit-transition: opacity 200ms ease, visibility 0s linear; transition: opacity 200ms ease, visibility 0s linear; opacity: 1; visibility: visible;}
body.lock-on div.lock div.spin{display: block; -webkit-animation-play-state: running; animation-play-state: running;}
@-webkit-keyframes rotate{
100%{-webkit-transform: rotate(360deg);}
}
@keyframes rotate{
100%{transform: rotate(360deg);}
}



/* head bar */



div.header{width: 100%; aspect-ratio: 16/5; background: var(--yellow) url(png/head-c.png) center center / cover no-repeat;}
div.header-research{width: 100%; aspect-ratio: 16/6; background: var(--yellow) url(png/research-00-a.png) center center / cover no-repeat;}
div.header-research.research01{background-image: url(png/research-01-a.png);}
div.header-research.research02{background-image: url(png/research-02-a.png);}
div.header-research.research03{background-image: url(png/research-03-a.png);}
div.header-research.research04{background-image: url(png/research-04-a.png);}
div.header-home{position: relative; width: 100%; aspect-ratio: 16/11; background: var(--yellow); overflow: hidden;}
div.header-home div.main{z-index: 4; position: relative; width: 100%; height: 100%; background: url(png/head-a.png) center center / cover no-repeat;}
div.header-home div.star{z-index: 2; position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
div.header-home div.star>div{height: 70%; aspect-ratio: 1/1; background: url(svg/star.svg) center center / 24% auto repeat; border-radius: 50%;  -webkit-animation: star 30s linear infinite; animation: star 30s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; opacity: 0; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease;}
div.header-home.animate.in-view div.star>div{-webkit-animation-play-state: running; animation-play-state: running;}
div.header-home.head-a-loaded.head-b-loaded div.star>div{opacity: 1;}
@-webkit-keyframes star{
100%{-webkit-transform: rotate(360deg);}
}
@keyframes star{
100%{transform: rotate(360deg);}
}
@media all and (max-width:1200px){
div.header{aspect-ratio: 14/5;}
div.header-research{aspect-ratio: 14/6;}
div.header-home{aspect-ratio: 14/11;}
}
@media all and (max-width: 900px){
div.header{aspect-ratio: 10/7; background-image: url(png/head-d.png);}
div.header-research{aspect-ratio: 10/8; background-image: url(png/research-00-b.png);}
div.header-research.research01{background-image: url(png/research-01-b.png);}
div.header-research.research02{background-image: url(png/research-02-b.png);}
div.header-research.research03{background-image: url(png/research-03-b.png);}
div.header-research.research04{background-image: url(png/research-04-b.png);}
div.header-home{aspect-ratio: 10/15;}
div.header-home div.main{background-image: url(png/head-b.png);}
}
@media all and (max-width: 600px){
div.header-research{aspect-ratio: 10/9;}
div.header-home{aspect-ratio: 10/17;}
}



/* node */



div.node-head{padding: 80px 20px;}
div.node-head>div{max-width: 1100px; margin: 0 auto; text-align: left;}
div.node-head h1,div.node-head h2{text-align: left;}
div.node-head a.return{position: relative; display: table; background: var(--yellow); padding: 0.5em 1.0em 0.5em 2.8em; border-radius: 100px; font-size: 1.2em; font-weight: 500;}
div.node-head a.return:before{content: ''; position: absolute; top: 50%; left: 0.8em; display: block; width: 1.4em; height: 1.4em; background: url(svg/arrow.svg) left center / contain no-repeat; -webkit-transform: scaleX(-1) translateY(-50%); transform: scaleX(-1) translateY(-50%); opacity: 0.8;}
div.node-head a.return:hover{text-decoration: underline;}
div.node-view{padding: 80px 20px;}
div.node-view.yellow{background: var(--yellow);}
div.node-view-pad{padding-top: 0;}
div.node-view>div{max-width: 1100px; margin: 0 auto;}
div.node-view>div>*:first-child{margin-top: 0;}
div.node-view>div>*:last-child{margin-bottom: 0;}
div.pane{margin-top: 50px; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;}
div.pane>div{width: 50%;}
div.pane>div:nth-child(1){padding: 0 30px 0 0;}
div.pane>div:nth-child(2){padding: 0 0 0 30px;}
div.pane>div>*:first-child{margin-top: 0;}
div.pane>div>*:last-child{margin-bottom: 0;}
div.pane.pane-column{display: block;}
div.pane.pane-column>div{width: 100%; max-width: 700px; margin: 0 auto; padding: 0 !important;}
div.pane p,div.pane h1,div.pane h2,div.pane h3{text-align: left;}
div.pane p{font-size: 1.1em; line-height: 1.5em;}
div.pane p.teaser{max-width: none; margin-left: 0;}
@media all and (max-width: 900px){
div.node-view-pad{padding-top: 80px;}
div.pane{display: block;}
div.pane>div{width: 100%;}
div.pane>div:nth-child(1){padding: 0 0 30px;}
div.pane>div:nth-child(2){padding: 0;}
}



/* article */



div.pane.article>div{max-width: 640px;}
div.pane.article blockquote{width: 900px; margin: 4.0rem -130px; padding: 0;}
div.pane.article blockquote>p{font-size: 2.4em; line-height: 1.3em; font-weight: 500; text-align: center;}
div.article-video{width: 900px; margin: 5.0rem -130px;}
div.article-video>div.video{width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden;}
div.article-video>div.video>iframe{width: 100% !important; height: 100% !important; border: none;}
div.article-photo{width: 900px; margin: 5.0rem -130px;}
div.article-photo.xs{width: 100%; margin: 5.0rem 0;}
div.article-photo>div.photo{width: 100%; background: #eee; border-radius: 12px; overflow: hidden;}
div.article-photo>div.photo>img{width: 100%;}
div.media-caption{padding-top: 10px; font-size: 0.9em; line-height: 1.4em; color: #666;}
@media all and (max-width: 940px){
div.pane.article blockquote,div.article-video,div.article-photo{width: 100% !important; margin: 4.0rem auto !important;}
div.pane.article blockquote>p{font-size: 1.8em; line-height: 1.3em;}
}



/* accordion */



div.accordion{max-width: 700px; margin: 40px auto; background: #fff; border-radius: 6px; text-align: left;}
div.accordion-head{position: relative; padding: 20px 30px; padding-right: 80px; cursor: pointer;}
div.accordion-head:before{z-index: 2; position: absolute; top: 50%; right: 30px; content: ''; display: block; width: 24px; aspect-ratio: 1/1; margin-top: -12px; background: url(svg/arrow.svg) center center / contain no-repeat; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: transform 200ms ease; transition: transform 200ms ease;}
div.accordion-head>span{z-index: 4; position: relative; display: block;}
div.accordion-head>span.name{font-size: 1.3em; line-height: 1.3em; font-weight: 600;}
div.accordion-head>span.name-sub{margin-top: 4px; font-style: italic;}
div.accordion-head:hover>span.name{text-decoration: underline;}
div.accordion-core{overflow-y: hidden; -webkit-transition: max-height 400ms ease-in-out; transition: max-height 400ms ease-in-out;}
div.accordion-core>div{padding: 20px 30px; border-top: 1px solid #ddd;}
div.accordion.hide div.accordion-core{max-height: 0;}
div.accordion.hide div.accordion-head:before{-webkit-transform: rotate(90deg); transform: rotate(90deg);}
div.accordion:not(.hide) div.accordion-head>span.name{text-decoration: underline;}
div.accordion.yellow{background: var(--yellow);}
div.accordion.yellow div.accordion-core>div{border-color: #bfa600;}
@media all and (max-width: 600px){
div.accordion-core>div{padding: 20px;}
div.accordion-head{padding: 20px; padding-right: 70px;}
div.accordion-head:before{right: 20px;}
}



/* portraits */



div.portrait{display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; width: 900px; margin: 3.0rem -130px; background: var(--yellow); border-radius: 20px;}
div.portrait>div.card{width: 30%;}
div.portrait>div.card>div{width: 100%; aspect-ratio: 4/5; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 12px; -webkit-transform: scale(0.68) rotate(3deg); transform: scale(0.68) rotate(3deg);}
div.portrait>div.text{-webkit-flex: 1; flex: 1; padding: 30px;}
div.portrait>div.text>*:first-child{margin-top: 0;}
div.portrait>div.text>*:last-child{margin-bottom: 0;}
div.portrait.portrait1>div.card>div{background-image: url(../../cdn/portraits/portrait1.png);}
div.portrait.portrait2>div.card>div{background-image: url(../../cdn/portraits/portrait2.png);}
div.portrait.portrait3>div.card>div{background-image: url(../../cdn/portraits/portrait3.png);}
@media all and (max-width: 940px){
div.portrait{display: block; width: 100%; margin-left: auto; margin-right: auto;}
div.portrait>div.card{width: 100%; max-width: 200px; margin: 0 auto;}
div.portrait>div.card>div{-webkit-transform: scale(0.8) rotate(3deg); transform: scale(0.8) rotate(3deg);}
div.portrait>div.text{display: block; padding-top: 0;}
}



/* carousel */



div.carousel{padding: 80px 20px; background: var(--green);}
div.carousel div.swiper-pagination span.swiper-pagination-bullet{width: 12px; height: 12px; background: #000; opacity: 1; outline: none;}
div.carousel div.swiper-pagination span.swiper-pagination-bullet-active{background: #fff;}



/* item */



div.related>div{max-width: 1200px !important;}
div.related div.item>a div.core span.desc{display: none;}
div.research-index.master-view{background: var(--yellow);}
div.research-index>div{max-width: 1200px !important;}
div.research-index div.item.type-1 div.head>div{background-color: var(--orange);}
div.item-hold{margin: -30px !important; overflow: hidden; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: center; justify-content: center;}
div.item{width: 33.33%; padding: 30px;}
div.item.completed{position: relative;}
div.item:before{z-index: 4; position: absolute; top: 20px; right: 20px; content: ''; display: block; width: 40px; aspect-ratio: 1/1; background: var(--green) url(svg/tick-w.svg) center center / 50% auto no-repeat; border: 3px solid #000; border-radius: 50%;}
div.item>a{z-index: 2; position: relative; display: block; height: 100%; color: #000;}
div.item>a:before{z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; background: #000; border-radius: 18px; -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); -webkit-transition: transform 120ms ease; transition: transform 120ms ease;}
div.item>a>div{z-index: 4; position: relative; height: 100%;}
div.item>a>div>div{z-index: 2; position: relative; height: 100%; background: #fff; border-radius: 18px; overflow: hidden;}
div.item>a>div:before{z-index: 4; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; display: block; border: 3px solid #000; border-radius: 16px; pointer-events: none;}
div.item div.head{position: relative; width: 100%; aspect-ratio: 2/1;}
div.item div.head>div{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--yellow); background-repeat: no-repeat; background-position: center center; background-size: cover;}
div.item div.head.icon-play>div{z-index: 2;}
div.item div.head.icon-play:before{z-index: 4; position: absolute; right: 20px; bottom: 20px; content: ''; display: block; width: 10%; aspect-ratio: 1/1; background: url(svg/play.svg) center center / contain no-repeat; pointer-events: none;}
div.item div.core{padding: 20px 20px 24px 20px; border-top: 3px solid #000; text-align: center;}
div.item div.core span{display: block;}
div.item div.core span.name{font-size: 1.4em; line-height: 1.2em; font-weight: 600;}
div.item div.core span.desc{font-size: 1.0em; line-height: 1.3em; font-weight: 500; margin-top: 6px;}
div.item div.core span.user{font-size: 0.9em; line-height: 1.3em; font-weight: 500; margin-top: 6px; font-style: italic; opacity: 0.6;}
div.item div.core span.type{font-size: 0.9em; line-height: 1.0em; font-weight: 500; margin-top: 6px; font-style: italic; margin-left: auto; margin-right: auto; display: table; padding: 4px 8px; background: #ddd; border-radius: 2px;}
div.item>a:hover:before{-webkit-transform: translate(12px, 12px); transform: translate(12px, 12px);}
div.item.not-live>a{pointer-events: none;}
div.item.not-live div.core span{opacity: 0.5;}
div.item.type-1 div.core span.type{background: var(--yellow);}
div.item.type-2 div.core span.user{display: none;}
@media all and (max-width:1200px){
div.item-hold{margin: -20px !important;}
div.item{padding: 20px;}
div.item:before{top: 10px; right: 10px;}
}
@media all and (max-width: 900px){
div.item{width: 50%; max-width: 400px;}
}
@media all and (max-width: 600px){
div.item{width: 100%;}
div.item:before{width: 30px; border-width: 2px;}
div.item>a:before,div.item>a:hover:before{-webkit-transform: translate(4px, 4px); transform: translate(4px, 4px);}
div.item>a>div:before{border-width: 2px;}
div.item div.core{padding: 16px 10px 20px 16px; border-width: 2px;}
div.related div.item-hold{margin: -10px !important;}
div.related div.item{max-width: 300px; padding: 10px;}
div.related div.item:before{top: 0; right: 0;}
}



/* events */



div.event-hold{margin-top: 40px;}
div.event-hold>div{overflow: hidden; margin: -20px 0;}
div.event{max-width: 800px; margin: 20px auto; text-align: left;}
div.event>a{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; background: #fff; border: 3px solid #000; border-right-width: 6px !important; border-bottom-width: 6px !important; border-radius: 20px; color: #111;}
div.event>a>div{padding: 20px;}
div.event>a>div.date>div{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 120px; aspect-ratio: 1 / 1; background: var(--yellow); border-radius: 6px;}
div.event>a div.date>div>div{padding: 12px;}
div.event>a>div.date span{display: block; font-size: 2.4em; line-height: 1.0em; font-weight: 400; text-transform: uppercase;}
div.event>a>div.date span:nth-child(2){font-weight: 700;}
div.event>a>div.core{-webkit-flex: 1; flex: 1; padding: 20px 20px 20px 0;}
div.event>a>div.core span{display: block;}
div.event>a>div.core span.name{font-size: 1.5em; line-height: 1.2em; font-weight: 500;}
div.event>a>div.core span.type{display: table; margin-top: 6px; padding: 6px 10px; background: #ddd; border-radius: 2px; font-size: 0.9em; line-height: 1.0em; font-weight: 500; font-style: italic;}
div.event>a>div.core span.desc{font-size: 1.0em; line-height: 1.4em; font-weight: 400; margin-top: 10px;}
div.event>a:hover>div.core span.name{text-decoration: underline;}
@media all and (max-width: 900px){
div.event>a{display: block;}
div.event>a>div.core{padding: 0 20px 24px 20px;}
}
@media all and (max-width: 600px){
div.event>a{border-width: 2px; border-radius: 16px;}
}



/* research */



div.research{padding: 60px 20px; background: var(--yellow);}
div.research.rmv-nav div.progress-bar{display: none;}
div.research.rmv-nav div.nav{display: none;}
div.research.rmv-nav-prev div.nav input[type=button].prev{display: none !important;}
div.section{display: none;}
div.section.on{display: block;}
div.section-head{width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 0 0 0; overflow: hidden; text-align: center;}
div.section-head p{max-width: 760px; margin-left: auto; margin-right: auto;}
div.section-head p span.circle{display: inline-block; width: 1.0em; aspect-ratio: 1 / 1; margin-right: 0.2em; border-radius: 50%; background: #222; vertical-align: middle;}
div.section-head p span.circle.circle-a{background: #0047e7;}
div.section-head p span.circle.circle-b{background: #ff00b8;}
div.section div.highfive{width: 180px; aspect-ratio: 1/1; margin: 0 auto; background: var(--orange) url(svg/highfive.svg) center center / 60% auto no-repeat; border-radius: 100px;}
div.error-bar{z-index: 410; position: fixed; left: 0; bottom: 0; width: 100%; padding: 20px; opacity: 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
div.error-bar>div{display: table; margin: 0 auto; padding: 10px 20px; background: #ff7d64; border: 3px solid #000; border-radius: 100px; font-weight: 500; text-align: center;}
body.error-on div.error-bar{opacity: 1;}
@media all and (max-width: 600px){
div.error-bar>div{border-width: 2px;}
}



/* research survey */



div.research-survey{display: none; background: var(--yellow-light);}
div.research-survey.active{display: block;}
div.research-survey>div{padding: 60px 20px;}
div.research-survey p{max-width: 760px; margin-left: auto; margin-right: auto; text-align: center;}
div.research-survey h3{margin-top: 0; text-align: center;}
form.survey div.survey-done{width: 80px; aspect-ratio: 1/1; margin: 0 auto; background: var(--green) url(svg/tick-w.svg) center center / 50% auto no-repeat; border-radius: 50%;}
form.survey div.survey-item{max-width: 900px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 10px;}
form.survey div.survey-name{padding-bottom: 10px; font-style: italic; text-align: center;}
form.survey div.survey-data{display: flex; flex-wrap: wrap; justify-content: center;}
form.survey div.survey-data>div{display: block; margin: 4px;}
form.survey div.survey-data>div>label{position: relative; display: block;}
form.survey div.survey-data>div>label>input{z-index: 4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; border-radius: 0; opacity: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;}
form.survey div.survey-data>div>label>div{z-index: 2; position: relative; padding: 8px 14px; border-radius: 100px; background: var(--yellow-light); border: 2px solid var(--yellow-light); font-weight: 500; -webkit-transition: background 100ms ease, border-color 100ms ease; transition: background 100ms ease, border-color 100ms ease;}
form.survey div.survey-data>div>label>input:hover ~ div{border-color: var(--yellow);}
form.survey div.survey-data>div>label>input:checked ~ div{border-color: var(--yellow); background: var(--yellow);}
form.survey input[type=button]{display: table; margin: 0 auto; padding: 12px 20px; background: var(--yellow); border: 3px solid #000; border-right-width: 5px; border-bottom-width: 5px; border-radius: 8px; outline: none; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 600; color: #000; pointer-events: all; cursor: pointer; -webkit-transition: background 100ms ease; transition: background 100ms ease;}
form.survey input[type=button]:hover{background: #eebf00;}



/* comments */



div.comments{padding: 60px 20px; background: var(--yellow-light);}
div.comments>div{width: 100%; max-width: 1100px; margin: 0 auto; overflow: hidden;}
div.comments h3{margin-top: 0; text-align: center;}
div.comments input[type=button].button{display: table; margin: 20px auto 0 auto;}
div.comments div.none{display: table; margin: 20px auto 0 auto; padding: 8px 16px; background: #fff; border-radius: 100px; font-style: italic; color: #444;}
div.comments div.comment{max-width: 800px; margin: 20px auto 0 auto; background: var(--yellow); border-radius: 8px;}
div.comments div.comment>div{position: relative; padding: 20px; text-align: left;}
div.comments div.comment>div:before{position: absolute; top: 50%; content: ''; display: block; width: 0; height: 0; margin-top: -12px; border: solid transparent; border-width: 12px; border-color: rgba(255,255,255,0); pointer-events: none;}
div.comments div.comment:nth-child(odd)>div:before{border-right-color: var(--yellow); right: 100%;}
div.comments div.comment:nth-child(even)>div:before{border-left-color: var(--yellow); left: 100%;}
div.comments div.comment span.text{display: block;}
div.comments div.comment span.date{display: table; margin-top: 16px; padding: 4px 12px; background: #fff; border-radius: 100px; font-size: 0.9em; font-weight: 600;}
@media all and (max-width: 900px){
div.comments div.comment{max-width: 900px;}
div.comments div.comment:nth-child(odd){margin-left: 12px;}
div.comments div.comment:nth-child(even){margin-right: 12px;}
}



/* dashboard */



ul.dashboard-menu{margin: -4px; overflow: hidden;}
ul.dashboard-menu>li{display: inline-block; float: left; margin: 4px; padding: 6px 16px; background: #ddd; border-radius: 100px; font-size: 1.1em; cursor: pointer;}
ul.dashboard-menu>li.on{background: #222; color: #eee; font-weight: 500;}
div.dashboard-view{display: none;}
div.dashboard-view.on{display: block;}
div.mod{margin: 20px 0; padding: 20px; background: #eee; border-radius: 6px;}
div.mod span{display: block;}
div.mod span strong{font-weight: 600;}
div.mod span.test,div.mod span.date{font-size: 0.9em; line-height: 1.4em;}
div.mod span.text{padding: 20px 0;}
div.mod input[type=button]{margin: 0 4px 4px 0; padding: 10px 18px; border: none; border-radius: 3px; outline: none; font-family: 'Open Sans', serif; font-size: 1.0em; font-weight: 500; cursor: pointer;}
div.mod input[type=button].accept{background: #008800; color: #fff;}
div.mod input[type=button].accept:hover{background: #007200;}
div.mod input[type=button].refuse{background: #be1818; color: #fff;}
div.mod input[type=button].refuse:hover{background: #9e1414;}



/* callback graph */



div.graph-row{max-width: 700px; margin: 40px auto; background: #fff; border-radius: 6px;}
div.graph-row-item{padding: 12px 20px;}
div.graph-row-item:not(:first-child){border-top: 1px solid #ddd;}
div.graph-row-hint{padding: 20px; font-size: 0.9em; line-height: 1.4em; color: #444; font-style: italic;}
div.graph-row-name{padding: 8px 0; text-align: left; font-weight: 500;}
div.graph-row-data-name{font-size: 0.9em; line-height: 1.4em; font-style: italic; text-align: left;}
div.graph-row-data{padding: 8px 0; position: relative;}
div.graph-row-data>div{padding: 1px 0;}
div.graph-row-data>div>div{width: 0px; height: 8px; background: #222;}
div.graph-row-data>div:nth-child(1)>div{background: #ff00b8;}
div.graph-row-data>div:nth-child(2)>div{background: #aaaaaa;}
div.graph-row.row-center div.graph-row-name{text-align: center;}
div.graph-row.row-center div.graph-row-data:before{position: absolute; top: 0; left: 50%; content: ''; display: block; width: 1px; height: 100%; background: #000; pointer-events: none;}
div.graph-row.row-center div.graph-row-data>div{width: 50%;}
div.graph-row.row-center div.graph-row-data>div.pos{margin: 0 0 0 auto;}
div.graph-row.row-center div.graph-row-data>div.neg{margin: 0 auto 0 0;}
div.graph-row.row-center div.graph-row-data>div.neg>div{margin: 0 0 0 auto;}
div.graph-row.single-bar div.graph-row-name{padding: 6px 0;}
div.graph-row.single-bar div.graph-row-data{padding: 6px 0;}
div.graph-row.single-bar div.graph-row-data>div{padding: 0; background: #eee;}
div.graph-row.single-bar div.graph-row-data>div:nth-child(1)>div{background: #0047e7;}
span.graph-legend{display: inline-block; width: 1.0em; aspect-ratio: 1 / 1; border-radius: 50%; background: #222; vertical-align: middle;}
span.graph-legend.graph-legend-a{background: #ff00b8;}
span.graph-legend.graph-legend-b{background: #aaaaaa;}



/* research 01 */



div.callback span.color-r{font-weight: 600; color: #cc0000; font-style: italic;}
div.callback span.color-b{font-weight: 600; color: #15009c; font-style: italic;}
div.callback span.color-g{font-weight: 600; color: #008800; font-style: italic;}
div.callback span.color-y{font-weight: 600; color: #d3aa00; font-style: italic;}
div.callback div.im-container{max-width: 900px; margin: 30px auto;}
div.callback div.im-container img{width: 100%; margin: 10px 0; border-radius: 10px;}



/* research 02 intro */



div.graph-sim{max-width: 700px; margin: 10px auto; padding: 4px 0; background: #fff; border-radius: 6px;}
div.graph-sim-item{padding: 10px 20px;}
div.graph-sim-item:not(:first-child){border-top: 1px solid #ddd;}
div.graph-sim-name{padding: 2px 0; text-align: left;}
div.graph-sim-data{padding: 2px 0; position: relative;}
div.graph-sim-data>div{background: #eee; border-radius: 100px; overflow: hidden;}
div.graph-sim-data div.bar{display: inline-block; float: left; width: 0px; height: 8px; background: #444; border-radius: 100px;}
div.graph-sim-data div.bar.bar-b{background: var(--sim-type0);}
div.graph-sim-data div.bar.bar-c{background: var(--sim-type4);}
div.sim-legend{width: 60px; aspect-ratio: 1/1; margin: 10px auto; background-color: #ccc; background-repeat: no-repeat; background-position: center center; background-size: 50% auto; border: 3px solid #fff; border-radius: 50%;}
div.sim-legend.type0{background-color: var(--sim-type0); background-image: url(svg/sim-type0.svg);}
div.sim-legend.type1{background-color: var(--sim-type1); background-image: url(svg/sim-type1.svg);}
div.sim-legend.type2{background-color: var(--sim-type2); background-image: url(svg/sim-type2.svg);}
div.sim-legend.type3{background-color: var(--sim-type3); background-image: url(svg/sim-type3.svg);}
div.sim-legend.type4{background-color: var(--sim-type4); background-image: url(svg/sim-type4.svg);}



/* research 02 */



div.sim{z-index: 900; position: relative; background: var(--yellow); touch-action: manipulation;}
div.sim form input[type=button]{display: table; margin-left: auto; margin-right: auto;}
div.sim div.name-bar>div.type0,div.sim div.coin[data-type='type0'] ul>li{background: var(--sim-type0);}
div.sim div.name-bar>div.type1,div.sim div.coin[data-type='type1'] ul>li{background: var(--sim-type1);}
div.sim div.name-bar>div.type2,div.sim div.coin[data-type='type2'] ul>li{background: var(--sim-type2);}
div.sim div.name-bar>div.type3,div.sim div.coin[data-type='type3'] ul>li{background: var(--sim-type3);}
div.sim div.name-bar>div.type4,div.sim div.coin[data-type='type4'] ul>li{background: var(--sim-type4);}
div.sim div.coin[data-type='type0'] ul>li.retrain-neg{background: #dddddd !important;}
div.sim div.coin[data-type='type0'] ul>li.retrain-pos{background: #3ee63e !important;}
div.sim div.domain{max-width: 800px; margin: 30px auto; background: #fff; border-radius: 6px; overflow: hidden; -webkit-transition: background 120ms ease; transition: background 120ms ease;}
div.sim div.domain div.head{position: relative; padding: 20px 50px 20px 20px; cursor: pointer; -webkit-user-select: none; user-select: none;}
div.sim div.domain div.head:before{z-index: 2; position: absolute; top: 50%; right: 20px; content: ''; display: block; width: 16px; height: 16px; margin-top: -8px; background: url(svg/sim-arrow.svg) center center / contain no-repeat; -webkit-transition: transform 200ms ease; transition: transform 200ms ease; pointer-events: none;}
div.sim div.domain div.head>div{z-index: 4; position: relative;}
div.sim div.domain div.head div.name{display: block; font-size: 1.3em; line-height: 1.4em; font-weight: 500;}
div.sim div.domain div.head:hover div.name{text-decoration: underline;}
div.sim div.domain div.desc{margin: 20px;}
div.sim div.domain div.desc div.desc-name{display: table; font-style: italic; cursor: pointer; text-decoration: underline;}
div.sim div.domain div.desc div.desc-data{display: none; margin-top: 4px; padding: 8px 12px; background: #ddd; border-radius: 4px; font-size: 0.9em; line-height: 1.4em;}
div.sim div.domain div.desc.show div.desc-data{display: block;}
div.sim div.domain div.core{display: none; -webkit-user-select: none; user-select: none;}
div.sim div.domain.on div.core{display: block;}
div.sim div.domain.on div.head:before{-webkit-transform: rotate(180deg); transform: rotate(180deg);}
div.sim div.domain.on:not(.completed) div.head{background: #eee;}
div.sim div.domain.completed{background: #efffe8 !important;}
div.sim div.name-bar{margin-top: 12px; overflow: hidden;}
div.sim div.name-bar>div{display: inline-block; float: left; height: 8px; width: 0; border-radius: 100px; background: #ddd;}
div.sim div.coin-hold{padding: 12px 20px; border-top: 1px solid #ddd;}
div.sim div.coin-hold div.name{padding: 2px 0 2px 1.6em; background-size: 1.2em auto; background-position: left center; background-repeat: no-repeat; font-weight: 500;}
div.sim div.coin-hold.type0 div.name{background-image: url(svg/sim-type0.svg);}
div.sim div.coin-hold.type1 div.name{background-image: url(svg/sim-type1.svg);}
div.sim div.coin-hold.type2 div.name{background-image: url(svg/sim-type2.svg);}
div.sim div.coin-hold.type3 div.name{background-image: url(svg/sim-type3.svg);}
div.sim div.coin-hold.type4 div.name{background-image: url(svg/sim-type4.svg);}
div.sim div.coin-hold div.name span{display: inline-block; margin-left: 8px; padding: 0 4px; background: var(--yellow); border-radius: 2px; font-size: 0.9em; font-weight: 600;}
div.sim div.coin-hold div.info{display: none; margin: 12px 0; padding: 5px 12px; background: var(--yellow); border-radius: 4px; font-size: 0.9em;}
div.sim div.coin-hold div.info.active{display: table;}
div.sim div.coin{display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;}
div.sim div.coin ul{-webkit-flex: 1; flex: 1; min-height: 34px; padding-right: 20px; background: url(svg/domain-none.svg) left center / 14px auto no-repeat; overflow: hidden;}
div.sim div.coin ul>li{display: inline-block; float: left; width: 30px; aspect-ratio: 1/1; margin: 4px 4px 0 0; background: #ccc; border-radius: 50%;}
div.sim div.coin-menu{overflow: hidden;}
div.sim div.coin-menu button{display: inline-block; float: left; width: 36px; height: 36px; padding: 0; background: #ccc; border: 0; border-radius: 0; outline: none; -webkit-tap-highlight-color: transparent; cursor: pointer; -webkit-user-select: none; user-select: none; text-indent: -1000em;}
div.sim div.coin-menu button.rmv{background: #ccc url(svg/button-rmv.svg) center center / 40% auto no-repeat; border-top-left-radius: 6px; border-bottom-left-radius: 6px;}
div.sim div.coin-menu button.new{background: #ccc url(svg/button-new.svg) center center / 40% auto no-repeat; border-top-right-radius: 6px; border-bottom-right-radius: 6px;}
div.sim div.coin-menu button:hover{background-color: #bbb;}
div.sim div.coin-menu button:disabled{pointer-events: none; opacity: 0.3;}
div.sim div.sim-source{z-index: 30; position: sticky; bottom: 0; pointer-events: none; -webkit-user-select: none; user-select: none;}
div.sim div.sim-source>div{max-width: 800px; margin: 0 auto; padding-bottom: 20px;}
div.sim div.sim-source ul{display: table; margin: 0 auto; overflow: hidden;}
div.sim div.sim-source ul>li{display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; float: left; margin: 0 4px; padding: 4px; background: #000; border-radius: 100px;}
div.sim div.sim-source ul>li>span{display: block;}
div.sim div.sim-source ul>li>span.icon{width: 40px; aspect-ratio: 1/1; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 60% auto;}
div.sim div.sim-source ul>li>span.coin{min-width: 40px; padding: 0 10px; font-size: 1.4em; line-height: 1.2em; font-weight: 600; text-align: center; color: #fff;}
div.sim div.sim-source ul>li[data-type='type1']>span.icon{background-color: var(--sim-type1); background-image: url(svg/sim-type1.svg);}
div.sim div.sim-source ul>li[data-type='type2']>span.icon{background-color: var(--sim-type2); background-image: url(svg/sim-type2.svg);}
div.sim div.sim-source ul>li[data-type='type3']>span.icon{background-color: var(--sim-type3); background-image: url(svg/sim-type3.svg);}
div.sim div.sim-source ul>li[data-type='retrained']>span.icon{background-color: var(--sim-type0); background-image: url(svg/sim-type0-retrain.svg);}
@media all and (max-width: 600px){
div.sim div.domain div.head{padding: 12px 50px 12px 12px;}
div.sim div.domain div.desc{margin: 12px;}
div.sim div.coin-hold{padding: 12px;}
div.sim div.coin ul{min-height: 24px;}
div.sim div.coin ul>li{width: 20px;}
div.sim div.sim-source ul>li{padding: 3px;}
div.sim div.sim-source ul>li>span.icon{width: 30px;}
div.sim div.sim-source ul>li>span.coin{min-width: 30px; padding: 0 8px;}
}



/* research 03 */



div.vignet{max-width: 700px; margin: 40px auto; padding: 110px 20px 30px 20px; background: #fff url(svg/vignet.svg) top 30px center / auto 60px no-repeat; border-radius: 6px;}
div.graph-sort{max-width: 700px; margin: 34px auto; overflow: hidden;}
div.graph-sort>div{overflow: hidden; margin: -4px -6px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch;}
div.graph-sort div.graph-col{width: 50%; padding: 6px; text-align: center;}
div.graph-sort div.graph-col>div{font-size: 1.2em; font-weight: 600;}
div.graph-sort div.graph-box{width: 50%; padding: 6px; text-align: left;}
div.graph-sort div.graph-box>div{display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 100%; padding: 8px 10px; background: #fff; border-radius: 6px;}
div.graph-sort div.graph-box.match>div{background: #efffe8;}
div.graph-sort div.graph-box span{-webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 1.8em; aspect-ratio: 1/1; margin-right: 10px; background: #ccc; border-radius: 50%; line-height: 1.0em; font-weight: 600;}



/* stat */



div.stat-item{display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: center; align-items: center; max-width: 800px; margin: 0 auto;}
div.stat-item>div:nth-child(1){width: 25%;}
div.stat-item>div:nth-child(2){-webkit-flex: 1; flex: 1; padding: 0 0 0 10px;}
div.stat-item span{display: block;}
div.stat-item span.name{font-size: 1.4em; line-height: 1.4em; font-weight: 600; margin-bottom: 10px;}
div.stat-item span.data{font-size: 1.1em; line-height: 1.5em;}
div.stat-item span.data em{font-weight: 600;}
div.stat-item img{border-radius: 10px; -webkit-transform: scale(0.8) rotate(4deg); transform: scale(0.8) rotate(4deg);}
@media all and (max-width: 600px){
div.stat-item{display: block;}
div.stat-item>div{display: block; width: 100% !important; text-align: center;}
div.stat-item>div:nth-child(2){padding: 0 0 20px 0;}
div.stat-item img{margin: 0 auto; max-width: 160px;}
}



/* test done */



div.test-done{padding: 20px; padding-left: 54px; background: #ffe475 url(svg/error.svg) left 20px center / 20px auto no-repeat; border-radius: 10px; font-size: 0.9em; color: #111; text-align: left;}