@charset "UTF-8";
/*====================================================

        font set

====================================================*/
@font-face {
  font-family: 'icon';
  src: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49");
  src: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49#iefix") format("embedded-opentype"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.ttf?23to49") format("truetype"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.woff?23to49") format("woff"), url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.svg?23to49#icon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"], i {
  font-family: 'icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.arrow_border_bottom01:before {
  content: "\e900";
  color: #af207f; }

.arrow_border_right01:before {
  content: "\e901";
  color: #00306b; }

.icon_cantact_catalog:before {
  content: "\e902";
  color: #fff; }

.icon_inquiry:before {
  content: "\e903";
  color: #fff; }

.icon_tel:before {
  content: "\e904";
  color: #fff; }

.icon_download:before {
  content: "\e905";
  color: #186eb4; }

.icon_list:before {
  content: "\e906";
  color: #b9c0c8; }

.icon_list:after {
  content: "\e907";
  margin-left: -1em;
  color: #af207f; }

.icon_blockquote01:before {
  content: "\e908";
  color: #ac257d; }

.icon_blockquote02:before {
  content: "\e909";
  color: #ac257d; }

.icon_onlinedemo:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/common/icon_onlinedemo.svg") no-repeat 0 0/cover; }

.icon_movie:before {
  position: relative;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/common/arrow_circle_wh01.svg) no-repeat;
  background-size: 16px 16px;
  top: -3px;
  color: #fff; }

.icon_document::before {
  content: "";
  display: inline-block;
  width: 16.28px;
  height: 20px;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/icon_document.svg") no-repeat 0 0/cover; }

.icon_document_white::before {
  content: "";
  display: inline-block;
  width: 17.5px;
  height: 21.5px;
  background: url("https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/Icon_document_w.svg") no-repeat 0 0/cover; }

:root {
  --color-primary: #0081CC;
  --color-glay: #D9D9D9;
  --color-lightblue: #C7EAFF;
  --color-glayblue: #A5CCEC;
  --color-cvred: #EE4C51;
  --color-request: #da0000;
  --color-black: #333;
  --color-lightbrown: #F3E3D7;
  --color-orange: #FF8F13;
  --color-kanjo: #AC257D;
  --color-kyuyo: #0075C1;
  --color-akikura: #006939; }

.ayumi {
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--color-black);
  font-optical-sizing: auto;
  overflow: hidden;
  padding-top: 1px; }

.lp-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100px;
  padding: 0 20px;
  border-bottom: solid 1px var(--color-glay);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background: #fff; }

@media screen and (max-width: 1023px) {
  .lp-header {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 5px 0 0;
    height: auto; }
  .lp-header .logo {
    width: calc(50% - 10px);
    max-width: 182px;
    margin-left: 10px;
    padding-bottom: 6px;
    height: 60px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center; }
  .lp-header .logo a {
    display: block;
    min-width: 181.91px;
    min-height: 30.39px; } }

.lp-menu {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex: 1;
  flex: 1; }

@media screen and (max-width: 1023px) {
  .lp-menu {
    width: 100%; } }

.lp-menu nav {
  margin-top: -10px;
  margin-left: auto;
  margin-right: 2%;
  min-width: 700px; }

@media screen and (max-width: 1181px) {
  .lp-menu nav {
    width: 72%;
    min-width: auto; } }

@media screen and (max-width: 1023px) {
  .lp-menu nav {
    width: 100%;
    margin: 0; } }

.lp-menu ul {
  display: -ms-flexbox;
  display: flex; }

.lp-menu.lp-menu_2 ul {
  -ms-flex-pack: end;
  justify-content: flex-end; }

.lp-menu ul li {
  min-width: 160px;
  height: 50px;
  width: 20%;
  border-right: solid 1px var(--color-glay);
  position: relative; }

.lp-menu.lp-menu_2 ul li {
  width: 25%; }

@media screen and (max-width: 1365px) {
  .lp-menu ul li {
    min-width: initial; } }

@media screen and (max-width: 1023px) {
  .lp-menu ul li {
    min-width: initial;
    background: var(--color-glay);
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;
    height: 64px; }
  .lp-menu ul li::after {
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #fff;
    border-right: 0;
    position: absolute;
    left: 100%;
    top: 25px;
    content: "";
    z-index: 1; } }

.lp-menu ul li::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--color-glay);
  transition: 0.3s; }

@media screen and (max-width: 1023px) {
  .lp-menu ul li::before {
    bottom: 0; } }

@media (hover: hover) {
  .lp-menu ul li:hover::before {
    background: var(--color-primary); } }

.lp-menu ul li.current::before {
  background: var(--color-primary); }

@media screen and (max-width: 1023px) {
  .lp-menu ul li.current {
    background: var(--color-glayblue);
    color: #fff; }
  .lp-menu ul li.current::after {
    border-left: 5px solid var(--color-glayblue); } }

.lp-menu ul li:first-child {
  border-left: solid 1px var(--color-glay); }

.lp-menu ul li:first-child a {
  display: block;
  padding-top: 25px; }

.lp-menu ul li:first-child a.first {
  padding-top: 0;
  display: -ms-flexbox;
  display: flex; }

.lp-menu ul li:first-child::before {
  border-radius: 10px 0 0 10px; }

@media screen and (max-width: 1023px) {
  .lp-menu ul li:first-child::before {
    border-radius: 0; } }

@media screen and (max-width: 1023px) {
  .lp-menu ul li:last-child {
    border-right: none; } }

.lp-menu ul li:last-child::before {
  border-radius: 0 10px 10px 0; }

@media screen and (max-width: 1023px) {
  .lp-menu ul li:last-child::before {
    border-radius: 0; } }

.lp-menu ul li a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 0 10%;
  height: 100%;
  font-weight: 800; }

@media screen and (max-width: 1025px) {
  .lp-menu ul li a {
    font-size: 12px; } }

@media screen and (max-width: 1023px) {
  .lp-menu ul li a {
    padding: 0; } }

.lp-menu ul li a .number {
  background: var(--color-lightblue);
  display: block;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600; }

@media screen and (max-width: 1023px) {
  .lp-menu ul li a .number {
    background: none; } }

.lp-menu_btn {
  max-width: 180px; }

.lp-menu_btn.lp-menu_btn_2 {
  max-width: 206px; }

.lp-menu_btn a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 68px;
  color: #fff;
  background: linear-gradient(164deg, #EE4C51 26.83%, #EE4C51 50.27%, #EA3B40 50.27%, #EA3B40 73.7%);
  padding: 0 50px 0 20px;
  border-radius: 5px;
  line-height: 1.4;
  box-shadow: 0px 1px 4px rgba(11, 2, 2, 0.6);
  position: relative;
  font-weight: bold;
  transition: 0.3s; }

@media (hover: hover) {
  .lp-menu_btn a:hover {
    box-shadow: none;
    background: linear-gradient(164deg, #EE4C51 0%, #EE4C51 100%); }
  .lp-menu_btn a:hover::after {
    right: 6px; } }

.lp-menu_btn a::before, .lp-menu_btn a::after {
  content: "";
  position: absolute; }

.lp-menu_btn a::before {
  width: 1px;
  height: 50px;
  background: #fff;
  right: 35px;
  top: 50%;
  margin-top: -25px; }

.lp-menu_btn a::after {
  width: 17px;
  height: 10px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/white_arrow.svg) no-repeat;
  background-size: 100%;
  top: calc(50% - 5px);
  right: 10px;
  transition: 0.3s; }

@media screen and (max-width: 1023px) {
  .lp-menu_btn {
    position: absolute;
    top: 8px;
    right: 10px;
    max-width: 144px; }
  .lp-menu_btn a {
    font-size: 14px;
    height: 50px;
    width: 100%;
    padding: 0 30px 0 10px; }
  .lp-menu_btn a::after {
    top: 45%; }
  .lp-menu_btn.lp-menu_btn_2 {
    max-width: 42%; } }

.title h3 {
  font-weight: 500; }

.title_lead {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500; }

.blue {
  color: var(--color-primary); }

.gray {
  color: #959595;
  font-size: 20px; }

.fc-red {
  color: var(--color-request); }

.orange_btn a {
  background: linear-gradient(180deg, #FF8913 0%, #FF8913 50%, #FF6B09 50%, #FF6B09 100%);
  border-radius: 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  min-height: 52px;
  padding: 10px 50px 10px 20px;
  position: relative;
  transition: 0.3s; }

@media (hover: hover) {
  .orange_btn a:hover {
    background: linear-gradient(180deg, #FF8913 0%, #FF8913 100%); }
  .orange_btn a:hover::after {
    right: 10px; } }

.orange_btn a::before, .orange_btn a::after {
  content: "";
  position: absolute; }

.orange_btn a::before {
  width: 1px;
  height: 20px;
  background: #fff;
  right: 35px;
  top: 50%;
  margin-top: -10px; }

.orange_btn a::after {
  width: 15px;
  height: 8px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/white_arrow.svg) no-repeat;
  background-size: 100%;
  top: 50%;
  right: 15px;
  margin-top: -4px;
  transition: 0.3s; }

.blue_btn {
  width: 100%; }

.blue_btn a {
  background: var(--color-primary);
  color: #fff;
  border-radius: 30px;
  padding: 20px;
  color: #fff;
  display: block;
  position: relative;
  transition: 0.3s;
  font-size: 14px; }

@media screen and (max-width: 1023px) {
  .blue_btn a {
    padding: 15px 20px; } }

@media (hover: hover) {
  .blue_btn a:hover {
    background: #00a1ff; }
  .blue_btn a:hover::before {
    right: 6%; } }

.blue_btn a::before {
  content: "";
  width: 14px;
  height: 12px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/link_icon.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 25px;
  right: 8%;
  transition: 0.3s; }

@media screen and (max-width: 1023px) {
  .blue_btn a::before {
    top: 18px; } }

.sp {
  display: none; }

@media screen and (max-width: 1023px) {
  .sp {
    display: block; } }

@media screen and (max-width: 1023px) {
  .pc {
    display: none; } }

.lp-mainvisual {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/cloud.svg) repeat-x, var(--color-lightblue);
  background-size: 1544px;
  position: relative;
  padding: 80px 20px;
  animation: bgLoop 25s linear infinite;
  margin-top: 99px; }

@media screen and (max-width: 1025px) {
  .lp-mainvisual {
    padding-top: 40px; } }

@media screen and (max-width: 1023px) {
  .lp-mainvisual {
    padding-bottom: 150px;
    padding-top: 20px;
    margin-top: 128px; } }

.lp-mainvisual_box {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  min-height: 440px;
  text-align: center; }

.lp-mainvisual_box.lp-mainvisual_box_2 {
  min-height: 450px; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_box {
    max-width: 400px;
    min-height: initial;
    padding: 10px; } }

.lp-mainvisual_box h2,
.lp-mainvisual_box_ttl {
  width: 53%;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(-20);
  animation: fadeinDown forwards 0.2s ease-in;
  animation-delay: 0.8s; }

.lp-mainvisual_box h2.lp-mainvisual_box_ttl,
.lp-mainvisual_box .lp-mainvisual_box_ttl {
  width: 83%; }

.lp-mainvisual_box .lp-mainvisual_box_ttl figcaption {
  visibility: hidden;
  opacity: 0;
  display: none; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_box h2,
  .lp-mainvisual_box_ttl {
    display: none; }
  .lp-mainvisual_box.lp-mainvisual_box_2 h2,
  .lp-mainvisual_box.lp-mainvisual_box_2 .lp-mainvisual_box_ttl {
    display: block;
    padding: 20px;
    width: 100%; }
  .lp-mainvisual_txt .lp-mainvisual_txt--title {
    padding: 0 !important;
    line-height: 1.25; } }

.lp-mainvisual_btn {
  width: 40%;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeinDown forwards 0.2s ease-in;
  animation-delay: 1.2s; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_btn {
    position: absolute;
    top: calc(100% + 30px);
    width: 100%; } }

.lp-mainvisual_btn a {
  font-size: 24px;
  padding: 40px 50px;
  text-align: center;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="4" /><feOffset dx="1" dy="5" result="offsetblur" /><feFlood flood-color="rgba(2,30,47,0.2)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  filter: drop-shadow(0px 4px 4px rgba(2, 30, 47, 0.2)); }

@media (hover: hover) {
  .lp-mainvisual_btn a:hover {
    filter: none; }
  .lp-mainvisual_btn a:hover::after {
    right: 10%; } }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_btn a {
    padding: 35px 0 35px 30px;
    font-size: 22px; } }

.lp-mainvisual_btn a::before {
  height: 24px;
  right: 21%; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_btn a::before {
    right: 18%; } }

.lp-mainvisual_btn a::after {
  width: 24px;
  height: 13px;
  right: 13%; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_btn a::after {
    right: 8%; } }

.lp-mainvisual_img {
  position: absolute;
  top: 0;
  left: 0;
  animation: fadein forwards 0.6s ease-in; }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_img {
    position: relative;
    margin-bottom: -20px; }
  .lp-mainvisual_img img {
    max-width: initial;
    width: calc(100% + 10px); } }

.lp-mainvisual_img_2 {
  top: unset;
  bottom: -24px;
  width: calc(100% - 20px);
  left: 50%;
  transform: translateX(-50%); }

@media screen and (max-width: 1023px) {
  .lp-mainvisual_img_2 {
    top: unset;
    bottom: unset;
    width: 100%;
    left: unset;
    transform: unset; }
  .lp-mainvisual_img.lp-mainvisual_img_2 img {
    width: 100%; } }

.lp-mainvisual::after {
  position: absolute;
  left: 0;
  bottom: -2px;
  content: "";
  width: 100%;
  height: 200px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/mv_bg.svg) repeat-x center bottom; }

.lp-mainvisual_txt {
  opacity: 0;
  animation: fadeinDown forwards 0.2s ease-in;
  animation-delay: 1.2s;
  width: 55%;
  --x: 32px;
  --y: 12px;
  --th: 2px;
  --c: var(--color-primary);
  padding: 14px;
  position: relative;
  background: linear-gradient(var(--c), var(--c)) top left/var(--x) var(--th) no-repeat, linear-gradient(var(--c), var(--c)) top left/var(--th) var(--y) no-repeat, linear-gradient(var(--c), var(--c)) top right/var(--x) var(--th) no-repeat, linear-gradient(var(--c), var(--c)) top right/var(--th) var(--y) no-repeat, linear-gradient(var(--c), var(--c)) bottom left/var(--x) var(--th) no-repeat, linear-gradient(var(--c), var(--c)) bottom left/var(--th) var(--y) no-repeat, linear-gradient(var(--c), var(--c)) bottom right/var(--x) var(--th) no-repeat, linear-gradient(var(--c), var(--c)) bottom right/var(--th) var(--y) no-repeat; }

.lp-mainvisual_txt h3 {
  font-size: 32px; }

.lp-mainvisual_txt .lp-mainvisual_txt--title {
  width: 100%;
  font-size: 32px; }

.lp-mainvisual_txt p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.75; }

@media screen and (max-width: 768px) {
  .lp-mainvisual_txt {
    width: 100%; } }

@keyframes bgLoop {
  from {
    background-position: 0 0; }
  to {
    background-position: -1544px 0; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeinDown {
  from {
    opacity: 0;
    transform: translateY(-20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.intro {
  padding: 150px 20px 0;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/mv_btm.svg) center top no-repeat;
  background-size: 100%; }

.intro.renew {
  background: none;
  padding: 100px 20px 0; }

@media screen and (max-width: 1023px) {
  .intro {
    padding: 80px 20px 0; } }

.intro_wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 50px; }

.intro_wrap_2 {
  padding-bottom: 75px; }

@media screen and (max-width: 1023px) {
  .intro_wrap {
    padding-bottom: 30px;
    max-width: 400px; } }

.intro_comment {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 2%;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 1023px) {
  .intro_comment {
    gap: 4%; }
  .intro_comment img {
    width: 64px; } }

.intro_comment p {
  background: var(--color-glay);
  border-radius: 40px;
  padding: 20px 4%;
  position: relative;
  margin-top: -10px; }

@media screen and (max-width: 1023px) {
  .intro_comment p {
    padding: 18px 12%; } }

.intro_comment p::before {
  border-bottom: 15px solid var(--color-glay);
  left: -8px;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 15px solid var(--color-glay);
  border-top: 0;
  top: 60%; }

.intro_title {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 40px; }

.intro_title h3 {
  font-size: 27px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  margin-bottom: 30px; }

@media screen and (max-width: 1023px) {
  .intro_title h3 {
    font-size: 18px; } }

.intro_title h3 .blue {
  font-size: 36px; }

@media screen and (max-width: 1023px) {
  .intro_title h3 .blue {
    font-size: 26px; } }

@media screen and (max-width: 1023px) {
  .intro_title .title_lead {
    font-size: 16px;
    text-align: left; }
  .intro_title .title_lead br {
    display: none; } }

.intro_cards {
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  max-width: 750px;
  margin: 0 auto;
  -ms-flex-pack: center;
  justify-content: center; }

@media screen and (max-width: 1023px) {
  .intro_cards {
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px; } }

.intro_cards-ayumi, .intro_cards-teacher {
  -ms-flex: 1;
  flex: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  padding: 30px;
  border-radius: 10px;
  gap: 20px; }

@media screen and (max-width: 1023px) {
  .intro_cards-ayumi, .intro_cards-teacher {
    padding: 30px 20px 20px; } }

.intro_cards-ayumi p, .intro_cards-teacher p {
  background: #fff;
  border-radius: 5px;
  line-height: 1.8;
  padding: 12px;
  min-height: 110px; }

@media screen and (max-width: 1023px) {
  .intro_cards-ayumi p, .intro_cards-teacher p {
    font-size: 16px; } }

.intro_cards-ayumi {
  background-color: var(--color-lightblue); }

.intro_cards-teacher {
  background-color: var(--color-lightbrown); }

.intro_ayumi {
  position: absolute;
  left: 0;
  bottom: -180px; }

.intro_ayumi img {
  opacity: 0;
  transition: 0.3s;
  transition-delay: 0.3s; }

.intro_ayumi.js-active img {
  opacity: 1; }

.intro_ayumi.js-active::after {
  animation: tekuteku 0.3s forwards ease-in; }

@media screen and (max-width: 1023px) {
  .intro_ayumi {
    width: 77px;
    bottom: -65px; } }

.intro_ayumi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 225px;
  height: 100px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/top_steps.svg) no-repeat;
  background-size: 100%;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }

@media screen and (max-width: 1023px) {
  .intro_ayumi::after {
    width: 121px;
    height: 54px;
    left: 30px; }
  .lp-intro_btn a {
    height: 60px; } }

.lp-intro_btn {
  max-width: initial;
  width: 43%;
  font-size: 21px;
  margin: 40px auto 0; }

.lp-intro_btn a {
  height: 80px;
  padding: 0 50px; }

@media screen and (max-width: 1023px) {
  .lp-intro_btn {
    position: relative;
    width: 100%;
    right: unset;
    margin: 40px auto 100px; } }

@keyframes tekuteku {
  from {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

.step {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/bg_wave.svg) no-repeat center -1px, var(--color-lightblue);
  background-size: 100%;
  padding: 120px 20px 0; }

.step .orange_btn.u-mb100 {
  margin-bottom: 100px; }

.step .orange_btn a {
  width: 320px;
  margin: 40px auto 0; }

.step_2 {
  padding: 240px 20px 0; }

@media screen and (max-width: 1023px) {
  .step {
    padding: 80px 20px 0; } }

.step_title {
  text-align: center;
  padding-bottom: 50px; }

.step_title h3 {
  font-weight: 600;
  font-size: 23px;
  line-height: 1.6;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px; }

@media screen and (max-width: 1023px) {
  .step_title h3 {
    font-size: 18px; } }

.step_title h3 .big {
  font-size: 92px;
  line-height: 0;
  font-weight: 700; }

@media screen and (max-width: 1023px) {
  .step_title h3 .big {
    font-size: 76px; } }

.step_title h3 .blue {
  font-size: 36px; }

@media screen and (max-width: 1023px) {
  .step_title h3 .blue {
    font-size: 30px; } }

@media screen and (max-width: 1023px) {
  .step_title .title_lead {
    font-size: 16px;
    text-align: left; } }

.step_item {
  padding: 25px 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 100%; }

.step_item .orange_btn {
  margin-top: auto;
  width: 100%; }

@media screen and (max-width: 821px) {
  .step_item {
    min-height: 480px; } }

.step_list {
  position: relative;
  max-width: 1200px;
  margin: 0 auto; }

@media screen and (max-width: 1023px) {
  .step_list {
    padding: 0 20px; } }

@media screen and (max-width: 821px) {
  .step_list {
    padding: 0;
    max-width: 400px; } }

.step_list-num {
  position: absolute;
  right: 25px;
  top: 28px;
  color: var(--color-primary);
  font-size: 50px; }

.step_list ul {
  display: -ms-flexbox;
  display: flex;
  gap: 1.2%;
  counter-reset: number -1;
  position: relative; }

@media screen and (max-width: 821px) {
  .step_list ul {
    display: block;
    gap: initial;
    padding: 0 20px; } }

.step_list ul .slick-item {
  -ms-flex: 1;
  flex: 1;
  background: #fff;
  border-radius: 10px;
  position: relative; }

.step_list ul .slick-item::before {
  content: "STEP";
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--color-primary); }

.step_list ul .slick-item img {
  margin-bottom: 23px; }

.step_list ul .slick-item h4 {
  font-size: 24px;
  margin-bottom: 23px;
  font-weight: 600;
  line-height: 1.6;
  position: relative;
  padding-bottom: 23px; }

.step_list ul .slick-item h4::before {
  content: "";
  width: 46px;
  height: 3px;
  background: var(--color-primary);
  position: absolute;
  left: 0;
  bottom: 0; }

.step_list ul .slick-item p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 23px; }

.step_list .slick-dots {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  left: 0;
  bottom: -30px; }

.step_list .slick-dots button {
  text-indent: -9999px;
  width: 14px;
  height: 14px;
  border-radius: 50px; }

.step_list .slick-active button {
  background: var(--color-primary); }

.step_list .slick-arrow {
  position: absolute;
  top: 50%;
  text-indent: -9999px;
  width: 40px;
  height: 40px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/slick_arrow.svg) no-repeat;
  z-index: 2; }

.step_list .slick-prev {
  left: -10px; }

.step_list .slick-next {
  right: -10px;
  transform: scale(-1, 1); }

.step_list-ayumi {
  position: absolute;
  bottom: calc(100% - 8px);
  right: 3%;
  transform: translateY(20px);
  opacity: 0; }

.step_list-ayumi.js-active {
  animation: nuu 0.3s forwards ease-in; }

@media screen and (max-width: 1023px) {
  .step_list-ayumi {
    width: 70px; } }

.step_comment {
  max-width: 1000px;
  margin: 80px auto 0;
  position: relative; }

.step_comment-teacher {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 5%; }

.step_comment-teacher p {
  background: #fff;
  font-size: 18px;
  padding: 20px;
  border-radius: 10px;
  line-height: 1.6;
  margin-top: -30px;
  position: relative; }

.step_comment-teacher p::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 0;
  right: 5%;
  top: calc(100% - 20px);
  border-left: 29px solid #fff;
  transform: scale(-1, 1); }

@media screen and (max-width: 1023px) {
  .step_comment-teacher p::before {
    right: 18%;
    top: calc(100% - 24px); } }

@media screen and (max-width: 1023px) {
  .step_comment-teacher p {
    margin: 0 20px 50px;
    font-size: 16px; } }

.step_comment-teacher img {
  transform: translateX(20px); }

.step_comment-teacher.js-active img {
  animation: yokokara-right 0.3s forwards ease-in; }

@media screen and (max-width: 1023px) {
  .step_comment-teacher img {
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 70px; } }

@keyframes yokokara-right {
  from {
    transform: translateX(20px); }
  to {
    transform: translateY(0); } }

@keyframes yokokara-left {
  from {
    transform: translateX(-20px); }
  to {
    transform: translateY(0); } }

@keyframes nuu {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.schedule_example {
  padding-bottom: 100px; }

.schedule_example .schedule_example_inner {
  max-width: 1000px;
  margin: 0 auto; }

.schedule_example .schedule_example_inner .is-justify--center {
  -ms-flex-pack: center;
  justify-content: center;
  gap: 50px; }

.schedule_example .schedule_example_inner .recommendation + .recommendation {
  margin-top: 80px; }

.schedule_example .schedule_example_inner .recommendation .ttl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: stretch;
  align-items: stretch;
  border-radius: 10px;
  font-size: 24px;
  margin-bottom: 20px; }

.schedule_example .schedule_example_inner .recommendation .ttl em {
  padding: 25px;
  line-height: 1;
  background-color: var(--color-primary);
  color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center; }

.schedule_example .schedule_example_inner .recommendation .ttl span {
  padding: 25px;
  line-height: 1;
  background-color: #fff;
  color: var(--color-primary);
  -ms-flex: 1;
  flex: 1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold; }

.schedule_example .schedule_example_inner .recommendation .ttl.recommendation_ttl {
  position: relative; }

.schedule_example .schedule_example_inner .recommendation .ttl.recommendation_ttl::before {
  content: "オススメ！";
  background-color: #FBE0DD;
  color: var(--color-request);
  font-size: 16px;
  font-weight: bold;
  padding: 4px 10px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100px; }

.schedule_example .schedule_example_inner .recommendation .ttl.recommendation_ttl::after {
  content: "";
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/top_ayumi04-1.svg) no-repeat;
  background-size: cover;
  width: 117px;
  height: 137px;
  position: absolute;
  top: -128px;
  right: 20px; }

.schedule_example .schedule_example_inner .recommendation img {
  margin-top: 30px;
  width: 100%; }

.schedule_example .schedule_example_inner .recommendation p {
  line-height: 1.7; }

.schedule_example_inner .c-box {
  border-radius: 0; }

.schedule_example_inner .recommendation_ttl_border, .schedule_example_inner .recommendation_ttl_border--lose {
  margin-bottom: 17px;
  line-height: 1.5;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary); }

.schedule_example_inner .recommendation_ttl_border span, .schedule_example_inner .recommendation_ttl_border--lose span {
  display: inline-block;
  background-color: #eef9fe;
  padding: 0.1em 1em;
  border-left: 3px solid var(--color-primary); }

.schedule_example_inner .recommendation_ttl_border--lose {
  color: var(--color-request); }

.schedule_example_inner .recommendation_ttl_border--lose span {
  background-color: rgba(218, 0, 0, 0.1);
  border-left: 3px solid var(--color-request); }

.schedule_example_inner .recommendation_ttl_border--lose em.blue {
  color: var(--color-request); }

.schedule_example_inner p {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.01em; }

.schedule_example .schedule_example_inner .schedule_attention {
  font-size: 20px;
  background-color: var(--color-primary);
  padding: 8px;
  border-radius: 10px;
  margin-top: 20px; }

.schedule_example .schedule_example_inner .schedule_attention .schedule_attention_box {
  background-color: #fff;
  color: var(--color-primary);
  padding: 30px;
  text-align: center;
  font-weight: bold;
  line-height: 1.7; }

.schedule_example .schedule_example_inner .step_comment {
  margin-bottom: 20px; }

@media screen and (max-width: 1023px) {
  .schedule_example .schedule_example_inner .recommendation .ttl {
    font-size: 16px; }
  .schedule_example .schedule_example_inner .recommendation .ttl em {
    padding: 15px; }
  .schedule_example .schedule_example_inner .recommendation .ttl span {
    line-height: 1.2; }
  .schedule_example .schedule_example_inner .recommendation .ttl.recommendation_ttl::after {
    width: 61px;
    height: 73px;
    position: absolute;
    top: -68px;
    right: 0px; }
  .schedule_example .schedule_example_inner .recommendation .ttl.recommendation_ttl::before {
    transform: unset;
    top: -30px;
    right: 60px;
    font-size: 14px; }
  .schedule_example .schedule_example_inner .schedule_attention {
    font-size: 14px; }
  .schedule_example .schedule_example_inner .schedule_attention .schedule_attention_box {
    text-align: left; } }

.switch {
  padding: 90px 20px; }

@media screen and (max-width: 1023px) {
  .switch {
    padding: 50px 20px; } }

.switch_title {
  text-align: center; }

.switch_title p {
  font-size: 24px;
  margin: 30px 0; }

@media screen and (max-width: 1023px) {
  .switch_title p {
    font-size: 20px;
    line-height: 1.8; } }

.switch_fukidashi {
  padding: 15px 10px 15px 15px;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative; }

@media screen and (max-width: 1023px) {
  .switch_fukidashi {
    margin-bottom: 10px; } }

.switch_fukidashi::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 15px solid #555555;
  border-top: 0;
  top: 50%; }

@media screen and (max-width: 1023px) {
  .switch_fukidashi::before {
    display: none; } }

.switch_fukidashi p {
  font-size: 18px;
  line-height: 1.8; }

@media screen and (max-width: 1023px) {
  .switch_fukidashi p {
    font-size: 16px;
    text-align: left; } }

.switch_link {
  max-width: 1000px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8%; }

@media screen and (max-width: 1023px) {
  .switch_link {
    max-width: 400px;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 30px; } }

.switch_link.js-active .switch_link-ayumi img {
  animation: yokokara-left 0.3s ease-in forwards; }

.switch_link.js-active .switch_link-teacher img {
  animation: yokokara-right 0.3s ease-in forwards; }

.switch_link-ayumi {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 4%;
  width: 43%;
  position: relative; }

.switch_link-ayumi img {
  transform: translateX(-20px); }

@media screen and (max-width: 1023px) {
  .switch_link-ayumi {
    width: 100%;
    gap: 0; }
  .switch_link-ayumi img {
    position: absolute;
    z-index: 2;
    top: -25px;
    left: -16px;
    width: 87px; } }

.switch_link-ayumi .switch_fukidashi {
  background: var(--color-glay); }

.switch_link-ayumi .switch_fukidashi::before {
  border-bottom: 15px solid var(--color-glay);
  left: -10px; }

@media screen and (max-width: 1023px) {
  .switch_link-ayumi .switch_fukidashi {
    padding-left: 67px; } }

.switch_link-teacher {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-align: center;
  align-items: center;
  gap: 4%;
  width: 42%;
  padding-top: 3%; }

.switch_link-teacher img {
  transform: translateX(20px); }

@media screen and (max-width: 1023px) {
  .switch_link-teacher {
    width: 100%;
    position: relative;
    gap: 0; }
  .switch_link-teacher img {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 15px;
    width: 52px; } }

.switch_link-teacher .switch_fukidashi {
  background: var(--color-lightbrown); }

.switch_link-teacher .switch_fukidashi::before {
  border-bottom: 15px solid var(--color-lightbrown);
  right: -10px; }

.switch_link-box {
  -ms-flex: 1;
  flex: 1; }

@media screen and (max-width: 1023px) {
  .switch_link-box {
    padding: 0 20px; } }

.switch_link-box .arrow {
  margin-bottom: 10px; }

@media screen and (max-width: 1023px) {
  .switch_link-box .arrow {
    display: inline-block; } }

.switch_link-box .arrow::before {
  content: "▶︎";
  color: var(--color-primary);
  font-size: 12px;
  margin-right: 10px; }

.merit {
  padding: 80px 20px 70px;
  position: relative;
  z-index: 1; }

@media screen and (max-width: 1023px) {
  .merit {
    padding: 40px 20px 70px; } }

.merit::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/cloud.svg) no-repeat center 20px, linear-gradient(180deg, #C7EAFF 64.94%, transparent 100%);
  z-index: -1;
  background-size: 100%; }

@media screen and (max-width: 1023px) {
  .merit::before {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/cloud_sp.svg) no-repeat center 90px, linear-gradient(180deg, #C7EAFF 64.94%, transparent 100%); } }

.merit_title {
  padding: 0 0 60px;
  text-align: center;
  position: relative;
  max-width: 1000px;
  margin: 0 auto; }

@media screen and (max-width: 1023px) {
  .merit_title {
    text-align: left;
    padding: 0 0 40px; } }

.merit_title h3 {
  font-size: 36px;
  margin-bottom: 30px;
  line-height: 1.5;
  font-weight: 600; }

@media screen and (max-width: 1023px) {
  .merit_title h3 {
    font-size: 25px;
    letter-spacing: 0; } }

.merit_title h3 .small {
  font-size: 25px; }

@media screen and (max-width: 1023px) {
  .merit_title h3 .small {
    font-size: 17px; } }

.merit_title.js-active img {
  animation: yokokara-right 0.3s ease-in forwards; }

.merit_title img {
  position: absolute;
  right: 0;
  bottom: -5px;
  z-index: 1;
  transform: translateX(20px); }

@media screen and (max-width: 1023px) {
  .merit_title img {
    width: 61px; } }

@media screen and (max-width: 1023px) {
  .merit_title .title_lead {
    font-size: 16px; } }

.merit_list {
  max-width: 1000px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 35px; }

@media screen and (max-width: 1023px) {
  .merit_list {
    gap: 14px; } }

.merit_list li {
  border-radius: 10px;
  background: var(--color-glayblue);
  width: calc(50% - 17.5px);
  position: relative;
  padding: 20px;
  min-height: 262px; }

@media screen and (max-width: 1023px) {
  .merit_list li {
    width: calc(50% - 7px);
    padding: 6px;
    border-radius: 5px;
    min-height: initial; } }

.merit_list li img {
  position: absolute;
  right: 0;
  bottom: 0; }

@media screen and (max-width: 1023px) {
  .merit_list li img {
    width: 64px; } }

.merit_list-text {
  border-radius: 10px;
  width: 80%;
  padding: 20px;
  background: #fff;
  height: 100%; }

@media screen and (max-width: 1023px) {
  .merit_list-text {
    width: 100%;
    padding: 7px;
    border-radius: 5px; } }

.merit_list-text h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  padding-bottom: 16px;
  position: relative;
  margin-bottom: 16px; }

@media screen and (max-width: 1023px) {
  .merit_list-text h4 {
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 10px; }
  .merit_list-text h4 br {
    display: none; } }

.merit_list-text h4::before {
  content: "";
  width: 46px;
  height: 3px;
  background: var(--color-primary);
  position: absolute;
  left: 0;
  bottom: 0; }

@media screen and (max-width: 1023px) {
  .merit_list-text h4::before {
    width: 15px;
    height: 2px; } }

.merit_list-text p {
  line-height: 1.8; }

@media screen and (max-width: 1023px) {
  .merit_list-text p {
    font-size: 14px;
    line-height: 1.6;
    padding-bottom: 35px; }
  .merit_list-text p br {
    display: none; } }

.comment {
  padding: 0 20px 100px; }

@media screen and (max-width: 1023px) {
  .comment {
    padding: 40px 20px 50px; } }

.comment_teacher {
  max-width: 1000px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 5%; }

@media screen and (max-width: 1023px) {
  .comment_teacher {
    margin-bottom: 5%; } }

.comment_teacher .comment_img::before {
  width: 209px;
  border: solid 42px #f3f3f3;
  bottom: -40px; }

@media screen and (max-width: 1023px) {
  .comment_teacher .comment_img::before {
    width: 146px;
    border: solid 30px #f3f3f3;
    bottom: -20px; } }

.comment_teacher .comment_fukidashi {
  margin-top: -30px;
  background: var(--color-lightbrown); }

.comment_teacher .comment_fukidashi::after {
  right: 5%;
  border-left: 29px solid var(--color-lightbrown);
  transform: scale(-1, 1); }

.comment_fukidashi {
  padding: 20px;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1.6; }

@media screen and (max-width: 1023px) {
  .comment_fukidashi {
    font-size: 16px;
    padding: 10px 12px; }
  .comment_fukidashi br {
    display: none; } }

.comment_fukidashi::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 0; }

@media screen and (max-width: 1023px) {
  .comment_fukidashi::after {
    top: calc(100% - 18px); } }

.comment_img {
  position: relative; }

.comment_img.js-active img {
  animation: nuu 0.3s forwards 0.3s; }

.comment_img img {
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  opacity: 0; }

.comment_img::before {
  content: "";
  position: absolute;
  aspect-ratio: 1/1;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%; }

.comment_ayumi {
  max-width: 1000px;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  gap: 5%;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative; }

@media screen and (max-width: 1023px) {
  .comment_ayumi {
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 50px; } }

@media screen and (max-width: 1023px) {
  .comment_ayumi .comment_img {
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 80px; } }

.comment_ayumi .comment_img::before {
  width: 262px;
  border: solid 58px #f3f3f3;
  bottom: -80px; }

@media screen and (max-width: 1023px) {
  .comment_ayumi .comment_img::before {
    border: solid 30px #f3f3f3;
    width: 146px;
    bottom: -30px; } }

.comment_ayumi .comment_fukidashi {
  margin-top: 10px;
  background: var(--color-lightblue); }

@media screen and (max-width: 1023px) {
  .comment_ayumi .comment_fukidashi {
    margin-left: 65px; } }

.comment_ayumi .comment_fukidashi::after {
  left: 5%;
  border-left: 29px solid var(--color-lightblue); }

.comment_conclusion {
  background: var(--color-glayblue);
  border-radius: 10px;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  position: relative; }

@media screen and (max-width: 1023px) {
  .comment_conclusion {
    padding: 15px;
    max-width: 400px; } }

.comment_conclusion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/nextstep_bg.png) no-repeat;
  background-size: cover;
  opacity: 0.7;
  mix-blend-mode: soft-light; }

.comment_conclusion-text {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  font-size: 20px;
  line-height: 1.8;
  position: relative;
  z-index: 1; }

@media screen and (max-width: 1023px) {
  .comment_conclusion-text {
    padding: 20px;
    font-size: 16px;
    text-align: left; } }

.comment_next {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 20px;
  gap: 5%;
  font-size: 16px; }

@media screen and (max-width: 1023px) {
  .comment_next {
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    gap: 20px; } }

.comment_btn {
  width: 33%; }

@media screen and (max-width: 1023px) {
  .comment_btn {
    width: 100%; } }

.comment_btn p {
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: 0 20px;
  margin-bottom: 10px; }

@media screen and (max-width: 1023px) {
  .comment_btn p {
    margin-bottom: 5px; } }

.comment_btn p::before, .comment_btn p::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 80%;
  background: var(--color-black); }

