@charset "utf-8"; /* ---------------------------------------------- body.home ---------------------------------------------- */ body.home .st-contents { background-color: #ccc; } body.home .st-contents-header { min-height: 435px; padding-bottom: 24px; -moz-background: url('../images/top/top_bg.png'), linear-gradient(to bottom, #ffffff 0%, #aeadad 100%), 4px 4px, repeat, left top; -webkit-background: url('../images/top/top_bg.png'), linear-gradient(to bottom, #ffffff 0%, #aeadad 100%), 4px 4px, repeat, left top; background: url('../images/top/top_bg.png'), linear-gradient(to bottom, #ffffff 0%, #aeadad 100%), 4px 4px, repeat, left top; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#aeadad', GradientType=0); } body.home .t-section01 { margin-bottom: 40px; line-height: 1; } body.home .t-section01__add { width: calc( 93.75% - 4px ); width: 93.75%; margin: 0 auto; margin-top: 20px; line-height: 1; } body.home .t-section01__add ul { list-style-type: none; } body.home .t-section01__add li { display: table; width: calc(100% - 6px); height: 0; min-height: 10vw; margin-bottom: 20px; padding: 4vw 3.125vw; font-size: 4vw; line-height: 1.2; background-color: #fff; border-radius: 0.78125vw; -moz-border-radius: 0.78125vw; -webkit-border-radius: 0.78125vw; -o-border-radius: 0.78125vw; -ms-border-radius: 0.78125vw; box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1); } body.home .t-section01__add a { position: relative; display: table-cell; padding-left: 30px; vertical-align: middle; } body.home .t-section01__add a.nav_icon05 { color: #2cadff; } body.home .t-section01__add a.nav_icon07 { color: #ff6427; } body.home .t-section01__add a::before { content: ''; position: absolute; display: block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin: auto; top: 0; bottom: 0; left: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; } body.home .t-section01__add a.nav_icon05::before { background-image: url(../images/common/icon05.png); } body.home .t-section01__add a.nav_icon07::before { background-image: url(../images/common/icon07_mc.png); } /* ---------------------------------------------- body.page ---------------------------------------------- */ body.page #wrapper { min-width: 1290px; background-color: #f0f0f0; } body.page .st-contents { background-color: #f0f0f0; } body.page .st-contents-header {} body.page .st-contents-header__inner .sns + h1 { display: none; } body.page .st-contents__inner { width: 996px; margin: 0 40px; line-height: 1.7; } body.page .st-contents__inner h3 { margin-bottom: 1em; padding: 0 .5em; font-size: 20px; line-height: 1.2; border-left: solid 6px #df0623; } body.page .st-contents__inner h3::after { content: " "; display: block; clear: both; } body.page .st-contents__inner h4 { margin-bottom: 1em; padding: 0 .5em; font-size: 18px; line-height: 1.2; border-left: solid 6px #df0623; } body.page .st-contents__inner h4::after { content: " "; display: block; clear: both; } body.page .st-contents__inner h5 { margin-bottom: 1em; font-size: 16px; line-height: 1.2; } body.page .st-contents__inner h5::after { content: " "; display: block; clear: both; } body.page .st-contents__inner p { margin-bottom: 1em; } body.page .st-contents__inner a { transition: unset; text-decoration: underline; } body.page .st-contents__inner a:hover { text-decoration: underline; } body.page .st-contents__inner em { font-style: italic; } body.page .st-contents__inner ul { list-style-type: disc; padding-left: 2em; } body.page .st-contents__inner ul>li {} body.page .st-contents__inner ol { list-style-type: decimal; padding-left: 2em; } body.page .st-contents__inner ol>li {} body.page .st-contents__inner ul.ls-none, body.page .st-contents__inner ol.ls-none { list-style-type: none; padding-left: 0em; } body.page .st-contents__inner img { max-width: 100%; } body.page .st-contents__inner blockquote { margin: 1em 0; padding: 1em; background: #fff; } body.page .st-contents__inner iframe { max-width: 100%; } @media screen and (max-width: 640px) { body.page #wrapper { min-width: 100%; } body.page .st-contents__inner { width: 100%; margin: 0; font-size: 14px; } body.page .st-contents__inner h3 { font-size: 18px; } body.page .st-contents__inner h4 { font-size: 16px; } body.page .st-contents__inner h5 { font-size: 14px; } body.page .st-contents__inner img { width: auto; } } body.page .st-contents__inner .nowrap { white-space: nowrap; } body.page .st-contents__inner .red { color: #f00; } body.page .st-contents__inner .hr_05 { display: block; margin: 5px 0; border: none; } body.page .st-contents__inner .hr_1 { display: block; margin: 10px 0; border: none; } body.page .st-contents__inner .hr_2 { display: block; margin: 20px 0; border: none; } body.page .st-contents__inner .hr_4 { display: block; margin: 40px 0; border: none; } body.page .st-contents__inner .i_w { line-height: 0; } body.page .st-contents__inner .small, body.page .st-contents__inner .small2 { font-size: 75%; } body.page .st-contents__inner .small2 > sup { font-size: 100%; } body.page .st-contents__inner .small2 > sub { font-size: 100%; } body.page .st-contents__inner .large { font-size: 120%; } /* ---------------------------------------------- .p-section01 ---------------------------------------------- */ body.page .p-section01 { margin-bottom: 50px; padding: 0; font-size: 14px; } body.page .p-section01::after { content: " "; display: block; clear: both; } body.page .p-section01>p { padding: 0 30px; } body.page .p-section01 p span.kic{ font-size: .8em; } @media screen and (max-width: 640px) { body.page .p-section01 { width: 93.75%; margin: 0 auto; margin-bottom: 20px; padding: 0; font-size: 14px; } body.page .p-section01>p { padding: 0; } } /* ---------------------------------------------- .p-section02 ---------------------------------------------- */ body.page .p-section02 { margin-bottom: 50px; padding: 30px; font-size: 14px; background-color: #fff; } body.page .p-section02::after { content: " "; display: block; clear: both; } body.page .p-section02>*:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { body.page .p-section02 { width: 100%; margin: 0 auto; margin-bottom: 20px; padding: 15px 3.125%; font-size: 14px; } } /* ---------------------------------------------- .t-align ---------------------------------------------- */ body.page .st-contents__inner .t-aligncenter { text-align: center; } body.page .st-contents__inner .t-alignleft { text-align: left; } body.page .st-contents__inner .t-alignright { text-align: right; } @media screen and (max-width: 640px) { body.page .st-contents__inner .t-aligncenter-sp { text-align: center; } body.page .st-contents__inner .t-alignleft-sp { text-align: left; } body.page .st-contents__inner .t-alignright-sp { text-align: right; } } /* ---------------------------------------------- .align ---------------------------------------------- */ body.page .st-contents__inner .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; } body.page .st-contents__inner .alignleft { float: left; margin: 0 2em 0 2em; } body.page .st-contents__inner .alignright { float: right; margin: 0 0 2em 2em; } @media screen and (max-width: 640px) { body.page .st-contents__inner .alignleft, body.page .st-contents__inner .alignright { float: none; display: block; margin: 0 auto; margin-bottom: 1em; } } /* ---------------------------------------------- .dl_1 ---------------------------------------------- */ .dl_1 { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: .5em 0; border-bottom: solid 1px #eee; } .dl_1:first-of-type { border-top: solid 1px #eee; } .dl_1 > * { position: relative; width: 100%; min-height: 1px; } .dl_1 > dt { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; font-weight: bold; } .dl_1 > dd { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } @media screen and (max-width: 640px) { .dl_1 > dt, .dl_1 > dd { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } /* ---------------------------------------------- .row ---------------------------------------------- */ .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters>.col, .no-gutters>[class*="col-"] { padding-right: 0; padding-left: 0; } .col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sp, .col-sp-auto, .col-sp-1, .col-sp-2, .col-sp-3, .col-sp-4, .col-sp-5, .col-sp-6, .col-sp-7, .col-sp-8, .col-sp-9, .col-sp-10, .col-sp-11, .col-sp-12 { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .col-1-5, .col-2-5, .col-3-5, .col-4-5 { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-1-5 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .col-2-5 { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; } .col-3-5 { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; } .col-4-5 { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } @media screen and (max-width: 640px) { .row>div { margin-bottom: 10px; } .row>div:last-of-type { margin-bottom: 0; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-1-5, .col-2-5, .col-3-5, .col-4-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .col-sp-1, .col-sp-2, .col-sp-3, .col-sp-4, .col-sp-5, .col-sp-6, .col-sp-7, .col-sp-8, .col-sp-9, .col-sp-10, .col-sp-11, .col-sp-1-5, .col-sp-2-5, .col-sp-3-5, .col-sp-4-5 { margin-bottom: 0 !important } .col-sp { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sp-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-sp-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sp-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sp-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sp-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sp-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sp-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sp-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sp-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sp-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sp-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sp-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sp-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } /* ---------------------------------------------- .w ---------------------------------------------- */ .w-1 { width: 8.333333%; } .w-2 { width: 16.666667%; } .w-3 { width: 25%; } .w-4 { width: 33.333333%; } .w-5 { width: 41.666667%; } .w-6 { width: 50%; } .w-7 { width: 58.333333%; } .w-8 { width: 66.666667%; } .w-9 { width: 75%; } .w-10 { width: 83.333333%; } .w-11 { width: 91.666667%; } .w-12 { width: 100%; } .w-1-5 { width: 20%; } .w-2-5 { width: 40%; } .w-3-5 { width: 60%; } .w-4-5 { width: 80%; } @media screen and (max-width: 640px) { .w-12-sp { width: 100% !important; } } /* ---------------------------------------------- .t_w ---------------------------------------------- */ body.page .st-contents__inner .t_w { margin-bottom: 1.5em; overflow-x: auto; } /* ---------------------------------------------- table.t_1 ---------------------------------------------- */ body.page .st-contents__inner table.t_1 { background-color: #fff; } body.page .st-contents__inner table.t_1 tr {} body.page .st-contents__inner table.t_1 th { padding: .5em; font-weight: normal; vertical-align: top; border: solid 1px #333; } body.page .st-contents__inner table.t_1 td { padding: .5em; font-weight: normal; vertical-align: top; border: solid 1px #333; } /* ---------------------------------------------- .qa_link01 ---------------------------------------------- */ body.page .st-contents__inner .qa_link01 { margin-bottom: 50px; } body.page .st-contents__inner .qa_link01 a { position: relative; display: block; margin-bottom: 10px; padding-left: 2.5em; } body.page .st-contents__inner .qa_link01>a::before { content: "Q"; position: absolute; top: .25em; left: 0; padding: .25em; font-weight: bold; line-height: 1; text-align: center; color: #fff; background-color: #df0623; border-radius: 3px; } /* ---------------------------------------------- .qa01 ---------------------------------------------- */ body.page .st-contents__inner .qa01 {} body.page .st-contents__inner .qa01>div { margin-bottom: 1em; padding: 15px; background-color: #fff; border-radius: 5px; } body.page .st-contents__inner .qa01>div>div { position: relative; padding-left: 40px; } body.page .st-contents__inner .qa01>div>div:nth-child(1) { width: 100%; font-size: 18px; font-weight: bold; cursor: pointer; } body.page .st-contents__inner .qa01>div>div:nth-child(1)>p { margin: 0; padding-right: 26px; vertical-align: top; } body.page .st-contents__inner .qa01 .accordion_icon { position: absolute; width: 26px; height: 26px; margin: auto; top: calc(50% - 13px); right: 0; } body.page .st-contents__inner .qa01 .accordion_icon::before, body.page .st-contents__inner .qa01 .accordion_icon::after { content: ''; position: absolute; background-color: #df0623; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } body.page .st-contents__inner .qa01 .accordion_icon::before { width: 4px; height: 16px; transform: rotateZ( 0deg); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; } body.page .st-contents__inner .qa01 .accordion_icon::after { width: 16px; height: 4px; transform: rotateZ( 0deg); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; } body.page .st-contents__inner .qa01 .active .accordion_icon::before { transform: rotateZ( 90deg); } body.page .st-contents__inner .qa01 .active .accordion_icon::after { transform: rotateZ( 360deg); } body.page .st-contents__inner .qa01>div>div:nth-child(2) { display: none; margin-top: 1em; padding-top: 1em; border-top: solid 1px #eee; } body.page .st-contents__inner .qa01>div:last-of-type>div:nth-child(2) { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } body.page .st-contents__inner .qa01>div>div::before { position: absolute; top: 0; left: 0; width: 1em; font-size: 18px; font-weight: bold; text-align: center; } body.page .st-contents__inner .qa01>div>div:nth-child(1)::before { content: "Q."; color: #df0623; } body.page .st-contents__inner .qa01>div>div:nth-child(2)::before { content: "A."; top: 14px; color: #003399; } @media screen and (max-width: 640px) { body.page .st-contents__inner .qa01>div { padding: 15px 3.125%; } body.page .st-contents__inner .qa01>div>div:nth-child(1) { font-size: 16px; } body.page .st-contents__inner .qa01>div>div::before { font-size: 16px; } } /* ---------------------------------------------- .glossary01 ---------------------------------------------- */ body.page .st-contents__inner .glossary01 {} body.page .st-contents__inner .glossary01>div>h3 { margin-bottom: 1em; padding: .5em 0; font-size: 18px; font-weight: bold; border: none; border-bottom: dotted 2px #999; } body.page .st-contents__inner .glossary01>div>div { margin-bottom: 2.5em; padding-bottom: 1.5em; border-bottom: solid 1px #999; } body.page .st-contents__inner .glossary01>div:last-child>*:last-child { margin-bottom: .5em; } @media screen and (max-width: 640px) { body.page .st-contents__inner .glossary01>div>h3 { font-size: 16px; } } /* ---------------------------------------------- .box01 ---------------------------------------------- */ body.page .st-contents__inner .box01 { margin: 0 auto; margin-bottom: 1.5em; padding: 2em; background-color: #fff; overflow: hidden; border-radius: 5px; } body.page .st-contents__inner .box01 h3 { padding: 0; padding-bottom: 1em; border: none; border-bottom: solid 1px #eee; } body.page .st-contents__inner .box01>*:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { body.page .st-contents__inner .box01 { padding: 1em; } } /* ---------------------------------------------- .explain01 ---------------------------------------------- */ body.page .st-contents__inner .explain01 { margin: 0 auto; margin-bottom: 1.5em; overflow: hidden; border-radius: 5px; } body.page .st-contents__inner .explain01 > h3 { position: relative; margin: 0; padding: .5em; padding-left: 2.75em; font-size: 26px; font-weight: normal; border: none; color: #fff; background-color: #999; } body.page .st-contents__inner .explain01 > h3::before { content: ''; position: absolute; top: 50%; left: .5em; width: 43px; height: 43px; margin-top: -21.5px; background-color: #505050; background-image: url('../images/common/explain01.png'); background-repeat: no-repeat; background-size: contain; border-radius: 3px; } body.page .st-contents__inner .explain01>div { padding: 2em; padding-top: 1.5em; background-color: #fff; } body.page .st-contents__inner .explain01>div h4 { padding: 0; padding-bottom: 1em; border: none; border-bottom: solid 1px #eee; } body.page .st-contents__inner .explain01>div>*:last-child { margin-bottom: 0; } @media screen and (max-width: 640px) { body.page .st-contents__inner .explain01>div { padding: 1em; } body.page .st-contents__inner .explain01 h3 { padding-left: 2.25em; font-size: 16px; } body.page .st-contents__inner .explain01 h3::before { top: 50%; width: 22px; height: 22px; margin-top: -11px; } } /* ---------------------------------------------- .related_links01 ---------------------------------------------- */ body.page .st-contents__inner .related_links01 { margin: 0 auto; margin-bottom: 1.5em; padding: 2em; background-color: #fff; overflow: hidden; border-radius: 5px; } body.page .st-contents__inner .related_links01 h3 { padding: 0; padding-bottom: 1em; border: none; border-bottom: solid 1px #eee; } body.page .st-contents__inner .related_links01>*:last-child { margin-bottom: 0; } body.page .st-contents__inner .related_links01 ul { list-style-type: none; padding: 0; } body.page .st-contents__inner .related_links01 li {} body.page .st-contents__inner .related_links01 a { display: block; position: relative; padding-left: 1.5em; font-size: 14px; } body.page .st-contents__inner .related_links01 a::before { content: '→'; position: absolute; top: 0; left: 0; font-weight: bold; color: #333; } body.page .st-contents__inner .related_links01 a[target="_blank"]::before { content: ''; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; background-image: url(../images/common/popup.png); background-repeat: no-repeat; background-size: contain; } body.page .st-contents__inner .related_links01 a[target="_blank"]:not([href*="www.kyocera.co.jp"])::before { content: ''; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; background-image: url(../images/common/sout.png); background-repeat: no-repeat; background-size: contain; } body.page .st-contents__inner .related_links01 a.kc::before { content: ''; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; background-image: url(../images/common/popup.png) !important; background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 640px) { body.page .st-contents__inner .related_links01 { padding: 1em; } } /* ---------------------------------------------- .info01 ---------------------------------------------- */ body.page .st-contents__inner .info01 { margin: 0 auto; margin-bottom: 1.5em; padding: .5em 1em; background-color: #fff; overflow: hidden; border-radius: 5px; border: solid 1px #eee; } body.page .st-contents__inner .info01>*:last-child { margin-bottom: 0; } /* ---------------------------------------------- .border01 ---------------------------------------------- */ body.page .st-contents__inner .border01 { border-bottom: solid 1px #999; } body.page .st-contents__inner .border01>*:last-child { margin-bottom: 0; } /* ---------------------------------------------- .border02 ---------------------------------------------- */ body.page .st-contents__inner .border02 { border-bottom: dotted 2px #999; } body.page .st-contents__inner .border02>*:last-child { margin-bottom: 0; } /* ---------------------------------------------- .next_link ---------------------------------------------- */ body.page .st-contents__inner .next_link { margin-bottom: 1em; line-height: 2; } body.page .st-contents__inner .next_link a { font-size: 14px; font-weight: bold; text-decoration: none !important; } body.page .st-contents__inner .next_link a:hover { text-decoration: underline !important; } body.page .st-contents__inner .next_link .arrow-next { position: relative; display: inline-block; font-size: 12px; } body.page .st-contents__inner .next_link .arrow-next::after { content: ""; position: absolute; right: -12px; top: 0; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 12px; border-color: transparent transparent transparent #df0623; } body.page .st-contents__inner .next_link .arrow-next span { display: inline-block; height: 24px; padding: 0 1em; color: #fff; background-color: #df0623; } body.page .st-contents__inner .next_link .text { margin-left: 20px; } @media screen and (max-width: 640px) { body.page .st-contents__inner .next_link a { font-size: 12px; } body.page .st-contents__inner .next_link .text { margin-left: 15px; } } /* ---------------------------------------------- .list_links ---------------------------------------------- */ body.page .st-contents__inner .list_links { margin-bottom: 20px; } body.page .st-contents__inner .list_links ul { font-size: 0px; } body.page .st-contents__inner .list_links li { display: inline-block; font-size: 14px; } body.page .st-contents__inner .list_links li.current { font-weight: bold; } body.page .st-contents__inner .list_links li::after { content: "|"; display: inline-block; margin: 0 .5em; font-weight: normal; } body.page .st-contents__inner .list_links li:last-child::after { display: none; } body.page .st-contents__inner .list_links a { text-decoration: none !important; } body.page .st-contents__inner .list_links a:hover { text-decoration: underline !important; } @media screen and (max-width: 640px) { body.page .st-contents__inner .list_links {} body.page .st-contents__inner .list_links ul { padding-left: 0; font-size: 12px; } body.page .st-contents__inner .list_links li { display: inline; } } /* ---------------------------------------------- .arrow_r01 ---------------------------------------------- */ body.page .st-contents__inner .arrow_r01 { position: relative; padding-left: 1.5em; } body.page .st-contents__inner .arrow_r01::before { content: '→'; position: absolute; top: 0; left: 0; font-weight: bold; color: #333; } body.page .st-contents__inner a.arrow_r01 { display: inline-block; } /* ---------------------------------------------- .arrow_r02 ---------------------------------------------- */ body.page .st-contents__inner .arrow_r02 { position: relative; padding-left: 1.5em; } body.page .st-contents__inner .arrow_r02::before { content: ''; position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; background-image: url(../images/common/sout.png); background-repeat: no-repeat; background-size: contain; } body.page .st-contents__inner a.arrow_r02 { display: inline-block; } /* ---------------------------------------------- .sub_menu01 ---------------------------------------------- */ body.page .st-contents__inner .sub_menu01 { margin-bottom: 1.5em; } body.page .st-contents__inner .sub_menu01>div { margin: 0; } body.page .st-contents__inner .sub_menu01>div>div { padding: 0; border-top: solid 5px #df0623; background-color: #fff; } body.page .st-contents__inner .sub_menu01 a { position: relative; display: block; padding: 1em 0; font-weight: bold; text-align: center; text-decoration: none; border-right: solid 1px #fafafa; } body.page .st-contents__inner .sub_menu01>div>div:last-of-type a { border-right: none; } body.page .st-contents__inner .sub_menu01>div>div.current a, body.page .st-contents__inner .sub_menu01 a:hover { color: #fff; border-right: solid 1px #df0623; background-color: #df0623; } body.page .st-contents__inner .sub_menu01 a::before { content: ""; position: absolute; top: 7px; left: 50%; display: none; width: 0; height: 0; margin-left: -3.5px; border-style: solid; border-width: 0 3.5px 4px 3.5px; border-color: transparent transparent #df0623 transparent; } body.page .st-contents__inner .sub_menu01>div>div.current a::before, body.page .st-contents__inner .sub_menu01 a:hover::before { border-color: transparent transparent #fff transparent; } body.page .st-contents__inner .sub_menu01 .title { display: block; /*margin-bottom: .5em;*/ font-size: 16px; line-height: 1; } body.page .st-contents__inner .sub_menu01 .kana { display: block; font-size: 10px; line-height: 1; } @media screen and (max-width: 640px) { body.page .st-contents__inner .sub_menu01 { display: none; } } /* ---------------------------------------------- .sub_menu02 ---------------------------------------------- */ body.page .st-contents__inner .sub_menu02 { margin-bottom: 1.5em; } body.page .st-contents__inner .sub_menu02>div { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } body.page .st-contents__inner .sub_menu02>div>div { width: calc( (100% - 1px) / 11); padding: 0; border-top: solid 5px #df0623; background-color: #fff; -ms-flex: 0 0 calc(100% / 11); flex: 0 0 calc(100% / 11); max-width: calc(100% / 11); } body.page .st-contents__inner .sub_menu02 a { position: relative; display: block; padding: .5em 0; font-weight: bold; text-align: center; text-decoration: none; border-right: solid 1px #fafafa; } body.page .st-contents__inner .sub_menu02>div>div:last-of-type a { border-right: none; } body.page .st-contents__inner .sub_menu02>div>div.current a, body.page .st-contents__inner .sub_menu02 a:hover { color: #fff; border-right: solid 1px #df0623; background-color: #df0623; } body.page .st-contents__inner .sub_menu02>div>div.disabled a { color: #666; border-right: solid 1px #ddd; background-color: #ddd; } body.page .st-contents__inner .sub_menu02 a::before { content: ""; position: absolute; top: 7px; left: 50%; display: none; width: 0; height: 0; margin-left: -3.5px; border-style: solid; border-width: 0 3.5px 4px 3.5px; border-color: transparent transparent #df0623 transparent; } body.page .st-contents__inner .sub_menu02>div>div.current a::before, body.page .st-contents__inner .sub_menu02 a:hover::before { border-color: transparent transparent #fff transparent; } body.page .st-contents__inner .sub_menu02>div>div.disabled a::before { border-color: transparent transparent #999 transparent; } @media screen and (max-width: 640px) { body.page .st-contents__inner .sub_menu02 {} body.page .st-contents__inner .sub_menu02>div>div { width: calc( (100% - 1px) / 5); -ms-flex: 0 0 calc(100% / 5); flex: 0 0 calc(100% / 5); max-width: calc(100% / 5); } } /* ---------------------------------------------- .ani_gif01 ---------------------------------------------- */ body.page .st-contents__inner img.ani_gif01 { display: none !important; } body.page .st-contents__inner .ani_gif01 { outline: none; } body.page .st-contents__inner .ani_gif01 img { position: absolute; top: 0; left: 0; } /* ---------------------------------------------- .ani_gif02 ---------------------------------------------- */ body.page .st-contents__inner img.ani_gif02 { display: none !important; } body.page .st-contents__inner .ani_gif02 { outline: none; } body.page .st-contents__inner .ani_gif02 .gifffer-play-button { background: rgba(255, 255, 255, 0.3) !important; } body.page .st-contents__inner .ani_gif02 img { position: absolute; top: 0; left: 0; } /* ---------------------------------------------- .ani_gif03 ---------------------------------------------- */ body.page .st-contents__inner img.ani_gif03 { display: none !important; } body.page .st-contents__inner .ani_gif03 { outline: none; } body.page .st-contents__inner .ani_gif03 .gifffer-play-button { display: none; } body.page .st-contents__inner .ani_gif03 img { position: absolute; top: 0; left: 0; } body.page .st-contents__inner .ani_gif03::before { content: "实验开始"; position: absolute; bottom: 0; left: 0; margin: 0; padding: 0 1em; padding-right: 1.5em; font-size: 14px; line-height: normal; color: #fff; background-color: #df0623; border: solid 1px #df0623; border-radius: 8px; z-index: 1; } body.page .st-contents__inner .ani_gif03::after { content: ""; position: absolute; bottom: 4px; left: 5.5em; width: 0; height: 0; font-size: 14px; border-style: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #fff; z-index: 1; } body.page .st-contents__inner .ani_gif03.playing::before { color: #aaa; background-color: #ccc; border: solid 1px #ccc; } body.page .st-contents__inner .ani_gif03.playing::after { border-color: transparent transparent transparent #aaa; } /* ---------------------------------------------- .list-card50 ---------------------------------------------- */ .list-card50 a.btn { width: calc(( 100% - 16px * 1) / 2); } .list-card50 a.btn:nth-of-type(4n) { margin-right: 16px; } .list-card50 a.btn:nth-of-type(2n) { margin-right: 0; } @media screen and (max-width: 640px) { .list-card a.btn { width: calc(( 100% - 3.125vw * 1) / 2); } } /* ---------------------------------------------- .map01 ---------------------------------------------- */ .map01 { text-align: center; } .map01>div { position: relative; display: inline-block; line-height: 0; } .map01>div>a { position: absolute; } .map01 a:hover { background-color: rgba(255, 255, 255, .4); } /* .map01.pc */ .map01.pc .map-a01 { top: 0.3%; left: 8.5%; width: 19.5%; height: 10.6%; } .map01.pc .map-a02 { top: 0.3%; left: 31%; width: 19.5%; height: 10.6%; } .map01.pc .map-a03 { top: 16.9%; left: 8.5%; width: 16.3%; height: 10.7%; } .map01.pc .map-a04 { top: 16.9%; left: 45.9%; width: 16.3%; height: 10.7%; } .map01.pc .map-a05 { top: 16.9%; left: 64.5%; width: 16.3%; height: 10.7%; } .map01.pc .map-a06 { top: 16.9%; left: 83.2%; width: 16.3%; height: 10.7%; } .map01.pc .map-a07 { top: 16.9%; left: 27.2%; width: 16.3%; height: 10.7%; } .map01.pc .map-a08 { top: 29.9%; left: 45.7%; width: 16.6%; height: 10.7%; } .map01.pc .map-a09 { top: 35.5%; left: 8.4%; width: 35.2%; height: 10.7%; } .map01.pc .map-a10 { top: 35.5%; left: 64.4%; width: 16.5%; height: 10.7%; } .map01.pc .map-a11 { top: 52.2%; left: 52.2%; width: 18%; height: 10.7%; } .map01.pc .map-a12 { top: 52.2%; left: 30.3%; width: 19.7%; height: 10.7%; } .map01.pc .map-a13 { top: 52.2%; left: 8.4%; width: 19.7%; height: 10.7%; } .map01.pc .map-a14 { top: 68.9%; left: 8.5%; width: 19.4%; height: 10.7%; } .map01.pc .map-a15 { top: 85.7%; left: 8.5%; width: 42%; height: 14.1%; } .map01.pc .map-a16 { top: 13.2%; left: 75.9%; width: 12.5%; height: 2%; } /* .map01.sp */ .map01.sp .map-a01 { top: 3.5%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a02 { top: 3.5%; left: 52.5%; width: 41.25%; height: 5.75%; } .map01.sp .map-a03 { top: 22.3%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a04 { top: 15.4%; left: 52.5%; width: 41.25%; height: 5.75%; } .map01.sp .map-a05 { top: 15.4%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a06 { top: 29.2%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a07 { top: 22.3%; left: 52.5%; width: 41.25%; height: 5.75%; } .map01.sp .map-a08 { top: 48%; left: 52.5%; width: 41.25%; height: 5.75%; } .map01.sp .map-a09 { top: 41.1%; left: 6.25%; width: 87.5%; height: 5.75%; } .map01.sp .map-a10 { top: 47%; left: 6.25%; width: 41.25%; height: 6.75%; } .map01.sp .map-a11 { top: 66.8%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a12 { top: 59.9%; left: 52.5%; width: 41.25%; height: 5.75%; } .map01.sp .map-a13 { top: 59.9%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a14 { top: 78.7%; left: 6.25%; width: 41.25%; height: 5.75%; } .map01.sp .map-a15 { top: 90.4%; left: 6.25%; width: 87.5%; height: 8.4%; } .map01.sp .map-a16 { top: 31.8%; left: 53.5%; width: 39.5%; height: 1.7%; } /* ---------------------------------------------- .map02 ---------------------------------------------- */ .map02 { text-align: center; } .map02>div { position: relative; display: inline-block; line-height: 0; } .map02>div>a { position: absolute; } .map02 a:hover { background-color: rgba(255, 255, 255, .4); } /* .map02.pc */ .map02.pc .map-a01 { top: 36%; left: 56.5%; width: 16%; height: 12%; } .map02.pc .map-a02 { top: 36%; left: 19%; width: 16%; height: 12%; } .map02.pc .map-a03 { top: 36%; left: 37.75%; width: 16%; height: 12%; } .map02.pc .map-a04 { top: 36%; left: 0%; width: 16%; height: 12%; } .map02.pc .map-a05 { top: 72.5%; left: 2.25%; width: 14%; height: 12%; } .map02.pc .map-a06 { top: 72.5%; left: 18.5%; width: 14%; height: 12%; } .map02.pc .map-a07 { top: 72.5%; left: 34.5%; width: 14%; height: 12%; } .map02.pc .map-a08 { top: 36%; left: 75.5%; width: 24.4%; height: 12%; } /* .map02.sp */ .map02.sp .map-a01 { top: 23%; left: 5.5%; width: 35.5%; height: 10.25%; } .map02.sp .map-a02 { top: 43.5%; left: 5.5%; width: 35.5%; height: 10.25%; } .map02.sp .map-a03 { top: 64.25%; left: 5.5%; width: 35.5%; height: 10.25%; } .map02.sp .map-a04 { top: 19.75%; left: 53.25%; width: 46%; height: 10.25%; } .map02.sp .map-a05 { top: 34.75%; left: 59.25%; width: 35.75%; height: 10.25%; } .map02.sp .map-a06 { top: 49.25%; left: 59.25%; width: 35.75%; height: 10.25%; } .map02.sp .map-a07 { top: 65.5%; left: 59.25%; width: 35.75%; height: 10.25%; } .map02.sp .map-a08 { top: 87%; left: 5.5%; width: 55.75%; height: 13%; } /* ---------------------------------------------- .map03 ---------------------------------------------- */ .map03 { text-align: center; } .map03>div { position: relative; display: inline-block; line-height: 0; } .map03>div>a { position: absolute; border-radius: 50%; } .map03 a:hover { background-color: rgba(255, 255, 255, .4); } /* .map03.pc */ .map03.pc .map-a01 { top: 5.25%; left: 32%; width: 18%; height: 31.5%; } .map03.pc .map-a02 { top: 36.75%; left: 18%; width: 18%; height: 31.5%; } .map03.pc .map-a03 { top: 7.25%; left: 56.75%; width: 18%; height: 31.5%; } .map03.pc .map-a04 { top: 45%; left: 56.5%; width: 18%; height: 31.5%; } .map03.pc .map-a05 { top: 60.75%; left: 35.25%; width: 18%; height: 31.5%; } /* .map03.sp */ .map03.sp .map-a01 { top: 0; left: 24.5%; width: 32%; height: 34.5%; } .map03.sp .map-a02 { top: 35%; left: 0; width: 32%; height: 34.5%; } .map03.sp .map-a03 { top: 2%; left: 68%; width: 32%; height: 34.5%; } .map03.sp .map-a04 { top: 44%; left: 67.5%; width: 32%; height: 34.5%; } .map03.sp .map-a05 { top: 61.25%; left: 30%; width: 32%; height: 34.5%; } /* ---------------------------------------------- .difference ---------------------------------------------- */ .difference { } .difference .title { white-space: nowrap; } .difference .eng { margin-left: .5em; font-size: 75%; white-space: nowrap; } .difference .eng::before, .difference .eng::after { content: "-"; } .difference h3 { padding: 0 !important; padding-bottom: 1em !important; color: #2f68bd; border: none !important; border-bottom: solid 1px #eee !important; } .difference > div:nth-of-type(2) { padding: 2.5em !important; background-color: #f0f6ff; } .difference h4 { padding: .5em !important; text-align: center; color: #2f68bd; border: solid 1px #2f68bd !important; } .difference > div:nth-of-type(2) > div.difference-01 { margin: 0; padding: 2.5em; border-radius: 5px; background-color: #fff; } .difference > div:nth-of-type(2) > div.difference-01 h5 { margin-bottom: .5em; padding: .5em; font-size: 16px; color: #fff; border:none; background-color: #2f68bd; } .difference > div:nth-of-type(2) > div.difference-01 > div:nth-of-type(1) { margin-bottom: 2.5em; } .difference > div:nth-of-type(2) > div.difference-01 img { width: 100%; } .difference > div:nth-of-type(2) > div.difference-02 { padding: 2.5em; padding-bottom: 0; border-radius: 5px; background-color: #fff; } .difference > div:nth-of-type(2) > div.difference-02 h5 { margin-bottom: 1em !important; padding: .5em !important; font-size: 18px; text-align: center; color: #26ae5c; border: solid 1px #26ae5c !important; } .difference > div:nth-of-type(2) > div.difference-02 > div:nth-of-type(1) h6 { margin-bottom: .5em; padding: .5em; font-size: 16px; color: #fff; border:none; background-color: #26ae5c; } .difference > div:nth-of-type(2) > div.difference-02 > div:nth-of-type(1) img { width: 100%; } .difference > div:nth-of-type(2) > div.difference-01 > div:nth-of-type(2) h6 { margin-bottom: .5em; padding: .5em; font-size: 16px; color: #fff; border:none; background-color: #ea7f00; } @media screen and (max-width: 640px) { .difference > div:nth-of-type(2), .difference > div:nth-of-type(2) > div.difference-01, .difference > div:nth-of-type(2) > div.difference-02 { padding: 1em !important; } .difference > div:nth-of-type(2) > div.difference-02 h5 { font-size: 16px; } .difference > div:nth-of-type(2) > div.difference-01 h5, .difference > div:nth-of-type(2) > div.difference-02 > div:nth-of-type(1) h6, .difference > div:nth-of-type(2) > div.difference-01 > div:nth-of-type(2) h6 { font-size: 14px; } } /* ---------------------------------------------- .youtube ---------------------------------------------- */ .youtube { line-height: 0; } @media screen and (max-width: 640px) { .youtube { position: relative; width: 100%; /*padding-top: 56.25%;*/ } /*.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }*/ } /* ---------------------------------------------- .button01 ---------------------------------------------- */ .button01 { position: relative; display: inline-block; margin-bottom: 10px; padding: 15px 45px; text-align: center; text-decoration: none !important; color: #fff !important; background-color: #df0623; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .button01:hover { color: #fff; text-decoration: none !important; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: alpha(opacity=60); } /* ---------------------------------------------- .flow01 ---------------------------------------------- */ .flow01 { } .flow01 dl { position: relative; display: table; width: 75%; margin: 3em auto; border: solid 1px #eee; border-radius: 5px; } .flow01 dl:last-of-type { margin-bottom: 0; } .flow01 dl::after { content: ""; position: absolute; bottom: calc(-1.5em - 11px); left: 50%; width: 0; height: 0; margin-left: -20px; border-style: solid; border-width: 20px 20px 0 20px; border-color: #df0623 transparent transparent transparent; } .flow01 dl:last-of-type::after { display: none; } .flow01 dt, .flow01 dd { display: table-cell; padding: 2em 1em; vertical-align: top; } .flow01 dt { width: 40%; text-align: center; } .flow01 dd { width: 60%; } .flow01 dd>*:last-child { margin-bottom: 0 !important; } @media screen and (max-width: 640px) { .flow01 dl { width: 100%; } } /* ---------------------------------------------- .closeme ---------------------------------------------- */ .closeme { display: block; width: 140px; margin: 0 auto; font-size: 14px; /* position: absolute; left: 0; bottom: 0; width: 100%; */ } /* ---------------------------------------------- .production_01 ---------------------------------------------- */ .production_01 { width: 214px; margin: 0 auto; padding: 1px; font-size: 10px; line-height: 1.3; color: #fff; background-color: #231815; } .production_01 span { display: inline-block; padding: 0 4px; } /* ---------------------------------------------- .clean_energy_01 ---------------------------------------------- */ .clean_energy_01_t { border-top-width: 3px !important; border-left-width: 3px !important; border-right-width: 3px !important; } .clean_energy_01_m { border-left-width: 3px !important; border-right-width: 3px !important; } .clean_energy_01_b { border-bottom-width: 3px !important; border-left-width: 3px !important; border-right-width: 3px !important; } /* ---------------------------------------------- .button_comic ---------------------------------------------- */ .button_comic { display: inline-block; padding: 5px 45px; text-align: center; text-decoration: none !important; color: #fff !important; background-color: #df0623; border-radius: 4px; } a:hover .button_comic { color: #fff; text-decoration: none !important; opacity: 0.6; filter: alpha(opacity=60); -ms-filter: alpha(opacity=60); } @media screen and (max-width: 640px) { .button_comic { padding: 5px 15px; font-size: 12px; } } /* ---------------------------------------------- .consent_bg ---------------------------------------------- */ .consent_bg { height: 394px; background-repeat: no-repeat; background-position: left top; background-size: contain; background-image: url(../images/page/consent01.png); } .consent_bg>div { padding-top: 50px; } .consent_bg>div a:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: alpha(opacity=60); } @media screen and (max-width: 640px) { .consent_bg { height: auto; background-image: none; } .consent_bg>div { padding: 0; } .consent_image { position: relative; } .consent_image:after { position: absolute; top: 0; left: 0; right: 0; bottom: 75%; background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(240,240,240,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#00ffffff',GradientType=0 ); } } /* body.page-07 */ body.page-07 .vbox-content .st-contents__inner { padding: 0; background-color: transparent; } body.page-07 .vbox-content .figlio { width: 100%; } body.page-07 .vbox-content .figlio .p-section01 { margin-bottom: 0; } body.page-07 .vbox-content .figlio img { max-width: none; margin-bottom: 0; } /* body.page-34 */ body.page-34 #slideshow { width: 50%; margin: 0 auto; font-size: 0; line-height: 0; } body.page-34 .slick-prev { display: none !important; } body.page-34 .slick-next { position: absolute; right: 7.4%; bottom: 10%; width: 15%; height: 11%; font-size: 0; color: transparent; background-color: transparent; border: none; cursor: pointer; outline: none; } body.page-34 .slick-next:hover { background-color: rgba(255, 255, 255, .4); } @media screen and (max-width: 640px) { body.page-34 #slideshow { width: auto; } } /* body.page-07 */ body.page-07 .vbox-content { /* margin: 0 !important; */ } body.page-07 .closeme { position: absolute; bottom: 10px; left: 50%; margin-left: -70px; } /* body.page-46 */ body.page-46 .vbox-content { /* margin: 0 !important; */ } body.page-46 .closeme { position: absolute; bottom: 10px; left: 50%; margin-left: -70px; } .m-auto { margin-left: auto; margin-right: auto; } .tc01 { color: #fff; background-color: orange; } /* ---------------------------------------------- .arrow_r03 ---------------------------------------------- */ body.page .st-contents__inner .arrow_r03 { position: relative; padding-right: 1.7em; } body.page .st-contents__inner .arrow_r03::after { content: ''; position: absolute; top: 50%; right: 0; width: 16px; height: 16px; margin-top: -8px; background-image: url(../images/common/sout.png); background-repeat: no-repeat; background-size: contain; } body.page .st-contents__inner a.arrow_r03 { display: inline-block; }