@charset 'utf-8';

/* top
------------------------------------------------ */
.top-lead { font-size: 1.4rem; }

@media screen and (max-width: 768px) {
	.top-lead { margin: 0 20px; }
}

@media screen and (min-width: 769px) {
	.top-lead { text-align: center; font-size: 1.8rem; }
}

/* visual
------------------------------------------------ */
.top-visual { position: relative; }
.top-visual-frame { position: relative; padding-bottom: 56.2666666667%; width: 100%; height: 0; overflow: hidden; }
.top-visual-move { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-item { position: relative; }
.top-visual-cover { display: block; width: 100%; }
.top-visual-cover img { width: 100%; max-width: inherit; }
.top-visual-direct { position: absolute; top: 50%; margin-top: -11px; width: 14px; height: 22px; background-position: center center; background-repeat: no-repeat; background-size: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; z-index: 2; }
.top-visual-direct--prev { left: 10px; background-image: url(../../img/icon/slide_prev1.png); }
.top-visual-direct--next { right: 10px; background-image: url(../../img/icon/slide_next1.png); }
.top-visual-bullets { position: absolute; bottom: 10px; left: 0; width: 100%; height: 7px; text-align: center; z-index: 2; }
.top-visual-bullets > a { display: inline-block; margin: 0 5px; width: 7px; height: 100%; background: #fff; border-radius: 50%; text-indent: -9999px; white-space: nowrap; vertical-align: top; overflow: hidden; opacity: .5; }
.top-visual-bullets > a.active { opacity: 1; }

@media screen and (min-width: 769px) {
	.top-visual-frame { padding-bottom: 36.6666666667%; }
	.top-visual-direct { margin-top: -22px; width: 26px; height: 43px; }
	.top-visual-direct--prev { left: 36px; }
	.top-visual-direct--next { right: 36px; }
	.top-visual-bullets { bottom: 13px; height: 14px; }
	.top-visual-bullets > a { margin: 0 10px; width: 14px; }
}

/* category
------------------------------------------------ */
.top-category { margin-top: 22px; }

@media screen and (min-width: 769px) {
	.top-category { margin-top: 60px; }
}

/* find
------------------------------------------------ */
.top-find { position: relative; padding: 45px 0 50px; }
.top-find-tab__links { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.top-find-tab__links--item { position: relative; text-align: center; font-size: 1.2rem; font-weight: 700; }
.top-find-tab__links--item > a { display: block; position: relative; padding: 13px 2px; background: #ccc; border-radius: 3px; text-decoration: none; color: #fff; }
.top-find-tab__links--item > a.active { background: #46c0e4; }
.top-find-tab__links--item > a:after { content: ''; position: absolute; top: 50%; right: 7px; transition: ease .4s; transform: rotate(90deg); margin-top: -7px; width: 14px; height: 14px; background: url(../../img/icon/arrow4.png) no-repeat center center; background-size: 100%; }
.top-find-tab__links--item > a.active:after { opacity: 0; }
.top-find-tab--target { display: none; position: relative; }
.top-find-lists { display: flex; flex-wrap: wrap; }
.top-find-lists--item > a { display: block; position: relative; text-decoration: none; }
.top-find-lists__info { margin-top: 2px; }
.top-find-lists--title { text-align: center; font-size: 1.4rem; font-weight: 400; }
.top-find-tag__box--title { margin-bottom: 20px; }
.top-find-tag__box__content { padding: 0 8px; }
.top-find-tag__lists { display: flex; flex-wrap: wrap; margin: -12px 0 0 -5px; }
.top-find-tag__lists--item { margin: 12px 0 0 5px; font-size: 1.4rem; }
.top-find-tag__lists--item > a { display: block; padding: 6px 14px 6px 10px; height: 100%; background: #fff; border-left: solid #4bcff6 3px; text-decoration: none; }
.prd-box { position: relative; padding: 20px 0 15px; background: #f3f3f3; }
.prd-search-box--title { margin-bottom: 20px; }
.prd-search-box__content { padding: 0 3px; }
.prd-search-keyword input,
.prd-search-keyword button { appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 100%; height: 100%; background: none; border: none; border-radius: 0; font-family: inherit; }
.prd-search-keyword .frame { display: flex; align-items: center; height: 45px; }
.prd-search-keyword--input { width: calc(100% - 76px); height: 100%; }
.prd-search-keyword--input > input { padding: 6px; background: #fff; border: solid #999 1px; font-size: 1.6rem; }
.prd-search-keyword--submit { margin-left: 8px; width: 58px; height: 100%; }
.prd-search-keyword--submit > button { background: #2e78cb; border-radius: 3px; font-size: 1.6rem; color: #fff; cursor: pointer; }
.prd-result { margin-top: 40px; }

@media screen and (max-width: 768px) {
	.top-find-tab { margin: 22px 20px 0; }
	.top-find-tab__links--item { margin: 2.23880597015% 1.49253731343% 0 0; width: 49.2537313433%; }
	.top-find-tab__links--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-find-tab__links--item:nth-of-type(2n) { margin-right: 0; }
	.top-find-lists--item { margin: 22px 1.49253731343% 0 0; width: 49.2537313433%; }
	.top-find-lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-find-lists--item:nth-of-type(2n) { margin-right: 0; }
	.top-find-tag { margin: 0 16px; }
	.prd-box { margin: 20px 20px 0; }
	.prd-box .title-4 { margin: 0 12px 24px; }
	.prd-search { margin: 0 16px; }
}

@media screen and (min-width: 769px) {
	.top-find { padding: 70px 0 60px; }
	.top-find-tab { margin-top: 36px; }
	.top-find-tab__links { margin-bottom: 28px; }
	.top-find-tab__links--item { margin: .5% .33333333333% 0 0; width: 33.1111111111%; font-size: 1.8rem; }
	.top-find-tab__links--item:nth-of-type(-n+3) { margin-top: 0; }
	.top-find-tab__links--item:nth-of-type(3n) { margin-right: 0; }
	.top-find-tab__links--item > a { padding: 11px 4px; border-radius: 5px; }
	.top-find-tab__links--item > a:after { right: 12px; margin-top: -11px; width: 22px; height: 22px; }
	.top-find-lists--item { margin: 26px 2.3% 0 0; width: 14.75%; }
	.top-find-lists--item:nth-of-type(-n+6) { margin-top: 0; }
	.top-find-lists--item:nth-of-type(6n) { margin-right: 0; }
	.top-find-lists__info { margin-top: 8px; }
	.top-find-tag__box { display: flex; }
	.top-find-tag__box--title { margin: 10px 0 0; width: 218px; }
	.top-find-tag__box__content { padding: 0; width: calc(100% - 218px); }
	.top-find-tag__lists { margin: -16px 0 0 -16px; }
	.top-find-tag__lists--item { margin: 16px 0 0 16px; font-size: 1.6rem; }
	.top-find-tag__lists--item > a { padding: 8px 16px; border-left-width: 6px; }
	.prd-box { margin-top: 30px; padding: 30px 50px 50px; }
	.prd-search-box { display: flex; flex-wrap: wrap; }
	.prd-search-box--title { margin: 12px 0 0; width: 222px; }
	.prd-search-box__content { padding: 0; width: calc(100% - 222px); }
	.prd-search-keyword .frame { height: 50px; }
	.prd-search-keyword--input { width: calc(100% - 105px); max-width: 600px; }
	.prd-search-keyword--input > input { padding: 6px; font-size: 1.8rem; }
	.prd-search-keyword--submit { margin-left: 14px; width: 60px; height: 45px; }
	.prd-search-keyword--submit > button { border-radius: 5px; font-size: 1.8rem; }
	.prd-result { margin-top: 54px; }
}

/* about
------------------------------------------------ */
.top-about { position: relative; margin-top: 40px; }
.top-about-detail { position: relative; margin-top: 20px; background: #4ccff6; }
.top-about-detail:before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -16px; width: 0; height: 0; border-top: solid #fff 10px; border-right: solid transparent 16px; border-left: solid transparent 16px; }
.top-about-copy { position: relative; margin-bottom: 40px; text-align: center; z-index: 2; }
.top-about-copy--title { display: inline-block; position: relative; vertical-align: top; font-size: 1.8rem; font-weight: 700; color: #fff; }
.top-about-copy--title:after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 2px; background: #fff; z-index: -2; }
.top-about-copy .circle { display: inline-block; position: relative; margin: -2px 2px 0; width: 44px; height: 44px; background: #2e78cb; border-radius: 50%; vertical-align: middle; }
.top-about-copy .circle:after { content: ''; position: absolute; top: 0; left: -2px; width: 48px; height: 100%; background: #4ccff6; z-index: -1; }
.top-about-copy .num,
.top-about-copy .en { position: absolute; left: 0; width: 100%; font-family: 'Roboto', sans-serif; line-height: 1.2; }
.top-about-copy .num { top: 2px; font-size: 2.88rem; font-weight: 700; }
.top-about-copy .en { bottom: 6px; font-size: .6rem; font-weight: 400; }
.top-about-lists { display: flex; flex-wrap: wrap; justify-content: center; }
.top-about-lists--photo { position: relative; width: 100%; }
.top-about-lists--photo > a { display: block; position: relative; width: 100%; }
.top-about-lists__info { margin-top: 4px; }
.top-about-lists--title { text-align: center; font-size: 1.4rem; font-weight: 400; color: #fff; }

@media screen and (max-width: 768px) {
	.top-about-detail { padding: 45px 20px 40px; }
	.top-about-lists--item { margin: 20px 2.98507462687% 0 0; width: 48.5074626866%; }
	.top-about-lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-about-lists--item:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
	.top-about { margin-top: 70px; }
	.top-about-detail { margin-top: 34px; padding: 62px 0 70px; }
	.top-about-detail:before { margin-left: -90px; border-top-width: 32px; border-right-width: 90px; border-left-width: 90px; }
	.top-about-copy { margin-bottom: 36px; }
	.top-about-copy--title { font-size: 3rem; }
	.top-about-copy--title:after { bottom: 13px; }
	.top-about-copy .circle { margin: -12px 4px 0; width: 72px; height: 72px; }
	.top-about-copy .circle:after { left: -4px; width: 80px; }
	.top-about-copy .num { top: 1px; font-size: 4.8rem; }
	.top-about-copy .en { bottom: 8px; font-size: 1rem; }
	.top-about-lists--item { margin: 20px 3.125% 0 0; width: 17.5%; }
	.top-about-lists--item:nth-of-type(-n+5) { margin-top: 0; }
	.top-about-lists--item:nth-of-type(5n) { margin-right: 0; }
	.top-about-lists--title { font-size: 1.6rem; }
}

/* information
------------------------------------------------ */
.top-information { position: relative; padding: 45px 0 50px; }
.top-info-lists--item > a { display: block; position: relative; text-decoration: none; }
.top-info-lists--link { position: relative; margin-top: 10px; text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.top-info-lists--link > span { display: block; position: relative; padding: 14px 0; background: #2e78cb; border-radius: 3px; color: #fff; }
.top-info-lists--link > span:after { content: ''; position: absolute; top: 50%; right: 8px; margin-top: -8px; width: 16px; height: 16px; background: url(../../img/icon/arrow4.png) no-repeat center center; background-size: 100%; }

@media screen and (max-width: 768px) {
	.top-info-lists { margin: 22px 20px 0; }
	.top-info-lists--item { margin-top: 25px; }
	.top-info-lists--item:first-child { margin-top: 0; }
}

@media screen and (min-width: 769px) {
	.top-information { padding: 72px 0 60px; }
	.top-info-lists { display: flex; flex-wrap: wrap; margin-top: 36px; }
	.top-info-lists--item { margin: 3.33333333333% 3.33333333333% 0 0; width: 48.3333333333%; }
	.top-info-lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-info-lists--item:nth-of-type(2n) { margin-right: 0; }
	.top-info-lists--link { font-size: 1.8rem; }
	.top-info-lists--link > span { border-radius: 5px; }
	.top-info-lists--link > span:after { right: 18px; margin-top: -11px; width: 22px; height: 22px; }
}

/* news
------------------------------------------------ */
.top-news { position: relative; background-color: #F7F7F7; }
.top-news .title-1 { margin-bottom: 28px; }

@media screen and (max-width: 768px) {
	.top-news { padding: 45px 20px 65px; }
}

@media screen and (min-width: 769px) {
	.top-news { padding: 80px 0 100px; }
	.top-news .title-1 { margin-bottom: 40px; }
}

/* solution
------------------------------------------------ */
.top-solution { position: relative; padding: 45px 0 50px; background: url(../../img/share/bg1.png) repeat left top; background-size: 4px; }
.top-sol-tab__links { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.top-sol-tab__links--item { position: relative; text-align: center; font-size: 1.4rem; font-weight: 700; }
.top-sol-tab__links--item > a { display: block; position: relative; padding: 12px 2px; background: #ccc; border-radius: 3px; text-decoration: none; color: #fff; }
.top-sol-tab__links--item > a.active { background: #46c0e4; }
.top-sol-tab__links--item > a:after { content: ''; position: absolute; top: 50%; right: 8px; transition: ease .4s; transform: rotate(90deg); margin-top: -8px; width: 16px; height: 16px; background: url(../../img/icon/arrow4.png) no-repeat center center; background-size: 100%; }
.top-sol-tab__links--item > a.active:after { opacity: 0; }
.top-sol-tab--target { display: none; position: relative; }
.top-sol-lists--item > a { display: flex; position: relative; padding: 12px; background: #fff; border-radius: 3px; text-decoration: none; }
.top-sol-lists--photo { width: 42.5696594427%; }
.top-sol-lists__info { margin-left: 2.78637770898%; width: 54.6439628483%; }
.top-sol-lists--icon { margin-bottom: 4px; }
.top-sol-lists--title { font-size: 1.2rem; font-weight: 400; }
.top-sol-tag__box--title { margin-bottom: 20px; }
.top-sol-tag__box__content { padding: 0 8px; }
.top-sol-tag__lists { display: flex; flex-wrap: wrap; margin: -12px 0 0 -5px; }
.top-sol-tag__lists--item { margin: 12px 0 0 5px; font-size: 1.4rem; }
.top-sol-tag__lists--item > a { display: block; padding: 6px 14px 6px 10px; height: 100%; background: #fff; border-left: solid #4bcff6 3px; text-decoration: none; }

@media screen and (max-width: 768px) {
	.top-sol-tab { margin: 22px 20px 0; }
	.top-sol-tab__links--item { margin: 2.23880597015% 1.49253731343% 0 0; width: 49.2537313433%; }
	.top-sol-tab__links--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-sol-tab__links--item:nth-of-type(2n) { margin-right: 0; }
	.top-sol-lists--item { margin-top: 10px; }
	.top-sol-lists--item:first-child { margin-top: 0; }
	.top-sol-tag { margin: 0 16px; }
}

@media screen and (min-width: 769px) {
	.top-solution { padding: 70px 0 60px; background-size: 8px; }
	.top-sol-tab { margin-top: 36px; }
	.top-sol-tab__links { margin-bottom: 24px; }
	.top-sol-tab__links--item { margin: .33333333333% .33333333333% 0 0; width: 49.8333333333%; font-size: 2rem; }
	.top-sol-tab__links--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-sol-tab__links--item:nth-of-type(2n) { margin-right: 0; }
	.top-sol-tab__links--item > a { padding: 9px 4px; border-radius: 5px; }
	.top-sol-tab__links--item > a:after { right: 24px; margin-top: -11px; width: 22px; height: 22px; }
	.top-sol-lists { display: flex; flex-wrap: wrap; }
	.top-sol-lists--item { margin: 2% 1.66666666667% 0 0; width: 49.1666666667%; }
	.top-sol-lists--item:nth-of-type(-n+2) { margin-top: 0; }
	.top-sol-lists--item:nth-of-type(2n) { margin-right: 0; }
	.top-sol-lists--item > a { padding: 20px; border-radius: 5px; }
	.top-sol-lists--photo { width: 36.3636363636%; }
	.top-sol-lists__info { margin-left: 2.54545454545%; width: 61.0909090909%; }
	.top-sol-lists--title { font-size: 1.4rem; line-height: 1.71428571429; }
	.top-sol-tag__box { display: flex; }
	.top-sol-tag__box--title { margin: 10px 0 0; width: 218px; }
	.top-sol-tag__box__content { padding: 0; width: calc(100% - 218px); }
	.top-sol-tag__lists { margin: -16px 0 0 -16px; }
	.top-sol-tag__lists--item { margin: 16px 0 0 16px; font-size: 1.6rem; }
	.top-sol-tag__lists--item > a { padding: 8px 16px; border-left-width: 6px; }
}

/* bnrs-1
------------------------------------------------ */
.bnrs-1 { margin-top: 0; background: #f8f8f8; }