.comment_btn p.blue::before, .comment_btn p.blue::after {
  background: var(--color-primary); }

.comment_btn p::before {
  right: 100%;
  transform: scale(-1, 1) rotate(35deg); }

.comment_btn p::after {
  left: 100%;
  transform: rotate(35deg); }

.more {
  background: var(--color-lightblue);
  padding: 70px 20px 90px;
  position: relative; }

@media screen and (max-width: 1023px) {
  .more {
    padding: 50px 20px 40px; } }

.more_btn_large {
  max-width: 400px;
  margin: 0 auto; }

.more_btn_large .orange_btn a {
  padding: 35px 30px;
  font-size: 20px; }

@media screen and (max-width: 1023px) {
  .more_btn_large .orange_btn a {
    padding: 30px;
    font-size: 16px; } }

.more::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-top: 26px solid #ffffff;
  border-bottom: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%); }

.more_title {
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto 60px;
  -ms-flex-align: end;
  align-items: flex-end;
  border-bottom: solid 2px var(--color-primary);
  color: var(--color-primary);
  gap: 1%; }

@media screen and (max-width: 1023px) {
  .more_title {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    position: relative;
    padding-right: 100px;
    margin-bottom: 30px; }
  .more_title img {
    position: absolute;
    width: 127px;
    bottom: 0;
    right: 0; } }

.more_title h3 {
  font-size: 26px;
  padding-bottom: 20px;
  line-height: 1.6; }

@media screen and (max-width: 1023px) {
  .more_title h3 {
    font-size: 18px;
    margin-left: -3px; } }

.more_contents {
  max-width: 1200px;
  margin: 0 auto; }

@media screen and (max-width: 1023px) {
  .more_contents {
    max-width: 400px; } }

.more_movie {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between; }

@media screen and (max-width: 1023px) {
  .more_movie {
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px; } }

.more_movie-img {
  position: relative; }

.more_movie-img::before {
  content: "";
  position: absolute;
  width: 68px;
  height: 68px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/movie_arrow.svg) no-repeat center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-size: 100%; }

@media screen and (max-width: 1023px) {
  .more_movie-img::before {
    width: 38px;
    height: 38px; } }

@media screen and (max-width: 1023px) {
  .more_movie-img {
    width: 36%;
    height: 100%;
    overflow: hidden;
    position: relative; }
  .more_movie-img img {
    width: 140%;
    max-width: initial; } }

.more_movie h4 {
  width: 100%; }

.more_movie a {
  width: calc(50% - 15px);
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  border-radius: 10px;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5%;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  position: relative;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="4" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(98,98,98,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  filter: drop-shadow(0px 0px 4px rgba(98, 98, 98, 0.3));
  transition: 0.3s; }

@media (hover: hover) {
  .more_movie a:hover {
    filter: none; }
  .more_movie a:hover::before {
    background: var(--color-orange); }
  .more_movie a:hover::after {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/arrow_right_white.svg) no-repeat center; } }

@media screen and (max-width: 1023px) {
  .more_movie a {
    width: 100%;
    height: 94px;
    font-size: 16px; } }

.more_movie a p {
  padding-right: 60px; }

@media screen and (max-width: 1023px) {
  .more_movie a p {
    padding-right: 36px;
    -ms-flex: 1;
    flex: 1; } }

.more_movie a::before, .more_movie a::after {
  content: "";
  position: absolute; }

.more_movie a::before {
  width: 6%;
  background: var(--color-glayblue);
  height: 100%;
  right: 0;
  top: 0;
  border-radius: 0 10px 10px 0;
  transition: 0.3s; }

.more_movie a::after {
  width: 10px;
  height: 17px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/arrow_right_black.svg) no-repeat center;
  right: 2%;
  top: 50%;
  margin-top: -8px;
  transition: 0.3s;
  z-index: 1; }

@media screen and (max-width: 1023px) {
  .more_movie a::after {
    width: 8px;
    height: 15px;
    margin-top: -4px;
    background-size: 100%; } }

.lp-contact {
  background: var(--color-primary) url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/contact_bg.svg) repeat-x center bottom;
  padding: 80px 20px 110px; }

@media screen and (max-width: 1023px) {
  .lp-contact {
    background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/contact_bg_sp.svg);
    background-repeat: repeat-x;
    padding: 50px 20px 80px; } }

.lp-contact_title {
  text-align: center;
  padding-bottom: 40px;
  color: #fff; }

@media screen and (max-width: 1023px) {
  .lp-contact_title {
    text-align: left; }
  .lp-contact_title .title_lead {
    font-size: 14px;
    width: 75%; }
  .lp-contact_title .title_lead br {
    display: none; } }

.lp-contact_title h3 {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 30px;
  font-size: 28px; }

@media screen and (max-width: 1023px) {
  .lp-contact_title h3 {
    font-size: 22px; } }

.lp-contact_title h3::before {
  position: absolute;
  content: "";
  width: 60px;
  height: 2px;
  background: #fff;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%); }

@media screen and (max-width: 1023px) {
  .lp-contact_title h3::before {
    left: 0;
    transform: none; } }

.lp-contact_cvarea {
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
  display: -ms-flexbox;
  display: flex;
  position: relative; }

@media screen and (max-width: 1023px) {
  .lp-contact_cvarea {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }

.lp-contact_tel {
  width: 50%;
  border-right: dashed 1px var(--color-primary);
  color: var(--color-primary);
  font-weight: 600; }

@media screen and (max-width: 1023px) {
  .lp-contact_tel {
    width: 100%;
    border: none;
    font-size: 12px;
    letter-spacing: 0;
    margin-bottom: 20px; } }

.lp-contact_tel-number {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  font-size: 34px;
  margin-bottom: 10px; }

@media screen and (max-width: 1023px) {
  .lp-contact_tel-number {
    font-size: 24px;
    gap: 10px; }
  .lp-contact_tel-number img {
    width: 41px; } }

.lp-contact_tel p {
  text-align: center; }

.lp-contact_btn {
  max-width: initial;
  width: 50%;
  font-size: 21px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 10px; }

@media screen and (max-width: 1025px) {
  .lp-contact_btn {
    font-size: 20px;
    position: relative;
    top: initial;
    right: initial;
    margin-left: 0; } }

@media screen and (max-width: 1023px) {
  .lp-contact_btn {
    width: 100%; } }

.lp-contact_btn a {
  font-weight: 500;
  padding: 20px 50px 20px 20px;
  height: 78px;
  width: 90%;
  background: linear-gradient(170deg, #EE4C51 26.83%, #EE4C51 50.27%, #EA3B40 50.27%, #EA3B40 73.7%); }

@media screen and (max-width: 1023px) {
  .lp-contact_btn a {
    width: 100%;
    height: 54px;
    padding: 0 30px 0 13px; } }

.lp-contact_img {
  position: absolute;
  right: 0;
  bottom: calc(100% - 10px); }

@media screen and (max-width: 1023px) {
  .lp-contact_img {
    width: 130px; } }

.lower .comment_ayumi .comment_img::before {
  bottom: -60px;
  left: 63%;
  z-index: -1; }

@media screen and (max-width: 1023px) {
  .lower .comment_ayumi .comment_img::before {
    bottom: -30px; } }

@media screen and (max-width: 1023px) {
  .lower .comment_ayumi {
    margin-bottom: 50px; }
  .lower .comment_ayumi .comment_img {
    bottom: 20px; } }

.lower .comment_teacher {
  margin-bottom: 30px; }

.lower .comment_teacher img {
  max-width: 60px; }

@media screen and (max-width: 1023px) {
  .lower .comment_teacher {
    -ms-flex-align: end;
    align-items: flex-end; }
  .lower .comment_teacher .comment_img::before {
    bottom: -60px; }
  .lower .comment_teacher img {
    width: 140px;
    margin-bottom: -30px; } }

.lowertitle {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/cloud.svg) no-repeat center 20px, var(--color-lightblue);
  background-size: 100%;
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
  height: 385px;
  margin-top: 99px; }

@media screen and (max-width: 1023px) {
  .lowertitle {
    padding: 50px 20px 0;
    height: initial;
    margin-top: 128px; } }

.lowertitle::after {
  position: absolute;
  left: 0;
  bottom: -2px;
  content: "";
  width: 100%;
  height: 200px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/mv_bg.svg) repeat-x center bottom; }

@media screen and (max-width: 1023px) {
  .lowertitle::after {
    background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/mv_bg-sp.svg); } }

.lowertitle_wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start; }

@media screen and (max-width: 1023px) {
  .lowertitle_wrap {
    display: block; } }

.lowertitle_text {
  position: relative;
  padding: 40px 50px 30px 0;
  z-index: 1; }

@media screen and (max-width: 1365px) {
  .lowertitle_text {
    padding-left: 20px;
    margin-right: 5%;
    margin-bottom: 50px; } }

@media screen and (max-width: 1023px) {
  .lowertitle_text {
    width: 100%;
    padding: 20px 10px 15px 0; } }

.lowertitle_text::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100vw;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0 0 30px 0; }

.lowertitle_text span, .lowertitle_text h1, .lowertitle_text p {
  position: relative;
  z-index: 1; }

.lowertitle_text-step {
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 28px;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  gap: 2px; }

@media screen and (max-width: 1023px) {
  .lowertitle_text-step {
    font-size: 20px; } }

.lowertitle_text-step span {
  background: var(--color-orange);
  padding: 2px 10px 3px; }

@media screen and (max-width: 1023px) {
  .lowertitle_text-step span {
    padding: 2px 8px 3px; } }

.lowertitle_text h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 15px; }

@media screen and (max-width: 1365px) {
  .lowertitle_text h1 {
    font-size: 36px; } }

@media screen and (max-width: 1023px) {
  .lowertitle_text h1 {
    font-size: 26px;
    margin-bottom: 10px;
    line-height: 1.4; }
  .lowertitle_text h1 span {
    display: block; } }

.lowertitle_text p {
  font-size: 18px;
  line-height: 1.9; }

@media screen and (max-width: 1023px) {
  .lowertitle_text p {
    padding-right: 26%;
    font-size: 14px; }
  .lowertitle_text p br {
    display: none; } }

.lowertitle_img {
  position: relative;
  z-index: 2; }

@media screen and (max-width: 1023px) {
  .step0_titleimg {
    width: 40%;
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 230px; }
  .step0_titleimg img {
    width: 100%; } }

.step1 {
  padding-bottom: 50px; }

.step1 .lowercontent_card::before {
  display: none; }

@media screen and (max-width: 1023px) {
  .step1_titleimg {
    width: 30%;
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 160px; } }

@media screen and (max-width: 1023px) {
  .step2 .comment_teacher {
    margin-top: 30px; }
  .step2 .comment_ayumi {
    margin-bottom: 0; } }

.step3 {
  padding: 100px 20px 30px; }

@media screen and (max-width: 1023px) {
  .step3 {
    padding: 60px 20px 30px; } }

.step3 .comment_teacher {
  margin-bottom: 0; }

.step3 .comment_teacher .comment_img {
  margin-top: 60px; }

.lp-breadclumb {
  background: #F2F2F2;
  padding: 15px 10px 13px; }

.lp-breadclumb ul {
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: 14px; }

.lp-breadclumb ul a {
  color: var(--color-primary); }

.lp-breadclumb ul li:first-child a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px; }

.lp-breadclumb ul li:first-child a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/home.svg) no-repeat;
  display: block;
  background-size: 100%; }

.lowercontent {
  padding: 65px 20px 80px; }

@media screen and (max-width: 1023px) {
  .lowercontent {
    padding: 40px 20px 0; } }

.lowercontent_title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 50px; }

.lowercontent_title h2 {
  font-size: 36px;
  font-weight: 600;
  border-bottom: solid 3px var(--color-primary);
  margin: 0 auto;
  padding-bottom: 10px;
  text-align: center;
  line-height: 180%; }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 {
    font-size: 24px;
    line-height: 1.6; } }

.lowercontent_title h2 .small {
  font-size: 26px;
  display: inline-block;
  text-align: center;
  position: relative; }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 .small {
    font-size: 18px; } }

.lowercontent_title h2 .small img {
  position: relative;
  top: -4px; }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 .small img {
    width: 90px; } }

.lowercontent_title h2 .small::before, .lowercontent_title h2 .small::after {
  content: "";
  width: 2px;
  height: 60%;
  background: var(--color-primary);
  position: absolute;
  top: 10px;
  transform: rotate(30deg); }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 .small::before, .lowercontent_title h2 .small::after {
    width: 1px; } }

.lowercontent_title h2 .small::before {
  left: calc(100% + 20px); }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 .small::before {
    left: calc(100% + 10px); } }

.lowercontent_title h2 .small::after {
  right: calc(100% + 30px);
  transform: rotate(-30deg); }

@media screen and (max-width: 1023px) {
  .lowercontent_title h2 .small::after {
    right: calc(100% + 20px); } }

.lowercontent_cards {
  max-width: 1200px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 50px 25px;
  position: relative;
  z-index: 1; }

@media screen and (max-width: 1023px) {
  .lowercontent_cards {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column; } }

.lowercontent_cards li {
  background: var(--color-lightblue);
  padding: 2.5%;
  border-radius: 10px;
  width: 31.5%; }

@media screen and (max-width: 1023px) {
  .lowercontent_cards li {
    width: 100%;
    padding: 25px;
    max-width: 340px;
    margin: 0 auto; } }

.lowercontent_cards li:nth-child(even) {
  background-color: var(--color-lightbrown); }

.lowercontent_cards li:nth-child(even) span {
  background: var(--color-lightbrown); }

.lowercontent_cards li:nth-child(3n) .lowercontent_card::before {
  display: none; }

@media screen and (max-width: 1023px) {
  .lowercontent_cards li:nth-child(3n) .lowercontent_card::before {
    display: block; } }

@media screen and (max-width: 1023px) {
  .lowercontent_cards li:last-child .lowercontent_card::before {
    display: none; } }

.lowercontent_cards li span {
  background: var(--color-lightblue);
  color: var(--color-primary);
  padding: 3px 10px 5px;
  font-size: 22px; }

@media screen and (max-width: 1023px) {
  .lowercontent_cards li span {
    font-size: 16px; } }

.lowercontent_cards li p {
  font-size: 20px;
  text-align: center;
  line-break: strict;
  word-break: break-word;
  line-height: 1.8; }

@media screen and (max-width: 1365px) {
  .lowercontent_cards li p {
    font-size: 16px; } }

.lowercontent_card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
  padding: 30px 6%;
  gap: 20px;
  height: 100%;
  position: relative; }

@media screen and (max-width: 1023px) {
  .lowercontent_card {
    gap: 12px; } }

.lowercontent_card::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: calc(100% + 20px);
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/slick_arrow.svg) no-repeat;
  transform: scale(-1, 1); }

@media screen and (max-width: 1023px) {
  .lowercontent_card::before {
    top: calc(100% + 30px);
    left: calc(50% - 20px);
    transform: rotate(-90deg); } }

.lowercontent_card-img {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  margin-top: auto;
  width: 100%; }

#dllist {
  letter-spacing: 0; }

.modal {
  background: #fff;
  position: relative; }

.modal_first {
  padding-top: 40px; }

.modal_hedding {
  padding-right: 100px;
  height: 80px;
  border-bottom: solid 1px var(--color-glay);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 767px) {
  .modal_hedding {
    height: auto;
    padding-right: 0; } }

.modal_title {
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 10px 0;
  -ms-flex-align: center;
  align-items: center; }

@media screen and (max-width: 767px) {
  .modal_title {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 10px;
    gap: 10px; } }

.modal_title p {
  background: var(--color-lightblue);
  color: var(--color-primary);
  padding: 8px 10px;
  font-weight: bold;
  font-size: 16px; }

@media screen and (max-width: 1000px) {
  .modal_title p {
    font-size: 12px; } }

.modal_title h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4; }

@media screen and (max-width: 1000px) {
  .modal_title h3 {
    font-size: 14px; } }

.modal_num {
  text-align: center;
  font-size: 16px;
  padding-top: 20px;
  margin-top: auto; }

@media screen and (max-width: 1000px) {
  .modal_num {
    font-size: 12px; } }

.modal_content {
  padding: 20px 0; }

@media screen and (max-width: 1000px) {
  .modal_content {
    padding: 10px 0; } }

.modal_content h4 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 2px var(--color-primary);
  padding-bottom: 10px;
  display: inline-block;
  line-height: 1.4; }

@media screen and (max-width: 767px) {
  .modal_content h4 {
    font-size: 16px; } }

.modal_slidetitle {
  text-align: center;
  margin-bottom: 20px; }

@media screen and (max-width: 767px) {
  .modal_slidetitle {
    padding: 0 20px; } }

.modal_wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  padding: 0 40px; }

@media screen and (max-width: 768px) {
  .modal_wrap {
    padding: 0 20px; } }

.modal_img {
  max-width: 800px;
  overflow: hidden; }

.modal_img img {
  width: 100%; }

.modal .blue_btn {
  max-width: 280px;
  margin: 0 auto;
  position: absolute;
  bottom: 40px; }

@media screen and (max-width: 1000px) {
  .modal .blue_btn {
    margin: 20px 20px 0;
    bottom: 20px; } }

.modal .orange_btn {
  max-width: 280px;
  margin: 0 auto;
  position: absolute;
  bottom: 40px;
  width: 100%; }

@media screen and (max-width: 1000px) {
  .modal .orange_btn {
    margin: 20px 20px 0;
    bottom: 20px; } }

.modal_btn {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  width: 70%;
  position: absolute;
  bottom: 40px; }

.modal_btn .blue_btn, .modal_btn .orange_btn {
  position: relative;
  bottom: 0; }

@media screen and (max-width: 1000px) {
  .modal_btn {
    width: 100%;
    gap: 10px;
    padding: 0 10px;
    bottom: 20px; }
  .modal_btn .blue_btn, .modal_btn .orange_btn {
    width: 100%;
    max-width: 100%;
    margin: 0;
    bottom: 0; }
  .modal_btn .blue_btn a, .modal_btn .orange_btn a {
    font-size: 10px; }
  .modal_btn .orange_btn a {
    height: 100%; } }

.modal_column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 800px; }

.modal_youtube {
  -ms-flex: 1;
  flex: 1;
  font-size: 12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  text-align: center; }

@media screen and (max-width: 1000px) {
  .modal_youtube {
    width: 44.88%; } }

.modal_youtube a {
  transition: 0.3s; }

@media (hover: hover) {
  .modal_youtube a:hover {
    opacity: 0.5; } }

@media screen and (max-width: 1000px) {
  .modal_right {
    width: 55.13%; } }

@media screen and (max-width: 1000px) {
  .modal_note {
    font-size: 10px;
    position: absolute;
    bottom: 20px;
    margin-left: 3%; } }

.modal .slick-arrow {
  position: absolute;
  top: calc(50% - 40px);
  z-index: 1;
  width: 80px;
  height: 80px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/slick_arrow.svg) no-repeat 100%, var(--color-primary);
  border-radius: 100%;
  text-indent: -9999px; }

@media screen and (max-width: 767px) {
  .modal .slick-arrow {
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    background-size: 100%; } }

.modal .slick-prev {
  left: -40px;
  transform: scale(-1, 1); }

@media screen and (max-width: 767px) {
  .modal .slick-prev {
    left: -20px; } }

.modal .slick-next {
  right: -40px; }

@media screen and (max-width: 767px) {
  .modal .slick-next {
    right: -20px; } }

.modal .slick-disabled {
  background-color: var(--color-glay); }

.lity-container {
  position: relative;
  margin: 0 20px;
  width: 1000px; }

@media screen and (max-width: 1000px) {
  .lity-container {
    width: 90%; } }

.lity-close {
  position: absolute;
  width: 80px;
  height: 80px;
  background: var(--color-glay);
  color: var(--color-black);
  font-weight: normal; }

.lity-close:hover {
  color: var(--color-black);
  background: var(--color-glay); }

@media screen and (max-width: 767px) {
  .lity-close {
    width: 40px;
    height: 40px; } }

@media screen and (min-width: 769px) {
  div.navigation ul li a {
    opacity: 1;
    transition: opacity 0.2s; }
  div.navigation ul li a:hover {
    opacity: 0.75; } }

#faq .faq-list-wrap .faq-list > dd dl dd:first-child, #faq .faq-list-wrap .faq-list > dd dl:first-child, #faq .faq-list-wrap .faq-list > dd ol:first-child, #faq .faq-list-wrap .faq-list > dd p:first-child, #faq .faq-list-wrap .faq-list > dd ul:first-child, #sem .hero .hero-desc p:first-child, #top .faq2021 .faq-list-wrap .faq-list > dd dl dd:first-child, #top .faq2021 .faq-list-wrap .faq-list > dd dl:first-child, #top .faq2021 .faq-list-wrap .faq-list > dd ol:first-child, #top .faq2021 .faq-list-wrap .faq-list > dd p:first-child, #top .faq2021 .faq-list-wrap .faq-list > dd ul:first-child, #top .hero-desc p:first-child, .c-button-wrap:first-child, .c-link-text:first-child {
  margin-top: auto; }

#faq .faq-list-wrap .faq-list > dd dl dd:last-child, #faq .faq-list-wrap .faq-list > dd dl:last-child, #faq .faq-list-wrap .faq-list > dd ol:last-child, #faq .faq-list-wrap .faq-list > dd p:last-child, #faq .faq-list-wrap .faq-list > dd ul:last-child, #sem .hero .hero-desc p:last-child, #top .faq2021 .faq-list-wrap .faq-list > dd dl dd:last-child, #top .faq2021 .faq-list-wrap .faq-list > dd dl:last-child, #top .faq2021 .faq-list-wrap .faq-list > dd ol:last-child, #top .faq2021 .faq-list-wrap .faq-list > dd p:last-child, #top .faq2021 .faq-list-wrap .faq-list > dd ul:last-child, #top .hero-desc p:last-child, .c-button-wrap:last-child, .c-link-text:last-child {
  margin-bottom: auto; }

@font-face {
  font-family: icon;
  font-style: normal;
  font-weight: 400;
  src: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49);
  src: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.eot?23to49#iefix) format("embedded-opentype"), url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.ttf?23to49) format("truetype"), url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.woff?23to49) format("woff"), url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/fonts/icon.svg?23to49#icon) format("svg"); }

.c-link-text:after, [class*=" icon-"], [class^=icon-], i {
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: icon !important;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: none; }

.arrow_border_bottom01:before {
  color: #af207f;
  content: "\e900"; }

.arrow_border_right01:before {
  color: #00306b;
  content: "\e901"; }

.icon_cantact_catalog:before {
  color: #fff;
  content: "\e902"; }

.icon_inquiry:before {
  color: #fff;
  content: "\e903"; }

.icon_tel:before {
  color: #fff;
  content: "\e904"; }

.icon_download:before {
  color: #186eb4;
  content: "\e905"; }

.icon_list:before {
  color: #b9c0c8;
  content: "\e906"; }

.icon_list:after {
  color: #af207f;
  content: "\e907";
  margin-left: -1em; }

.icon_blockquote01:before {
  color: #ac257d;
  content: "\e908"; }

.icon_blockquote02:before {
  color: #ac257d;
  content: "\e909"; }

.icon_onlinedemo:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/common/icon_onlinedemo.svg) no-repeat 0 0/cover;
  content: "";
  display: inline-block;
  height: 1.2em;
  width: 1.2em; }

@media screen and (max-width: 768px) {
  br.only-pc {
    display: none; } }

br.only-sm {
  display: none; }

@media screen and (max-width: 768px) {
  br.only-sm {
    display: block; } }

span.ac {
  color: #906; }

span.hr {
  color: #06c; }

span.sa {
  color: #090; }

span.kobetsu {
  color: #f33d42; }

span.kensetsu {
  color: #721a1e; }

span.bugyo {
  color: #333; }

.c-head-text {
  color: #199fe3;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  position: relative;
  text-align: center; }

.c-head-text:after {
  background: #199fe3;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

.c-head-text span {
  color: #333;
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 1rem; }

@media screen and (max-width: 768px) {
  .c-head-text {
    font-size: 24px;
    margin: 0 auto 32px;
    padding: 0 0 20px; }
  .c-head-text:after {
    width: 30px; } }

.c-head-sub-title {
  line-height: 1.5;
  margin: 60px 0 20px;
  text-align: center; }

.c-head-sub-title span {
  border-bottom: 2px solid #00a0e9;
  color: #00a0e9;
  display: inline-block;
  font-size: 20px;
  font-weight: 700; }

.c-desc {
  line-height: 1.75; }

.c-button-wrap {
  text-align: center; }

.c-button-wrap.left {
  text-align: left; }

.c-button-wrap.left > .c-button, .c-button-wrap.left > .c-button--long, .c-button-wrap.left > .c-button--middle, .c-button-wrap.left > .c-button--short, .c-button-wrap.left > .c-button--sm, .c-button-wrap.left > .c-button-border, .c-button-wrap.left > .c-button-border--long, .c-button-wrap.left > .c-button-border--short, .c-button-wrap.left > .c-button-border--sm {
  margin: 0 40px 0 0; }

.c-button-wrap > .c-button, .c-button-wrap > .c-button--long, .c-button-wrap > .c-button--middle, .c-button-wrap > .c-button--short, .c-button-wrap > .c-button--sm, .c-button-wrap > .c-button-border, .c-button-wrap > .c-button-border--long, .c-button-wrap > .c-button-border--short, .c-button-wrap > .c-button-border--sm {
  display: inline-block;
  margin: 0 20px; }

@media screen and (max-width: 768px) {
  .c-button-wrap.left {
    text-align: center; }
  .c-button-wrap.left > .c-button, .c-button-wrap.left > .c-button--long, .c-button-wrap.left > .c-button--middle, .c-button-wrap.left > .c-button--short, .c-button-wrap.left > .c-button--sm, .c-button-wrap.left > .c-button-border, .c-button-wrap.left > .c-button-border--long, .c-button-wrap.left > .c-button-border--short, .c-button-wrap.left > .c-button-border--sm {
    margin: 0 auto 10px; }
  #bugyo-11 .c-button-wrap.left img, #bugyo-cloud .c-button-wrap.left img {
    max-width: 50%; }
  .c-button-wrap > .c-button, .c-button-wrap > .c-button--long, .c-button-wrap > .c-button--middle, .c-button-wrap > .c-button--short, .c-button-wrap > .c-button--sm, .c-button-wrap > .c-button-border, .c-button-wrap > .c-button-border--long, .c-button-wrap > .c-button-border--short, .c-button-wrap > .c-button-border--sm {
    display: block;
    margin: 0 auto 10px; } }

.c-button, .c-button--long, .c-button--middle, .c-button--short, .c-button--sm, .c-button-border, .c-button-border--long, .c-button-border--short, .c-button-border--sm {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: auto;
  max-width: 370px;
  text-align: center;
  width: 100%; }

.right.c-button, .right.c-button--long, .right.c-button--middle, .right.c-button--short, .right.c-button--sm, .right.c-button-border, .right.c-button-border--long, .right.c-button-border--short, .right.c-button-border--sm {
  margin-right: 0; }

.left.c-button, .left.c-button--long, .left.c-button--middle, .left.c-button--short, .left.c-button--sm, .left.c-button-border, .left.c-button-border--long, .left.c-button-border--short, .left.c-button-border--sm {
  margin-left: 0; }

.none.c-button, .none.c-button--long, .none.c-button--middle, .none.c-button--short, .none.c-button--sm, .none.c-button-border, .none.c-button-border--long, .none.c-button-border--short, .none.c-button-border--sm {
  cursor: default;
  opacity: 0.5; }

.c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after, .c-button:after {
  border-bottom: 2px solid #057db8;
  border-right: 2px solid #057db8;
  content: "";
  display: inline-block;
  height: 7px;
  margin-left: 0;
  margin-top: 10px;
  position: absolute;
  transform: rotate(-45deg) translate(50%);
  transform-origin: 50% 50%;
  width: 7px; }

.c-button-wrap02 {
  background: #27acd9;
  border: 2px solid #27acd9;
  border-radius: 100vh;
  display: block;
  font-weight: 700;
  margin: auto;
  padding: 1rem 4rem;
  vertical-align: middle;
  width: 120px; }

@media screen and (max-width: 768px) {
  .c-button, .c-button--long, .c-button--middle, .c-button--short, .c-button--sm, .c-button-border, .c-button-border--long, .c-button-border--short, .c-button-border--sm {
    font-size: 14px;
    max-width: 300px; }
  .right.c-button, .right.c-button--long, .right.c-button--middle, .right.c-button--short, .right.c-button--sm, .right.c-button-border, .right.c-button-border--long, .right.c-button-border--short, .right.c-button-border--sm {
    margin-right: auto; }
  .left.c-button, .left.c-button--long, .left.c-button--middle, .left.c-button--short, .left.c-button--sm, .left.c-button-border, .left.c-button-border--long, .left.c-button-border--short, .left.c-button-border--sm {
    margin-left: auto; }
  .c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after, .c-button:after {
    margin-left: 2px;
    margin-top: 10px; } }

@-moz-document url-prefix() {
  .c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after, .c-button:after {
    margin-top: 11px; } }

@media (-ms-high-contrast: none) {
  .c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after, .c-button:after {
    margin-top: 11px; } }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after, .c-button:after {
    margin-top: 12px; } }

.c-button, .c-button--long, .c-button--middle, .c-button--short, .c-button--sm {
  background: #057db8;
  border: 2px solid #057db8;
  border-radius: 50px;
  color: #fff;
  padding: 16px 25px;
  transition: background 0.2s, border-color 0.2s; }

.c-button--long:after, .c-button--middle:after, .c-button--short:after, .c-button--sm:after, .c-button:after {
  border-bottom-color: #fff;
  border-right-color: #fff; }

.c-button--long:hover, .c-button--middle:hover, .c-button--short:hover, .c-button--sm:hover, .c-button:hover {
  background: #046392;
  border-color: #046392; }

.c-button.none:hover, .none.c-button--long:hover, .none.c-button--middle:hover, .none.c-button--short:hover, .none.c-button--sm:hover {
  background: #057db8; }

.c-button.gray, .gray.c-button--long, .gray.c-button--middle, .gray.c-button--short, .gray.c-button--sm {
  background: #dcdcdc;
  border-color: #dcdcdc;
  color: #000;
  opacity: 0.5; }

.c-button.gray:after, .gray.c-button--long:after, .gray.c-button--middle:after, .gray.c-button--short:after, .gray.c-button--sm:after {
  display: none; }

.c-button.orange, .orange.c-button--long, .orange.c-button--middle, .orange.c-button--short, .orange.c-button--sm {
  background: #e76f02;
  border-color: #e76f02;
  color: #fff; }

.c-button.orange:hover, .orange.c-button--long:hover, .orange.c-button--middle:hover, .orange.c-button--short:hover, .orange.c-button--sm:hover {
  background: #ef9c60;
  border-color: #ef9c60; }

.c-button.white, .white.c-button--long, .white.c-button--middle, .white.c-button--short, .white.c-button--sm {
  background: #fff;
  border-color: #fff;
  color: #057db8; }

.c-button.white:after, .white.c-button--long:after, .white.c-button--middle:after, .white.c-button--short:after, .white.c-button--sm:after {
  border-bottom-color: #057db8;
  border-right-color: #057db8; }

.c-button.white:hover, .white.c-button--long:hover, .white.c-button--middle:hover, .white.c-button--short:hover, .white.c-button--sm:hover {
  background: #046392;
  border-color: #046392;
  color: #fff; }

.c-button.white:hover:after, .white.c-button--long:hover:after, .white.c-button--middle:hover:after, .white.c-button--short:hover:after, .white.c-button--sm:hover:after {
  border-bottom-color: #fff;
  border-right-color: #fff; }

.c-button--sm {
  max-width: 256px;
  padding: 8px 20px; }

.c-button--long {
  max-width: 600px; }

.c-button--middle {
  max-width: 400px; }

.c-button--short {
  max-width: 300px; }

.c-button.download:after, .download.c-button--long:after, .download.c-button--middle:after, .download.c-button--short:after, .download.c-button--sm:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/icon_download.svg) no-repeat 0 0/contain;
  border: none;
  height: 16px;
  margin-left: 10px;
  margin-top: 4px;
  transform: none;
  width: 15px; }

.c-button-wrap02 {
  background: #ccc;
  border: none;
  border-radius: 50px;
  color: #fff;
  margin: 0 auto;
  padding: 1.1rem 4rem;
  text-align: center;
  text-decoration: none;
  width: 370px; }

@media screen and (max-width: 768px) {
  .c-button, .c-button--long, .c-button--middle, .c-button--short, .c-button--sm {
    padding: 12px 20px; }
  .c-button--sm {
    padding: 6px 18px; }
  .c-button--long {
    max-width: 400px; }
  .c-button--middle {
    max-width: 320px; }
  .c-button--short {
    max-width: 250px; }
  .c-button.download:after, .download.c-button--long:after, .download.c-button--middle:after, .download.c-button--short:after, .download.c-button--sm:after {
    margin-left: 7px;
    margin-top: 3px; } }

.c-button-border, .c-button-border--long, .c-button-border--short, .c-button-border--sm {
  background: transparent;
  border: 2px solid #057db8;
  border-radius: 50px;
  color: #057db8;
  padding: 13px 23px;
  transition: background 0.2s, border 0.2s; }

.c-button-border--long:after, .c-button-border--short:after, .c-button-border--sm:after, .c-button-border:after {
  transition: border-color 0.2s; }

.c-button-border--long:hover, .c-button-border--short:hover, .c-button-border--sm:hover, .c-button-border:hover {
  background: #046392;
  border-color: #046392;
  color: #fff; }

.c-button-border--long:hover:after, .c-button-border--short:hover:after, .c-button-border--sm:hover:after, .c-button-border:hover:after {
  border-bottom-color: #fff;
  border-right-color: #fff; }

.c-button-border.none:hover, .none.c-button-border--long:hover, .none.c-button-border--short:hover, .none.c-button-border--sm:hover {
  background: #fff;
  border-color: #057db8;
  color: #057db8; }

.c-button-border.none:hover:after, .none.c-button-border--long:hover:after, .none.c-button-border--short:hover:after, .none.c-button-border--sm:hover:after {
  border-bottom-color: #057db8;
  border-right-color: #057db8; }

.c-button-border.download, .download.c-button-border--long, .download.c-button-border--short, .download.c-button-border--sm {
  padding-right: 35px; }

.c-button-border.download:after, .download.c-button-border--long:after, .download.c-button-border--short:after, .download.c-button-border--sm:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/icon_download02.svg) no-repeat 0 0/contain;
  border: none;
  height: 16px;
  margin-left: 10px;
  margin-top: 6px;
  transform: none;
  width: 15px; }

.c-button-border.download:hover:after, .download.c-button-border--long:hover:after, .download.c-button-border--short:hover:after, .download.c-button-border--sm:hover:after {
  background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/icon_download.svg); }

.c-button-border--sm {
  max-width: 256px;
  padding: 8px 20px; }

.c-button-border--long {
  max-width: 500px; }

.c-button-border--short {
  max-width: 300px; }

@media screen and (max-width: 768px) {
  .c-button-border, .c-button-border--long, .c-button-border--short, .c-button-border--sm {
    padding: 12px 20px; }
  .c-button-border--sm {
    padding: 6px 18px; }
  .c-button-border--long {
    max-width: 400px; }
  .c-button-border--short {
    max-width: 250px; }
  .c-button-border.download, .download.c-button-border--long, .download.c-button-border--short, .download.c-button-border--sm {
    padding-right: 25px; }
  .c-button-border.download:after, .download.c-button-border--long:after, .download.c-button-border--short:after, .download.c-button-border--sm:after {
    margin-left: 7px;
    margin-top: 4px; } }

.c-link-text {
  color: #057db8;
  font-weight: 500;
  margin: 20px auto;
  padding-bottom: 2px;
  text-decoration: underline; }

.c-link-text:after {
  color: #057db8;
  content: "\e901";
  display: inline-block;
  font-size: 10px;
  margin-left: 5px;
  margin-right: 5px;
  transform: translateY(-20%); }

.c-link-text:hover {
  color: #046392;
  text-decoration: none; }

.header {
  padding: 13px 0 11px; }

@media screen and (min-width: 769px) {
  .header {
    left: 0;
    position: fixed !important;
    top: 0; } }

.header .inner {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1400px; }

.header .logo {
  height: auto;
  width: 269px; }

.header .logo a {
  display: block; }

.header .header_navigation {
  -ms-flex-align: center;
  align-items: center; }

.header .header_navigation, .header .header_navigation .global {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; }

.header .header_navigation .global {
  font-size: 14px; }

.header .header_navigation .global li {
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  align-items: center;
  border-right: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  line-height: 1.5;
  padding: 0 25px;
  text-align: center; }

.header .header_navigation .global li:last-child {
  border: none; }

.header .header_navigation .global li.current {
  font-weight: 700; }

.header .header_navigation .button {
  margin-left: 20px; }

.header .header_navigation .button a {
  background: #e76f02;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin: auto;
  max-width: 350px;
  padding: 11px 15px;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
  width: 100%; }

.header .header_navigation .header_tel {
  line-height: normal;
  margin: auto 0;
  padding-right: 15px; }

.header .header_navigation .header_tel .freedial {
  background: url(//2684654.fs1.hubspotusercontent-na1.net/hubfs/2684654/obc/v1/images/common/header/icon_freedial.svg) no-repeat 0 0;
  color: #666;
  display: block;
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.2;
  margin-bottom: 2px;
  padding-left: 32px; }

.header .header_navigation .header_tel a {
  font-family: Arial;
  font-size: 32px;
  font-weight: 700; }

.header .header_navigation .header_tel .info {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 1px; }

.header .header_navigation .header_tel .info a {
  color: #1aa0e3;
  font-size: 12px;
  text-decoration: underline; }

.header .header_navigation .header_tel .info a:hover {
  text-decoration: none; }

@media screen and (max-width: 768px) {
  .header {
    padding: 15px 20px; }
  .header .inner {
    display: block; }
  .header .logo {
    width: 150px; }
  .header .header_menu {
    cursor: pointer;
    display: block;
    height: 40px;
    position: absolute;
    right: 15px;
    top: 10px;
    width: 40px; }
  .header .header_menu:after, .header .header_menu:before {
    background: #333;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px; }
  .header .header_menu:before {
    bottom: 18px;
    box-shadow: 0 9px 0 #333;
    transition: bottom 0.3s, transform 0.3s, box-shadow 0.3s 0.3s; }
  .header .header_menu:after {
    top: 18px;
    transition: top 0.3s, transform 0.3s; }
  .menu-open .header .header_menu:before {
    bottom: 0;
    box-shadow: 10px 9px 0 transparent;
    transform: rotate(45deg);
    transition: bottom 0.3s 0.3s, transform 0.3s 0.3s, box-shadow 0.3s; }
  .menu-open .header .header_menu:after {
    top: 0;
    transform: rotate(135deg);
    transition: top 0.3s 0.3s, transform 0.3s 0.3s; }
  .header .header_navigation {
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 5px 5px rgba(51, 51, 51, 0.2);
    display: none;
    margin-left: -20px;
    padding: 0 20px 20px;
    width: calc(100% + 40px); }
  .header .header_navigation .global {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    width: 100%; }
  .header .header_navigation .global li {
    display: block;
    margin: 5px 0; }
  .header .header_navigation .global li a {
    border-bottom: 1px dashed #251e1c;
    display: block;
    padding: 10px; }
  .header .header_navigation .global li a br {
    display: none; }
  .header .header_navigation .button {
    display: block;
    margin: auto;
    max-width: 260px; }
  .header .header_navigation .button li {
    display: block; }
  .header .header_navigation .button a {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    max-width: 250px;
    padding: 12px 15px; }
  .header .header_navigation .header_tel {
    background: #fff;
    margin: auto;
    padding: 0;
    text-align: center; }
  .header .header_navigation .header_tel > span {
    display: inline-block;
    text-align: left; }
  .header .header_navigation .header_tel .freedial {
    font-size: 12px;
    font-size: 0.85714rem; }
  .header .header_navigation .header_tel a {
    font-size: 30px;
    font-size: 2.14286rem; } }

@media screen and (min-width: 769px) {
  .l-contents {
    padding-top: 102px; } }

@media screen and (max-width: 768px) {
  .l-contents {
    padding-top: 65px; } }

.main {
  border-bottom: 1px solid #ccc;
  padding: 60px 0 150px; }

.main-inner {
  margin: auto;
  max-width: 1220px; }

@media screen and (max-width: 768px) {
  .main {
    padding: 40px 0 80px; }
  .main-inner {
    padding: 0 24px; } }

.document {
  padding: 90px 70px;
  text-align: center; }

.document-inner {
  margin: auto;
  max-width: 1220px; }

.document-desc {
  line-height: 1.75; }

.document .document-list {
  -ms-flex-pack: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  margin: 80px auto 0; }

.document .document-list .item {
  margin: 0 50px; }

.document .document-list .item .name {
  line-height: 1.5; }

.document .document-list .item a {
  margin-top: 30px; }

@media screen and (max-width: 768px) {
  .document {
    padding: 45px 24px; }
  .document .document-list {
    display: block;
    margin: 30px auto 0; }
  .document .document-list .item {
    margin: 24px 0; }
  .document .document-list .item a {
    margin-top: 16px; } }

.demo {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/bg_demo.jpg) no-repeat 50% 50%/cover;
  background: #036;
  color: #fff;
  padding: 80px 0;
  text-align: center; }

.demo-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 60px;
  padding-bottom: 30px;
  position: relative; }

.demo-title:after {
  background: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

.demo-title small {
  display: block;
  font-size: 32px;
  font-weight: 500; }

.demo-desc {
  line-height: 1.75; }

.demo figure {
  margin: 30px auto 80px; }

@media screen and (max-width: 768px) {
  .demo {
    padding: 45px 24px; }
  .demo-title {
    font-size: 26px;
    margin: 0 auto 36px;
    padding-bottom: 24px; }
  .demo-title:after {
    width: 30px; }
  .demo-title small {
    font-size: 18px; }
  .demo figure {
    margin: 24px auto 40px; } }

.demo-seminar {
  background: linear-gradient(90deg, #fff, #fff 50%, #022161 0, #022161); }

.demo-seminar-outer {
  background: linear-gradient(90deg, #049de9, #049de9 50%, #022161 0, #022161);
  height: 1px; }

.demo-seminar-inner {
  margin: auto;
  max-width: 1220px;
  padding: 40px 0; }

.demo-seminar-list {
  -ms-flex-pack: justify;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%; }

.demo-seminar-list .item {
  padding: 0 30px;
  text-align: center;
  width: 50%; }

.demo-seminar-list .item.seminar {
  color: #049de9; }

.demo-seminar-list .item.seminar figure {
  margin: 20px auto 42px; }

.demo-seminar-list .item.seminar figure figcaption {
  margin-top: 20px; }

.demo-seminar-list .item.demo-semi {
  color: #fff; }

.demo-seminar-list .item.demo-semi figure {
  margin: 40px auto 80px; }

.demo-seminar-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 25px;
  position: relative; }

.demo-seminar-desc {
  font-size: 17px;
  line-height: 1.75; }

@media screen and (max-width: 768px) {
  .demo-seminar-inner {
    padding: 30px 0; }
  .demo-seminar-list .item.seminar figure {
    margin: 20px auto; }
  .demo-seminar-list .item.seminar figure figcaption {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 15px; }
  .demo-seminar-list .item.demo-semi figure {
    margin: 60px auto 100px; }
  .demo-seminar-title {
    font-size: 20px;
    margin: 0 auto 20px; }
  .demo-seminar-desc {
    font-size: 16px; }
  .demo-seminar figure {
    margin: 24px auto 40px; } }

@media screen and (max-width: 640px) {
  .demo-seminar {
    background: #fff; }
  .demo-seminar-outer {
    display: none; }
  .demo-seminar-inner {
    padding: 0; }
  .demo-seminar-list .item {
    width: 100%; }
  .demo-seminar-list .item.seminar {
    border-top: 1px solid #049de9;
    padding: 30px 24px; }
  .demo-seminar-list .item.seminar figure {
    margin: 30px auto; }
  .demo-seminar-list .item.demo-semi {
    background: #022161;
    padding: 30px 24px; }
  .demo-seminar-list .item.demo-semi figure {
    margin: 30px auto 50px; } }

div.navigation {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/bg_navigatopn.png) 0 0;
  padding: 30px 0; }

div.navigation-inner {
  margin: auto;
  max-width: 1220px; }

div.navigation-inner + .contact {
  border-top: 2px solid #fff;
  margin: 40px auto 0;
  padding-top: 30px; }

div.navigation ul {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; }

div.navigation ul li {
  text-align: center; }

div.navigation ul li a {
  display: block; }

div.navigation ul li figure {
  background: #fff;
  border-radius: 6px; }

div.navigation ul li figure figcaption {
  font-size: 14px;
  padding: 10px; }

div.navigation .contact {
  color: #fff;
  margin: 40px auto;
  max-width: 1220px;
  text-align: center; }

div.navigation .contact .contact-title {
  color: #fff;
  font-size: 26px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  position: relative; }

div.navigation .contact .contact-title:after {
  background: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 20px; }

div.navigation .contact .tel {
  margin: 0 auto 10px; }

div.navigation .contact .desc {
  font-size: 14px;
  line-height: 1.5; }

@media screen and (max-width: 768px) {
  div.navigation {
    padding: 20px 24px 10px; }
  div.navigation ul {
    display: block;
    text-align: center; }
  div.navigation ul li {
    display: inline-block;
    margin: 0 10px 15px; }
  div.navigation ul li figure figcaption {
    font-size: 13px;
    padding: 8px; }
  div.navigation-inner + .contact {
    border-top: 1px solid #fff;
    margin: 10px auto 15px;
    padding-top: 20px; }
  div.navigation .contact {
    margin: 10px auto 15px; }
  div.navigation .contact .contact-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 24px;
    padding-bottom: 18px; }
  div.navigation .contact .tel {
    margin: 0 auto 8px; }
  div.navigation .contact .desc {
    font-size: 13px;
    line-height: 1.4; } }

.onpremise {
  padding: 50px 0 60px;
  text-align: center; }

.onpremise-inner {
  margin: auto;
  max-width: 1220px; }

.onpremise-title {
  color: #199fe3;
  font-size: 32px;
  margin-bottom: 40px; }

.onpremise-desc {
  line-height: 1.75;
  margin-bottom: 60px; }

@media screen and (max-width: 768px) {
  .onpremise {
    padding: 30px 24px 40px; }
  .onpremise-title {
    font-size: 26px;
    margin-bottom: 24px; }
  .onpremise-desc {
    margin-bottom: 42px; } }

.research {
  background: #e3f3ff;
  padding: 80px 0;
  text-align: center; }

@media screen and (max-width: 768px) {
  .research {
    padding: 40px 24px; } }

#footer {
  background: #333;
  padding: 65px 0 60px; }

#footer .footer-inner {
  margin: auto;
  max-width: 1220px;
  padding: 0; }

#footer .footer-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  line-height: 1.75; }

#footer .footer-list ul li {
  margin-bottom: 2px; }

#footer .footer-list ul li .label {
  font-size: 120%;
  margin-bottom: 20px; }

#footer .footer-list ul li ul {
  margin-bottom: 1.5em;
  margin-left: 1em;
  margin-top: 0.2em; }

#footer .inner--large {
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin: 20px auto 0;
  max-width: 1220px; }

#footer .inner--large .logo img {
  height: 24px;
  width: 60px; }

#footer .inner--large .copyright {
  color: #fff;
  font-size: 10px;
  line-height: 1; }

.inner--large {
  padding: 0 20px; }

@media screen and (min-width: 769px) {
  #footer .footer-inner, div.wrap .row-fluid {
    min-width: initial; } }

@media screen and (max-width: 768px) {
  #footer {
    padding: 30px 0 40px; }
  #footer .footer-inner {
    padding: 0 24px; }
  #footer .footer-list {
    display: block;
    font-size: 13px;
    margin-bottom: 40px; }
  #footer .footer-first {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center; }
  #footer .footer-list > ul {
    margin: 0 auto 20px;
    max-width: 300px; }
  #footer .inner--large {
    display: block;
    padding: 0 24px;
    text-align: center; }
  #footer .logo {
    display: block;
    margin: 0 auto 15px; }
  #footer .logo img {
    height: 24px;
    width: 60px; }
  #footer .copyright {
    font-size: 10px;
    line-height: 1.4; } }

#top .hero {
  background: #00a0e9 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_hero.jpg) no-repeat 100% 50%/cover;
  color: #000;
  overflow: hidden;
  padding: 55px 40px 40px;
  position: relative; }

#top .hero-inner {
  margin: auto;
  max-width: 1220px;
  text-align: center; }

#top .hero-title {
  font-size: 76px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 20px; }

#top .hero-title em {
  display: inline-block;
  width: 0.75em; }

#top .hero-title img {
  height: 104px;
  vertical-align: -10px;
  width: 510px; }

#top .hero-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
  margin: 0 auto 50px; }

#top .hero-desc p {
  margin-bottom: 0.5em; }

@media screen and (max-width: 768px) {
  #top .hero {
    padding: 30px 24px;
    text-align: left; }
  #top .hero-title {
    font-size: 24px;
    line-height: 1.5;
    margin: 0 auto 20px;
    text-align: left; }
  #top .hero-title span {
    display: inline-block; }
  #top .hero-title img {
    height: 41px;
    width: 200px; }
  #top .hero-desc {
    font-size: 14px;
    margin: 0 auto 24px;
    text-align: left; }
  #top .hero-desc p {
    margin-bottom: 1em; }
  #top .hero .c-button, #top .hero .c-button--long, #top .hero .c-button--middle, #top .hero .c-button--short, #top .hero .c-button--sm {
    margin-left: 0; } }

#top .hero02 {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_hero02.jpg) no-repeat 100% 50%/cover;
  color: #000;
  overflow: hidden;
  padding: 45px 30px 60px;
  position: relative; }

#top .hero02:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_kyozo.png?A) no-repeat 0 0/contain;
  bottom: 0;
  content: "";
  display: block;
  height: 623px;
  left: 550px;
  margin: auto;
  position: absolute;
  right: 0;
  width: 520px; }

#top .hero02 .hero-inner {
  margin: auto;
  max-width: 1220px;
  position: relative;
  text-align: left; }

#top .hero02 .hero-logo {
  position: absolute;
  right: 0;
  top: -15px; }

#top .hero02 .hero-logo img {
  height: 46px;
  width: 225px; }

#top .hero02 .hero-label {
  font-size: 25px;
  font-weight: 500;
  margin: 0 auto 15px; }

#top .hero02 .hero-title {
  font-size: 70px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto 20px; }

#top .hero02 .hero-title em {
  display: inline-block;
  width: 0.75em; }

#top .hero02 .hero-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto 50px; }

#top .hero02 .hero-desc p {
  margin-bottom: 0.5em; }

@media screen and (max-width: 768px) {
  #top .hero02 {
    padding: 30px 24px; }
  #top .hero02:after {
    height: 180px;
    left: auto;
    opacity: 0.8;
    right: 0;
    width: 150px;
    z-index: 0; }
  #top .hero02 .hero-logo {
    position: absolute;
    right: -15px;
    top: -15px; }
  #top .hero02 .hero-logo img {
    height: 30px;
    width: 150px; }
  #top .hero02 .hero-label {
    font-size: 16px;
    font-weight: 500;
    margin: 0 auto 15px; }
  #top .hero02 .hero-title {
    font-size: 22px;
    line-height: 1.5;
    margin: 0 auto 20px;
    text-align: left; }
  #top .hero02 .hero-title br {
    display: none; }
  #top .hero02 .hero-title span {
    display: inline-block; }
  #top .hero02 .hero-title img {
    height: 41px;
    width: 200px; }
  #top .hero02 .hero-desc {
    font-size: 14px;
    margin: 0 auto 24px;
    padding-right: 140px;
    position: relative;
    text-align: left;
    z-index: 1; }
  #top .hero02 .hero-desc span {
    display: inline-block; }
  #top .hero02 .hero-desc br {
    display: none; }
  #top .hero02 .hero-desc p {
    margin-bottom: 1em; }
  #top .hero02 .c-button, #top .hero02 .c-button--long, #top .hero02 .c-button--middle, #top .hero02 .c-button--short, #top .hero02 .c-button--sm {
    margin-left: 0; } }

#top .hero03 {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_hero03.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  margin: 70px 0;
  min-height: 410px;
  overflow: visible;
  padding: 80px 30px 70px 0;
  position: relative; }

#top .hero03:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/img_hero03.png);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto;
  content: "";
  display: block;
  height: 572px;
  left: 40%;
  margin: auto;
  position: absolute;
  right: 0;
  top: -95px;
  width: 699px; }

#top .hero03 .hero-inner {
  margin: auto;
  max-width: 1220px;
  position: relative;
  text-align: left; }

#top .hero03 .hero-img {
  position: absolute;
  right: 0;
  top: -40px; }

#top .hero03 .hero-img img {
  height: 572px;
  width: 699px; }

#top .hero03 .hero-label {
  font-size: 18px;
  font-weight: 500;
  margin: 0 auto 30px; }

#top .hero03 .hero-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 auto; }

#top .hero03 .hero-title span {
  background: linear-gradient(#fff 10%, #fff 0);
  border-radius: 10px;
  color: #049de9;
  display: inline-block;
  margin: 0 0.2em;
  padding: 0 0.7em 0 0.5em;
  position: relative; }

#top .hero03 .hero-title span em {
  position: absolute; }

#top .hero03 .hero-title span em:first-of-type {
  left: -0.3em; }

@media screen and (max-width: 768px) {
  #top .hero03 {
    margin: 0 0 40px;
    min-height: auto;
    padding: 30px 24px; }
  #top .hero03:after {
    background-size: cover;
    bottom: -60px;
    height: 163px;
    left: auto;
    opacity: 1;
    right: 0;
    top: auto;
    width: 200px;
    z-index: 0; }
  #top .hero03 .hero-logo {
    position: absolute;
    right: -15px;
    top: -15px; }
  #top .hero03 .hero-logo img {
    height: 30px;
    width: 150px; }
  #top .hero03 .hero-label {
    font-size: 16px;
    font-weight: 500;
    margin: 0 auto 15px; }
  #top .hero03 .hero-title {
    font-size: 28px;
    line-height: 1.5;
    margin: 0 auto 20px;
    text-align: left; }
  #top .hero03 .hero-title br {
    display: none; }
  #top .hero03 .hero-title span {
    display: inline-block; }
  #top .hero03 .hero-title img {
    height: 41px;
    width: 200px; } }

#top .udnav_in {
  margin: 40px auto -60px;
  max-width: 1220px; }

#top .udnav_in .udnav_logo {
  margin-bottom: 0;
  min-width: auto;
  position: relative; }

#top .udnav_in .udnav_logo img {
  left: -12px;
  position: relative;
  top: -3px;
  width: 149px; }

#top .udnav_in .udnav_logo span {
  font-size: 18px;
  font-weight: 600;
  left: -12px;
  position: relative; }

@media screen and (max-width: 768px) {
  #top .udnav_in {
    margin: auto; }
  #top .udnav_in .udnav_logo {
    left: 30px; } }

#top .research-registration {
  background: #022161;
  color: #fff;
  padding: 40px 0;
  text-align: center; }

#top .research-registration-inner {
  margin: auto;
  max-width: 1220px; }

#top .research-registration-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 25px; }

#top .research-registration-desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 20px; }

#top .research-registration .c-button, #top .research-registration .c-button--long, #top .research-registration .c-button--middle, #top .research-registration .c-button--short, #top .research-registration .c-button--sm {
  background: #fff;
  border-color: #fff;
  color: #022161;
  transition: opacity 0.3s; }

#top .research-registration .c-button--long:after, #top .research-registration .c-button--middle:after, #top .research-registration .c-button--short:after, #top .research-registration .c-button--sm:after, #top .research-registration .c-button:after {
  border-bottom-color: #022161;
  border-right-color: #022161; }

#top .research-registration .c-button--long:hover, #top .research-registration .c-button--middle:hover, #top .research-registration .c-button--short:hover, #top .research-registration .c-button--sm:hover, #top .research-registration .c-button:hover {
  opacity: 0.7; }

#top .research-registration .c-button-wrap .c-link-text {
  color: #fff !important;
  display: inline-block;
  margin: 0 20px; }

#top .research-registration .c-button-wrap .c-link-text:after {
  color: #fff !important; }

@media screen and (max-width: 768px) {
  #top .research-registration {
    padding: 30px 24px; }
  #top .research-registration-title {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 18px; }
  #top .research-registration-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px; }
  #top .research-registration .c-button-wrap .c-link-text {
    display: block; }
  #top .research-registration .c-button-wrap .c-link-text:not(:last-child) {
    margin: 20px 0 10px; } }

#top .research-seminar {
  background: linear-gradient(90deg, #022161, #022161 50%, #049de9 0, #049de9); }

#top .research-seminar-list {
  -ms-flex-pack: justify;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%; }

#top .research-seminar-list .item {
  color: #fff;
  padding: 0 20px;
  position: relative;
  width: 50%; }

#top .research-seminar-list .item.surveyform {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_surveyform.png?aaa) no-repeat 0 0/18% auto;
  padding-left: 125px; }

#top .research-seminar-list .item.seminar {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_seminar.png?aaa) no-repeat 20px 0/18% auto;
  padding-left: 145px; }

#top .research-seminar-list .item dt {
  font-size: 24px;
  font-weight: 600;
  height: 3em;
  line-height: 1.3; }

#top .research-seminar-list .item dt em {
  color: #ff0; }

#top .research-seminar-list .item dd {
  font-size: 14px;
  line-height: 1.7; }

#top .research-seminar-list .item dd a {
  display: inline-block;
  text-align: right; }

#top .research-seminar-list .item dd span {
  border: 1px solid #fff;
  display: inline-block;
  margin-top: 1em;
  text-align: center;
  width: 8em; }

#top .research-seminar-list .item dd span:not(:last-child) {
  margin-right: 0.5em; }

#top .research-seminar-list .item .c-link-text {
  color: #fff;
  display: block;
  text-align: right; }

#top .research-seminar-list .item .c-link-text:after {
  color: #fff; }

#top .research-seminar-inner {
  margin: auto;
  max-width: 1220px;
  padding: 30px 0; }

#top .research-seminar-desc {
  min-height: 8em; }

@media screen and (max-width: 768px) {
  #top .research-seminar-inner {
    padding: 0 24px; }
  #top .research-seminar-list .item.surveyform {
    background: #022161 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_surveyform.png?aaa) no-repeat 50% 30px/80px auto;
    padding: 18vh 24px 30px 0; }
  #top .research-seminar-list .item.seminar {
    background: #049de9 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_seminar.png?aaa) no-repeat 50% 30px/80px auto;
    padding: 18vh 0 30px 24px; }
  #top .research-seminar-list .item dt {
    font-size: 18px;
    height: 4em; }
  #top .research-seminar-desc {
    min-height: 10em; } }

@media screen and (max-width: 480px) {
  #top .research-seminar-inner {
    padding: 0; }
  #top .research-seminar-list .item {
    width: 100%; }
  #top .research-seminar-list .item.seminar, #top .research-seminar-list .item.surveyform {
    background-size: 18% auto;
    padding: 20vh 24px 30px; }
  #top .research-seminar-list .item dt {
    height: auto;
    margin-bottom: 20px;
    text-align: center; }
  #top .research-seminar-desc {
    margin-bottom: 10px;
    min-height: auto; } }

#top .resson {
  background: #f2f2f2;
  padding: 100px 0 150px;
  text-align: center; }

#top .resson-inner {
  margin: auto;
  max-width: 1220px; }

#top .resson-desc {
  line-height: 1.75;
  margin-bottom: 20px; }

#top .resson-lead {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.4; }

#top .resson-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto;
  width: 100%; }

#top .resson-list .item {
  background: #fff url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_reason.png) no-repeat 99% 50%/auto 180px;
  border-radius: 8px;
  box-shadow: 10px 10px 23px 4px rgba(153, 153, 153, 0.34);
  padding: 40px 20px 40px 170px;
  position: relative;
  text-align: left;
  width: calc(50% - 20px); }

#top .resson-list .item:before {
  content: "";
  display: block;
  height: 171px;
  left: 30px;
  position: absolute;
  top: -4px;
  width: 100px; }

#top .resson-list .item:first-child:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_reason01.png) no-repeat 0 0/contain; }

#top .resson-list .item:nth-child(2):before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_reason02.png) no-repeat 0 0/contain; }

#top .resson-list .item:nth-child(3):before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_reason03.png) no-repeat 0 0/contain; }

#top .resson-list .item:nth-child(4):before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_reason04.png) no-repeat 0 0/contain; }

#top .resson-list .item:nth-child(odd) {
  margin-right: 40px; }

#top .resson-list .item:nth-child(n+3) {
  margin-top: 40px; }

#top .resson-list .title {
  color: #00a0e9;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px; }

#top .resson-list .desc {
  font-size: 18px;
  line-height: 1.3; }

#top .resson-button {
  background: #e76f02;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 80px auto 0;
  max-width: 700px;
  padding: 20px 0;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%; }

#top .resson-button:hover {
  opacity: 0.7; }

#top .resson-button span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 100%;
  display: inline-block;
  padding: 0 70px; }

#top .resson-button small {
  display: block;
  font-size: 17px;
  font-weight: 600; }

@media screen and (max-width: 768px) {
  #top .resson {
    padding: 40px 24px 50px; }
  #top .resson-desc {
    margin-bottom: 12px; }
  #top .resson-lead {
    font-size: 18px; }
  #top .resson-list {
    display: block;
    margin: 40px auto; }
  #top .resson-list .item {
    background: #fff url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_reason.png) no-repeat 99% 50%/auto 100px;
    padding: 30px 15px 30px 90px;
    width: 100%; }
  #top .resson-list .item:before {
    height: 100px;
    left: 15px;
    width: 75px; }
  #top .resson-list .item:nth-child(odd) {
    margin-right: 0; }
  #top .resson-list .item:nth-child(n+2), #top .resson-list .item:nth-child(n+3) {
    margin-top: 20px; }
  #top .resson-list .title {
    font-size: 20px;
    margin-bottom: 12px; }
  #top .resson-list .desc {
    font-size: 15px; }
  #top .resson-button {
    font-size: 19px;
    margin: 50px auto 0;
    padding: 15px 30px; }
  #top .resson-button span {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 100%/30px auto;
    display: inline-block;
    padding: 0 30px; }
  #top .resson-button small {
    display: block;
    font-size: 14px;
    font-weight: 600; } }

#top .about {
  padding: 100px 0 150px;
  text-align: center; }

#top .about-inner {
  margin: auto;
  max-width: 1220px; }

#top .about-title {
  font-size: 54px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 40px;
  padding-bottom: 30px;
  position: relative; }

#top .about-title:after {
  background: #199fe3;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

#top .about-title small {
  color: #00a0e9;
  display: block;
  font-size: 32px;
  font-weight: 500; }

#top .about-lead {
  font-size: 24px;
  line-height: 1.4;
  margin: 40px auto; }

#top .about-lead em {
  font-weight: 700; }

#top .about-lead .marker {
  background: linear-gradient(transparent 50%, #ff6 0); }

#top .about-desc {
  line-height: 1.75;
  margin: 30px auto; }

#top .about-flow {
  -ms-flex-pack: justify;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  margin: 100px auto 70px;
  width: 100%; }

#top .about-flow .flow-body {
  border-radius: 4px;
  margin: 0 auto;
  padding: 60px 15px 35px;
  position: relative;
  text-align: center; }

#top .about-flow .flow-body .title {
  border-radius: 50px;
  display: inline-block;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap; }

#top .about-flow .before {
  background: #fff;
  border: 1px solid #aaa;
  width: 40%; }

#top .about-flow .before-title {
  background: #666;
  color: #fff;
  font-size: 22px;
  padding: 10px 25px; }

#top .about-flow .before-lead {
  color: #666;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 40px; }

#top .about-flow .after {
  background: #fff;
  border: 1px solid #00a0e9;
  position: relative;
  width: 50%; }

#top .about-flow .after:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/arrow_about.png) no-repeat 0 0/contain;
  bottom: 0;
  content: "";
  display: block;
  height: 38px;
  left: -95px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 65px; }

#top .about-flow .after-title {
  background: #00a0e9;
  color: #fff;
  font-size: 40px;
  padding: 15px 40px; }

#top .about-flow .after-lead {
  margin-bottom: 35px; }

#top .about-flow .after-lead, #top .about-flow .after-lead02 {
  color: #00a0e9;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5; }

#top .about-flow .after-lead02 {
  margin-bottom: 20px; }

@media screen and (max-width: 768px) {
  #top .about {
    padding: 50px 24px 60px; }
  #top .about-title {
    font-size: 24px;
    margin: 0 auto 32px;
    padding-bottom: 20px; }
  #top .about-title:after {
    width: 30px; }
  #top .about-title small {
    display: block;
    font-size: 18px; }
  #top .about-lead {
    font-size: 17px;
    margin: 24px auto; }
  #top .about-desc {
    margin: 24px auto; }
  #top .about-flow {
    display: block;
    margin: 40px auto 30px; }
  #top .about-flow .flow-body {
    padding: 40px 15px 25px; }
  #top .about-flow .before {
    width: 100%; }
  #top .about-flow .before-title {
    font-size: 18px;
    padding: 8px 15px; }
  #top .about-flow .before-lead {
    font-size: 16px;
    margin-bottom: 24px; }
  #top .about-flow .after {
    margin-top: 80px;
    width: 100%; }
  #top .about-flow .after:before {
    bottom: auto;
    height: 28px;
    left: 0;
    right: 0;
    top: -65px;
    transform: rotate(90deg);
    width: 35px; }
  #top .about-flow .after-title {
    font-size: 20px;
    padding: 8px 20px; }
  #top .about-flow .after-lead {
    font-size: 16px;
    margin-bottom: 24px; } }

#top .reccomend-inner {
  margin: auto;
  max-width: 1220px; }

#top .reccomend-top {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_about.jpg) no-repeat 50% 50%/cover;
  padding: 60px 30px 170px;
  text-align: center; }

#top .reccomend-top .c-head-text {
  color: #fff; }

#top .reccomend-top .c-head-text:after {
  background: #fff; }

#top .reccomend-top .desc {
  color: #fff;
  line-height: 1.75; }

#top .reccomend-bottom {
  margin-top: -100px;
  padding-bottom: 100px; }

#top .reccomend-bottom .reccomend-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin-bottom: 90px; }

#top .reccomend-bottom .reccomend-list .item {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_reccomend-item02.png) repeat-y 50% 0/101% auto;
  border-radius: 15px;
  box-shadow: 0 0 10px 5px rgba(171, 171, 171, 0.3);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.4s;
  width: 31%; }

#top .reccomend-bottom .reccomend-list .item:hover {
  box-shadow: 0 0 15px 5px rgba(102, 102, 102, 0.5); }

#top .reccomend-bottom .reccomend-list .item.keiri .head {
  background: #fff;
  background: linear-gradient(90deg, #d24493 0, #ae0a84); }

#top .reccomend-bottom .reccomend-list .item.keiri .body {
  color: #b21385; }

#top .reccomend-bottom .reccomend-list .item.keiri .button {
  background: #b21385; }

#top .reccomend-bottom .reccomend-list .item.somu .head {
  background: #fff;
  background: linear-gradient(90deg, #29c4f3 0, #0c6db0); }

#top .reccomend-bottom .reccomend-list .item.somu .body {
  color: #0c7ac5; }

#top .reccomend-bottom .reccomend-list .item.somu .button {
  background: #0c7ac5; }

#top .reccomend-bottom .reccomend-list .item.hanbai .head {
  background: #fff;
  background: linear-gradient(90deg, #74ba28 0, #0e8936); }

#top .reccomend-bottom .reccomend-list .item.hanbai .body {
  color: #129a3d; }

#top .reccomend-bottom .reccomend-list .item.hanbai .button {
  background: #129a3d; }

#top .reccomend-bottom .reccomend-list .head {
  color: #fff;
  text-align: center; }

#top .reccomend-bottom .reccomend-list .head .list-title {
  font-size: 23px;
  font-weight: 600;
  padding: 30px 20px 15px; }

#top .reccomend-bottom .reccomend-list .head .list-title .lead {
  display: block;
  font-size: 24px;
  margin-bottom: 20px; }

#top .reccomend-bottom .reccomend-list .head .list-title em {
  display: block;
  font-size: 36px;
  font-weight: 700;
  margin: 5px auto 0; }

#top .reccomend-bottom .reccomend-list .figure {
  background-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_reccomend-item01.png), url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_reccomend_hanbai.png);
  background-position: 50% 100%, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 101% auto, cover;
  position: relative; }

#top .reccomend-bottom .reccomend-list .figure figure {
  padding: 15px 0;
  text-align: center; }

#top .reccomend-bottom .reccomend-list .body {
  padding: 30px 30px 35px; }

#top .reccomend-bottom .reccomend-list .body p {
  font-weight: 500;
  line-height: 1.67;
  margin-bottom: 35px; }

#top .reccomend-bottom .reccomend-list .body .button {
  border-radius: 20px;
  color: #fff;
  display: block;
  font-size: 15px;
  margin: auto;
  padding: 10px;
  text-align: center; }

#top .reccomend-bottom .reccomend-list .body .button:after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: inline-block;
  height: 7px;
  margin-left: 0;
  margin-top: 12px;
  position: absolute;
  transform: rotate(-45deg) translate(50%);
  transform-origin: 50% 50%;
  width: 7px; }

@media screen and (max-width: 768px) {
  #top .reccomend-top {
    padding: 30px 24px 80px; }
  #top .reccomend-bottom {
    margin-top: -50px;
    padding: 0 24px 40px; }
  #top .reccomend-bottom .reccomend-list {
    display: block;
    margin-bottom: 40px; }
  #top .reccomend-bottom .reccomend-list .item {
    width: 100%; }
  #top .reccomend-bottom .reccomend-list .item:nth-child(n+2) {
    margin-top: 20px; }
  #top .reccomend-bottom .reccomend-list .head .list-title {
    font-size: 16px;
    padding: 20px 15px; }
  #top .reccomend-bottom .reccomend-list .head .list-title .lead {
    font-size: 17px;
    margin-bottom: 10px; }
  #top .reccomend-bottom .reccomend-list .head .list-title em {
    font-size: 22px; }
  #top .reccomend-bottom .reccomend-list .figure figure {
    padding: 20px 0;
    text-align: center; }
  #top .reccomend-bottom .reccomend-list .figure figure img {
    width: 80px; }
  #top .reccomend-bottom .reccomend-list .body {
    padding: 20px 20px 25px; }
  #top .reccomend-bottom .reccomend-list .body p {
    line-height: 1.5;
    margin-bottom: 20px; }
  #top .reccomend-bottom .reccomend-list .body .button {
    font-size: 13px;
    padding: 8px; }
  #top .reccomend-bottom .reccomend-list .body .button:after {
    height: 7px;
    margin-top: 10px;
    width: 7px; } }

#top .faq-inner {
  margin: auto;
  max-width: 1220px;
  position: relative; }

#top .faq-inner:after, #top .faq-inner:before {
  content: "";
  display: block;
  height: 133px;
  position: absolute;
  width: 133px; }

#top .faq-inner:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_faq_q.png) no-repeat 50% 50%;
  left: 180px;
  top: 40px; }

#top .faq-inner:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_faq_a.png) no-repeat 50% 50%;
  right: 170px;
  top: 5px; }

#top .faq .faq-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  margin: 120px -20px 90px;
  width: calc(100% + 40px); }

#top .faq .faq-list .item {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_question_after.png) no-repeat 50% 100%;
  -ms-flex: 1;
  flex: 1;
  margin: 0 15px;
  padding: 0 0 120px; }

#top .faq .faq-list dl {
  background: #fff url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_question.png) no-repeat 50% 50%;
  border: 4px solid #199fe3;
  border-radius: 10px;
  padding: 30px 5px 25px;
  position: relative; }

#top .faq .faq-list dl:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/img_faq_balloon.png) no-repeat 0 0/contain;
  bottom: -36px;
  content: "";
  display: block;
  height: 37px;
  left: 40px;
  margin: auto;
  position: absolute;
  right: 0;
  width: 54px; }

#top .faq .faq-list dl dt {
  color: #199ade;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px; }

#top .faq .faq-list dl dd {
  font-size: 14px;
  line-height: 1.4; }

@media screen and (max-width: 768px) {
  #top .faq {
    padding: 40px 24px; }
  #top .faq-inner:after, #top .faq-inner:before {
    height: 40px;
    width: 40px; }
  #top .faq-inner:before {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_faq_q.png) no-repeat 50% 50%/contain;
    left: -10px;
    top: -10px; }
  #top .faq-inner:after {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_faq_a.png) no-repeat 50% 50%/contain;
    right: -10px;
    top: 5px; }
  #top .faq .c-head-text, #top .faq .faq-desc {
    padding-left: 40px;
    padding-right: 40px; }
  #top .faq .faq-list {
    -ms-flex-pack: justify;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 60px -5px 40px;
    width: calc(100% + 10px); }
  #top .faq .faq-list .item {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_question_after.png) no-repeat 50% 88%/auto 45px;
    -ms-flex: none;
    flex: none;
    margin: 0 5px;
    padding: 0 0 80px;
    width: calc(50% - 10px); }
  #top .faq .faq-list dl {
    background: #fff url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/bg_question.png) no-repeat 50% 50%/40px auto;
    border: 2px solid #199fe3;
    border-radius: 8px;
    padding: 15px 5px; }
  #top .faq .faq-list dl:after {
    bottom: -29px;
    height: 30px;
    left: 20px;
    width: 30px; }
  #top .faq .faq-list dl dt {
    font-size: 20px;
    margin-bottom: 10px; }
  #top .faq .faq-list dl dd {
    font-size: 13px; } }

#top .faq2021 {
  background: #eff9ff !important;
  padding: 80px 0; }

#top .faq2021-inner {
  margin: auto;
  max-width: 1220px;
  position: relative; }

#top .faq2021-desc {
  text-align: center; }

#top .faq2021-btnarea {
  border: 2px dotted #057db8;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px 120px; }

#top .faq2021-btnarea p {
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center; }

#top .faq2021 .faq-list-wrap {
  margin: 40px 0; }

#top .faq2021 .faq-list-wrap .faq-list {
  background: #fff;
  margin-bottom: 20px;
  padding: 0; }

#top .faq2021 .faq-list-wrap .faq-list:last-child {
  margin-bottom: 0; }

#top .faq2021 .faq-list-wrap .faq-list > dt {
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  padding: 30px 30px 30px 100px;
  position: relative; }

#top .faq2021 .faq-list-wrap .faq-list > dt:before {
  content: "";
  display: block;
  height: 37px;
  left: 25px;
  margin: auto;
  position: absolute;
  top: 25px;
  width: 45px; }

#top .faq2021 .faq-list-wrap .faq-list > dt:after {
  border-bottom: 5px solid #00a0e9;
  border-right: 5px solid #00a0e9;
  content: "";
  display: inline-block;
  height: 16px;
  margin-left: 0;
  margin-top: -5px;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: rotate(45deg) translate(-50%);
  transition: transform 0.3s;
  width: 16px; }

#top .faq2021 .faq-list-wrap .faq-list > dt.js-open:after {
  margin-top: 5px;
  transform: rotate(-135deg); }

#top .faq2021 .faq-list-wrap .faq-list > dd {
  border-top: 2px dashed #ddd;
  display: none;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 80px 0 100px;
  padding: 30px 0 40px; }

#top .faq2021 .faq-list-wrap .faq-list > dd dl, #top .faq2021 .faq-list-wrap .faq-list > dd ol, #top .faq2021 .faq-list-wrap .faq-list > dd p, #top .faq2021 .faq-list-wrap .faq-list > dd ul {
  margin-bottom: 1.5em; }

#top .faq2021 .faq-list-wrap .faq-list > dd dl dt {
  font-weight: 600;
  margin-bottom: 5px; }

#top .faq2021 .faq-list-wrap .faq-list > dd dl dd {
  margin-bottom: 1.5em; }

#top .faq2021 .faq-list-wrap .faq-list > dd .number li {
  margin-bottom: 5px;
  padding-left: 1.5em;
  text-indent: -1.5em; }

#top .faq2021 .faq-list-wrap .faq-list > dd .check li {
  margin-bottom: 5px;
  padding-left: 1em;
  position: relative; }

#top .faq2021 .faq-list-wrap .faq-list > dd .check li:before {
  background: #333;
  border-radius: 10px;
  content: "";
  height: 4px;
  left: 0.3em;
  position: absolute;
  top: 0.65em;
  width: 4px; }

#top .faq2021 .faq-list-wrap .faq-list > dd .contact {
  display: inline-block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px; }

#top .faq2021 .faq-list-wrap .faq-list > dd .contact small {
  font-size: 14px; }

#top .faq2021 .faq-list-wrap .faq-list > dd .contact .notes {
  font-size: 15px;
  font-weight: 400; }

#top .faq2021 .faq-list-wrap .faq-list:first-of-type > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q01.png) no-repeat 0 0/contain; }

#top .faq2021 .faq-list-wrap .faq-list:nth-of-type(2) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q02.png) no-repeat 0 0/contain; }

#top .faq2021 .faq-list-wrap .faq-list:nth-of-type(3) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q03.png) no-repeat 0 0/contain; }

#top .faq2021 .faq-list-wrap .faq-list:nth-of-type(4) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q04.png) no-repeat 0 0/contain; }

#top .faq2021 .faq-list-wrap .faq-list:nth-of-type(5) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q05.png) no-repeat 0 0/contain; }

@media screen and (max-width: 768px) {
  #top .faq2021 {
    padding: 40px 24px; }
  #top .faq2021-btnarea {
    margin: 0 auto;
    max-width: 100%;
    padding: 20px; }
  #top .faq2021-btnarea .c-button, #top .faq2021-btnarea .c-button--long, #top .faq2021-btnarea .c-button--middle, #top .faq2021-btnarea .c-button--short, #top .faq2021-btnarea .c-button--sm {
    width: auto; }
  #top .faq2021 .faq-list-wrap .faq-list {
    margin-bottom: 14px; }
  #top .faq2021 .faq-list-wrap .faq-list > dt {
    font-size: 16px;
    padding: 15px 40px 15px 60px; }
  #top .faq2021 .faq-list-wrap .faq-list > dt:before {
    height: 24px;
    left: 15px;
    top: 16px;
    width: 30px; }
  #top .faq2021 .faq-list-wrap .faq-list > dt:after {
    border-bottom: 3px solid #00a0e9;
    border-right: 3px solid #00a0e9;
    height: 12px;
    margin-top: 0;
    right: 15px;
    top: calc(50% - 6px);
    width: 12px; }
  #top .faq2021 .faq-list-wrap .faq-list > dd {
    font-size: 14px;
    margin: 0 30px 0 50px;
    padding: 15px 0 25px; }
  #top .faq2021 .faq-list-wrap .faq-list > dd .number li, #top .faq2021 .faq-list-wrap .faq-list > dd dl dt {
    margin-bottom: 3px; }
  #top .faq2021 .faq-list-wrap .faq-list > dd .check li {
    margin-bottom: 3px;
    position: relative; }
  #top .faq2021 .faq-list-wrap .faq-list > dd .contact {
    font-size: 18px;
    margin-bottom: 12px; }
  #top .faq2021 .faq-list-wrap .faq-list > dd .contact small {
    font-size: 12px; }
  #top .faq2021 .faq-list-wrap .faq-list > dd .contact .notes {
    font-size: 14px; } }

#faq .contents-header {
  background: #00a0e9;
  color: #fff; }

#faq .contents-header .header-inner {
  background: #00a0e9 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/bg_hero.png) no-repeat 90% 50%;
  margin: auto;
  max-width: 1220px;
  padding: 100px 0; }

#faq .contents-header .header-title {
  font-size: 43px;
  line-height: 1.5; }

#faq .contents-header .header-title small {
  display: block;
  font-size: 24px; }

@media screen and (max-width: 768px) {
  #faq .contents-header {
    color: #fff; }
  #faq .contents-header .header-inner {
    background: #00a0e9 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/bg_hero.png) no-repeat 97% 95%/auto 35px;
    padding: 40px 24px; }
  #faq .contents-header .header-title {
    font-size: 21px; }
  #faq .contents-header .header-title small {
    font-size: 16px; } }

#faq .local-navigation {
  border-left: 1px solid #333;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }

#faq .local-navigation li {
  -ms-flex-positive: 1;
  border-right: 1px solid #333;
  display: block;
  flex-grow: 1;
  text-align: center; }

#faq .local-navigation li a {
  display: block;
  padding: 5px 10px;
  text-align: center; }

#faq .local-navigation li a span {
  border-bottom: 1px solid #00a0e9;
  color: #00a0e9;
  transition: opacity 0.3s, border 0.3s; }

#faq .local-navigation li a span:after {
  content: " ▼";
  font-size: 13px;
  vertical-align: 2px; }

#faq .local-navigation li a:hover span {
  border-bottom: 1px solid transparent;
  opacity: 0.7; }

@media screen and (max-width: 768px) {
  #faq .local-navigation {
    background: #eee;
    border: none;
    border-radius: 6px;
    display: block;
    padding: 15px; }
  #faq .local-navigation li {
    border: none;
    display: inline-block;
    margin: 3px auto;
    text-align: left;
    width: auto; }
  #faq .local-navigation li a {
    display: block;
    padding: 5px 10px;
    white-space: normal; }
  #faq .local-navigation li a span:after {
    font-size: 12px; } }

#faq .faq-title {
  color: #00a0e9;
  font-size: 31px;
  margin: 100px auto 50px; }

@media screen and (max-width: 768px) {
  #faq .faq-title {
    font-size: 20px;
    margin: 60px auto 30px; } }

#faq .faq-list-wrap .faq-list {
  background: #eee;
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 0; }

#faq .faq-list-wrap .faq-list:last-child {
  margin-bottom: 0; }

#faq .faq-list-wrap .faq-list > dt {
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  padding: 30px 30px 30px 100px;
  position: relative;
  transition: padding 0.3s; }

#faq .faq-list-wrap .faq-list > dt:before {
  content: "";
  display: block;
  height: 37px;
  left: 25px;
  margin: auto;
  position: absolute;
  top: 25px;
  width: 50px; }

#faq .faq-list-wrap .faq-list > dt:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_arrow.png) no-repeat 0 0/contain;
  bottom: 0;
  content: "";
  display: block;
  height: 28px;
  margin: auto;
  position: absolute;
  right: 20px;
  top: 0;
  transition: transform 0.3s;
  width: 46px; }

#faq .faq-list-wrap .faq-list > dt.js-open:after {
  transform: rotate(180deg); }

#faq .faq-list-wrap .faq-list > dd {
  border-top: 2px dashed #ddd;
  display: none;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 80px 0 100px;
  padding: 30px 0 40px; }

#faq .faq-list-wrap .faq-list > dd dl, #faq .faq-list-wrap .faq-list > dd ol, #faq .faq-list-wrap .faq-list > dd p, #faq .faq-list-wrap .faq-list > dd ul {
  margin-bottom: 1.5em; }

#faq .faq-list-wrap .faq-list > dd dl dt {
  font-weight: 600;
  margin-bottom: 5px; }

#faq .faq-list-wrap .faq-list > dd dl dd {
  margin-bottom: 1.5em; }

#faq .faq-list-wrap .faq-list > dd .number li {
  margin-bottom: 5px;
  padding-left: 1.5em;
  text-indent: -1.5em; }

#faq .faq-list-wrap .faq-list > dd .check li {
  margin-bottom: 5px;
  padding-left: 1em;
  position: relative; }

#faq .faq-list-wrap .faq-list > dd .check li:before {
  background: #333;
  border-radius: 10px;
  content: "";
  height: 4px;
  left: 0.3em;
  position: absolute;
  top: 0.65em;
  width: 4px; }

#faq .faq-list-wrap .faq-list > dd .contact {
  display: inline-block;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px; }

#faq .faq-list-wrap .faq-list > dd .contact small {
  font-size: 14px; }

#faq .faq-list-wrap .faq-list > dd .contact .notes {
  font-size: 15px;
  font-weight: 400; }

#faq .faq-list-wrap .faq-list:first-of-type > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q01.png) no-repeat 0 0/contain; }

#faq .faq-list-wrap .faq-list:nth-of-type(2) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q02.png) no-repeat 0 0/contain; }

#faq .faq-list-wrap .faq-list:nth-of-type(3) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q03.png) no-repeat 0 0/contain; }

#faq .faq-list-wrap .faq-list:nth-of-type(4) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q04.png) no-repeat 0 0/contain; }

#faq .faq-list-wrap .faq-list:nth-of-type(5) > dt:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/faq/icon_q05.png) no-repeat 0 0/contain; }

@media screen and (max-width: 768px) {
  #faq .faq-list-wrap .faq-list {
    margin-bottom: 14px; }
  #faq .faq-list-wrap .faq-list > dt {
    font-size: 16px;
    padding: 15px 40px 15px 60px; }
  #faq .faq-list-wrap .faq-list > dt:before {
    height: 24px;
    left: 15px;
    top: 16px;
    width: 30px; }
  #faq .faq-list-wrap .faq-list > dt:after {
    height: 18px;
    right: 15px;
    width: 20px; }
  #faq .faq-list-wrap .faq-list > dd {
    font-size: 14px;
    margin: 0 30px 0 50px;
    padding: 15px 0 25px; }
  #faq .faq-list-wrap .faq-list > dd .number li, #faq .faq-list-wrap .faq-list > dd dl dt {
    margin-bottom: 3px; }
  #faq .faq-list-wrap .faq-list > dd .check li {
    margin-bottom: 3px;
    position: relative; }
  #faq .faq-list-wrap .faq-list > dd .contact {
    font-size: 18px;
    margin-bottom: 12px; }
  #faq .faq-list-wrap .faq-list > dd .contact small {
    font-size: 12px; }
  #faq .faq-list-wrap .faq-list > dd .contact .notes {
    font-size: 14px; } }

#faq .resson-button {
  background: #e76f02;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto;
  max-width: 480px;
  padding: 10px 0;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%; }

#faq .resson-button span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 92%;
  background-size: 30px auto;
  display: inline-block;
  padding: 0 70px; }

#faq .resson-button span small {
  display: block;
  font-size: 12px;
  font-weight: 600; }

#faq .resson-button:hover {
  opacity: 0.7; }

@media screen and (max-width: 768px) {
  #faq .resson-button {
    max-width: 100%; }
  #faq .resson-button span {
    padding: 0 30px; } }

#bugyo-11 .contents-header, #bugyo-cloud .contents-header, #dllist .contents-header, #dllist-i10 .contents-header, #dllist-i8 .contents-header, #dllist-movie .contents-header, #hikaku .contents-header, #kouza .contents-header {
  background: #00a0e9;
  color: #fff; }

#bugyo-11 .contents-header .header-inner, #bugyo-cloud .contents-header .header-inner, #dllist .contents-header .header-inner, #dllist-i10 .contents-header .header-inner, #dllist-i8 .contents-header .header-inner, #dllist-movie .contents-header .header-inner, #hikaku .contents-header .header-inner, #kouza .contents-header .header-inner {
  margin: auto;
  max-width: 1220px;
  padding: 100px 0; }

#bugyo-11 .contents-header .header-title, #bugyo-cloud .contents-header .header-title, #dllist .contents-header .header-title, #dllist-i10 .contents-header .header-title, #dllist-i8 .contents-header .header-title, #dllist-movie .contents-header .header-title, #hikaku .contents-header .header-title, #kouza .contents-header .header-title {
  font-size: 43px;
  line-height: 1.5; }

#bugyo-11 .contents-header .header-title small, #bugyo-cloud .contents-header .header-title small, #dllist .contents-header .header-title small, #dllist-i10 .contents-header .header-title small, #dllist-i8 .contents-header .header-title small, #dllist-movie .contents-header .header-title small, #hikaku .contents-header .header-title small, #kouza .contents-header .header-title small {
  display: block;
  font-size: 24px; }

#bugyo-11 .contents-header .header-lead, #bugyo-cloud .contents-header .header-lead, #dllist .contents-header .header-lead, #dllist-i10 .contents-header .header-lead, #dllist-i8 .contents-header .header-lead, #dllist-movie .contents-header .header-lead, #hikaku .contents-header .header-lead, #kouza .contents-header .header-lead {
  font-size: 12px;
  margin-bottom: 20px; }

#bugyo-11 .contents-header .c-button-wrap, #bugyo-cloud .contents-header .c-button-wrap, #dllist .contents-header .c-button-wrap, #dllist-i10 .contents-header .c-button-wrap, #dllist-i8 .contents-header .c-button-wrap, #dllist-movie .contents-header .c-button-wrap, #hikaku .contents-header .c-button-wrap, #kouza .contents-header .c-button-wrap {
  padding-top: 50px;
  position: relative; }

#bugyo-11 .contents-header .c-button-wrap .c-banner-btn, #bugyo-cloud .contents-header .c-button-wrap .c-banner-btn, #dllist .contents-header .c-button-wrap .c-banner-btn, #dllist-i10 .contents-header .c-button-wrap .c-banner-btn, #dllist-i8 .contents-header .c-button-wrap .c-banner-btn, #dllist-movie .contents-header .c-button-wrap .c-banner-btn, #hikaku .contents-header .c-button-wrap .c-banner-btn, #kouza .contents-header .c-button-wrap .c-banner-btn {
  bottom: -35px;
  position: absolute;
  right: 0; }

@media screen and (max-width: 768px) {
  #bugyo-11 .contents-header, #bugyo-cloud .contents-header, #dllist .contents-header, #dllist-i10 .contents-header, #dllist-i8 .contents-header, #dllist-movie .contents-header, #hikaku .contents-header, #kouza .contents-header {
    color: #fff; }
  #bugyo-11 .contents-header .header-inner, #bugyo-cloud .contents-header .header-inner, #dllist .contents-header .header-inner, #dllist-i10 .contents-header .header-inner, #dllist-i8 .contents-header .header-inner, #dllist-movie .contents-header .header-inner, #hikaku .contents-header .header-inner, #kouza .contents-header .header-inner {
    padding: 40px 24px; }
  #bugyo-11 .contents-header .header-title, #bugyo-cloud .contents-header .header-title, #dllist .contents-header .header-title, #dllist-i10 .contents-header .header-title, #dllist-i8 .contents-header .header-title, #dllist-movie .contents-header .header-title, #hikaku .contents-header .header-title, #kouza .contents-header .header-title {
    font-size: 21px; }
  #bugyo-11 .contents-header .header-title small, #bugyo-cloud .contents-header .header-title small, #dllist .contents-header .header-title small, #dllist-i10 .contents-header .header-title small, #dllist-i8 .contents-header .header-title small, #dllist-movie .contents-header .header-title small, #hikaku .contents-header .header-title small, #kouza .contents-header .header-title small {
    font-size: 16px; }
  #bugyo-11 .contents-header .c-button-wrap, #bugyo-cloud .contents-header .c-button-wrap, #dllist .contents-header .c-button-wrap, #dllist-i10 .contents-header .c-button-wrap, #dllist-i8 .contents-header .c-button-wrap, #dllist-movie .contents-header .c-button-wrap, #hikaku .contents-header .c-button-wrap, #kouza .contents-header .c-button-wrap {
    padding: 25px 0 0; }
  #bugyo-11 .contents-header .c-button-wrap .c-banner-btn, #bugyo-cloud .contents-header .c-button-wrap .c-banner-btn, #dllist .contents-header .c-button-wrap .c-banner-btn, #dllist-i10 .contents-header .c-button-wrap .c-banner-btn, #dllist-i8 .contents-header .c-button-wrap .c-banner-btn, #dllist-movie .contents-header .c-button-wrap .c-banner-btn, #hikaku .contents-header .c-button-wrap .c-banner-btn, #kouza .contents-header .c-button-wrap .c-banner-btn {
    bottom: auto;
    position: relative; } }

#bugyo-11 .local-navigation, #bugyo-cloud .local-navigation, #dllist .local-navigation, #dllist-i10 .local-navigation, #dllist-i8 .local-navigation, #dllist-movie .local-navigation, #hikaku .local-navigation, #kouza .local-navigation {
  -ms-flex-pack: justify;
  border-left: 1px solid #333;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 100%; }

#bugyo-11 .local-navigation li, #bugyo-cloud .local-navigation li, #dllist .local-navigation li, #dllist-i10 .local-navigation li, #dllist-i8 .local-navigation li, #dllist-movie .local-navigation li, #hikaku .local-navigation li, #kouza .local-navigation li {
  -ms-flex-positive: 1;
  border-right: 1px solid #333;
  display: block;
  flex-grow: 1;
  text-align: center; }

#bugyo-11 .local-navigation li a, #bugyo-cloud .local-navigation li a, #dllist .local-navigation li a, #dllist-i10 .local-navigation li a, #dllist-i8 .local-navigation li a, #dllist-movie .local-navigation li a, #hikaku .local-navigation li a, #kouza .local-navigation li a {
  display: block;
  padding: 5px 50px; }

#bugyo-11 .local-navigation li a span, #bugyo-cloud .local-navigation li a span, #dllist .local-navigation li a span, #dllist-i10 .local-navigation li a span, #dllist-i8 .local-navigation li a span, #dllist-movie .local-navigation li a span, #hikaku .local-navigation li a span, #kouza .local-navigation li a span {
  border-bottom: 1px solid #00a0e9;
  color: #00a0e9;
  transition: opacity 0.3s, border 0.3s; }

#bugyo-11 .local-navigation li a span:after, #bugyo-cloud .local-navigation li a span:after, #dllist .local-navigation li a span:after, #dllist-i10 .local-navigation li a span:after, #dllist-i8 .local-navigation li a span:after, #dllist-movie .local-navigation li a span:after, #hikaku .local-navigation li a span:after, #kouza .local-navigation li a span:after {
  content: " ▼";
  font-size: 13px;
  vertical-align: 2px; }

#bugyo-11 .local-navigation li a:hover span, #bugyo-cloud .local-navigation li a:hover span, #dllist .local-navigation li a:hover span, #dllist-i10 .local-navigation li a:hover span, #dllist-i8 .local-navigation li a:hover span, #dllist-movie .local-navigation li a:hover span, #hikaku .local-navigation li a:hover span, #kouza .local-navigation li a:hover span {
  border-bottom: 1px solid transparent;
  opacity: 0.7; }

@media screen and (max-width: 768px) {
  #bugyo-11 .local-navigation, #bugyo-cloud .local-navigation, #dllist .local-navigation, #dllist-i10 .local-navigation, #dllist-i8 .local-navigation, #dllist-movie .local-navigation, #hikaku .local-navigation, #kouza .local-navigation {
    background: #eee;
    border: none;
    border-radius: 6px;
    display: block;
    padding: 15px; }
  #bugyo-11 .local-navigation li, #bugyo-cloud .local-navigation li, #dllist .local-navigation li, #dllist-i10 .local-navigation li, #dllist-i8 .local-navigation li, #dllist-movie .local-navigation li, #hikaku .local-navigation li, #kouza .local-navigation li {
    border: none;
    display: inline-block;
    margin: 3px auto;
    text-align: left;
    width: auto; }
  #bugyo-11 .local-navigation li a, #bugyo-cloud .local-navigation li a, #dllist .local-navigation li a, #dllist-i10 .local-navigation li a, #dllist-i8 .local-navigation li a, #dllist-movie .local-navigation li a, #hikaku .local-navigation li a, #kouza .local-navigation li a {
    display: block;
    padding: 5px 10px;
    white-space: normal; }
  #bugyo-11 .local-navigation li a span:after, #bugyo-cloud .local-navigation li a span:after, #dllist .local-navigation li a span:after, #dllist-i10 .local-navigation li a span:after, #dllist-i8 .local-navigation li a span:after, #dllist-movie .local-navigation li a span:after, #hikaku .local-navigation li a span:after, #kouza .local-navigation li a span:after {
    font-size: 12px; } }

#bugyo-11 .supportend-wrap, #bugyo-cloud .supportend-wrap, #dllist .supportend-wrap, #dllist-i10 .supportend-wrap, #dllist-i8 .supportend-wrap, #dllist-movie .supportend-wrap, #hikaku .supportend-wrap, #kouza .supportend-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -11px 50px;
  width: calc(100% + 22px); }

#bugyo-11 .supportend-wrap .item, #bugyo-cloud .supportend-wrap .item, #dllist .supportend-wrap .item, #dllist-i10 .supportend-wrap .item, #dllist-i8 .supportend-wrap .item, #dllist-movie .supportend-wrap .item, #hikaku .supportend-wrap .item, #kouza .supportend-wrap .item {
  padding: 0 11px;
  width: 50%; }

#bugyo-11 .supportend-wrap .item ul li, #bugyo-cloud .supportend-wrap .item ul li, #dllist .supportend-wrap .item ul li, #dllist-i10 .supportend-wrap .item ul li, #dllist-i8 .supportend-wrap .item ul li, #dllist-movie .supportend-wrap .item ul li, #hikaku .supportend-wrap .item ul li, #kouza .supportend-wrap .item ul li {
  line-height: 1.7;
  margin-bottom: 1em; }

#bugyo-11 .supportend-wrap .item.period-date, #bugyo-cloud .supportend-wrap .item.period-date, #dllist .supportend-wrap .item.period-date, #dllist-i10 .supportend-wrap .item.period-date, #dllist-i8 .supportend-wrap .item.period-date, #dllist-movie .supportend-wrap .item.period-date, #hikaku .supportend-wrap .item.period-date, #kouza .supportend-wrap .item.period-date {
  margin-left: 2%;
  padding: 0 15px;
  width: 48%; }

#bugyo-11 .supportend-wrap .item.period-date dl, #bugyo-cloud .supportend-wrap .item.period-date dl, #dllist .supportend-wrap .item.period-date dl, #dllist-i10 .supportend-wrap .item.period-date dl, #dllist-i8 .supportend-wrap .item.period-date dl, #dllist-movie .supportend-wrap .item.period-date dl, #hikaku .supportend-wrap .item.period-date dl, #kouza .supportend-wrap .item.period-date dl {
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: #f7f7f7;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 20px;
  width: 100%; }

#bugyo-11 .supportend-wrap .item.period-date dl dt, #bugyo-cloud .supportend-wrap .item.period-date dl dt, #dllist .supportend-wrap .item.period-date dl dt, #dllist-i10 .supportend-wrap .item.period-date dl dt, #dllist-i8 .supportend-wrap .item.period-date dl dt, #dllist-movie .supportend-wrap .item.period-date dl dt, #hikaku .supportend-wrap .item.period-date dl dt, #kouza .supportend-wrap .item.period-date dl dt {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 20px 10% 0 20px;
  width: 55%; }

#bugyo-11 .supportend-wrap .item.period-date dl dt em, #bugyo-cloud .supportend-wrap .item.period-date dl dt em, #dllist .supportend-wrap .item.period-date dl dt em, #dllist-i10 .supportend-wrap .item.period-date dl dt em, #dllist-i8 .supportend-wrap .item.period-date dl dt em, #dllist-movie .supportend-wrap .item.period-date dl dt em, #hikaku .supportend-wrap .item.period-date dl dt em, #kouza .supportend-wrap .item.period-date dl dt em {
  color: #00a0e9;
  display: block;
  font-size: 18px;
  font-weight: 600; }

#bugyo-11 .supportend-wrap .item.period-date dl dt span, #bugyo-cloud .supportend-wrap .item.period-date dl dt span, #dllist .supportend-wrap .item.period-date dl dt span, #dllist-i10 .supportend-wrap .item.period-date dl dt span, #dllist-i8 .supportend-wrap .item.period-date dl dt span, #dllist-movie .supportend-wrap .item.period-date dl dt span, #hikaku .supportend-wrap .item.period-date dl dt span, #kouza .supportend-wrap .item.period-date dl dt span {
  display: inline-block;
  position: relative; }

#bugyo-11 .supportend-wrap .item.period-date dl dt span:after, #bugyo-cloud .supportend-wrap .item.period-date dl dt span:after, #dllist .supportend-wrap .item.period-date dl dt span:after, #dllist-i10 .supportend-wrap .item.period-date dl dt span:after, #dllist-i8 .supportend-wrap .item.period-date dl dt span:after, #dllist-movie .supportend-wrap .item.period-date dl dt span:after, #hikaku .supportend-wrap .item.period-date dl dt span:after, #kouza .supportend-wrap .item.period-date dl dt span:after {
  border: 17px solid transparent;
  border-left-color: rgba(0, 160, 233, 0.5);
  bottom: 0;
  content: "";
  display: block;
  height: 0;
  margin: auto;
  position: absolute;
  right: -25%;
  top: -50%;
  width: 0; }

#bugyo-11 .supportend-wrap .item.period-date dl dd, #bugyo-cloud .supportend-wrap .item.period-date dl dd, #dllist .supportend-wrap .item.period-date dl dd, #dllist-i10 .supportend-wrap .item.period-date dl dd, #dllist-i8 .supportend-wrap .item.period-date dl dd, #dllist-movie .supportend-wrap .item.period-date dl dd, #hikaku .supportend-wrap .item.period-date dl dd, #kouza .supportend-wrap .item.period-date dl dd {
  color: #f83f3f;
  font-size: 16px;
  letter-spacing: 0.1em;
  width: 45%; }

#bugyo-11 .supportend-wrap .item.period-date dl dd em, #bugyo-cloud .supportend-wrap .item.period-date dl dd em, #dllist .supportend-wrap .item.period-date dl dd em, #dllist-i10 .supportend-wrap .item.period-date dl dd em, #dllist-i8 .supportend-wrap .item.period-date dl dd em, #dllist-movie .supportend-wrap .item.period-date dl dd em, #hikaku .supportend-wrap .item.period-date dl dd em, #kouza .supportend-wrap .item.period-date dl dd em {
  font-size: 44px;
  font-weight: 500; }

#bugyo-11 .supportend-wrap .item.period-date dl:last-of-type, #bugyo-cloud .supportend-wrap .item.period-date dl:last-of-type, #dllist .supportend-wrap .item.period-date dl:last-of-type, #dllist-i10 .supportend-wrap .item.period-date dl:last-of-type, #dllist-i8 .supportend-wrap .item.period-date dl:last-of-type, #dllist-movie .supportend-wrap .item.period-date dl:last-of-type, #hikaku .supportend-wrap .item.period-date dl:last-of-type, #kouza .supportend-wrap .item.period-date dl:last-of-type {
  padding-bottom: 20px; }

@media screen and (max-width: 768px) {
  #bugyo-11 .supportend-wrap, #bugyo-cloud .supportend-wrap, #dllist .supportend-wrap, #dllist-i10 .supportend-wrap, #dllist-i8 .supportend-wrap, #dllist-movie .supportend-wrap, #hikaku .supportend-wrap, #kouza .supportend-wrap {
    margin: 0 -11px 50px; }
  #bugyo-11 .supportend-wrap .item, #bugyo-cloud .supportend-wrap .item, #dllist .supportend-wrap .item, #dllist-i10 .supportend-wrap .item, #dllist-i8 .supportend-wrap .item, #dllist-movie .supportend-wrap .item, #hikaku .supportend-wrap .item, #kouza .supportend-wrap .item {
    padding: 0 11px;
    width: 100%; }
  #bugyo-11 .supportend-wrap .item.period-date, #bugyo-cloud .supportend-wrap .item.period-date, #dllist .supportend-wrap .item.period-date, #dllist-i10 .supportend-wrap .item.period-date, #dllist-i8 .supportend-wrap .item.period-date, #dllist-movie .supportend-wrap .item.period-date, #hikaku .supportend-wrap .item.period-date, #kouza .supportend-wrap .item.period-date {
    margin: 0 11px;
    padding: 0;
    width: 100%; }
  #bugyo-11 .supportend-wrap .item.period-date dl, #bugyo-cloud .supportend-wrap .item.period-date dl, #dllist .supportend-wrap .item.period-date dl, #dllist-i10 .supportend-wrap .item.period-date dl, #dllist-i8 .supportend-wrap .item.period-date dl, #dllist-movie .supportend-wrap .item.period-date dl, #hikaku .supportend-wrap .item.period-date dl, #kouza .supportend-wrap .item.period-date dl {
    margin: 0;
    padding: 0;
    width: 100%; }
  #bugyo-11 .supportend-wrap .item.period-date dl dt, #bugyo-cloud .supportend-wrap .item.period-date dl dt, #dllist .supportend-wrap .item.period-date dl dt, #dllist-i10 .supportend-wrap .item.period-date dl dt, #dllist-i8 .supportend-wrap .item.period-date dl dt, #dllist-movie .supportend-wrap .item.period-date dl dt, #hikaku .supportend-wrap .item.period-date dl dt, #kouza .supportend-wrap .item.period-date dl dt {
    padding: 15px 20px 0;
    text-align: center;
    width: 100%; }
  #bugyo-11 .supportend-wrap .item.period-date dl dt span, #bugyo-cloud .supportend-wrap .item.period-date dl dt span, #dllist .supportend-wrap .item.period-date dl dt span, #dllist-i10 .supportend-wrap .item.period-date dl dt span, #dllist-i8 .supportend-wrap .item.period-date dl dt span, #dllist-movie .supportend-wrap .item.period-date dl dt span, #hikaku .supportend-wrap .item.period-date dl dt span, #kouza .supportend-wrap .item.period-date dl dt span {
    margin-top: 0.5em; }
  #bugyo-11 .supportend-wrap .item.period-date dl dt span:after, #bugyo-cloud .supportend-wrap .item.period-date dl dt span:after, #dllist .supportend-wrap .item.period-date dl dt span:after, #dllist-i10 .supportend-wrap .item.period-date dl dt span:after, #dllist-i8 .supportend-wrap .item.period-date dl dt span:after, #dllist-movie .supportend-wrap .item.period-date dl dt span:after, #hikaku .supportend-wrap .item.period-date dl dt span:after, #kouza .supportend-wrap .item.period-date dl dt span:after {
    content: none; }
  #bugyo-11 .supportend-wrap .item.period-date dl dd, #bugyo-cloud .supportend-wrap .item.period-date dl dd, #dllist .supportend-wrap .item.period-date dl dd, #dllist-i10 .supportend-wrap .item.period-date dl dd, #dllist-i8 .supportend-wrap .item.period-date dl dd, #dllist-movie .supportend-wrap .item.period-date dl dd, #hikaku .supportend-wrap .item.period-date dl dd, #kouza .supportend-wrap .item.period-date dl dd {
    text-align: center;
    width: 100%; } }

#bugyo-11 .supportend-list, #bugyo-cloud .supportend-list, #dllist .supportend-list, #dllist-i10 .supportend-list, #dllist-i8 .supportend-list, #dllist-movie .supportend-list, #hikaku .supportend-list, #kouza .supportend-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0 100px;
  padding: 0;
  width: 100%; }

#bugyo-11 .supportend-list li, #bugyo-cloud .supportend-list li, #dllist .supportend-list li, #dllist-i10 .supportend-list li, #dllist-i8 .supportend-list li, #dllist-movie .supportend-list li, #hikaku .supportend-list li, #kouza .supportend-list li {
  width: 25%; }

@media screen and (max-width: 640px) {
  #bugyo-11 .supportend-list, #bugyo-cloud .supportend-list, #dllist .supportend-list, #dllist-i10 .supportend-list, #dllist-i8 .supportend-list, #dllist-movie .supportend-list, #hikaku .supportend-list, #kouza .supportend-list {
    margin: 30px 0 50px; }
  #bugyo-11 .supportend-list li, #bugyo-cloud .supportend-list li, #dllist .supportend-list li, #dllist-i10 .supportend-list li, #dllist-i8 .supportend-list li, #dllist-movie .supportend-list li, #hikaku .supportend-list li, #kouza .supportend-list li {
    width: 100%; } }

#bugyo-11 .comparisonpoint-wrap, #bugyo-cloud .comparisonpoint-wrap, #dllist .comparisonpoint-wrap, #dllist-i10 .comparisonpoint-wrap, #dllist-i8 .comparisonpoint-wrap, #dllist-movie .comparisonpoint-wrap, #hikaku .comparisonpoint-wrap, #kouza .comparisonpoint-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: center;
  flex-direction: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto 50px;
  width: 80%; }

#bugyo-11 .comparisonpoint-wrap .item, #bugyo-cloud .comparisonpoint-wrap .item, #dllist .comparisonpoint-wrap .item, #dllist-i10 .comparisonpoint-wrap .item, #dllist-i8 .comparisonpoint-wrap .item, #dllist-movie .comparisonpoint-wrap .item, #hikaku .comparisonpoint-wrap .item, #kouza .comparisonpoint-wrap .item {
  padding: 0 20px;
  width: 50%; }

#bugyo-11 .comparisonpoint-wrap .item dl dt, #bugyo-cloud .comparisonpoint-wrap .item dl dt, #dllist .comparisonpoint-wrap .item dl dt, #dllist-i10 .comparisonpoint-wrap .item dl dt, #dllist-i8 .comparisonpoint-wrap .item dl dt, #dllist-movie .comparisonpoint-wrap .item dl dt, #hikaku .comparisonpoint-wrap .item dl dt, #kouza .comparisonpoint-wrap .item dl dt {
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0; }

#bugyo-11 .comparisonpoint-wrap .item dl dd, #bugyo-cloud .comparisonpoint-wrap .item dl dd, #dllist .comparisonpoint-wrap .item dl dd, #dllist-i10 .comparisonpoint-wrap .item dl dd, #dllist-i8 .comparisonpoint-wrap .item dl dd, #dllist-movie .comparisonpoint-wrap .item dl dd, #hikaku .comparisonpoint-wrap .item dl dd, #kouza .comparisonpoint-wrap .item dl dd {
  line-height: 2;
  padding-left: 2em; }

#bugyo-11 .comparisonpoint-wrap .item dl dd span, #bugyo-cloud .comparisonpoint-wrap .item dl dd span, #dllist .comparisonpoint-wrap .item dl dd span, #dllist-i10 .comparisonpoint-wrap .item dl dd span, #dllist-i8 .comparisonpoint-wrap .item dl dd span, #dllist-movie .comparisonpoint-wrap .item dl dd span, #hikaku .comparisonpoint-wrap .item dl dd span, #kouza .comparisonpoint-wrap .item dl dd span {
  position: relative; }

#bugyo-11 .comparisonpoint-wrap .item dl dd span:before, #bugyo-cloud .comparisonpoint-wrap .item dl dd span:before, #dllist .comparisonpoint-wrap .item dl dd span:before, #dllist-i10 .comparisonpoint-wrap .item dl dd span:before, #dllist-i8 .comparisonpoint-wrap .item dl dd span:before, #dllist-movie .comparisonpoint-wrap .item dl dd span:before, #hikaku .comparisonpoint-wrap .item dl dd span:before, #kouza .comparisonpoint-wrap .item dl dd span:before {
  border-bottom: 3px solid #00a0e9;
  border-left: 3px solid #00a0e9;
  content: "";
  display: inline-block;
  height: 8px;
  left: -25px;
  position: absolute;
  top: 7px;
  transform: rotate(-45deg);
  width: 16px; }

@media screen and (max-width: 640px) {
  #bugyo-11 .comparisonpoint-wrap, #bugyo-cloud .comparisonpoint-wrap, #dllist .comparisonpoint-wrap, #dllist-i10 .comparisonpoint-wrap, #dllist-i8 .comparisonpoint-wrap, #dllist-movie .comparisonpoint-wrap, #hikaku .comparisonpoint-wrap, #kouza .comparisonpoint-wrap {
    margin: 0 auto 20px;
    width: 100%; }
  #bugyo-11 .comparisonpoint-wrap .item, #bugyo-cloud .comparisonpoint-wrap .item, #dllist .comparisonpoint-wrap .item, #dllist-i10 .comparisonpoint-wrap .item, #dllist-i8 .comparisonpoint-wrap .item, #dllist-movie .comparisonpoint-wrap .item, #hikaku .comparisonpoint-wrap .item, #kouza .comparisonpoint-wrap .item {
    padding: 0;
    width: 100%; }
  #bugyo-11 .comparisonpoint-wrap .item dl dt, #bugyo-cloud .comparisonpoint-wrap .item dl dt, #dllist .comparisonpoint-wrap .item dl dt, #dllist-i10 .comparisonpoint-wrap .item dl dt, #dllist-i8 .comparisonpoint-wrap .item dl dt, #dllist-movie .comparisonpoint-wrap .item dl dt, #hikaku .comparisonpoint-wrap .item dl dt, #kouza .comparisonpoint-wrap .item dl dt {
    margin: 20px 0; } }

#bugyo-11 .library-title, #bugyo-cloud .library-title, #dllist .library-title, #dllist-i10 .library-title, #dllist-i8 .library-title, #dllist-movie .library-title, #hikaku .library-title, #kouza .library-title {
  color: #00a0e9;
  font-size: 31px;
  margin: 100px auto 50px; }

@media screen and (max-width: 768px) {
  #bugyo-11 .library-title, #bugyo-cloud .library-title, #dllist .library-title, #dllist-i10 .library-title, #dllist-i8 .library-title, #dllist-movie .library-title, #hikaku .library-title, #kouza .library-title {
    font-size: 20px;
    margin: 60px auto 30px; } }

#bugyo-11 .library-list, #bugyo-cloud .library-list, #dllist .library-list, #dllist-i10 .library-list, #dllist-i8 .library-list, #dllist-movie .library-list, #hikaku .library-list, #kouza .library-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -11px;
  width: calc(100% + 22px); }

#bugyo-11 .library-list .item, #bugyo-cloud .library-list .item, #dllist .library-list .item, #dllist-i10 .library-list .item, #dllist-i8 .library-list .item, #dllist-movie .library-list .item, #hikaku .library-list .item, #kouza .library-list .item {
  display: -ms-flexbox;
  display: flex;
  padding: 0 11px;
  width: 33.33%; }

#bugyo-11 .library-list .item:nth-child(n+4), #bugyo-cloud .library-list .item:nth-child(n+4), #dllist .library-list .item:nth-child(n+4), #dllist-i10 .library-list .item:nth-child(n+4), #dllist-i8 .library-list .item:nth-child(n+4), #dllist-movie .library-list .item:nth-child(n+4), #hikaku .library-list .item:nth-child(n+4), #kouza .library-list .item:nth-child(n+4) {
  margin-top: 40px; }

#bugyo-11 .library-list .item figure, #bugyo-cloud .library-list .item figure, #dllist .library-list .item figure, #dllist-i10 .library-list .item figure, #dllist-i8 .library-list .item figure, #dllist-movie .library-list .item figure, #hikaku .library-list .item figure, #kouza .library-list .item figure {
  margin-right: 13px;
  width: 170px; }

#bugyo-11 .library-list .item figure img, #bugyo-cloud .library-list .item figure img, #dllist .library-list .item figure img, #dllist-i10 .library-list .item figure img, #dllist-i8 .library-list .item figure img, #dllist-movie .library-list .item figure img, #hikaku .library-list .item figure img, #kouza .library-list .item figure img {
  border: 1px solid #ddd; }

#bugyo-11 .library-list .item .detail, #bugyo-cloud .library-list .item .detail, #dllist .library-list .item .detail, #dllist-i10 .library-list .item .detail, #dllist-i8 .library-list .item .detail, #dllist-movie .library-list .item .detail, #hikaku .library-list .item .detail, #kouza .library-list .item .detail {
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 80px;
  position: relative; }

#bugyo-11 .library-list .item .title, #bugyo-cloud .library-list .item .title, #dllist .library-list .item .title, #dllist-i10 .library-list .item .title, #dllist-i8 .library-list .item .title, #dllist-movie .library-list .item .title, #hikaku .library-list .item .title, #kouza .library-list .item .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px; }

#bugyo-11 .library-list .item .subtitle, #bugyo-cloud .library-list .item .subtitle, #dllist .library-list .item .subtitle, #dllist-i10 .library-list .item .subtitle, #dllist-i8 .library-list .item .subtitle, #dllist-movie .library-list .item .subtitle, #hikaku .library-list .item .subtitle, #kouza .library-list .item .subtitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px; }

#bugyo-11 .library-list .item .company, #bugyo-cloud .library-list .item .company, #dllist .library-list .item .company, #dllist-i10 .library-list .item .company, #dllist-i8 .library-list .item .company, #dllist-movie .library-list .item .company, #hikaku .library-list .item .company, #kouza .library-list .item .company {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px; }

#bugyo-11 .library-list .item .c-button-border, #bugyo-11 .library-list .item .c-button-border--long, #bugyo-11 .library-list .item .c-button-border--short, #bugyo-11 .library-list .item .c-button-border--sm, #bugyo-cloud .library-list .item .c-button-border, #bugyo-cloud .library-list .item .c-button-border--long, #bugyo-cloud .library-list .item .c-button-border--short, #bugyo-cloud .library-list .item .c-button-border--sm, #dllist .library-list .item .c-button-border, #dllist .library-list .item .c-button-border--long, #dllist .library-list .item .c-button-border--short, #dllist .library-list .item .c-button-border--sm, #dllist-i10 .library-list .item .c-button-border, #dllist-i10 .library-list .item .c-button-border--long, #dllist-i10 .library-list .item .c-button-border--short, #dllist-i10 .library-list .item .c-button-border--sm, #dllist-i8 .library-list .item .c-button-border, #dllist-i8 .library-list .item .c-button-border--long, #dllist-i8 .library-list .item .c-button-border--short, #dllist-i8 .library-list .item .c-button-border--sm, #dllist-movie .library-list .item .c-button-border, #dllist-movie .library-list .item .c-button-border--long, #dllist-movie .library-list .item .c-button-border--short, #dllist-movie .library-list .item .c-button-border--sm, #hikaku .library-list .item .c-button-border, #hikaku .library-list .item .c-button-border--long, #hikaku .library-list .item .c-button-border--short, #hikaku .library-list .item .c-button-border--sm, #kouza .library-list .item .c-button-border, #kouza .library-list .item .c-button-border--long, #kouza .library-list .item .c-button-border--short, #kouza .library-list .item .c-button-border--sm {
  bottom: 0;
  left: 0;
  position: absolute; }

#bugyo-11 .library-list .item dl, #bugyo-11 .library-list .item p, #bugyo-11 .library-list .item ul, #bugyo-cloud .library-list .item dl, #bugyo-cloud .library-list .item p, #bugyo-cloud .library-list .item ul, #dllist .library-list .item dl, #dllist .library-list .item p, #dllist .library-list .item ul, #dllist-i10 .library-list .item dl, #dllist-i10 .library-list .item p, #dllist-i10 .library-list .item ul, #dllist-i8 .library-list .item dl, #dllist-i8 .library-list .item p, #dllist-i8 .library-list .item ul, #dllist-movie .library-list .item dl, #dllist-movie .library-list .item p, #dllist-movie .library-list .item ul, #hikaku .library-list .item dl, #hikaku .library-list .item p, #hikaku .library-list .item ul, #kouza .library-list .item dl, #kouza .library-list .item p, #kouza .library-list .item ul {
  margin-bottom: 10px; }

#bugyo-11 .library-list .item dl.small, #bugyo-cloud .library-list .item dl.small, #dllist .library-list .item dl.small, #dllist-i10 .library-list .item dl.small, #dllist-i8 .library-list .item dl.small, #dllist-movie .library-list .item dl.small, #hikaku .library-list .item dl.small, #kouza .library-list .item dl.small {
  font-size: 92%; }

#bugyo-11 .library-list .item dl dt, #bugyo-cloud .library-list .item dl dt, #dllist .library-list .item dl dt, #dllist-i10 .library-list .item dl dt, #dllist-i8 .library-list .item dl dt, #dllist-movie .library-list .item dl dt, #hikaku .library-list .item dl dt, #kouza .library-list .item dl dt {
  font-weight: 600; }

#bugyo-11 .library-list .item dl dd, #bugyo-cloud .library-list .item dl dd, #dllist .library-list .item dl dd, #dllist-i10 .library-list .item dl dd, #dllist-i8 .library-list .item dl dd, #dllist-movie .library-list .item dl dd, #hikaku .library-list .item dl dd, #kouza .library-list .item dl dd {
  margin-bottom: 7px; }

#bugyo-11 .library-list .item ul li, #bugyo-cloud .library-list .item ul li, #dllist .library-list .item ul li, #dllist-i10 .library-list .item ul li, #dllist-i8 .library-list .item ul li, #dllist-movie .library-list .item ul li, #hikaku .library-list .item ul li, #kouza .library-list .item ul li {
  margin-bottom: 2px;
  padding-left: 1em;
  text-indent: -1em; }

#bugyo-11 .library-list.picup, #bugyo-cloud .library-list.picup, #dllist .library-list.picup, #dllist-i10 .library-list.picup, #dllist-i8 .library-list.picup, #dllist-movie .library-list.picup, #hikaku .library-list.picup, #kouza .library-list.picup {
  margin-bottom: 60px; }

#bugyo-11 .library-list.picup dl.item, #bugyo-cloud .library-list.picup dl.item, #dllist .library-list.picup dl.item, #dllist-i10 .library-list.picup dl.item, #dllist-i8 .library-list.picup dl.item, #dllist-movie .library-list.picup dl.item, #hikaku .library-list.picup dl.item, #kouza .library-list.picup dl.item {
  -ms-flex-direction: column;
  flex-direction: column; }

#bugyo-11 .library-list.picup dl.item .customers-title, #bugyo-cloud .library-list.picup dl.item .customers-title, #dllist .library-list.picup dl.item .customers-title, #dllist-i10 .library-list.picup dl.item .customers-title, #dllist-i8 .library-list.picup dl.item .customers-title, #dllist-movie .library-list.picup dl.item .customers-title, #hikaku .library-list.picup dl.item .customers-title, #kouza .library-list.picup dl.item .customers-title {
  padding: 2em 0;
  position: relative;
  text-align: center;
  width: 100%; }

#bugyo-11 .library-list.picup dl.item .customers-title span, #bugyo-cloud .library-list.picup dl.item .customers-title span, #dllist .library-list.picup dl.item .customers-title span, #dllist-i10 .library-list.picup dl.item .customers-title span, #dllist-i8 .library-list.picup dl.item .customers-title span, #dllist-movie .library-list.picup dl.item .customers-title span, #hikaku .library-list.picup dl.item .customers-title span, #kouza .library-list.picup dl.item .customers-title span {
  border-radius: 50px;
  display: inline-block;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap; }

#bugyo-11 .library-list.picup dl.item dd, #bugyo-cloud .library-list.picup dl.item dd, #dllist .library-list.picup dl.item dd, #dllist-i10 .library-list.picup dl.item dd, #dllist-i8 .library-list.picup dl.item dd, #dllist-movie .library-list.picup dl.item dd, #hikaku .library-list.picup dl.item dd, #kouza .library-list.picup dl.item dd {
  display: -ms-flexbox;
  display: flex; }

@media screen and (max-width: 768px) {
  #bugyo-11 .library-list, #bugyo-cloud .library-list, #dllist .library-list, #dllist-i10 .library-list, #dllist-i8 .library-list, #dllist-movie .library-list, #hikaku .library-list, #kouza .library-list {
    margin: 0 -15px;
    width: calc(100% + 30px); }
  #bugyo-11 .library-list .item, #bugyo-cloud .library-list .item, #dllist .library-list .item, #dllist-i10 .library-list .item, #dllist-i8 .library-list .item, #dllist-movie .library-list .item, #hikaku .library-list .item, #kouza .library-list .item {
    width: 100%; }
  #bugyo-11 .library-list .item:nth-child(n+2), #bugyo-11 .library-list .item:nth-child(n+4), #bugyo-cloud .library-list .item:nth-child(n+2), #bugyo-cloud .library-list .item:nth-child(n+4), #dllist .library-list .item:nth-child(n+2), #dllist .library-list .item:nth-child(n+4), #dllist-i10 .library-list .item:nth-child(n+2), #dllist-i10 .library-list .item:nth-child(n+4), #dllist-i8 .library-list .item:nth-child(n+2), #dllist-i8 .library-list .item:nth-child(n+4), #dllist-movie .library-list .item:nth-child(n+2), #dllist-movie .library-list .item:nth-child(n+4), #hikaku .library-list .item:nth-child(n+2), #hikaku .library-list .item:nth-child(n+4), #kouza .library-list .item:nth-child(n+2), #kouza .library-list .item:nth-child(n+4) {
    margin-top: 40px; }
  #bugyo-11 .library-list .item figure, #bugyo-cloud .library-list .item figure, #dllist .library-list .item figure, #dllist-i10 .library-list .item figure, #dllist-i8 .library-list .item figure, #dllist-movie .library-list .item figure, #hikaku .library-list .item figure, #kouza .library-list .item figure {
    margin-right: 20px;
    width: 150px; }
  #bugyo-11 .library-list .item .detail, #bugyo-cloud .library-list .item .detail, #dllist .library-list .item .detail, #dllist-i10 .library-list .item .detail, #dllist-i8 .library-list .item .detail, #dllist-movie .library-list .item .detail, #hikaku .library-list .item .detail, #kouza .library-list .item .detail {
    font-size: 13px;
    line-height: 1.5;
    padding-bottom: 60px; }
  #bugyo-11 .library-list .item .title, #bugyo-cloud .library-list .item .title, #dllist .library-list .item .title, #dllist-i10 .library-list .item .title, #dllist-i8 .library-list .item .title, #dllist-movie .library-list .item .title, #hikaku .library-list .item .title, #kouza .library-list .item .title {
    font-size: 16px;
    margin-bottom: 15px; }
  #bugyo-11 .library-list .item .subtitle, #bugyo-cloud .library-list .item .subtitle, #dllist .library-list .item .subtitle, #dllist-i10 .library-list .item .subtitle, #dllist-i8 .library-list .item .subtitle, #dllist-movie .library-list .item .subtitle, #hikaku .library-list .item .subtitle, #kouza .library-list .item .subtitle {
    font-size: 14px;
    margin-bottom: 10px; }
  #bugyo-11 .library-list .item .company, #bugyo-cloud .library-list .item .company, #dllist .library-list .item .company, #dllist-i10 .library-list .item .company, #dllist-i8 .library-list .item .company, #dllist-movie .library-list .item .company, #hikaku .library-list .item .company, #kouza .library-list .item .company {
    font-size: 15px;
    margin-bottom: 8px; }
  #bugyo-11 .library-list .item dl, #bugyo-11 .library-list .item p, #bugyo-11 .library-list .item ul, #bugyo-cloud .library-list .item dl, #bugyo-cloud .library-list .item p, #bugyo-cloud .library-list .item ul, #dllist .library-list .item dl, #dllist .library-list .item p, #dllist .library-list .item ul, #dllist-i10 .library-list .item dl, #dllist-i10 .library-list .item p, #dllist-i10 .library-list .item ul, #dllist-i8 .library-list .item dl, #dllist-i8 .library-list .item p, #dllist-i8 .library-list .item ul, #dllist-movie .library-list .item dl, #dllist-movie .library-list .item p, #dllist-movie .library-list .item ul, #hikaku .library-list .item dl, #hikaku .library-list .item p, #hikaku .library-list .item ul, #kouza .library-list .item dl, #kouza .library-list .item p, #kouza .library-list .item ul {
    margin-bottom: 8px; }
  #bugyo-11 .library-list .item dl dd, #bugyo-cloud .library-list .item dl dd, #dllist .library-list .item dl dd, #dllist-i10 .library-list .item dl dd, #dllist-i8 .library-list .item dl dd, #dllist-movie .library-list .item dl dd, #hikaku .library-list .item dl dd, #kouza .library-list .item dl dd {
    margin-bottom: 5px; } }

#dllist .library-list .item .c-button, #dllist .library-list .item .c-button--long, #dllist .library-list .item .c-button--middle, #dllist .library-list .item .c-button--short, #dllist .library-list .item .c-button--sm, #dllist-movie .library-list .item .c-button, #dllist-movie .library-list .item .c-button--long, #dllist-movie .library-list .item .c-button--middle, #dllist-movie .library-list .item .c-button--short, #dllist-movie .library-list .item .c-button--sm {
  bottom: 0;
  left: 0;
  position: absolute; }

#dllist .contents-header .header-inner, #dllist-movie .contents-header .header-inner {
  margin: auto;
  max-width: 1220px;
  padding: 100px 0; }

#dllist .local-navigation02, #dllist-movie .local-navigation02 {
  border-left: 1px solid #333;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }

#dllist .local-navigation02 > li, #dllist-movie .local-navigation02 > li {
  -ms-flex-positive: 1;
  border-right: 1px solid #333;
  display: block;
  flex-grow: 1;
  text-align: center;
  white-space: nowrap; }

#dllist .local-navigation02 > li a, #dllist-movie .local-navigation02 > li a {
  color: #00a0e9;
  display: block;
  padding: 5px 10px;
  text-align: center; }

#dllist .local-navigation02 > li a span, #dllist-movie .local-navigation02 > li a span {
  color: #00a0e9;
  text-decoration: underline;
  transition: opacity 0.3s, border 0.3s; }

#dllist .local-navigation02 > li a span:before, #dllist-movie .local-navigation02 > li a span:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/arrow_bottom_border.svg) no-repeat 0 0/contain;
  color: #17a0e3;
  content: "";
  display: inline-block;
  height: 16px;
  margin: auto 6px auto 0;
  width: 15px; }

#dllist .local-navigation02 > li a:hover span, #dllist-movie .local-navigation02 > li a:hover span {
  opacity: 0.7;
  text-decoration: none; }

#dllist .local-navigation02 > li ul, #dllist-movie .local-navigation02 > li ul {
  -ms-flex-pack: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0; }

#dllist .local-navigation02 > li ul li, #dllist-movie .local-navigation02 > li ul li {
  margin: 10px 8px; }

#dllist .local-navigation02 > li ul a, #dllist-movie .local-navigation02 > li ul a {
  font-size: 14px;
  padding: 0; }

#dllist .local-navigation02 > li ul a span:before, #dllist-movie .local-navigation02 > li ul a span:before {
  height: 14px;
  width: 13px; }

@media screen and (max-width: 768px) {
  #dllist .contents-header .header-inner, #dllist-movie .contents-header .header-inner {
    background: none;
    padding: 40px 24px; }
  #dllist .local-navigation02, #dllist-movie .local-navigation02 {
    background: #eee;
    border: none;
    border-radius: 6px;
    display: block;
    padding: 15px; }
  #dllist .local-navigation02 > li, #dllist-movie .local-navigation02 > li {
    border: none;
    display: block;
    margin: 3px auto;
    text-align: left;
    width: auto; }
  #dllist .local-navigation02 > li:nth-child(n+2), #dllist-movie .local-navigation02 > li:nth-child(n+2) {
    border-top: 1px solid rgba(153, 153, 153, 0.3);
    margin-top: 10px;
    padding-top: 10px; }
  #dllist .local-navigation02 > li a, #dllist-movie .local-navigation02 > li a {
    display: block;
    padding: 5px 10px;
    white-space: normal; }
  #dllist .local-navigation02 > li a span:after, #dllist-movie .local-navigation02 > li a span:after {
    font-size: 12px; }
  #dllist .local-navigation02 > li ul, #dllist-movie .local-navigation02 > li ul {
    margin-top: 0; }
  #dllist .local-navigation02 > li ul li, #dllist-movie .local-navigation02 > li ul li {
    margin: 8px 6px; }
  #dllist .local-navigation02 > li ul a, #dllist-movie .local-navigation02 > li ul a {
    font-size: 12px; }
  #dllist .local-navigation02 > li ul a span:after, #dllist-movie .local-navigation02 > li ul a span:after {
    font-size: 10px; } }

#dllist a#con01-01, #dllist a#con01-02, #dllist a#con01-03, #dllist a#con02-01, #dllist a#con02-02, #dllist a#con02-03, #dllist-movie a#con01-01, #dllist-movie a#con01-02, #dllist-movie a#con01-03, #dllist-movie a#con02-01, #dllist-movie a#con02-02, #dllist-movie a#con02-03 {
  margin-top: -100px;
  padding-top: 100px; }

@media screen and (max-width: 768px) {
  #dllist a#con01-01, #dllist a#con01-02, #dllist a#con01-03, #dllist a#con02-01, #dllist a#con02-02, #dllist a#con02-03, #dllist-movie a#con01-01, #dllist-movie a#con01-02, #dllist-movie a#con01-03, #dllist-movie a#con02-01, #dllist-movie a#con02-02, #dllist-movie a#con02-03 {
    margin-top: 0;
    padding-top: 0; } }

#dllist-i10 .contents-header .header-inner, #dllist-i8 .contents-header .header-inner, #dllist-movie .contents-header .header-inner, #kouza .contents-header .header-inner {
  background: none;
  margin: auto;
  max-width: 1220px;
  padding: 100px 0;
  position: relative; }

#dllist-i10 .contents-header .header-inner span, #dllist-i8 .contents-header .header-inner span, #dllist-movie .contents-header .header-inner span, #kouza .contents-header .header-inner span {
  bottom: 15%;
  font-size: 12px;
  left: 0;
  line-height: 1.7;
  position: absolute; }

@media screen and (max-width: 768px) {
  #dllist-i10 .contents-header .header-inner, #dllist-i8 .contents-header .header-inner, #dllist-movie .contents-header .header-inner, #kouza .contents-header .header-inner {
    background: #00a0e9 url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/library/bg_hero.png) no-repeat 97% 95%/auto 35px;
    padding: 50px 24px; }
  #dllist-i10 .contents-header span, #dllist-i8 .contents-header span, #dllist-movie .contents-header span, #kouza .contents-header span {
    bottom: 0;
    font-size: 10px;
    position: relative;
    top: 1.5em; } }

#dllist-i10 .header .header_navigation .global li.current, #dllist-i8 .header .header_navigation .global li.current, #dllist-movie .header .header_navigation .global li.current, #kouza .header .header_navigation .global li.current {
  font-weight: 400; }

#dllist-i10 .library-title, #dllist-i8 .library-title, #dllist-movie .library-title, #kouza .library-title {
  margin: 0 auto 40px; }

#dllist-i10 .library-title--item, #dllist-i8 .library-title--item, #dllist-movie .library-title--item, #kouza .library-title--item {
  color: #00a0e9;
  font-size: 20px;
  margin: 60px auto 0; }

@media screen and (max-width: 768px) {
  #dllist-i10 .library-title, #dllist-i8 .library-title, #dllist-movie .library-title, #kouza .library-title {
    margin: 0 auto 20px; } }

#dllist-i10 .resson-button, #dllist-i8 .resson-button, #dllist-movie .resson-button, #kouza .resson-button {
  background: #e76f02;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 80px auto;
  max-width: 480px;
  padding: 10px 0;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%; }

#dllist-i10 .resson-button span, #dllist-i8 .resson-button span, #dllist-movie .resson-button span, #kouza .resson-button span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 92%;
  background-size: 30px auto;
  display: inline-block;
  padding: 0 70px; }

#dllist-i10 .resson-button span small, #dllist-i8 .resson-button span small, #dllist-movie .resson-button span small, #kouza .resson-button span small {
  display: block;
  font-size: 12px;
  font-weight: 600; }

#dllist-i10 .resson-button:hover, #dllist-i8 .resson-button:hover, #dllist-movie .resson-button:hover, #kouza .resson-button:hover {
  opacity: 0.7; }

@media screen and (max-width: 768px) {
  #dllist-i10 .resson-button, #dllist-i8 .resson-button, #dllist-movie .resson-button, #kouza .resson-button {
    margin: 30px auto; } }

#gyomu .hero-inner {
  background-position: 100% 50%;
  background-repeat: no-repeat;
  color: #fff;
  margin: auto;
  max-width: 1220px;
  padding: 45px 0;
  position: relative; }

#gyomu .hero-title {
  font-size: 43px; }

#gyomu .hero-lead {
  font-size: 26px;
  margin-bottom: 15px;
  vertical-align: bottom; }

#gyomu .hero-lead img {
  vertical-align: bottom;
  width: 270px; }

#gyomu .hero .c-button-wrap {
  margin-top: 50px; }

#gyomu .hero .c-button, #gyomu .hero .c-button--long, #gyomu .hero .c-button--middle, #gyomu .hero .c-button--short, #gyomu .hero .c-button--sm {
  display: inline-block;
  margin-right: 15px;
  min-width: 250px;
  padding: 10px 25px;
  width: auto; }

#gyomu .hero .btn-checksheet {
  bottom: 50px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.65);
  display: block;
  position: absolute;
  right: 0;
  transition: box-shadow 0.2s; }

#gyomu .hero .btn-checksheet:hover {
  box-shadow: none; }

@media screen and (max-width: 768px) {
  #gyomu .hero-inner {
    background-position: 98% 10%;
    background-size: 100px auto;
    padding: 30px 24px; }
  #gyomu .hero-title {
    font-size: 20px;
    line-height: 1.3; }
  #gyomu .hero-lead {
    font-size: 18px;
    margin-bottom: 10px; }
  #gyomu .hero-lead img {
    width: 140px; }
  #gyomu .hero .c-button-wrap {
    margin-top: 30px;
    text-align: left; }
  #gyomu .hero .c-button, #gyomu .hero .c-button--long, #gyomu .hero .c-button--middle, #gyomu .hero .c-button--short, #gyomu .hero .c-button--sm {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
    min-width: 230px;
    padding: 8px 15px; }
  #gyomu .hero .btn-checksheet {
    bottom: 0;
    box-shadow: none;
    margin: 0 auto;
    position: relative;
    text-align: center; } }

#gyomu .about {
  border-bottom: 1px solid #ddd;
  padding: 75px 0 100px;
  text-align: center; }

#gyomu .about-inner {
  margin: auto;
  max-width: 1220px; }

#gyomu .about-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  position: relative;
  text-align: center; }

#gyomu .about-title .large {
  font-size: 42px; }

#gyomu .about-title:after {
  background: #ac257d;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

@media screen and (max-width: 768px) {
  #gyomu .about-title {
    font-size: 24px;
    margin: 0 auto 32px;
    padding: 0 0 20px; }
  #gyomu .about-title:after {
    width: 30px; } }

#gyomu .about-tab {
  margin: 100px auto; }

#gyomu .about-tab .tab-list {
  -ms-flex-pack: justify;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; }

#gyomu .about-tab .tab-list > * {
  -ms-flex-pack: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 22px;
  justify-content: center;
  line-height: 1.4;
  padding: 14px 10px 13px;
  transition: opacity 0.3s, background 0.3s; }

#gyomu .about-tab .tab-list > :hover {
  opacity: 0.7; }

#gyomu .about-tab .tab-list > :not(:last-child) {
  border-right: 1px solid #ccc; }

#gyomu .about-tab .tab-list > * small {
  display: block;
  font-size: 14px; }

#gyomu .about-tab .tab-list > .js-current {
  background: #ac257d;
  color: #fff; }

#gyomu .about-tab .tab-list > .js-current:hover {
  opacity: 1; }

#gyomu .about-tab .tab-contents {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc; }

#gyomu .about-tab .tab-contents .item {
  display: none;
  padding: 50px 60px 70px; }

#gyomu .about-tab .tab-contents .item.js-current {
  display: block; }

#gyomu .about-tab .tab-contents .top {
  -ms-flex-pack: start;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 0 30px;
  text-align: left; }

#gyomu .about-tab .tab-contents .top figure {
  margin-right: 40px; }

#gyomu .about-tab .tab-contents .top figure.reccomend {
  position: relative; }

#gyomu .about-tab .tab-contents .top figure.reccomend:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/keiri/icon_reccomend.png) no-repeat 0 0/contain;
  content: "";
  display: block;
  height: 66px;
  left: -30px;
  position: absolute;
  top: 0;
  width: 66px; }

#gyomu .about-tab .tab-contents .top .detail {
  -ms-flex: 1;
  flex: 1; }

#gyomu .about-tab .tab-contents .top .time {
  color: #333;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  width: 250px; }

#gyomu .about-tab .tab-contents .top .time strong {
  color: #00a0e9;
  font-size: 50px; }

#gyomu .about-tab .tab-contents .top .title {
  -ms-flex-align: end;
  -ms-flex-pack: justify;
  align-items: flex-end;
  border-bottom: 2px dotted #ccc;
  display: -ms-flexbox;
  display: flex;
  font-size: 24px;
  font-weight: 500;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 20px; }

#gyomu .about-tab .tab-contents .top .title span:not([class]) {
  -ms-flex: 1;
  flex: 1;
  margin-right: 10px; }

#gyomu .about-tab .tab-contents .top p {
  line-height: 1.5; }

#gyomu .about-tab .tab-contents .bottom {
  padding: 50px 45px 0; }

#gyomu .about-tab .tab-contents .bottom .before-after {
  -ms-flex-pack: justify;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 100%; }

#gyomu .about-tab .tab-contents .bottom .before-after .before {
  position: relative; }

#gyomu .about-tab .tab-contents .bottom .before-after .before:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/keiri/arrow_ba.png) no-repeat 0 0/contain;
  bottom: 0;
  content: "";
  display: block;
  height: 67px;
  margin: auto;
  position: absolute;
  right: -123px;
  top: 0;
  width: 78px; }

#gyomu .about-tab .tab-contents .bottom .before-after figure {
  width: 420px; }

#gyomu .about-tab .tab-contents .bottom .lead {
  font-size: 24px;
  font-weight: 500;
  margin: 120px auto 40px; }

#gyomu .about .youtube {
  margin: auto;
  max-width: 590px;
  position: relative; }

#gyomu .about .image {
  margin: auto; }

#gyomu .about .bnr {
  margin: 120px auto 0; }

#gyomu .about .bnr a {
  display: block;
  transition: opacity 0.3s; }

#gyomu .about .bnr a:hover {
  opacity: 0.7; }

@media screen and (max-width: 768px) {
  #gyomu .about {
    padding: 50px 24px; }
  #gyomu .about-title {
    font-size: 24px;
    margin: 0 auto 32px;
    padding: 0 0 20px; }
  #gyomu .about-title:after {
    width: 30px; }
  #gyomu .about-tab {
    margin: 40px auto; }
  #gyomu .about-tab .tab-list {
    -ms-flex-pack: start;
    border: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 20px; }
  #gyomu .about-tab .tab-list > * {
    border: 1px solid #ccc;
    -ms-flex: none;
    flex: none;
    font-size: 15px;
    padding: 12px 10px 10px;
    width: 50%; }
  #gyomu .about-tab .tab-list > :nth-child(2n) {
    border-left: none; }
  #gyomu .about-tab .tab-list > :nth-child(n+3) {
    margin-top: -1px; }
  #gyomu .about-tab .tab-list > * small {
    font-size: 11px; }
  #gyomu .about-tab .tab-contents {
    border-top: 1px solid #ccc; }
  #gyomu .about-tab .tab-contents .item {
    padding: 24px 24px 30px; }
  #gyomu .about-tab .tab-contents .top {
    display: block;
    padding: 0 0 20px; }
  #gyomu .about-tab .tab-contents .top figure {
    margin: 0 auto 20px;
    max-width: 120px; }
  #gyomu .about-tab .tab-contents .top figure.reccomend {
    position: relative; }
  #gyomu .about-tab .tab-contents .top figure.reccomend:before {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/keiri/icon_reccomend.png) no-repeat 0 0/contain;
    height: 50px;
    left: -30px;
    position: absolute;
    top: 0;
    width: 50px; }
  #gyomu .about-tab .tab-contents .top .detail {
    width: 100%; }
  #gyomu .about-tab .tab-contents .top .time {
    display: block;
    font-size: 18px;
    margin: 10px 0 0;
    text-align: left; }
  #gyomu .about-tab .tab-contents .top .time strong {
    font-size: 30px; }
  #gyomu .about-tab .tab-contents .top .title {
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 15px; }
  #gyomu .about-tab .tab-contents .bottom {
    padding: 30px 0 0; }
  #gyomu .about-tab .tab-contents .bottom .before-after {
    display: block; }
  #gyomu .about-tab .tab-contents .bottom .before-after .before {
    margin-bottom: 80px; }
  #gyomu .about-tab .tab-contents .bottom .before-after .before:after {
    bottom: -57px;
    height: 33px;
    left: 0;
    right: 0;
    top: auto;
    transform: rotate(90deg);
    width: 39px; }
  #gyomu .about-tab .tab-contents .bottom .before-after figure {
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    width: 100%; }
  #gyomu .about-tab .tab-contents .bottom .lead {
    font-size: 16px;
    margin: 60px auto 24px; }
  #gyomu .about .bnr {
    margin: 60px auto 0; } }

#gyomu .voice {
  border-bottom: 1px solid #ccc;
  padding: 95px 0 60px;
  text-align: center; }

#gyomu .voice-inner {
  margin: auto;
  max-width: 1220px; }

#gyomu .voice-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  position: relative;
  text-align: center; }

#gyomu .voice-title .large {
  font-size: 42px; }

#gyomu .voice-title:after {
  background: #ac257d;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

#gyomu .voice-list {
  display: -ms-flexbox;
  display: flex;
  margin: 80px -40px 0;
  width: calc(100% + 80px); }

#gyomu .voice-list .item {
  -ms-flex: 1;
  flex: 1;
  padding: 0 40px;
  text-align: left; }

#gyomu .voice-list .item figure {
  margin-bottom: 30px;
  text-align: center; }

#gyomu .voice-list .item ul {
  margin-bottom: 20px; }

#gyomu .voice-list .item ul li {
  border: 1px solid #333;
  display: inline-block;
  font-size: 14px;
  margin-right: 5px;
  padding: 7px 20px; }

#gyomu .voice-list .item ul.tag {
  margin-bottom: 30px; }

#gyomu .voice-list .item .desc {
  font-size: 22px;
  font-weight: 600; }

#gyomu .voice-list .item .company, #gyomu .voice-list .item .desc {
  line-height: 1.5;
  margin-bottom: 20px; }

@media screen and (min-width: 769px) {
  #gyomu .voice-list .item.center {
    text-align: center !important; } }

@media screen and (max-width: 768px) {
  #gyomu .voice {
    padding: 40px 0 30px; }
  #gyomu .voice-title {
    font-size: 24px;
    margin: 0 auto 32px;
    padding: 0 24px 20px; }
  #gyomu .voice-title:after {
    width: 30px; }
  #gyomu .voice-list {
    display: block;
    margin: 40px auto 0;
    width: 100%; }
  #gyomu .voice-list .item {
    margin: 0 auto 40px;
    max-width: 350px; }
  #gyomu .voice-list .item figure {
    margin-bottom: 30px;
    text-align: center; }
  #gyomu .voice-list .item ul {
    margin-bottom: 12px; }
  #gyomu .voice-list .item ul li {
    font-size: 12px;
    padding: 5px 12px; }
  #gyomu .voice-list .item .desc {
    font-size: 18px;
    margin-bottom: 20px; } }

#gyomu.keiri .hero {
  background-color: #ac257d; }

#gyomu.keiri .hero-inner {
  background-image: none; }

#gyomu.keiri .utc2021 .about-title, #gyomu.keiri .utc2021 .voice-title {
  color: #ac257d; }

#gyomu.keiri .about-tab .tab-list > .js-current, #gyomu.keiri .about-title:after, #gyomu.keiri .voice-title:after {
  background: #ac257d; }

#gyomu.keiri .about-tab .tab-contents .bottom .lead, #gyomu.keiri .about-tab .tab-contents .top .title {
  color: #ac257d; }

#gyomu.somu .hero {
  background-color: #006fab; }

#gyomu.somu .hero-inner {
  background-image: none; }

#gyomu.somu .utc2021 .about-title, #gyomu.somu .utc2021 .voice-title {
  color: #006fab; }

#gyomu.somu .about-tab .tab-list > .js-current, #gyomu.somu .about-title:after, #gyomu.somu .voice-title:after {
  background: #006fab; }

#gyomu.somu .about-tab .tab-contents .bottom .lead, #gyomu.somu .about-tab .tab-contents .top .title {
  color: #006fab; }

#gyomu.hanbai .hero {
  background-color: #2b6032; }

#gyomu.hanbai .hero-inner {
  background-image: none; }

#gyomu.hanbai .utc2021 .about-title, #gyomu.hanbai .utc2021 .voice-title {
  color: #2b6032; }

#gyomu.hanbai .about-tab .tab-list > .js-current, #gyomu.hanbai .about-title:after, #gyomu.hanbai .voice-title:after {
  background: #2b6032; }

#gyomu.hanbai .about-tab .tab-contents .bottom .lead, #gyomu.hanbai .about-tab .tab-contents .top .title {
  color: #2b6032; }

#gyomu.case .l-contents {
  padding-top: 102px; }

#gyomu.case .youtube {
  margin: 0 auto; }

#gyomu.case .youtube-inner {
  height: auto;
  margin: 0 auto;
  width: 370px; }

#gyomu.case .youtube-inner iframe {
  background: #000;
  border-radius: 5px;
  box-shadow: 0 2px 10px 0 rgba(30, 30, 30, 0.6);
  height: 100%;
  overflow: hidden;
  width: 100%; }

#gyomu.case .hero {
  background-color: #f6f6f6; }

#gyomu.case .hero-title {
  color: #00a0e9;
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 15px; }

#gyomu.case .hero-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; }

#gyomu.case .hero-list .item {
  margin: 0;
  padding: 0;
  position: relative; }

#gyomu.case .hero-list .item:first-child {
  padding-right: 40px; }

#gyomu.case .hero-list .item .company dt {
  color: #333;
  margin-bottom: 20px; }

#gyomu.case .hero-list .item .company dd {
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  align-items: center;
  color: #000;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 33.33333%; }

#gyomu.case .hero-list .item .company dd span {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  min-width: 8em; }

#gyomu.case .hero-list .item .company dd figure img {
  border: 0;
  border-radius: 100px;
  height: auto;
  max-width: 100px;
  overflow: hidden; }

#gyomu.case .hero-list .item .company-block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap; }

#gyomu.case .hero-list .item .company-block > .company {
  width: 32%; }

#gyomu.case .hero-list .item .company-block > .company:first-child, #gyomu.case .hero-list .item .company-block > .company:nth-child(2) {
  margin-right: 2%; }

#gyomu.case .hero-list .item .company-block > .company dd span {
  min-width: 10em; }

#gyomu.case .hero-list .item .company-block > .company dd figure img {
  max-width: 80px; }

#gyomu.case .hero-list .item .company-block .company + .company {
  border-left: 1px dotted #dcdcdc;
  padding-left: 1em; }

#gyomu.case .hero-list .item .tag {
  left: -15px;
  margin: 20px 0 0;
  position: relative; }

#gyomu.case .hero-list .item .tag li {
  border: 1px solid #333;
  border-radius: 25px;
  color: #333;
  display: inline-block;
  font-size: 14px;
  padding: 10px 20px;
  text-align: center; }

#gyomu.case .hero-list .item .tag li:not(:last-child) {
  margin-right: 20px; }

#gyomu.case .hero .c-button-wrap {
  margin-top: 25px; }

#gyomu.case .hero .c-button-wrap .c-button-border, #gyomu.case .hero .c-button-wrap .c-button-border--long, #gyomu.case .hero .c-button-wrap .c-button-border--short, #gyomu.case .hero .c-button-wrap .c-button-border--sm {
  background-color: #fff;
  border-color: #fff;
  border-radius: 0;
  color: #006fab;
  font-size: 18px;
  margin: 0 auto;
  min-width: 100%;
  transition: background 0.3s; }

#gyomu.case .hero .c-button-wrap .c-button-border--long:hover, #gyomu.case .hero .c-button-wrap .c-button-border--short:hover, #gyomu.case .hero .c-button-wrap .c-button-border--sm:hover, #gyomu.case .hero .c-button-wrap .c-button-border:hover {
  background: #046392;
  border-color: #046392;
  color: #fff; }

#gyomu.case .highlight-inner {
  margin: auto;
  max-width: 1010px;
  padding: 70px 0; }

#gyomu.case .highlight-title {
  color: #333;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 25px; }

#gyomu.case .highlight-list {
  display: -ms-flexbox;
  display: flex; }

#gyomu.case .highlight-list .item {
  width: 24.25%; }

#gyomu.case .highlight-list .item a {
  border: 1px solid #ccc;
  border-radius: 10px;
  color: #000;
  display: block;
  line-height: 1.4;
  padding: 25px 20px 40px;
  transition: background 0.3s; }

#gyomu.case .highlight-list .item a em {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px; }

#gyomu.case .highlight-list .item a span {
  font-size: 17px;
  font-weight: 500; }

#gyomu.case .highlight-list .item a:hover {
  background: #f8f8f8; }

#gyomu.case .highlight-list .item:not(:last-child) {
  margin-right: 1%; }

#gyomu.case .introduction-inner {
  line-height: 1.8;
  margin: auto;
  max-width: 1010px; }

#gyomu.case .introduction-list .item {
  margin-bottom: -22px;
  padding-top: 102px; }

#gyomu.case .introduction-list .item h2 {
  margin-bottom: 40px;
  position: relative; }

#gyomu.case .introduction-list .item h2 em {
  color: #333;
  display: inline-block;
  font-size: 20px;
  left: -0.5em;
  position: relative; }

#gyomu.case .introduction-list .item h2 span {
  color: #00a0e9;
  display: block;
  font-size: 28px;
  font-weight: 500; }

#gyomu.case .introduction-list .item:first-child {
  margin-top: -92px; }

#gyomu.case .introduction-list .item figure {
  margin-top: 80px; }

#gyomu.case .introduction-list .item p {
  margin-bottom: 25px; }

#gyomu.case .introduction .youtube {
  margin: 100px auto 0; }

#gyomu.case .introduction .resson-button {
  background: #00a0e9;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  margin: 80px auto 20px;
  max-width: 670px;
  padding: 20px 0;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%; }

#gyomu.case .introduction .resson-button span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 92%;
  background-size: 24px auto;
  display: inline-block;
  padding: 0 70px; }

#gyomu.case .introduction .resson-button:hover {
  opacity: 0.7; }

#gyomu.case .introduction .resson-button.white {
  background: #fff;
  border: 2px solid #00a0e9;
  margin: 0 auto 80px; }

#gyomu.case .introduction .resson-button.white span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download02.png) no-repeat 92%/24px auto;
  color: #00a0e9; }

#gyomu.case .customer-inner {
  background-color: #f6f6f6;
  margin: auto;
  max-width: 1010px;
  padding: 40px 65px; }

#gyomu.case .customer-item {
  display: -ms-flexbox;
  display: flex; }

#gyomu.case .customer-name {
  margin-left: 65px; }

#gyomu.case .customer-name li {
  line-height: 2; }

#gyomu.case .customer-name li em {
  color: #666;
  display: inline-block;
  width: 6em; }

#gyomu.case .customer-name li span {
  display: inline-block;
  margin-left: 1em; }

@media screen and (max-width: 768px) {
  #gyomu.case .l-contents {
    padding-top: 65px; }
  #gyomu.case .youtube {
    margin: 20px auto; }
  #gyomu.case .youtube-inner {
    width: 100%; }
  #gyomu.case .youtube-inner iframe {
    height: 100%;
    width: 100%; }
  #gyomu.case .hero-title {
    font-size: 22px; }
  #gyomu.case .hero-list {
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 0; }
  #gyomu.case .hero-list .item {
    width: 100%; }
  #gyomu.case .hero-list .item:first-child {
    padding-right: 0; }
  #gyomu.case .hero-list .item .company dt {
    margin-bottom: 20px; }
  #gyomu.case .hero-list .item .company dd span {
    font-size: 12px; }
  #gyomu.case .hero-list .item .company dd span:not(:last-child) {
    margin-right: 30px; }
  #gyomu.case .hero-list .item .company dd figure img {
    max-width: 80px; }
  #gyomu.case .hero-list .item .tag {
    left: 0;
    margin: 20px 0 0; }
  #gyomu.case .hero-list .item .tag li {
    font-size: 12px;
    padding: 5px 10px; }
  #gyomu.case .hero-list .item .tag li:not(:last-child) {
    margin-right: 10px; }
  #gyomu.case .hero .c-button-wrap {
    margin-top: 0; }
  #gyomu.case .hero .c-button-wrap .c-button-border, #gyomu.case .hero .c-button-wrap .c-button-border--long, #gyomu.case .hero .c-button-wrap .c-button-border--short, #gyomu.case .hero .c-button-wrap .c-button-border--sm {
    font-size: 16px !important;
    padding: 12px 24px 12px 0; }
  #gyomu.case .highlight-inner {
    padding: 30px 24px; }
  #gyomu.case .highlight-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  #gyomu.case .highlight-list .item {
    width: 100%; }
  #gyomu.case .highlight-list .item a {
    padding: 10px 20px;
    position: relative; }
  #gyomu.case .highlight-list .item a:after {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/arrow_about.png) no-repeat 100%/20px auto;
    content: "";
    display: block;
    height: 34px;
    position: absolute;
    right: 10px;
    top: 25%;
    transform: rotate(90deg);
    width: 20px; }
  #gyomu.case .highlight-list .item:not(:last-child) {
    margin-bottom: 10px;
    margin-right: 0; }
  #gyomu.case .introduction-inner {
    padding: 30px 24px; }
  #gyomu.case .introduction-list .item {
    margin-bottom: 0;
    padding-top: 60px; }
  #gyomu.case .introduction-list .item h2 {
    margin-bottom: 20px; }
  #gyomu.case .introduction-list .item h2 span {
    font-size: 22px;
    line-height: 1.4; }
  #gyomu.case .introduction-list .item:first-child {
    margin-top: -60px; }
  #gyomu.case .introduction-list .item figure {
    margin-top: 40px; }
  #gyomu.case .introduction .youtube {
    margin: 50px auto 0; }
  #gyomu.case .introduction .youtube-inner {
    height: auto; }
  #gyomu.case .introduction .resson-button {
    border-radius: 50px;
    font-size: 14px;
    margin: 20px auto; }
  #gyomu.case .introduction .resson-button span {
    background-position: 100%;
    background-size: 18px auto;
    padding: 0 20px 0 0; }
  #gyomu.case .introduction .resson-button.white {
    margin-bottom: 10px; }
  #gyomu.case .introduction .resson-button.white span {
    background-position: 100%;
    background-size: 18px auto; }
  #gyomu.case .customer-inner {
    padding: 30px 24px; }
  #gyomu.case .customer-item {
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; }
  #gyomu.case .customer-item figure {
    text-align: center; }
  #gyomu.case .customer-name {
    margin: 30px 0 0; }
  #gyomu.case .customer-name li {
    border-bottom: 1px dotted #ccc;
    display: -ms-flexbox;
    display: flex; }
  #gyomu.case .customer-name li em {
    color: #00a0e9;
    width: 30%; }
  #gyomu.case .customer-name li span {
    margin-left: 0; } }

@media screen and (max-width: 640px) {
  #gyomu.case .hero-list .item .company-block {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  #gyomu.case .hero-list .item .company-block > .company {
    width: 100%; }
  #gyomu.case .hero-list .item .company-block > .company dd span {
    min-width: 6em; }
  #gyomu.case .hero-list .item .company-block > .company dd figure img {
    max-width: 60px; }
  #gyomu.case .hero-list .item .company-block .company + .company {
    border-left: none;
    border-top: 1px dotted #dcdcdc;
    margin-top: 10px;
    padding-left: 0;
    padding-top: 10px; } }

ul.check > li {
  padding-left: 30px;
  position: relative; }

ul.check > li:before {
  background: url(//2684654.fs1.hubspotusercontent-na1.net/hubfs/2684654/360/images/common/form_ic_cb_checked.svg) no-repeat 0 0/20px auto;
  border-radius: 0;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: 0.35em;
  width: 20px; }

@media screen and (max-width: 768px) {
  ul.check > li:before {
    background: url(//2684654.fs1.hubspotusercontent-na1.net/hubfs/2684654/360/images/common/form_ic_cb_checked.svg) no-repeat 0 0/16px auto;
    height: 16px;
    left: 3px;
    top: 0.4em;
    width: 16px; } }

.dllist a[id*=con], .faq a[id*=con] {
  display: block;
  height: 1px; }

.library-title + a[id*=con] + .library__h3__title {
  margin-top: 0; }

#sem {
  color: #333;
  line-height: 1.5; }

#sem .sem-list-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

#sem .hero {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/sem/bg_hero.png?aaa) no-repeat 50% 50%/cover;
  height: 500px;
  overflow: hidden;
  position: relative; }

#sem .hero .bg-control {
  background: rgba(255, 255, 255, 0.75);
  height: 500px;
  padding: 40px 0 30px; }

#sem .hero .bg-control:after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/sem/img_hero.png?aa) no-repeat 0 0/contain;
  bottom: 0;
  content: "";
  display: block;
  height: 700px;
  left: 705px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 150px;
  width: 593px; }

#sem .hero .hero-inner {
  margin: auto;
  max-width: 1220px;
  position: relative;
  text-align: left;
  z-index: 1; }

#sem .hero .hero-logo {
  margin: 0 auto 15px; }

#sem .hero .hero-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 auto 30px; }

#sem .hero .hero-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 auto 35px; }

#sem .hero .hero-desc p {
  margin-bottom: 0.5em; }

#sem .hero .hero-desc p.constitution {
  margin-left: 6em; }

#sem .hero .hero-desc p.constitution em:first-child {
  color: #ac257d; }

#sem .hero .hero-desc p.constitution em:nth-child(2) {
  color: #006fab; }

#sem .hero .hero-desc p.constitution em:nth-child(3) {
  color: #090; }

#sem .hero .c-button--long:after, #sem .hero .c-button--middle:after, #sem .hero .c-button--short:after, #sem .hero .c-button--sm:after, #sem .hero .c-button:after {
  content: "";
  height: 10px;
  margin-left: 5px;
  margin-top: 3px;
  transform: rotate(45deg) translate(50%);
  width: 10px; }

#sem .sem-title {
  font-size: 30px;
  text-align: center; }

#sem .resolution-inner {
  margin: auto;
  max-width: 1220px; }

#sem .resolution .sem-title {
  margin: 85px auto 40px; }

#sem .resolution .sem-title--read {
  margin-bottom: 80px;
  text-align: center; }

#sem .resolution .sem-list-wrap .sem-list {
  text-align: center;
  width: 275px; }

#sem .resolution .sem-list-wrap .sem-list:not(:nth-child(4n)) {
  margin-right: 40px; }

#sem .resolution .sem-list-wrap .sem-list:nth-child(n+5) {
  margin-top: 60px; }

#sem .resolution .sem-list-wrap .sem-list dt {
  background-color: #f2f3f5;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  height: 275px;
  position: relative; }

#sem .resolution .sem-list-wrap .sem-list dt span {
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%; }

#sem .resolution .sem-list-wrap .sem-list dt em {
  color: #f83f3f; }

#sem .resolution .sem-list-wrap .sem-list dd {
  color: #00a0e9;
  font-size: 16px;
  margin-top: 25px; }

#sem .what-inner {
  margin: auto;
  max-width: 1220px; }

#sem .what .color-block {
  background-color: #00a0e9;
  z-index: 1; }

#sem .what .sem-title {
  margin: 70px auto -1rem; }

#sem .what .sem-title figure {
  margin: 0 auto;
  text-align: center !important;
  width: 730px; }

#sem .what .sem-title figure img {
  height: auto;
  width: 100%; }

#sem .what .sem-list-wrap.catch .sem-list {
  width: 50%; }

#sem .what .sem-list-wrap.catch .detail {
  color: #fff;
  padding: 80px 0 0 50px;
  width: 50%; }

#sem .what .sem-list-wrap.catch .detail h3 {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 30px; }

#sem .what .sem-list-wrap.catch .detail p {
  margin-bottom: 1em; }

#sem .what .sem-list-wrap.catch .detail a {
  color: #fff; }

#sem .what .sem-list-wrap.catch .detail a:after {
  content: none; }

#sem .what .sem-list-wrap.point {
  margin: 80px auto; }

#sem .what .sem-list-wrap.point .sem-list {
  text-align: center;
  width: 380px; }

#sem .what .sem-list-wrap.point .sem-list:not(:nth-child(3n)) {
  margin-right: 40px; }

#sem .what .sem-list-wrap.point .sem-list dt {
  color: #00a0e9;
  font-size: 24px;
  margin-bottom: 20px; }

#sem .what .sem-list-wrap.point .sem-list dd {
  font-size: 15.8px; }

#sem .what .hint {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/sem/img_contents03.svg) no-repeat 23px;
  background-size: auto 70%;
  border: 1px solid #00a0e9;
  border-radius: 20px;
  min-height: 150px;
  padding: 20px 20px 10px 170px; }

#sem .what .hint .title {
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0 20px; }

#sem .what .hint .body {
  color: #666; }

#sem .voice {
  background: #f4f4f4;
  margin: 100px auto;
  padding: 70px 0 90px; }

#sem .voice-inner {
  margin: auto;
  max-width: 1220px; }

#sem .voice .sem-title {
  padding: 0 auto 60px; }

#sem .voice .sem-title span em {
  color: #00a0e9;
  display: block; }

#sem .voice .sem-title span.small {
  font-size: 14px; }

#sem .voice figure {
  text-align: center; }

#sem .overview-inner {
  margin: auto;
  max-width: 1220px; }

#sem .overview .sem-title {
  margin: 100px auto 75px; }

#sem .overview .read {
  line-height: 2;
  text-align: center; }

#sem .overview .sem-list-wrap {
  margin: 110px 0 90px; }

#sem .overview .sem-list-wrap .sem-list {
  display: -ms-flexbox;
  display: flex;
  width: 100%; }

#sem .overview .sem-list-wrap .sem-list:not(:last-of-type) {
  margin-bottom: 80px; }

#sem .overview .sem-list-wrap .title {
  line-height: 1.8;
  width: 200px; }

#sem .overview .sem-list-wrap .body {
  line-height: 1.8;
  text-align: left;
  width: calc(100% - 200px); }

#sem .overview .sem-list-wrap .body ul li {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 25px; }

#sem .overview .sem-list-wrap .body ul li p {
  display: list-item;
  font-size: 20px;
  font-weight: 600;
  list-style-type: disc;
  margin-left: 1.5rem;
  padding-left: 0.5rem;
  width: 40%; }

#sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--long, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--middle, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--short, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--sm {
  height: 42px;
  padding: 6px 0;
  width: 175px; }

#sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--long:after, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--middle:after, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--short:after, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--sm:after, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button:after {
  content: none; }

#sem .overview .sem-list-wrap .body .program {
  margin-top: -5px; }

#sem .overview .sem-list-wrap .body .program li {
  list-style: decimal;
  margin-left: 1.5rem;
  padding-left: 1rem; }

#sem .overview .sem-list-wrap .body .program li:not(:last-child) {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px; }

#sem .overview .sem-list-wrap .body .program li em {
  font-weight: 600; }

#sem .overview .sem-list-wrap .body .program li:first-child em {
  color: #ac257d; }

#sem .overview .sem-list-wrap .body .program li:nth-child(2) em {
  color: #006fab; }

#sem .overview .sem-list-wrap .body .program li:nth-child(3) em {
  color: #090; }

#sem .overview .sem-list-wrap .body .program li dl dt {
  font-size: 18px;
  margin-bottom: 20px; }

#sem .overview .sem-list-wrap .body .program li .highlight {
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  margin: 25px 0; }

#sem .overview .sem-list-wrap .body .program li .highlight div {
  background: #eee;
  position: relative;
  width: 90px; }

#sem .overview .sem-list-wrap .body .program li .highlight div span {
  display: inline-block;
  font-weight: 600;
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%); }

.ie11 #sem .overview .sem-list-wrap .body .program li .highlight div span {
  transform: translate(-50%, 100%); }

#sem .overview .sem-list-wrap .body .program li .highlight ul li {
  border: none;
  margin-bottom: 0 !important;
  padding-left: 1em;
  text-indent: -1em; }

#sem .overview .sem-list-wrap .body .on-demand {
  font-size: 12px;
  margin-left: 1rem; }

#sem .overview .sem-list-wrap .body .notice {
  font-size: 13px;
  padding-left: 1em;
  text-indent: -1em; }

#sem .overview .sem-list-wrap .body .speakers {
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px; }

#sem .overview .sem-list-wrap .body .speakers figure {
  text-align: center;
  width: 110px; }

#sem .overview .sem-list-wrap .body .speakers figure:not(:last-child) {
  margin-right: 30px; }

#sem .overview .sem-list-wrap .body .speakers figure figcaption {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 0.5em; }

#sem .overview .sem-list-wrap .body .speakers figure img {
  height: auto;
  width: 100%; }

@media screen and (max-width: 768px) {
  #sem .hero {
    height: auto; }
  #sem .hero .bg-control {
    height: auto;
    padding: 30px 24px 25px; }
  #sem .hero .bg-control:after {
    height: 150%;
    left: 55%;
    right: 0;
    width: 100%;
    z-index: 0; }
  #sem .hero .hero-logo {
    margin: 0 auto 15px; }
  #sem .hero .hero-logo img {
    height: auto;
    width: 50%; }
  #sem .hero .hero-title {
    font-size: 22px;
    line-height: 1.5;
    margin: 0 auto 20px;
    text-align: left; }
  #sem .hero .hero-desc {
    font-size: 14px;
    margin: 0 auto 24px;
    padding-right: 140px;
    position: relative;
    text-align: left;
    z-index: 1; }
  #sem .hero .c-button--long:after, #sem .hero .c-button--middle:after, #sem .hero .c-button--short:after, #sem .hero .c-button--sm:after, #sem .hero .c-button:after {
    margin-top: 0; }
  #sem .sem-title {
    font-size: 20px; }
  #sem .sem-title .only-pc {
    display: block; }
  #sem .sem-title .only-sm {
    display: none; }
  #sem .resolution-inner {
    padding: 30px 24px; }
  #sem .resolution .sem-title {
    margin: 20px auto 30px; }
  #sem .resolution .sem-title--read {
    margin-bottom: 30px;
    text-align: left; }
  #sem .resolution .sem-list-wrap .sem-list {
    width: 23.5%; }
  #sem .resolution .sem-list-wrap .sem-list:not(:nth-child(4n)) {
    margin-right: 2%; }
  #sem .resolution .sem-list-wrap .sem-list:nth-child(n+5) {
    margin-top: 0; }
  #sem .resolution .sem-list-wrap .sem-list dt {
    font-size: 13px;
    height: 16.5vh; }
  #sem .resolution .sem-list-wrap .sem-list dd {
    font-size: 12px;
    margin: 15px auto; }
  #sem .what-inner {
    padding: 30px 24px; }
  #sem .what .color-block .what-inner {
    padding: 0; }
  #sem .what .sem-title {
    margin: 20px auto -0.5rem;
    text-align: center; }
  #sem .what .sem-title figure {
    margin: 0 auto;
    width: 80%; }
  #sem .what .sem-list-wrap.catch figure {
    width: 50%; }
  #sem .what .sem-list-wrap.catch .detail {
    padding: 15px 10px 0;
    width: 50%; }
  #sem .what .sem-list-wrap.catch .detail h3 {
    font-size: 18px;
    margin-bottom: 15px; }
  #sem .what .sem-list-wrap.catch .detail p {
    font-size: 14px; }
  #sem .what .sem-list-wrap.point {
    margin: 30px auto;
    padding: 30px 20px; }
  #sem .what .sem-list-wrap.point .sem-list {
    width: 30%; }
  #sem .what .sem-list-wrap.point .sem-list:not(:nth-child(3n)) {
    margin-right: 5%; }
  #sem .what .sem-list-wrap.point .sem-list dt {
    font-size: 20px;
    margin-bottom: 15px; }
  #sem .what .sem-list-wrap.point .sem-list dd {
    font-size: 14px;
    text-align: left; }
  #sem .what .hint {
    background-size: auto 50%;
    min-height: 120px;
    padding: 20px 20px 20px 150px; }
  #sem .what .hint .title {
    margin: 0 0 10px; }
  #sem .overview-inner {
    padding: 30px 24px; }
  #sem .overview .sem-title {
    margin: -20px auto 30px; }
  #sem .overview .read {
    font-size: 14px;
    text-align: left; }
  #sem .overview .sem-list-wrap {
    margin: 50px 0; }
  #sem .overview .sem-list-wrap .sem-list {
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
  #sem .overview .sem-list-wrap .sem-list:not(:last-of-type) {
    margin-bottom: 50px; }
  #sem .overview .sem-list-wrap .title {
    width: 150px; }
  #sem .overview .sem-list-wrap .body {
    width: calc(100% - 150px); }
  #sem .overview .sem-list-wrap .body ul li {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px; }
  #sem .overview .sem-list-wrap .body ul li p {
    font-size: 18px;
    width: 60%; }
  #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--long, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--middle, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--short, #sem .overview .sem-list-wrap .body ul li .c-button-wrap .c-button--sm {
    height: 40px;
    padding: 8px 0; }
  #sem .overview .sem-list-wrap .body .program li .highlight div {
    width: 40%; }
  #sem .overview a:active, #sem .overview a:hover, #sem .overview a:link, #sem .overview a:visited {
    text-decoration: underline; } }

@media screen and (max-width: 640px) {
  #sem .hero .bg-control {
    height: auto; }
  #sem .hero .bg-control:after {
    bottom: 0;
    height: 60%;
    left: 45%;
    right: 0;
    top: auto;
    z-index: 0; }
  #sem .hero .hero-logo img {
    height: auto;
    width: 100%; }
  #sem .hero .hero-title br {
    display: none; }
  #sem .hero .hero-desc {
    padding-right: 50%; }
  #sem .hero .hero-desc p {
    font-size: 14px;
    line-height: 1.7; }
  #sem .hero .hero-desc p span {
    display: block; }
  #sem .hero .hero-desc p.constitution {
    margin-left: 0; }
  #sem .sem-title .only-pc {
    display: none; }
  #sem .sem-title .only-sm {
    display: block; }
  #sem .resolution .sem-title {
    margin: 0 auto 30px; }
  #sem .resolution .sem-list-wrap .sem-list {
    width: 48%; }
  #sem .resolution .sem-list-wrap .sem-list:not(:nth-child(4n)) {
    margin-right: 0; }
  #sem .resolution .sem-list-wrap .sem-list:nth-child(n+5) {
    margin-top: 0; }
  #sem .resolution .sem-list-wrap .sem-list:not(:nth-child(2n)) {
    margin-right: 4%; }
  #sem .resolution .sem-list-wrap .sem-list:nth-child(n+3) {
    margin-top: 30px; }
  #sem .resolution .sem-list-wrap .sem-list dt {
    height: 23vh; }
  #sem .resolution .sem-list-wrap .sem-list dd {
    margin: 15px auto 0; }
  #sem .what .sem-title {
    margin: 35px auto 0.5rem;
    text-align: center; }
  #sem .what .sem-title figure {
    margin: 0 auto;
    width: 90%; }
  #sem .what .sem-list-wrap.catch figure {
    width: 100%; }
  #sem .what .sem-list-wrap.catch .detail {
    padding: 20px 20px 0;
    width: 100%; }
  #sem .what .sem-list-wrap.catch .detail h3 {
    font-size: 20px; }
  #sem .what .sem-list-wrap.point {
    margin: 0 auto;
    padding: 0; }
  #sem .what .sem-list-wrap.point .sem-list {
    text-align: center;
    width: 100%; }
  #sem .what .sem-list-wrap.point .sem-list:not(:nth-child(3n)) {
    margin-right: 0; }
  #sem .what .sem-list-wrap.point .sem-list:nth-child(n+2) {
    margin-top: 30px; }
  #sem .what .sem-list-wrap.point .sem-list dt {
    margin-bottom: 10px; }
  #sem .what .sem-list-wrap.point .sem-list dd {
    font-size: 12px;
    text-align: center; }
  #sem .what .hint {
    background-position: center 2vh;
    background-size: 10vh auto;
    margin-top: 30px;
    min-height: 150px;
    padding: 12vh 20px 20px; }
  #sem .what .hint .title {
    font-size: 16px;
    margin: 10px 0; }
  #sem .what .hint .body {
    font-size: 12px; }
  #sem .overview .sem-list-wrap {
    margin: 30px 0; }
  #sem .overview .sem-list-wrap .sem-list {
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%; }
  #sem .overview .sem-list-wrap .sem-list:not(:last-of-type) {
    margin-bottom: 30px; }
  #sem .overview .sem-list-wrap .title {
    border-bottom: 2px dotted #00a0e9;
    margin-bottom: 15px;
    padding-bottom: 10px;
    text-indent: -0.5rem;
    width: 100%; }
  #sem .overview .sem-list-wrap .body {
    line-height: 1.8;
    text-align: left;
    width: 100%; }
  #sem .overview .sem-list-wrap .body ul li {
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 15px; }
  #sem .overview .sem-list-wrap .body ul li p {
    margin-bottom: 1rem;
    width: 100%; }
  #sem .overview .sem-list-wrap .body .program li em {
    display: block; }
  #sem .overview .sem-list-wrap .body .program li dl dt {
    font-size: 16px;
    margin-bottom: 15px; }
  #sem .overview .sem-list-wrap .body .program li .highlight {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 12px;
    margin: 15px 0; }
  #sem .overview .sem-list-wrap .body .program li .highlight div {
    margin-bottom: 5px;
    padding: 5px 10px;
    width: 100%; }
  #sem .overview .sem-list-wrap .body .program li .highlight div span {
    left: 0;
    position: relative;
    top: 0;
    transform: translate(0); }
  #sem .overview .sem-list-wrap .body .program li .highlight ul li {
    margin-left: 0.5rem; }
  #sem .overview .sem-list-wrap .body .speakers figure {
    width: 30%; }
  #sem .overview .sem-list-wrap .body .speakers figure:not(:last-child) {
    margin-right: 5%; }
  #sem .overview .sem-list-wrap .body .notice {
    font-size: 13px;
    padding-left: 1em;
    text-indent: -1em; }
  #sem .overview .sem-list-wrap .body .on-demand {
    display: block; } }

.utcform .header {
  padding: 0; }

.utcform #header #nav-global .header_tel {
  margin: 15px 0 0; }

.utcform #header #nav-global #header-search .header-search_menu, .utcform .row-fluid .breadcrumbs.re ul {
  display: none;
  visibility: hidden; }

.utcform #mn_wrap {
  padding: 50px 0 70px; }

.utcform .form2col .sec_in {
  margin: 0 auto;
  max-width: 1060px !important;
  padding: 0 30px; }

.utcform .con_in.single {
  float: none;
  line-height: 2.1;
  width: 100%; }

.library__lead {
  margin-bottom: 40px; }

.library__h3__title {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 40px; }

.library-desc {
  line-height: 1.5; }

p.item__icon {
  background: #ccc;
  color: #fff;
  margin-bottom: 5px;
  padding: 3px 0;
  text-align: center;
  width: 3em; }

.information {
  background-color: #036;
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 80px auto;
  margin: 0 auto;
  padding: 50px 0 80px;
  text-align: center; }

.information-inner {
  margin: auto;
  max-width: 1220px; }

.information-title {
  color: #fff;
  font-size: 26px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  position: relative; }

.information-title:after {
  background: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 20px; }

.information-title02 {
  color: #036;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 24px;
  position: relative; }

.information-top {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 35px; }

.information-bottom {
  display: -ms-flexbox;
  display: flex;
  margin: -10px; }

.information-left, .information-right {
  background: #fff;
  border-radius: 10px;
  -ms-flex: 1;
  flex: 1;
  margin: 0 10px;
  padding: 35px; }

.information-list {
  display: -ms-flexbox;
  display: flex;
  margin: 0 -5px; }

.information-list li {
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  margin: 0 5px; }

.information .contact {
  color: #fff;
  margin: 60px auto 0;
  text-align: center; }

.information .contact .tel {
  margin: 0 auto 10px; }

.information .contact .desc {
  font-size: 14px;
  line-height: 1.5; }

@media screen and (max-width: 768px) {
  .information {
    padding: 36px 15px; }
  .information-title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 24px;
    padding-bottom: 18px; }
  .information-title02 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 18px; }
  .information-top {
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 20px; }
  .information-bottom {
    display: block;
    margin: 0 auto; }
  .information-left, .information-right {
    border-radius: 6px;
    margin: 0 auto;
    padding: 20px; }
  .information-right {
    margin-top: 20px; }
  .information-list {
    display: block;
    margin: 0 auto; }
  .information-list li {
    display: block;
    margin: 5px auto; }
  .information-list li br {
    display: none; }
  .information .contact {
    margin-top: 20px; }
  .information .contact .tel {
    margin: 0 auto 8px; }
  .information .contact .desc {
    font-size: 13px;
    line-height: 1.4; } }

.dllistcta {
  background: #eee;
  border-radius: 4px;
  margin: 40px auto 0;
  padding: 30px;
  text-align: center; }

.dllistcta-desc {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 auto 24px; }

.dllistcta-list {
  -ms-flex-pack: center;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  margin: 0 -10px; }

.dllistcta-list li {
  margin: 0 10px;
  width: 30%; }

@media screen and (max-width: 768px) {
  .dllistcta {
    border-radius: 2px;
    margin: 24px auto 0;
    padding: 20px; }
  .dllistcta-desc {
    font-size: 16px;
    margin: 0 auto 16px; }
  .dllistcta-list {
    display: block;
    margin: 0 auto; }
  .dllistcta-list li {
    display: block;
    margin: 5px auto;
    width: 100%; }
  .dllistcta-list li br {
    display: none; } }

.utc2021 .main {
  border-bottom: none; }

#hikaku .utc2021 .contents-header .header-inner {
  padding: 50px 0; }

@media screen and (max-width: 768px) {
  #hikaku .utc2021 .contents-header .header-inner {
    padding: 30px 24px; } }

#bugyo-11 .utc2021 .contents-header .header-inner, #bugyo-cloud .utc2021 .contents-header .header-inner {
  padding: 50px 0; }

#bugyo-11 .utc2021 .contents-header .header-inner .right, #bugyo-cloud .utc2021 .contents-header .header-inner .right {
  cursor: default; }

@media screen and (max-width: 768px) {
  #bugyo-11 .utc2021 .contents-header .header-inner, #bugyo-cloud .utc2021 .contents-header .header-inner {
    padding: 30px 24px; }
  #bugyo-11 .utc2021 .contents-header .header-inner .right, #bugyo-cloud .utc2021 .contents-header .header-inner .right {
    cursor: default; } }

#bugyo-11 .utc2021 .btn-block, #bugyo-11 .utc2021 .contents-header {
  background-color: #057db8; }

#gyomu .utc2021 .voice {
  border-bottom: none; }

#faq .utc2021 .c-head-text {
  color: #333;
  margin-top: 100px; }

#faq .utc2021 .local-navigation li {
  white-space: nowrap; }

#faq .utc2021 .local-navigation li a {
  text-decoration: none; }

#faq .utc2021 .local-navigation li a span {
  border-bottom: none;
  color: #00a0e9;
  text-decoration: underline;
  transition: opacity 0.3s, border 0.3s; }

#faq .utc2021 .local-navigation li a span:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/bugyo-cloud/common/arrow_bottom_border.svg) no-repeat 0 0/contain;
  color: #17a0e3;
  content: "";
  display: inline-block;
  height: 16px;
  margin: auto 6px auto 0;
  width: 15px; }

#faq .utc2021 .local-navigation li a span:after {
  content: none; }

#faq .utc2021 .faq-list-wrap .faq-list > dt:before {
  width: 45px; }

#faq .utc2021 .faq-list-wrap .faq-list > dt:after {
  height: 16px;
  width: 24px; }

#dllist-i10 .utc2021 .supportend-wrap .item.period-date dl:first-of-type, #dllist-i8 .utc2021 .supportend-wrap .item.period-date dl:first-of-type {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }

#dllist-i10 .utc2021 .supportend-wrap .item.period-date dl:nth-of-type(2), #dllist-i8 .utc2021 .supportend-wrap .item.period-date dl:nth-of-type(2) {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px; }

.utc2021 .c-head-text:after {
  background: #00a0e9;
  height: 3px; }

.utc2021 .c-button, .utc2021 .c-button--long, .utc2021 .c-button--middle, .utc2021 .c-button--short, .utc2021 .c-button--sm {
  background: #fff;
  border-color: #057db8;
  color: #057db8;
  width: 400px; }

.utc2021 .c-button--long:after, .utc2021 .c-button--middle:after, .utc2021 .c-button--short:after, .utc2021 .c-button--sm:after, .utc2021 .c-button:after {
  border-bottom-color: #057db8;
  border-right-color: #057db8; }

.utc2021 .c-button--long:hover, .utc2021 .c-button--middle:hover, .utc2021 .c-button--short:hover, .utc2021 .c-button--sm:hover, .utc2021 .c-button:hover {
  background: #057db8;
  color: #fff; }

.utc2021 .c-button--long:hover:after, .utc2021 .c-button--middle:hover:after, .utc2021 .c-button--short:hover:after, .utc2021 .c-button--sm:hover:after, .utc2021 .c-button:hover:after {
  border-bottom-color: #fff;
  border-right-color: #fff; }

.utc2021 .c-button.orange, .utc2021 .orange.c-button--long, .utc2021 .orange.c-button--middle, .utc2021 .orange.c-button--short, .utc2021 .orange.c-button--sm {
  background: #e76f02;
  border-color: #e76f02;
  color: #fff; }

.utc2021 .c-button.orange:after, .utc2021 .orange.c-button--long:after, .utc2021 .orange.c-button--middle:after, .utc2021 .orange.c-button--short:after, .utc2021 .orange.c-button--sm:after {
  border-bottom-color: #fff;
  border-right-color: #fff; }

.utc2021 .c-button.orange:hover, .utc2021 .orange.c-button--long:hover, .utc2021 .orange.c-button--middle:hover, .utc2021 .orange.c-button--short:hover, .utc2021 .orange.c-button--sm:hover {
  background: #ef9c60;
  border-color: #ef9c60; }

@media screen and (max-width: 768px) {
  .utc2021 .c-button, .utc2021 .c-button--long, .utc2021 .c-button--middle, .utc2021 .c-button--short, .utc2021 .c-button--sm {
    max-width: 100%; } }

.utc2021 .c-button-border, .utc2021 .c-button-border--long, .utc2021 .c-button-border--short, .utc2021 .c-button-border--sm {
  background-color: #fff;
  border-color: #057db8; }

.utc2021 .c-button-border--long:hover, .utc2021 .c-button-border--short:hover, .utc2021 .c-button-border--sm:hover, .utc2021 .c-button-border.download:hover, .utc2021 .c-button-border.download:hover:after, .utc2021 .c-button-border:hover, .utc2021 .download.c-button-border--long:hover, .utc2021 .download.c-button-border--long:hover:after, .utc2021 .download.c-button-border--short:hover, .utc2021 .download.c-button-border--short:hover:after, .utc2021 .download.c-button-border--sm:hover, .utc2021 .download.c-button-border--sm:hover:after {
  background-color: #057db8; }

.utc2021 .research .c-button-border, .utc2021 .research .c-button-border--long, .utc2021 .research .c-button-border--short, .utc2021 .research .c-button-border--sm {
  background-color: transparent; }

.utc2021 .research .c-button-border--long:hover, .utc2021 .research .c-button-border--short:hover, .utc2021 .research .c-button-border--sm:hover, .utc2021 .research .c-button-border:hover {
  background-color: #057db8;
  color: #fff; }

.utc2021 .research .c-button-border--long:hover:after, .utc2021 .research .c-button-border--short:hover:after, .utc2021 .research .c-button-border--sm:hover:after, .utc2021 .research .c-button-border:hover:after {
  border-color: #fff; }

.utc2021 .library {
  padding: 80px 0; }

.utc2021 .library-inner {
  margin: auto;
  max-width: 1220px; }

.utc2021 .library-desc {
  text-align: center; }

@media screen and (max-width: 768px) {
  .utc2021 .library {
    padding: 40px 24px; }
  .utc2021 .library-list .item figure {
    width: 120px !important; }
  .utc2021 .library-desc {
    text-align: left; } }

.utc2021 .bgskyblue {
  background-color: #e3f3ff; }

.utc2021 .bgskyblue-light {
  background-color: #eff9ff; }

.successor {
  padding: 20px 0 80px;
  text-align: center; }

.successor-inner {
  margin: auto;
  max-width: 1220px; }

.successor-desc {
  line-height: 1.75;
  margin-bottom: 20px; }

.successor-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4; }

.successor-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%; }

.successor-list .item {
  border-radius: 10px;
  color: #fff;
  padding: 40px;
  text-align: center;
  width: calc(50% - 12.5px); }

.successor-list .item:first-child {
  background-color: #00a0e9; }

.successor-list .item:nth-child(2) {
  background-color: #057db8; }

.successor-list .item:nth-child(odd) {
  margin-right: 25px; }

.successor-list .item:nth-child(n+3) {
  margin-top: 25px; }

.successor-list .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45; }

.successor-list .desc {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px; }

.successor-list .logo {
  margin-bottom: 1rem; }

.successor-list .logo img {
  max-width: 250px; }

.successor-list .c-button-border, .successor-list .c-button-border--long, .successor-list .c-button-border--short, .successor-list .c-button-border--sm {
  background-color: #fff;
  border-color: transparent; }

.successor-list .c-button-border--long:hover, .successor-list .c-button-border--short:hover, .successor-list .c-button-border--sm:hover, .successor-list .c-button-border:hover {
  background: rgba(255, 255, 255, 0.3); }

.successor-button {
  border-color: #057db8;
  border-radius: 50px;
  color: #fff;
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 80px auto 0;
  max-width: 700px;
  padding: 20px 0;
  text-align: center;
  transition: opacity 0.3s;
  width: 100%; }

.successor-button:hover {
  background-color: #057db8; }

.successor-button span {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 100%;
  display: inline-block;
  padding: 0 70px; }

.successor-button small {
  display: block;
  font-size: 17px;
  font-weight: 600; }

@media screen and (max-width: 768px) {
  .successor {
    padding: 40px 24px 50px; }
  .successor-desc {
    margin-bottom: 12px; }
  .successor-lead {
    font-size: 18px; }
  .successor-list {
    display: block;
    margin: 40px auto 0; }
  #top .successor-list {
    margin: 40px auto; }
  .successor-list .item {
    padding: 30px 15px;
    width: 100%; }
  .successor-list .item:before {
    height: 100px;
    left: 15px;
    width: 75px; }
  .successor-list .item:nth-child(odd) {
    margin-right: 0; }
  .successor-list .item:nth-child(n+2), .successor-list .item:nth-child(n+3) {
    margin-top: 20px; }
  .successor-list .title {
    font-size: 20px;
    margin-bottom: 12px; }
  .successor-list .desc {
    font-size: 15px; }
  .successor-button {
    font-size: 19px;
    margin: 50px auto 0;
    padding: 15px 30px; }
  .successor-button span {
    background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/common/icon_download.png) no-repeat 100%/30px auto;
    display: inline-block;
    padding: 0 30px; }
  .successor-button small {
    display: block;
    font-size: 14px;
    font-weight: 600; } }

.worries {
  margin: 40px auto 40px 140px;
  position: relative; }

.worries-inner {
  display: inline-block;
  position: relative;
  text-align: left; }

.worries-inner:before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/icon_worries.png) no-repeat 0/100% auto;
  content: "";
  display: block;
  height: 60px;
  left: -140px;
  position: absolute;
  top: 0;
  width: 115px; }

.worries-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem; }

@media screen and (max-width: 768px) {
  .worries {
    margin: 90px auto 40px; }
  .worries-inner:before {
    left: 33%;
    top: -70px; } }

.shindan {
  margin: 40px auto;
  text-align: center; }

.shindan-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-align: center; }

.useful {
  padding: 80px 0; }

.useful-inner {
  margin: auto;
  max-width: 1220px; }

.useful-desc {
  line-height: 1.75;
  margin-bottom: 20px;
  text-align: center; }

.useful-head-read {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin: 60px auto 40px;
  text-align: center; }

.useful-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 80px -11px;
  width: calc(100% + 22px); }

#hikaku .useful-list {
  margin-bottom: 0; }

#hikaku #con03 .useful-list {
  margin: 0 -11px 40px; }

.useful-list .item {
  display: -ms-flexbox;
  display: flex;
  padding: 0 11px; }

.useful-list .item.column1 {
  background-color: #fff;
  margin: 0 auto;
  padding: 25px;
  width: 75%; }

.useful-list .item.column2 {
  width: 50%; }

.useful-list .item.column3 {
  width: 33.33%; }

.useful-list .item.column4 {
  width: 25%; }

.useful-list .item:nth-child(n+4) {
  margin-top: 40px; }

.useful-list .item figure {
  margin-right: 13px;
  width: 170px; }

.useful-list .item figure img {
  border: 1px solid #ddd;
  width: 100%; }

.useful-list .item .detail {
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  padding-bottom: 80px;
  position: relative; }

.useful-list .item .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px; }

.useful-list .item .subtitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px; }

.useful-list .item .subtitle.normal {
  font-weight: 400; }

.useful-list .item .company {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px; }

.useful-list .item .c-button-border, .useful-list .item .c-button-border--long, .useful-list .item .c-button-border--short, .useful-list .item .c-button-border--sm {
  bottom: 0;
  left: 0;
  position: absolute; }

.useful-list .item .c-button-border.gray, .useful-list .item .gray.c-button-border--long, .useful-list .item .gray.c-button-border--short, .useful-list .item .gray.c-button-border--sm {
  background: #dcdcdc;
  border-color: #dcdcdc;
  color: #000;
  opacity: 0.5; }

.useful-list .item .c-button-border.gray:after, .useful-list .item .gray.c-button-border--long:after, .useful-list .item .gray.c-button-border--short:after, .useful-list .item .gray.c-button-border--sm:after {
  display: none; }

.useful-list .item dl, .useful-list .item p, .useful-list .item ul {
  margin-bottom: 10px; }

.useful-list .item dl.small {
  font-size: 92%; }

.useful-list .item dl dt {
  font-weight: 600; }

.useful-list .item dl dd {
  margin-bottom: 7px; }

.useful-list .item ul li {
  margin-bottom: 2px;
  padding-left: 1em;
  text-indent: -1em; }

@media screen and (max-width: 768px) {
  .useful {
    padding: 40px 24px; }
  .useful-head-read {
    font-size: 18px;
    margin: 40px auto 0; }
  .useful-list {
    margin: 40px 0; }
  .useful-list .item.column1 {
    margin: 0;
    padding: 20px 10px;
    width: 95%; }
  .useful-list .item.column1 figure {
    width: 120px; }
  .useful-list .item.column2, .useful-list .item.column3, .useful-list .item.column4 {
    margin: 0;
    padding: 0;
    width: 95%; }
  .useful-list .item.column2:nth-child(n+2), .useful-list .item.column3:nth-child(n+2), .useful-list .item.column4:nth-child(n+2) {
    margin-top: 20px; }
  .useful-list .item.column2 figure, .useful-list .item.column3 figure, .useful-list .item.column4 figure {
    width: 120px; }
  .useful-list .item .detail {
    padding-bottom: 50px; } }

@media screen and (max-width: 360px) {
  .useful-list .item.column1 .c-button-border, .useful-list .item.column1 .c-button-border--long, .useful-list .item.column1 .c-button-border--short, .useful-list .item.column1 .c-button-border--sm {
    padding: 12px 25px 12px 0; } }

.choices {
  padding: 0; }

.choices-title {
  font-size: 26px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  position: relative; }

.choices-title:after {
  background: #fff;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 20px; }

.choices .info {
  background-color: #eff9ff;
  margin: 0 auto;
  padding: 0;
  text-align: center; }

.choices .info-inner {
  margin: 0 auto; }

.choices .info-desc {
  color: #fff;
  font-size: 20px;
  font-weight: 400; }

.choices .info-list {
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
  width: 100%; }

.choices .info-logo {
  height: auto;
  margin: 0 auto 1em;
  width: 250px; }

.choices .info-worry {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 20px auto 40px; }

.choices .info-btn {
  margin: 30px auto 0;
  text-align: center; }

.choices .info-btn li:not(:last-child) {
  margin-bottom: 20px; }

.choices .info .item {
  padding: 40px 0;
  text-align: center;
  width: 33.33333%; }

.choices .info .item:first-child {
  background-color: #00a0e9; }

.choices .info .item:nth-child(2) {
  background-color: #057db8; }

.choices .info .item:nth-child(3) {
  background-color: #032b53; }

.choices .info .item:nth-child(3) .info-desc {
  padding-top: 30px; }

.choices .info .contact {
  background: #fff;
  margin: 0 auto;
  padding-top: 60px; }

.choices .info .contact-lead {
  color: #333;
  font-size: 20px;
  font-weight: 600; }

.choices .info .contact-wrap {
  -ms-flex-pack: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 10px;
  color: #333;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 123px;
  justify-content: center;
  margin: 30px auto 60px;
  max-width: 850px;
  width: 850px; }

.choices .info .contact-wrap .tel {
  margin-bottom: 0;
  padding-left: 70px;
  padding-right: 30px;
  text-align: right; }

.choices .info .contact-wrap .desc {
  border-left: 1px solid #333;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  padding-left: 30px;
  padding-right: 100px;
  text-align: left; }

@media screen and (max-width: 768px) {
  .choices .info-inner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .choices .info .item {
    margin: 0 auto;
    padding: 20px 0 30px;
    width: 100%; }
  .choices .info .contact-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: 30px auto;
    max-width: 90%; }
  .choices .info .contact-wrap .tel {
    padding: 20px;
    position: relative;
    text-align: center;
    width: 100%; }
  .choices .info .contact-wrap .tel:after {
    background-color: #333;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 25%;
    min-width: 50%;
    position: absolute;
    width: 50%; }
  .choices .info .contact-wrap .tel img {
    max-width: 75%; }
  .choices .info .contact-wrap .desc {
    border: none;
    font-size: 16px;
    padding: 30px;
    text-align: center;
    width: 100%; } }

.point {
  background-color: #f7f7f7;
  padding: 80px 0; }

.point-inner {
  margin: auto;
  max-width: 1220px; }

.point-desc {
  line-height: 1.75;
  margin-bottom: 20px;
  text-align: center; }

.point-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: space-between;
  margin: 40px -20px 0;
  width: calc(100% + 40px); }

.point-list .item {
  background-color: #fff;
  border: 2px solid #057db8;
  border-radius: 10px;
  box-shadow: 0 3px 0 #057db8;
  -ms-flex: 1;
  flex: 1;
  margin: 0 13px;
  position: relative; }

.point-list .item:after {
  border-bottom: 3px solid #057db8;
  border-right: 3px solid #057db8;
  bottom: 1rem;
  content: "";
  display: inline-block;
  height: 15px;
  left: calc(50% - 7.5px);
  margin-left: 0;
  position: absolute;
  transform: rotate(45deg) translate(0);
  width: 15px; }

.point-list .item:first-of-type:last-of-type, .point-list .item:first-of-type:last-of-type ~ .item {
  width: 100%; }

.point-list .item:first-of-type:nth-last-of-type(2), .point-list .item:first-of-type:nth-last-of-type(2) ~ .item {
  width: 50%; }

.point-list .item:first-of-type:nth-last-of-type(3), .point-list .item:first-of-type:nth-last-of-type(3) ~ .item {
  width: 33.33333%; }

.point-list .item:first-of-type:nth-last-of-type(4), .point-list .item:first-of-type:nth-last-of-type(4) ~ .item {
  width: 25%; }

.point-list .item:first-of-type:nth-last-of-type(5), .point-list .item:first-of-type:nth-last-of-type(5) ~ .item {
  width: 20%; }

.point-list .item:first-of-type:nth-last-of-type(6), .point-list .item:first-of-type:nth-last-of-type(6) ~ .item {
  width: 16.66667%; }

.point-list .item:first-of-type:nth-last-of-type(7), .point-list .item:first-of-type:nth-last-of-type(7) ~ .item {
  width: 14.28571%; }

.point-list .item:first-of-type:nth-last-of-type(8), .point-list .item:first-of-type:nth-last-of-type(8) ~ .item {
  width: 12.5%; }

.point-list .item:first-of-type:nth-last-of-type(9), .point-list .item:first-of-type:nth-last-of-type(9) ~ .item {
  width: 11.11111%; }

.point-list .item:first-of-type:nth-last-of-type(10), .point-list .item:first-of-type:nth-last-of-type(10) ~ .item {
  width: 10%; }

.point-list .item:first-of-type:nth-last-of-type(11), .point-list .item:first-of-type:nth-last-of-type(11) ~ .item {
  width: 9.09091%; }

.point-list .item:first-of-type:nth-last-of-type(12), .point-list .item:first-of-type:nth-last-of-type(12) ~ .item {
  width: 8.33333%; }

.point-list .item a {
  display: block;
  transition: opacity 0.2s; }

.point-list .item a:hover {
  opacity: 0.7; }

.point-list .item dl {
  padding: 20px 20px 45px;
  position: relative;
  text-align: center; }

.point-list .item dl dt {
  font-size: 16px;
  font-weight: 600; }

.point-list .item dl dd {
  color: #057db8;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 20px;
  position: relative; }

.point-list .item dl dd span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.point-list .item dl dd .small {
  font-size: 14px; }

@media screen and (max-width: 768px) {
  .point {
    padding: 40px 24px; }
  .point-list {
    -ms-flex-pack: justify;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px auto 20px;
    width: 100%; }
  .point-list .item {
    margin: 0 auto 30px;
    padding: 0;
    width: calc(100% - 10px); }
  .point-list .item:after {
    left: auto;
    right: 15px;
    top: 38%; }
  .point-list .item:first-of-type:last-of-type, .point-list .item:first-of-type:last-of-type ~ .item, .point-list .item:first-of-type:nth-last-of-type(10), .point-list .item:first-of-type:nth-last-of-type(10) ~ .item, .point-list .item:first-of-type:nth-last-of-type(11), .point-list .item:first-of-type:nth-last-of-type(11) ~ .item, .point-list .item:first-of-type:nth-last-of-type(12), .point-list .item:first-of-type:nth-last-of-type(12) ~ .item, .point-list .item:first-of-type:nth-last-of-type(2), .point-list .item:first-of-type:nth-last-of-type(2) ~ .item, .point-list .item:first-of-type:nth-last-of-type(3), .point-list .item:first-of-type:nth-last-of-type(3) ~ .item, .point-list .item:first-of-type:nth-last-of-type(4), .point-list .item:first-of-type:nth-last-of-type(4) ~ .item, .point-list .item:first-of-type:nth-last-of-type(5), .point-list .item:first-of-type:nth-last-of-type(5) ~ .item, .point-list .item:first-of-type:nth-last-of-type(6), .point-list .item:first-of-type:nth-last-of-type(6) ~ .item, .point-list .item:first-of-type:nth-last-of-type(7), .point-list .item:first-of-type:nth-last-of-type(7) ~ .item, .point-list .item:first-of-type:nth-last-of-type(8), .point-list .item:first-of-type:nth-last-of-type(8) ~ .item, .point-list .item:first-of-type:nth-last-of-type(9), .point-list .item:first-of-type:nth-last-of-type(9) ~ .item {
    width: 100%; }
  .point-list .item dl {
    border-radius: 8px;
    padding: 15px 10px; }
  .point-list .item dl dd {
    font-size: 14px;
    margin-top: 10px; }
  .point-list .item dl dd span {
    top: 0;
    transform: translate(0); } }

#hikaku .banner {
  background: linear-gradient(0deg, #fff, #fff 50%, #eff9ff 0, #eff9ff); }

.banner-inner {
  margin: 0 auto;
  max-width: 1220px; }

.btn-block {
  background-color: #00a0e9;
  border-radius: 10px;
  margin: 60px auto;
  max-width: 960px;
  padding: 45px;
  text-align: center; }

.btn-block .btn-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 30px; }

.btn-block .btn-desc {
  color: #fff;
  line-height: 1.4;
  margin-bottom: 20px; }

.btn-block .c-button, .btn-block .c-button--long, .btn-block .c-button--middle, .btn-block .c-button--short, .btn-block .c-button--sm {
  width: auto; }

.btn-block.catalog {
  background-color: #fff;
  border: 2px dashed #057db8; }

#bugyo-11 .btn-block {
  background-color: #057db8; }

#bugyo-11 .btn-block.catalog {
  background-color: #fff;
  margin: 60px auto 0; }

#bugyo-11 .btn-block.catalog .btn-title {
  color: #333; }

@media screen and (max-width: 768px) {
  .btn-block {
    margin: 30px auto;
    max-width: 100%;
    padding: 25px; } }

.osusume {
  padding: 80px 0; }

.osusume-inner {
  margin: auto;
  max-width: 1220px; }

.osusume-desc {
  line-height: 1.75;
  text-align: center; }

.osusume-desc:nth-of-type(2) {
  margin-bottom: 1rem; }

.osusume-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin: 40px -20px 0;
  width: calc(100% + 40px); }

.osusume-list .item {
  background-color: #eff9ff;
  border-radius: 10px;
  -ms-flex: 1;
  flex: 1;
  margin: 0 15px;
  overflow: hidden;
  padding: 25px;
  position: relative; }

.osusume-list .item dd {
  position: relative; }

.osusume-list .item figure {
  background-color: #fff;
  border-radius: 10px;
  margin: 25px 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%; }

.osusume-list .item figure figcaption {
  font-size: 13px; }

.osusume-list .item figure img {
  margin: 0 auto; }

.osusume-list .item:first-child figure {
  padding: 5px 40px; }

.osusume-list .item:first-child figure img {
  margin: 30px auto; }

.osusume-list .item:first-child figure figcaption {
  line-height: 1.4;
  text-align: left; }

.osusume-list .item dl dt {
  font-size: 20px;
  font-weight: 700;
  text-align: center; }

.osusume-list .item dl dd {
  line-height: 1.5; }

.osusume-list .item dl dd:last-child {
  text-align: center; }

@media screen and (max-width: 768px) {
  .osusume {
    padding: 20px 24px; }
  .osusume-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .osusume-list .item {
    -ms-flex: auto;
    flex: auto;
    padding: 15px;
    width: 100%; }
  .osusume-list .item figure {
    margin: 15px 0;
    padding: 10px 25px; }
  .osusume-list .item:nth-child(n+2) {
    margin-top: 20px; }
  .osusume-list .item:first-child figure {
    padding: 0 15px; }
  .osusume-list .item:first-child figure figcaption {
    padding-bottom: 15px; } }

.digital {
  padding: 80px 0; }

.digital-inner {
  margin: auto;
  max-width: 1220px; }

.digital-desc {
  line-height: 1.75;
  text-align: center; }

.digital-desc:nth-of-type(2) {
  margin-bottom: 1rem; }

.digital-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin: 40px -20px;
  width: calc(100% + 40px); }

.digital-list .item {
  border-radius: 10px;
  cursor: pointer;
  -ms-flex: 1;
  flex: 1;
  margin: 0 13px;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: box-shadow 0.4s; }

.digital-list .item:hover {
  box-shadow: 0 0 10px 5px rgba(102, 102, 102, 0.3); }

.digital-list .item.keiri {
  border: 1px solid #906; }

.digital-list .item.keiri .head {
  background: #906; }

.digital-list .item.keiri .lead {
  color: #906; }

.digital-list .item.keiri .lead:after {
  background: #906; }

.digital-list .item.keiri .tag-list li {
  background: #fff2fb; }

.digital-list .item.somu {
  border: 1px solid #057db8; }

.digital-list .item.somu .head {
  background: #057db8; }

.digital-list .item.somu .lead {
  color: #057db8; }

.digital-list .item.somu .lead:after {
  background: #057db8; }

.digital-list .item.somu .tag-list li {
  background: #eff9ff; }

.digital-list .item.hanbai {
  border: 1px solid #129a3d; }

.digital-list .item.hanbai .head {
  background: #129a3d; }

.digital-list .item.hanbai .lead {
  color: #129a3d; }

.digital-list .item.hanbai .lead:after {
  background: #129a3d; }

.digital-list .item.hanbai .tag-list li {
  background: #eefcf2; }

.digital-list .item.gyomu {
  -ms-flex-pack: justify;
  border: none;
  cursor: default;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; }

.digital-list .item.gyomu:hover {
  box-shadow: none; }

.digital-list .item.gyomu dl {
  line-height: 1.5;
  max-width: 210px;
  text-align: left; }

.digital-list .item.gyomu dt {
  color: #00a0e9;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px; }

.digital-list .item.gyomu figure {
  border: 6px solid #00a0e9;
  border-radius: 50%;
  height: 150px;
  position: relative;
  width: 150px; }

.digital-list .item.gyomu figure img {
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); }

@media screen and (max-width: 768px) {
  .digital-list .item.gyomu {
    -ms-flex-align: center;
    align-items: center; }
  .digital-list .item.gyomu:not(:last-child) {
    border-bottom: 1px dotted #00a0e9;
    border-radius: 0;
    padding-bottom: 20px; }
  .digital-list .item.gyomu dl {
    max-width: 60%; }
  .digital-list .item.gyomu figure {
    border: 3px solid #00a0e9;
    height: 100px;
    width: 100px; }
  .digital-list .item.gyomu figure img {
    max-width: 80%; } }

.digital-list .head {
  color: #fff;
  text-align: center; }

.digital-list .head .list-title {
  font-size: 16px;
  padding: 10px 0; }

.digital-list .body {
  padding: 25px 20px; }

.digital-list .body .tag-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 25px 0; }

.digital-list .body .tag-list li {
  padding: 10px 0;
  text-align: center;
  width: 49%; }

.digital-list .body .tag-list li:nth-child(n+3) {
  margin-top: 2%; }

.digital-list .body .tag-list li.column1 {
  width: 100%; }

.digital-list .body .button {
  border-radius: 20px;
  color: #fff;
  display: block;
  font-size: 15px;
  margin: auto;
  padding: 10px;
  text-align: center; }

.digital-list .body .button:after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: inline-block;
  height: 7px;
  margin-left: 0;
  margin-top: 12px;
  position: absolute;
  transform: rotate(-45deg) translate(50%);
  transform-origin: 50% 50%;
  width: 7px; }

.digital-list .lead {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  position: relative;
  text-align: center; }

.digital-list .lead:after {
  background: #199fe3;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 40px; }

.digital-list .lead span {
  color: #333;
  display: block;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 1rem; }

@media screen and (max-width: 768px) {
  .digital-list .lead {
    font-size: 24px;
    margin: 0 auto 32px;
    padding: 0 0 20px; }
  .digital-list .lead:after {
    width: 30px; }
  .digital {
    padding: 40px 24px; }
  .digital-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 20px 0;
    width: 100%; }
  .digital-list .item {
    -ms-flex: auto;
    flex: auto;
    margin: 0;
    width: 100%; }
  .digital-list .item:nth-child(n+2) {
    margin-top: 20px; }
  .digital-list .head .list-title {
    font-size: 16px;
    padding: 20px 15px; }
  .digital-list .head .list-title .lead {
    font-size: 17px;
    margin-bottom: 10px; }
  .digital-list .head .list-title em {
    font-size: 22px; }
  .digital-list .body {
    padding: 20px 20px 25px; }
  .digital-list .body p {
    line-height: 1.5;
    margin-bottom: 20px; }
  .digital-list .body .tag-list li {
    font-size: 12px; }
  .digital-list .body .button {
    font-size: 13px;
    padding: 8px; }
  .digital-list .body .button:after {
    height: 7px;
    margin-top: 10px;
    width: 7px; } }

.upgrade {
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 960px;
  padding: 40px;
  position: relative; }

.upgrade-title {
  margin-bottom: 25px;
  text-align: center; }

.upgrade-title span {
  color: #333;
  font-size: 20px;
  font-weight: 600; }

.upgrade-list {
  -ms-flex-pack: justify;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 100%; }

.upgrade .item {
  width: 49%; }

.upgrade .item .detail {
  background-color: #eff9ff;
  border-radius: 10px;
  font-weight: 700;
  padding: 25px 0;
  text-align: center; }

.upgrade .item .detail dt {
  font-size: 16px;
  margin-bottom: 15px; }

.upgrade .item .detail dd {
  color: #057db8; }

.upgrade .item .detail dd em {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px; }

.upgrade .item .detail dd span {
  font-size: 16px;
  margin-left: 0.5em; }

.upgrade .upgrade-comment {
  margin: 25px auto 0 195px; }

.upgrade .upgrade-comment li {
  display: list-item;
  list-style-type: disc; }

.upgrade .upgrade-comment li:nth-child(n+2) {
  margin-top: 10px; }

@media screen and (max-width: 768px) {
  .upgrade {
    padding: 20px; }
  .upgrade-title {
    line-height: 1.7; }
  .upgrade-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .upgrade .item {
    width: 100%; }
  .upgrade .item .detail {
    padding: 15px; }
  .upgrade .item:not(:last-child) {
    margin-bottom: 10px; }
  .upgrade .upgrade-comment {
    margin: 25px auto; }
  .upgrade .upgrade-comment li {
    line-height: 1.4;
    margin-left: 1.5rem; } }

.info {
  padding: 100px 0;
  max-width: 1000px;
  margin: 0 auto;
  position: relative; }

.info::after {
  content: "";
  position: absolute;
  --w: 25px;
  --h: 26px;
  width: 0;
  height: 0;
  border-left: var(--w) solid transparent;
  border-right: var(--w) solid transparent;
  border-top: var(--h) solid #fff;
  /* ← 色 */
  display: inline-block;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%); }

.info .info_title {
  text-align: center; }

.info .info_title h3 {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.6;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 40px; }

.info .inner {
  max-width: 790px;
  margin: 0 auto; }

.info .orange_btn a {
  max-width: 320px;
  margin: 40px auto 0; }

@media screen and (max-width: 768px) {
  .info {
    padding: 80px 20px; }
  .info .info_title h3 {
    font-size: 30px; } }

.top-seminar {
  padding: 120px 20px 100px;
  background-color: #CFE5F8; }

.top-seminar .top-seminar_title {
  text-align: center; }

.top-seminar .top-seminar_title h3 {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.6;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 40px; }

.top-seminar .top-seminar_title p {
  line-height: 1.6; }

.top-seminar .top-seminar_list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 50px auto 80px;
  position: relative; }

.top-seminar .top-seminar_list.renew {
  max-width: 800px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 50px auto 0; }

.top-seminar .top-seminar_list.renew::before {
  right: 0; }

.top-seminar .top-seminar_list.renew a .whitebox {
  padding: 20px 60px 20px 20px;
  font-weight: 500;
  font-size: 1.2rem; }

.top-seminar .top-seminar_list.renew a:nth-child(n+4) {
  margin-top: 30px; }

.top-seminar .top-seminar_list::before {
  content: "";
  position: absolute;
  top: -135px;
  right: 20px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/icon_seminar.svg) no-repeat;
  background-size: cover;
  width: 198px;
  height: 135px; }

.top-seminar .top-seminar_list a {
  width: calc(33.333% - 20px);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative; }

/* .top-seminar .top-seminar_list a .figurebox{
    width: 100%;
} */
.top-seminar .top-seminar_list a .figurebox {
  position: absolute;
  width: 40px;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 1; }

.top-seminar .top-seminar_list a .figurebox.min {
  width: 34px;
  left: 23px; }

.top-seminar .top-seminar_list a .figurebox img {
  width: 100%; }

.top-seminar .top-seminar_list a .whitebox {
  background-color: #fff;
  position: relative;
  padding: 20px 60px 20px 80px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center; }

.top-seminar .top-seminar_list a .whitebox::before {
  content: "";
  position: absolute;
  top: calc(50% + 2px);
  right: 18px;
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  display: inline-block;
  height: 9px;
  transition: all .3s;
  width: 9px;
  z-index: 2; }

.top-seminar .top-seminar_list a .whitebox::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  width: 40px;
  background-color: var(--color-glayblue);
  z-index: 1; }

.top-seminar .top-seminar_list a:hover .whitebox::before {
  right: 15px; }

.top-seminar .orange_btn {
  max-width: 320px;
  width: 100%;
  margin: 0 auto; }

@media screen and (max-width: 768px) {
  .top-seminar {
    padding: 80px 20px; }
  .top-seminar .top-seminar_list {
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 40px auto; }
  .top-seminar .top-seminar_list::before {
    content: none; }
  .top-seminar .top-seminar_list a {
    width: 100%; }
  .top-seminar .top-seminar_list a + a {
    margin-top: 20px; }
  .top-seminar .top-seminar_list a .whitebox {
    min-height: 75px; }
  .top-seminar .top-seminar_list.renew a:nth-child(n+4) {
    margin-top: 20px; } }

.faq {
  padding: 100px 20px;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; }

.faq .faq_title {
  text-align: center; }

.faq .faq_title h3 {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.6;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 40px; }

.p-accordion {
  margin: auto;
  counter-reset: q var(--q-start, 0); }

.p-accordion .details {
  border-radius: 10px;
  background-color: #CFE5F8;
  padding: 10px 40px; }

.p-accordion .details:nth-child(even) {
  background-color: var(--color-lightbrown); }

.p-accordion .details + .details {
  margin-top: 20px; }

@media screen and (max-width: 768px) {
  .p-accordion .details {
    padding: 20px; } }

.p-accordion .summary {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
  gap: 1em;
  padding: 20px 0 20px 40px;
  line-height: 1.6;
  font-weight: 700;
  cursor: pointer; }

.p-accordion .summary::-webkit-details-marker {
  display: none; }

.p-accordion .summary::before {
  position: absolute;
  counter-increment: q;
  content: "Q" counter(q);
  font-size: 1.5rem;
  font-weight: 700;
  top: .5em;
  left: 0;
  color: var(--color-primary); }

@media screen and (max-width: 768px) {
  .p-accordion .summary {
    padding: 0 0 0 40px; }
  .p-accordion .summary::before {
    top: -.2em; } }

/* .p-accordion .icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  inline-size: 2em;
  aspect-ratio: 1;
  border-radius: 100vh;
  background-color: #82489b; }

.p-accordion .icon::before, .p-accordion .icon::after {
  position: absolute;
  inset: 0;
  inline-size: 50%;
  block-size: 2px;
  margin: auto;
  content: "";
  background-color: #fff; }

.p-accordion .icon::after {
  transition: rotate 0.3s;
  rotate: 90deg; }

.p-accordion .icon:where(.details[open] *)::after {
  rotate: 0deg; } */
.p-accordion .icon {
  --size: 12px;
  --th: 2px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  margin-left: .5em;
  vertical-align: middle;
  position: relative;
  line-height: 1;
  top: 8px; }

.p-accordion .icon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-right: var(--th) solid #1D488C;
  border-bottom: var(--th) solid #1D488C;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform .2s ease; }

.p-accordion .details[open] .icon::after {
  transform: rotate(-135deg); }

.p-accordion .answer {
  overflow: hidden; }

.p-accordion .answer-inner {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  position: relative; }

.p-accordion .answer-inner p {
  font-size: 1rem;
  position: relative;
  line-height: 2 !important; }

.p-accordion .answer-inner p a {
  transition: all .3s;
  color: var(--color-primary);
  text-decoration: underline; }

.p-accordion .answer-inner p a:hover {
  text-decoration: none; }

.p-accordion .answer-inner .link_box {
  margin-top: 20px;
  text-align: right; }

.p-accordion .answer-inner .link_box a {
  transition: all .3s;
  color: var(--color-primary);
  padding-right: 30px;
  position: relative;
  text-decoration: underline; }

.p-accordion .answer-inner .link_box a::before {
  content: "";
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/icon_link.svg) no-repeat;
  background-size: cover;
  width: 16px;
  height: 14px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%); }

.p-accordion .answer-inner .link_box a:hover {
  text-decoration: none; }

/* .p-accordion .answer-inner p em {
  font-weight: 700; } */
/* .p-accordion .answer-inner p:nth-child(1) {
  text-indent: 3em; }

.p-accordion .answer-inner p:nth-child(1)::before {
  position: absolute;
  content: 'A';
  font-size: 1.5rem;
  font-weight: 700;
  top: -.25em;
  left: 0;
  color: #82489b;
  transform: translateX(-2em); } */
/* .p-accordion .answer-inner p:nth-child(n+2) {
  margin-top: 1rem; } */
@media screen and (max-width: 768px) {
  .p-accordion .answer-inner {
    margin-top: 20px; }
  .p-accordion .answer-inner p {
    font-size: 1rem;
    position: relative;
    line-height: 2 !important; }
  .p-accordion .answer-inner p:nth-child(1) {
    text-indent: 2em; }
  .p-accordion .answer-inner p:nth-child(1)::before {
    top: -.35em;
    left: .75em; }
  .p-accordion .answer-inner p:nth-child(n+2) {
    margin-top: 1rem; } }

/* ==================================== */
/* 25.09 step01 */
/* ==================================== */
.p-invariant {
  padding: 100px 20px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/bg_invariant.png) no-repeat;
  background-size: contain;
  background-position: top center; }

.p-invariant .inner {
  max-width: 1000px;
  margin: 0 auto; }

.p-invariant .p-invariant__list .p-invariant__item + .p-invariant__item {
  margin-top: 30px; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox {
  position: relative;
  z-index: 1; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox figure {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: calc(50% - 20px); }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt {
  width: 57.5%; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt h3 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt h3 span {
  line-height: 1;
  font-size: 36px;
  width: 60px;
  height: 60px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 100px; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt h3 em {
  margin-left: 20px;
  font-size: 24px;
  font-weight: bold; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt .utilitybox_box {
  background-color: var(--color-glayblue);
  border-radius: 10px;
  padding: 25px;
  margin-top: 30px; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt .utilitybox_box .inner {
  background-color: #fff;
  padding: 25px;
  min-height: 180px; }

.p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt .utilitybox_box .inner p {
  line-height: 1.8; }

@media screen and (max-width: 768px) {
  .p-invariant .p-invariant__list .p-invariant__item + .p-invariant__item {
    margin-top: 40px; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt h3 span {
    font-size: 24px;
    width: 40px;
    height: 40px; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox figure {
    width: 100%;
    margin-top: 20px;
    position: unset;
    top: unset;
    right: unset; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt .utilitybox_box {
    margin-top: 20px; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt {
    width: 100%; }
  .p-invariant .p-invariant__list .p-invariant__item .utilitybox .utilitybox_txt .utilitybox_box .inner {
    min-height: unset; } }

.p-invariant__step {
  padding: 0 20px 100px; }

.p-invariant__step .inner {
  max-width: 1000px;
  margin: 0 auto; }

.p-invariant__step-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-bottom: 100px;
  position: relative; }

.p-invariant__step-list::before {
  content: "";
  width: 103px;
  height: 231px;
  position: absolute;
  top: -211px;
  right: -10px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/top_ayumi06.svg) no-repeat;
  z-index: 1; }

.p-invariant__step-list li {
  background-color: var(--color-glayblue);
  border-radius: 10px;
  padding: 25px 140px 25px 25px;
  position: relative; }

.p-invariant__step-list li::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  right: -25px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/slick_arrow.svg) no-repeat;
  transform: scale(-1, 1) translateY(-50%);
  z-index: 1; }

.p-invariant__step-list li img {
  position: absolute;
  bottom: 0;
  right: 10px;
  max-width: 150px;
  width: 100%; }

.p-invariant__step-list li::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 25px; }

.p-invariant__step-list li:first-child {
  max-width: 410px; }

.p-invariant__step-list li:last-child {
  max-width: 580px;
  margin-left: 10px; }

.p-invariant__step-list li:last-child img {
  max-width: 145px; }

.p-invariant__step-list li:first-child::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/invariant__step1_icon.svg) no-repeat;
  background-size: cover;
  width: 80px;
  height: 68px; }

.p-invariant__step-list li:last-child::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/invariant__step2_icon.svg) no-repeat;
  background-size: cover;
  width: 95px;
  height: 85px; }

.p-invariant__step-list li:last-child::before {
  content: none; }

.p-invariant__step-list li .p-invariant__step-text {
  background-color: #fff;
  padding: 14px 24px;
  border-radius: 10px; }

.p-invariant__step-list li .p-invariant__step-text h3 {
  font-size: 20px;
  padding-bottom: 22px;
  position: relative;
  font-weight: bold; }

.p-invariant__step-list li .p-invariant__step-text h3 span {
  display: inline-block;
  margin-bottom: 10px; }

.p-invariant__step-list li .p-invariant__step-text h3::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 2px;
  width: 46px;
  background-color: var(--color-primary); }

.p-invariant__step-list li .p-invariant__step-text p {
  line-height: 2; }

.p-invariant__step-list li .p-invariant__step-box {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text {
  -ms-flex: 1;
  flex: 1;
  position: relative; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text::before {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  right: -25px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/slick_arrow.svg) no-repeat;
  transform: scale(-1, 1) translateY(-50%);
  z-index: 1; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text__orange {
  width: 150px;
  background-color: var(--color-orange);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
  margin-left: 10px; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text__orange p {
  font-size: 24px;
  color: #fff; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text__orange p span {
  position: relative; }

.p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text__orange p span::after {
  content: "";
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/txt_object.svg) no-repeat;
  background-size: cover;
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px; }

@media screen and (max-width: 768px) {
  .p-invariant__step-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 60px; }
  .p-invariant__step-list::before {
    content: none; }
  .p-invariant__step-list li {
    padding: 25px 25px 160px 25px; }
  .p-invariant__step-list li::before {
    top: unset;
    right: unset;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg); }
  .p-invariant__step-list li::after {
    top: unset;
    right: unset;
    bottom: 25px;
    left: 25px; }
  .p-invariant__step-list li:first-child,
  .p-invariant__step-list li:last-child {
    max-width: 100%;
    width: 100%; }
  .p-invariant__step-list li:last-child {
    margin-left: 0;
    margin-top: 20px; }
  .p-invariant__step-list li img,
  .p-invariant__step-list li:last-child img {
    max-width: 120px; }
  .p-invariant__step-list li .p-invariant__step-box {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text {
    -ms-flex: unset;
    flex: unset;
    width: 100%; }
  .p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text__orange {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding: 25px; }
  .p-invariant__step-list li .p-invariant__step-box .p-invariant__step-text::before {
    top: unset;
    right: unset;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg); } }

/* ==================================== */
/* 25.09 step02 */
/* ==================================== */
.p-step2__relative {
  padding: 100px 20px 50px;
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step1/bg_invariant.png) no-repeat;
  background-size: contain;
  background-position: top center; }

.p-step2__relative .inner {
  max-width: 1000px;
  margin: 0 auto; }

.p-step2__relative .inner .c-flex-wrap {
  margin-bottom: 86px; }

.p-step2__relative .inner .c-box {
  background-color: #CFE5F8; }

.p-step2__relative .inner .c-box .c-box__img {
  min-height: 180px; }

.p-step2__relative .inner .comment {
  padding: 0 20px 40px; }

.p-step2__relative .inner .comment_teacher .comment_fukidashi {
  margin-top: -50px; }

@media screen and (min-width: 768px) {
  .lower .p-step2__relative .inner .comment_teacher img {
    max-width: unset; } }

@media screen and (max-width: 768px) {
  .p-step2__relative {
    padding: 60px 20px 40px; }
  .p-step2__relative .inner .c-flex-wrap {
    margin-bottom: 20px; }
  .p-step2__relative .inner .c-box .c-box__img {
    min-height: unset; }
  .p-step2__relative .inner .c-box .c-box__img img {
    margin: 0 auto; } }

.p-step2__select {
  padding: 50px 0 100px; }

.p-step2__select--difference__anchor {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  position: relative; }

.p-step2__select--difference__anchor::before {
  content: "";
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step2/anchor.png) no-repeat;
  background-size: cover;
  width: 163px;
  height: 197px;
  position: absolute;
  top: -197px;
  left: 0; }

.p-step2__select--difference__anchor a {
  display: block;
  width: calc(33.333% - 15px);
  background-color: #fff;
  position: relative;
  padding: 20px 50px 20px 40px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px; }

.p-step2__select--difference__anchor a::before {
  content: "";
  position: absolute;
  top: calc(50% + -4px);
  right: 40px;
  transform: rotate(135deg) translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-right: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
  display: inline-block;
  height: 6px;
  width: 6px;
  transition: all .3s;
  z-index: 2; }

@media screen and (max-width: 768px) {
  .p-step2__select {
    padding: 40px 0; }
  .p-step2__select--difference__anchor {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-step2__select--difference__anchor a {
    width: 100%; }
  .p-step2__select--difference__anchor a:nth-child(n+2) {
    margin-top: 20px; }
  .p-step2__select--difference__anchor::before {
    width: 56px;
    height: 80px;
    top: -80px;
    left: -10px; } }

.p-step2__select--difference__blk {
  padding-top: 80px; }

.p-step2__select--difference__blk .difference_ttl {
  font-weight: bold;
  font-size: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px; }

.p-step2__select--difference__blk .difference_ttl span {
  line-height: 1;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 100%; }

.p-step2__select--difference__blk .difference_ttl em {
  margin-left: 20px; }

.p-step2__select .p-step2__select--tab {
  max-width: 1000px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.p-step2__select .p-step2__select--tab li {
  width: calc(50% - 10px);
  background-color: var(--color-primary);
  color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 25px;
  text-align: center;
  font-size: 24px; }

.p-step2__select .p-step2__select--tab li.is-active {
  background-color: #CFE5F8;
  color: #333; }

@media screen and (max-width: 768px) {
  .p-step2__select .p-step2__select--tab li {
    padding: 20px 10px;
    font-size: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center; } }

.js-tab--target {
  display: none;
  padding: 100px 20px; }

.js-tab--target.is-active {
  display: block; }

@media screen and (max-width: 768px) {
  .js-tab--target {
    padding: 80px 20px; } }

.p-step2__select--merit {
  background-color: #CFE5F8; }

.p-step2__select--merit .inner {
  max-width: 1000px;
  margin: 0 auto; }

.p-step2__select--merit .inner .c-flex-wrap {
  position: relative; }

.p-step2__select--merit .inner .c-flex-wrap::after {
  content: "";
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step2/select--merit.svg) no-repeat;
  background-size: cover;
  position: absolute;
  top: -165px;
  right: 20px;
  width: 125px;
  height: 215px; }

.p-step2__select--merit .inner .c-box {
  background-color: #fff; }

.p-step2__select--merit .inner .c-box p {
  line-height: 1.75; }

@media screen and (max-width: 768px) {
  .p-step2__select--merit .inner .c-flex-wrap::after {
    top: -75px;
    right: -10px;
    width: 55px;
    height: 94px; } }

.p-step2__select--difference {
  background-color: #CFE5F8; }

.p-step2__select--difference .inner {
  max-width: 1200px;
  margin: 0 auto; }

/* 見た目確認用（任意） */
.p-step2__select--difference .cell {
  background: #f6f8fb;
  min-height: 100px;
  /* border-radius:6px; */ }

.p-step2__select--difference .cell .ttl {
  line-height: 1.5; }

.p-step2__select--difference .cell p {
  line-height: 1.75; }

.p-step2__select--difference .head,
.p-step2__select--difference .body {
  padding: 24px; }

.p-step2__select--difference .head {
  background: var(--color-primary);
  color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }

.p-step2__select--difference .head img {
  margin: 0 auto;
  display: block; }

.p-step2__select--difference .body {
  position: relative; }

.p-step2__select--difference .body .c-comment {
  position: absolute;
  top: 50%;
  right: -420px;
  transform: translateY(-50%);
  width: 400px;
  background-color: #fff;
  z-index: 1;
  border-radius: 10px;
  padding: 24px;
  font-size: 16px; }

.p-step2__select--difference .body .c-comment::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 0;
  left: -3%;
  border-right: 29px solid #fff;
  bottom: 25px;
  z-index: 0; }

.p-step2__select--difference .body .c-comment p {
  line-height: 1.75; }

.p-step2__select--difference .body .c-comment .c-comment__point {
  position: absolute;
  top: -36px;
  left: 18px;
  width: 117px; }

.p-step2__select--difference .body .c-comment .cost {
  position: absolute;
  bottom: -50px;
  right: 20px;
  width: 87px; }

.p-step2__select--difference .body .c-comment .support {
  position: absolute;
  top: -128px;
  right: 20px;
  width: 117px; }

.p-step2__select--difference .body .c-comment .business {
  position: absolute;
  top: -78px;
  right: 20px;
  width: 156px; }

.p-step2__select--difference .label {
  background: var(--color-primary);
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-feature-settings: initial;
  text-orientation: upright;
  text-combine-upright: none; }

.p-step2__select--difference .label span {
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb; }

.p-step2__select--difference .label svg {
  width: 20px;
  fill: #fff; }

.p-step2__select--difference .label svg.automated_paperless {
  width: 40px; }

/* ===== ここが肝：ガター用の列・行を明示 ===== */
.p-step2__select--difference .grid {
  /* 列： [1]=ラベル列 / [2]=ガター(常に0) / [3]=左ボディ / [4]=ガター(通常のgap) / [5]=右ボディ */
  --g-col1: 0px;
  /* ← 1列目と2列目の隙間をゼロにする */
  --g-col2: 8px;
  /* ← 2列目と3列目の隙間（通常gap） */
  /* 行：1行目と2行目の間だけ0、以降は通常gap */
  --g-row1: 0px;
  /* ← 1行目と2行目の間だけ詰める */
  --g-row: 8px;
  /* ← 以降の行間 */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 60px var(--g-col1) 1fr var(--g-col2) 1fr;
      grid-template-columns: 60px var(--g-col1) 1fr var(--g-col2) 1fr;
  -ms-grid-rows: auto var(--g-row1) auto var(--g-row) auto var(--g-row) auto;
      grid-template-rows: auto var(--g-row1) auto var(--g-row) auto var(--g-row) auto;
  /* row 4 */
  max-width: 780px;
  gap: 0;
  /* ← gapは使わず、ガタートラックで制御する */ }

/* ===== 各セルを“ガター列/行”を飛ばして配置 ===== */
.p-step2__select--difference .grid > :nth-child(1) {
  -ms-grid-column: 1;
      grid-column: 1;
  -ms-grid-row: 1;
      grid-row: 1;
  background-color: transparent; }

/* blank   */
.p-step2__select--difference .grid > :nth-child(2) {
  -ms-grid-column: 3;
      grid-column: 3;
  -ms-grid-row: 1;
      grid-row: 1; }

/* head L  */
.p-step2__select--difference .grid > :nth-child(3) {
  -ms-grid-column: 5;
      grid-column: 5;
  -ms-grid-row: 1;
      grid-row: 1; }

/* head R  */
.p-step2__select--difference .grid > :nth-child(4) {
  -ms-grid-column: 1;
      grid-column: 1;
  -ms-grid-row: 3;
      grid-row: 3; }

/* label r2 */
.p-step2__select--difference .grid > :nth-child(5) {
  -ms-grid-column: 3;
      grid-column: 3;
  -ms-grid-row: 3;
      grid-row: 3; }

/* body  r2 */
.p-step2__select--difference .grid > :nth-child(6) {
  -ms-grid-column: 5;
      grid-column: 5;
  -ms-grid-row: 3;
      grid-row: 3; }

/* body  r2 */
.p-step2__select--difference .grid > :nth-child(7) {
  -ms-grid-column: 1;
      grid-column: 1;
  -ms-grid-row: 5;
      grid-row: 5; }

/* label r3 */
.p-step2__select--difference .grid > :nth-child(8) {
  -ms-grid-column: 3;
      grid-column: 3;
  -ms-grid-row: 5;
      grid-row: 5; }

/* body  r3 */
.p-step2__select--difference .grid > :nth-child(9) {
  -ms-grid-column: 5;
      grid-column: 5;
  -ms-grid-row: 5;
      grid-row: 5; }

/* body  r3 */
.p-step2__select--difference .grid > :nth-child(10) {
  -ms-grid-column: 1;
      grid-column: 1;
  -ms-grid-row: 7;
      grid-row: 7; }

/* label r4 */
.p-step2__select--difference .grid > :nth-child(11) {
  -ms-grid-column: 3;
      grid-column: 3;
  -ms-grid-row: 7;
      grid-row: 7; }

/* body  r4 */
.p-step2__select--difference .grid > :nth-child(12) {
  -ms-grid-column: 5;
      grid-column: 5;
  -ms-grid-row: 7;
      grid-row: 7; }

/* body  r4 */
.p-step2__info .inner, .p-step2__security .inner {
  max-width: 1200px;
  margin: 0 auto 100px; }

.p-step2__info .c-flex-wrap, .p-step2__security .c-flex-wrap {
  -ms-flex-align: center;
  align-items: center; }

.p-step2__info .c-flex-wrap ul li.c-check-mark, .p-step2__security .c-flex-wrap ul li.c-check-mark {
  padding-left: 2.5em;
  line-height: 1.8;
  letter-spacing: 0.01em;
  font-size: 24px;
  font-weight: 700; }

.p-step2__info .c-flex-wrap ul li:not(:last-child), .p-step2__security .c-flex-wrap ul li:not(:last-child) {
  margin-bottom: 10px; }

.p-step2__info .c-flex-wrap figure, .p-step2__security .c-flex-wrap figure {
  width: 44.75%;
  padding: 24px;
  background-color: #cfe5f8; }

@media screen and (max-width: 1023px) {
  .p-step2__info, .p-step2__security {
    padding-right: 20px;
    padding-left: 20px; }
  .p-step2__info .c-flex-wrap, .p-step2__security .c-flex-wrap {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-step2__info .c-flex-wrap figure, .p-step2__security .c-flex-wrap figure {
    width: 60%;
    margin-top: 20px; } }

@media screen and (max-width: 640px) {
  .p-step2__info .c-flex-wrap ul li.c-check-mark, .p-step2__security .c-flex-wrap ul li.c-check-mark {
    font-size: 18px; }
  .p-step2__info .c-flex-wrap figure, .p-step2__security .c-flex-wrap figure {
    width: 100%; } }

.h-scroll-wrap {
  position: relative; }

.h-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; }

@media screen and (max-width: 768px) {
  .h-scroll .grid {
    width: 560px;
    margin: 0; } }

/* ---- ヒントUI ---- */
.hs-hint {
  --bg: rgba(0,0,0,.7);
  --fg: #fff;
  --gap: 8px;
  position: absolute;
  left: 80px;
  top: 100px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--gap);
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease; }

.hs-hint.is-show {
  opacity: 1;
  transform: translateY(0);
  animation: hs-pop 1s ease-out .3s both; }

@keyframes hs-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98); }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1); } }

/* アイコン枠（ここに画像を入れてください） */
/* .hs-icon{
  width: 18px; height: 18px; flex: none;
  background: transparent center/contain no-repeat;
  border: 2px solid currentColor; border-radius: 4px;
  opacity: .9;
} */
/* 例：自作アイコンを使う場合（差し替え） */
/* .hs-icon{ border:none; background-image:url(/path/your-icon.svg); } */
.hs-text {
  white-space: nowrap; }

/* 右向きチュートリアル矢印のアニメーション */
.hs-chev {
  position: relative;
  width: 24px;
  height: 12px;
  -ms-flex: none;
  flex: none; }

.hs-chev::before,
.hs-chev::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(currentColor, currentColor) 0 50%/60% 2px no-repeat, linear-gradient(currentColor, currentColor) 100% 50%/40% 2px no-repeat;
  opacity: .9;
  -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 70% 100%, 95% 50%, 70% 0);
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 70% 100%, 95% 50%, 70% 0);
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 30% 100%);
  mask: linear-gradient(90deg, transparent 0%, #000 30% 100%);
  animation: hs-swipe 1.2s ease infinite; }

.hs-chev::after {
  animation-delay: .25s;
  opacity: .6; }

@keyframes hs-swipe {
  0% {
    transform: translateX(-8px);
    opacity: .0; }
  20% {
    opacity: .9; }
  100% {
    transform: translateX(8px);
    opacity: .0; } }

/* 利用者が「簡易動き」に設定しているときはアニメ抑制 */
/* @media (prefers-reduced-motion: reduce){
  .hs-chev::before,.hs-chev::after{ animation: none; }
  .hs-hint{ animation: none; }
} */
.p-step2__info .inner {
  max-width: 395px;
  margin: 0 auto; }

.p-step2__info--full {
  padding: 100px 0;
  position: relative; }

.p-step2__info--full .inner {
  max-width: 1200px;
  margin: 0 auto; }

.p-step2__info--full .inner::after {
  content: none; }

.p-step2__info--full .c-flex-wrap .c-flex02 {
  width: calc(50% - 15px); }

.p-step2__info--full .c-flex-wrap .c-flex02 > a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 20px; }

.p-step2__info--full .c-flex-wrap .c-flex02 > a:hover .c-href {
  background-color: var(--color-primary);
  color: #fff; }

.p-step2__info--full .c-flex-wrap .c-flex02 > a:hover .c-href::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_dl_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step2__info--full .c-flex-wrap .c-flex02:nth-child(n+3) {
  margin-top: 40px; }

.p-step2__info--full .c-flex-wrap__image {
  width: 50%; }

.p-step2__info--full .c-flex-wrap__detail {
  width: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column; }

.p-step2__info--full .c-flex-wrap__detail p {
  line-height: 1.8;
  letter-spacing: 0.01em;
  -ms-flex-positive: 1;
  flex-grow: 1; }

.p-step2__info--full .orange_btn a {
  max-width: 320px;
  margin: 60px auto 0; }

@media screen and (max-width: 768px) {
  .p-step2__info--full {
    padding: 50px 20px; }
  .p-step2__info--full .c-flex-wrap {
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px; }
  .p-step2__info--full .c-flex-wrap .c-flex02 {
    width: 100%; }
  .p-step2__info--full .c-flex-wrap .c-flex02 > a {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-step2__info--full .c-flex-wrap__image {
    width: 100%; }
  .p-step2__info--full .c-flex-wrap__detail {
    width: 100%; }
  .p-step2__info--full .c-flex-wrap__detail .c-href {
    margin-top: 10px; }
  .p-step2__info.info .info_list {
    margin-bottom: 0; } }

/* ==================================== */
/* 25.09 step03 */
/* ==================================== */
.p-step3 {
  padding: 100px 20px 80px; }

.p-step3 .inner {
  max-width: 1200px;
  margin: 0 auto; }

@media screen and (max-width: 768px) {
  .p-step3 {
    padding: 80px 20px 40px; } }

.p-step3__blk a:hover .c-href {
  background-color: var(--color-primary);
  color: #fff; }

.p-step3__blk a:hover .c-href.play::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_play_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step3__blk a:hover .c-href.light::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_light_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step3__blk a:hover .c-href.mov::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_mov_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step3__blk a:hover .c-href.document::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_document_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step3__blk a:hover .c-href.dl::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_dl_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.p-step3__blk a .c-href,
.p-step3__blk .c-link {
  margin-top: 20px; }

.p-step3__blk a .c-href + .c-href,
.p-step3__blk .c-link + .c-link {
  margin-top: 10px; }

.p-step3__blk .c-border_separate {
  margin-top: 24px; }

.p-step3__blk .c-tag {
  margin-bottom: 10px; }

.p-step3__blk .c-lead {
  margin: 24px 0 20px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.01em; }

.p-step3__blk .orange_btn a {
  max-width: 320px;
  margin: 60px auto 0; }

.p-step3__about {
  padding: 60px 20px 0; }

.p-step3__about--bg {
  background-color: #CFE5F8;
  padding: 100px 20px; }

.p-step3__about--anchor {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto; }

.p-step3__about--anchor a {
  width: calc(25% - 20px);
  background-color: var(--color-primary);
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin: 0 10px;
  position: relative;
  padding: 24px 46px 24px 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer; }

.p-step3__about--anchor a::before {
  content: "";
  position: absolute;
  top: calc(50% + -4px);
  right: 20px;
  transform: rotate(135deg) translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  display: inline-block;
  height: 6px;
  width: 6px;
  transition: all .3s;
  z-index: 2; }

.p-step3__about--anchor.small {
  max-width: 745px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.p-step3__about--anchor.small a {
  width: calc(33% - 20px); }

.p-step3__about--anchor.small a:nth-child(n+4) {
  margin-top: 20px; }

@media screen and (max-width: 768px) {
  .p-step3__about--bg {
    padding: 50px 20px; }
  .p-step3__about--anchor {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
  .p-step3__about--anchor a {
    width: 100%;
    margin: 20px 0 0; }
  .p-step3__about--anchor.small {
    gap: 10px; }
  .p-step3__about--anchor.small a {
    padding: 12px 24px 12px 12px;
    width: calc(50% - 10px);
    margin: 0; }
  .p-step3__about--anchor.small a::before {
    right: 15px; }
  .p-step3__about--anchor.small a:nth-child(n+4) {
    margin-top: 0; } }

.p-step3__seminar {
  background-color: #CFE5F8;
  margin-top: 100px; }

.p-step3__seminar--wh {
  background-color: #fff;
  margin-top: 100px; }

.p-step3__seminar--wh .inner {
  max-width: 1200px;
  margin: 0 auto; }

@media screen and (max-width: 640px) {
  .p-step3__seminar--wh {
    margin-top: 50px; }
  .p-step3__seminar--wh .c-step__title {
    margin-right: 20px;
    margin-left: 20px; }
  .p-step3__seminar--wh .inner {
    padding: 0 20px; } }

.p-step3__blk + .p-step3__blk {
  margin-top: 40px; }

.p-step3__service {
  padding-top: 100px; }

.p-step3__document {
  padding: 80px 20px; }

.p-step3__document .inner {
  max-width: 790px;
  margin: 0 auto; }

.p-step3__introduction {
  background-color: #CFE5F8; }

.p-guidebook {
  background-color: var(--color-primary);
  padding: 50px 0; }

.p-guidebook-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 20px 30px;
  border-radius: 10px;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
  align-items: stretch; }

.p-guidebook-inner figure {
  width: calc(33% + 90px);
  margin: 0 30px 0 0; }

.under .p-guidebook-inner figure {
  width: calc(33% + 60px); }

.p-guidebook-inner figure a {
  display: block; }

.p-guidebook-inner__detail {
  -ms-flex: 1;
  flex: 1;
  line-height: 1.8;
  letter-spacing: 0.01em; }

.p-guidebook-inner__detail .ttl {
  font-size: 24px !important;
  padding-bottom: 15px !important;
  margin-bottom: 15px;
  position: relative; }

.p-guidebook-inner__detail .ttl::after {
  bottom: 0 !important; }

.p-guidebook-inner__detail p {
  margin-bottom: 20px; }

.p-guidebook-inner__detail .orange_btn {
  max-width: 320px;
  margin-left: 0; }

.p-guidebook-inner + .c-href {
  max-width: 320px;
  width: 100%;
  margin: 40px auto 60px; }

@media (hover: hover) {
  .p-guidebook-inner figure a:hover {
    opacity: .7; } }

@media screen and (max-width: 1023px) {
  .p-guidebook {
    padding: 20px; }
  .p-guidebook-inner {
    padding: 20px; } }

@media screen and (max-width: 640px) {
  .p-guidebook-inner {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-guidebook-inner figure {
    width: 100% !important;
    margin: 0 0 30px 0; }
  .p-guidebook-inner__detail {
    -ms-flex: 1;
    flex: 1; } }

.p-request {
  border: 5px solid var(--color-request);
  border-radius: 5px;
  background-color: #fff;
  max-width: 1000px;
  margin: 0 auto 100px;
  padding: 30px 0px 32px;
  text-align: center;
  color: var(--color-request); }

.p-request__title {
  line-height: 1.5;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 15px; }

.p-request__title span {
  display: inline-block;
  padding-left: 60px;
  background: url(//www.obc.co.jp/hubfs/obc/v1/images/common/icon_caution.svg) no-repeat 0 0/contain; }

.p-request__lead {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7; }

@media screen and (max-width: 768px) {
  .p-request {
    padding: 20px 15px; }
  .p-request__title {
    font-size: 28px; }
  .p-request__title span {
    padding-left: 42px; }
  .p-request__lead {
    font-size: 20px;
    text-align: left; } }

.p-step {
  padding: 100px 20px 90px; }

.p-step .titlearea h2 {
  letter-spacing: 0.05em; }

.p-step__list {
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  position: relative;
  z-index: 0; }

.p-step__list::before {
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 5px;
  background-color: var(--color-primary);
  top: calc(50% + 5px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; }

.p-step__list figure {
  margin: 0 0 20px; }

.p-step__list figure figcaption {
  padding: 6px 0;
  margin-bottom: 20px;
  background-color: var(--color-primary);
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  letter-spacing: 0.01em;
  line-height: 2;
  color: #fff; }

.p-step__wrap {
  margin-top: 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 4%; }

.p-step__wrap .c-box {
  background: #fff;
  width: 60%;
  padding: 40px;
  position: relative;
  overflow: visible !important; }

.p-step__wrap .c-box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 18%;
  border-style: solid;
  border-width: 0 20px 30px 0;
  border-color: transparent transparent #fff;
  translate: calc(-50% - 0.2px) -100%;
  transform: skew(-10deg);
  transform-origin: bottom; }

.p-step__wrap--title {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary); }

.p-step__wrap--lead {
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.7; }

@media screen and (max-width: 768px) {
  .p-step__list {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-step__list::before {
    content: none; }
  .p-step__wrap {
    -ms-flex-direction: column;
    flex-direction: column; }
  .p-step__wrap .c-box {
    width: 100%;
    padding: 20px; }
  .p-step__wrap .c-box::before {
    content: none; } }

/* ==================================== */
/* 25.09 c- */
/* ==================================== */
.c-bold {
  font-weight: bold; }

.c-step__title {
  text-align: center;
  margin-bottom: 60px; }

.c-step__title.kanjo h2 {
  border-color: var(--color-kanjo); }

.c-step__title.kanjo em {
  color: var(--color-kanjo); }

.c-step__title.kyuyo h2 {
  border-color: var(--color-kyuyo); }

.c-step__title.kyuyo em {
  color: var(--color-kyuyo); }

.c-step__title.akikura h2 {
  border-color: var(--color-akikura); }

.c-step__title.akikura em {
  color: var(--color-akikura); }

.c-step__title h2 {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.6;
  border-bottom: solid 3px var(--color-primary);
  display: inline-block;
  padding-bottom: 10px; }

.c-step__title h2 + p {
  margin-top: 40px; }

.c-step__title p {
  font-size: 20px;
  line-height: 1.8; }

.c-step__title p em {
  font-size: 36px; }

@media screen and (max-width: 768px) {
  .c-step__title {
    text-align: left;
    margin-bottom: 30px; }
  .c-step__title h2 {
    text-align: center;
    font-size: 30px;
    padding-bottom: 10px; }
  .c-step__title p {
    font-size: 18px; }
  .c-step__title h2 + p {
    margin-top: 40px; }
  .c-step__title p em {
    font-size: 30px; } }

.c-border_radius {
  border-radius: 10px;
  overflow: hidden; }

.c-border_separate .ttl {
  font-size: 20px;
  padding-bottom: 35px;
  position: relative;
  font-weight: bold;
  line-height: 1.5; }

.c-border_separate .ttl::after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 0;
  height: 2px;
  width: 46px;
  background-color: var(--color-primary); }

.c-border_separate .ttl small {
  font-size: 16px; }

.c-border_separate p {
  line-height: 1.75; }

.c-flex-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.c-flex-wrap .c-flex02 {
  width: calc(50% - 10px); }

.c-flex-wrap .c-flex03 {
  width: calc(33.333% - 10px); }

.c-flex-wrap .c-flex02:nth-child(n+3),
.c-flex-wrap .c-flex03:nth-child(n+4) {
  margin-top: 20px; }

@media screen and (max-width: 768px) {
  .c-flex-wrap .c-flex02,
  .c-flex-wrap .c-flex03 {
    width: 100%; }
  .c-flex-wrap .c-flex02:nth-child(n+3),
  .c-flex-wrap .c-flex03:nth-child(n+4) {
    margin-top: unset; }
  .c-flex-wrap .c-flex02:nth-child(n+2),
  .c-flex-wrap .c-flex03:nth-child(n+2) {
    margin-top: 20px; } }

.c-box {
  border-radius: 10px;
  overflow: hidden;
  padding: 24px;
  background-color: #fff; }

.c-box__img {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 20px; }

.c-box__img_lg {
  width: calc(100% + 48px);
  margin-top: -24px;
  margin-left: -24px; }

.c-box__img_lg img {
  width: 100%; }

/* bugyo-cloud copy */
.p-support h3 {
  padding-bottom: 20px;
  border-bottom: 1px dashed #233862;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  margin: 30px auto 15px;
  color: #233862; }

.p-support .c-flex-wrap .c-flex03 > figure img {
  width: 100%;
  height: auto; }

.p-support .c-flex-wrap .c-flex03 > p {
  letter-spacing: 0.05em; }

.c-flex-wrap.column64 > .c-flex03 {
  width: calc((100% - (80px)) / 3); }

.c-flex-wrap.column64 > .c-flex03:not(:nth-of-type(3n)) {
  margin-right: 40px; }

.c-flex-wrap.row100 > .c-flex03:nth-of-type(n+4) {
  margin-top: 80px; }

/* c-grid */
.c-grid01 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[1];
      grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 60px 40px; }

.c-grid02 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[2];
      grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 40px; }

.c-grid03 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[3];
      grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 40px; }

@media (max-width: 768px) {
  .c-grid02,
  .c-grid03 {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr; } }

/* bugyo-cloud add */
.p-support {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 100px; }

.p-support .c-flex03 figure {
  margin-bottom: 20px; }

/* 汎用SPスクロール */
@media (max-width: 768px) {
  .c-sp__scroll--tgt {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; }
  .c-sp__scroll--tgt > * {
    width: 680px; } }

.c-sp__scroll .c-sp__scroll--instructions {
  position: absolute;
  left: 20px;
  top: 40px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  /* 下の要素にタップを通す */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease; }

.c-sp__scroll {
  position: relative; }

/* ヒントを内側右下に固定 */
.c-sp__scroll .c-sp__scroll--instructions.is-show {
  opacity: 1;
  transform: translateY(0);
  animation: hs-pop 300ms ease-out;
  /* 表示時のみ軽くポップ */ }

@keyframes hs-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98); }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .c-sp__scroll--instructions.is-show {
    animation: none; } }

.c-sp__scroll .c-sp__scroll--instructions .chev {
  position: relative;
  width: 24px;
  height: 12px;
  -ms-flex: none;
  flex: none; }

.c-sp__scroll .c-sp__scroll--instructions .chev::before,
.c-sp__scroll .c-sp__scroll--instructions .chev::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(currentColor, currentColor) 0 50%/60% 2px no-repeat, linear-gradient(currentColor, currentColor) 100% 50%/40% 2px no-repeat;
  opacity: .9;
  -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 70% 100%, 95% 50%, 70% 0);
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 70% 100%, 95% 50%, 70% 0);
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 30% 100%);
  mask: linear-gradient(90deg, transparent 0%, #000 30% 100%);
  animation: swipe 1.2s ease infinite; }

.c-sp__scroll .c-sp__scroll--instructions .chev::after {
  animation-delay: .25s;
  opacity: .6; }

@keyframes swipe {
  0% {
    transform: translateX(-8px);
    opacity: .0; }
  20% {
    opacity: .9; }
  100% {
    transform: translateX(8px);
    opacity: .0; } }

.c-href {
  display: block;
  text-align: center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 15px 63px;
  position: relative;
  border-radius: 100px;
  transition: all .3s; }

.c-href::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%); }

.c-href.play::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_play.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-href.dl::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_dl.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-href.arrow::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_arrow.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link {
  display: block;
  text-align: center;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 15px 63px;
  position: relative;
  border-radius: 100px;
  transition: all .3s; }

.c-link::after {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%); }

.c-link.play::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_play.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link.dl::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_dl.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link.arrow::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_arrow.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link:hover {
  background-color: var(--color-primary);
  color: #fff; }

.c-link.play:hover::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_play_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link.dl:hover::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_dl_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-link.arrow:hover::after {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_arrow_w.svg) no-repeat;
  background-size: cover;
  background-position: center; }

.c-icon_ttl {
  padding-left: 46px;
  position: relative;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px; }

.c-icon_ttl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 100%; }

.c-icon_ttl.light::before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/top-seminar_01.svg) no-repeat;
  background-size: contain;
  background-position: center; }

.c-icon_ttl.favorite::before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/top-seminar_02.svg) no-repeat;
  background-size: contain;
  background-position: center; }

.c-icon_ttl.helpful::before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/top/top-seminar_03.svg) no-repeat;
  background-size: contain;
  background-position: center; }

.c-icon_ttl.mov::before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_mov.svg) no-repeat;
  background-size: contain;
  background-position: center; }

.c-icon_ttl.c-icon_ttl--document::before {
  background: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_document.svg) no-repeat;
  background-size: contain;
  background-position: center; }

.c-icon_ttl.c-icon_ttl--document::before {
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_document.svg);
  mask-image: url(https://www.obc.co.jp/hubfs/obc/v1/images/landing/utc/index/step3/icon_document.svg); }

.kanjo .c-icon_ttl .blue, .kanjo .c-icon_ttl em {
  color: var(--color-kanjo); }

.kanjo .c-icon_ttl.c-icon_ttl--document::before {
  background: var(--color-kanjo); }

.kyuyo .c-icon_ttl .blue, .kyuyo .c-icon_ttl em {
  color: var(--color-kyuyo); }

.kyuyo .c-icon_ttl.c-icon_ttl--document::before {
  background: var(--color-kyuyo); }

.akikura .c-icon_ttl .blue, .akikura .c-icon_ttl em {
  color: var(--color-akikura); }

.akikura .c-icon_ttl.c-icon_ttl--document::before {
  background: var(--color-akikura); }

/* c-tag */
.c-tag p {
  padding: 6px 12px;
  font-weight: bold;
  border: 1px solid #ccc;
  display: inline-block;
  line-height: 1; }

.c-tag .casestudy {
  color: var(--color-primary);
  background-color: #CFE5F8;
  border-color: #CFE5F8; }

.c-tag .kanjo {
  color: var(--color-kanjo);
  border-color: var(--color-kanjo); }

.c-tag .kanjo-kobetsu {
  color: #f33d42;
  border-color: #f33d42; }

.c-tag .kanjo-kensetsu {
  color: #5a181c;
  border-color: #5a181c; }

.c-tag .kyuyo {
  color: var(--color-kyuyo);
  border-color: var(--color-kyuyo); }

.c-tag .saiken {
  color: #EB6D9A;
  border-color: #EB6D9A; }

.c-tag .saimu {
  color: #B963A4;
  border-color: #B963A4; }

.c-tag .akikura {
  color: var(--color-akikura);
  border-color: var(--color-akikura); }

.c-tag .akinai {
  color: #009140;
  border-color: #009140; }

.c-tag .kura {
  color: #5CAF30;
  border-color: #5CAF30; }

.c-tag .somujinji {
  color: #00A7B7;
  border-color: #00A7B7; }

.c-tag .jinji {
  color: #00A7B7;
  border-color: #00A7B7; }

.c-tag .hotei {
  color: #009ED4;
  border-color: #009ED4; }

.c-tag .kotei {
  color: #5D2976;
  border-color: #5D2976; }

.c-tag .shinkoku {
  color: #e77008;
  border-color: #e77008; }

.c-tag .shinkoku-hc {
  color: #e77008;
  border-color: #e77008; }

.c-tag .shinkoku-ug {
  color: #fb9b00;
  border-color: #fb9b00; }

.c-tag .eb-cloud {
  color: #021650;
  border-color: #021650; }

.c-tag .dx_ac {
  color: #95257c;
  border-color: #95257c; }

.c-tag .dx_sa {
  color: #196B24;
  border-color: #196B24; }

.c-tag .dx_hr {
  color: #0074BE;
  border-color: #0074BE; }

.c-tag .edge {
  color: #00438b;
  border-color: #00438b; }

.c-notice {
  font-size: 85%; }

.c-check-mark {
  padding: 10px 10px 10px 40px;
  position: relative; }

.c-check-mark::before, .c-check-mark::after {
  content: '';
  display: inline-block;
  position: absolute; }

.c-check-mark::before {
  width: 1.67em;
  height: 1.67em;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  border-radius: 100vh;
  top: .6em;
  left: 0; }

.c-check-mark::after {
  width: .75em;
  height: .5em;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  border-radius: 3px;
  left: 0.4em;
  top: 1.1em;
  transform: rotate(-45deg);
  margin: auto; }

@media (max-width: 768px) {
  .c-check-mark.nowrap {
    white-space: nowrap; } }

.c-banner {
  display: block;
  margin: 60px auto; }

@media (max-width: 768px) {
  .c-banner {
    margin: 30px auto; } }