@charset "utf-8";

#main {
    padding-bottom: 80px;
}

/*=============================================================================
    縦積みレイアウト
=============================================================================*/
.stack > * + * {
    margin-top: 80px;
}

.stack-s > * + * {
    margin-top: 40px;
}

/*=============================================================================
    ボタン
=============================================================================*/
.button-wrapper > * + *{
    margin-top: 16px;
}

.primary-button,
.secondary-button {
    display: block;
    width: 400px;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    font-weight: bold;
    font-size: 20px;
}
.primary-button::after,
.secondary-button::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 16px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #FAA400;
}

.primary-button {
    background-color: #0064B9;
    color: #fff !important;
}

.secondary-button {
    border: 2px solid #ccc;
    color: #000 !important;
}

/*=============================================================================
    セクション
=============================================================================*/
.section {}

.section-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-bottom: 2px solid #0064B9;
    color: #0064B9;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 40px;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 48px;
    background: url(../images/oem_odm/section_icon.png) 0 0 no-repeat;
    background-size: cover;
    margin-right: 10px;
    transform: translateY(4px);
}

.section-intro {
    margin-bottom: 40px;
    line-height: 2;
    text-align: center;
    font-size: 16px;
}

/*=============================================================================
    サブセクション
=============================================================================*/
.sub-section {}

.sub-section-title {
    margin-bottom: 30px;
    line-height: 1.43;
    color: #0064B9;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 32px;
}

.sub-section-title-note {
    display: block;
    margin-top: 16px;
    text-align: center;
    color: #000;
    font-family: 'メイリオ',Meiryo,'游ゴシック体', Yu Gothic, YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
    font-size: 16px;
    font-weight: normal;
}

.sub-section-title-note-mark {
    vertical-align: top;
    font-size: 14px;
}

/*=============================================================================
    ファーストビュー
=============================================================================*/
#firstView {
    position: relative;
    min-height: 744px;
    padding: 64px 0 40px;
    background: url(../images/oem_odm/fv_bg.jpg) 0 134px no-repeat;
}

#fvPoints {
    display: flex;
    justify-content: center;
    margin-bottom: 86px;
}

#fvPoints .item {
    display: flex;
    align-items: center;
    margin: 0 20px;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 28px;
}
#fvPoints .item::before {
    content: '';
    display: block;
    width: 35px;
    height: 34px;
    margin-right: 10px;
    background: url(../images/oem_odm/icon_check.svg) 0 0 no-repeat;
    background-size: cover;
}

#fvTitle {
    margin-bottom: 50px;
    text-align: center;
}

#fvBadge {
    position: absolute;
    top: 210px;
    right: 2px;
}

#fvText {
    margin-bottom: 64px;
    font-weight: bold;
    font-size: 18px;
    line-height: 2;
}

/*=============================================================================
    こんな製品なら回転成形をご検討ください。
=============================================================================*/
#merits {}
#merits > * + * {
    margin-top: 20px;
}

.merit {
    display: flex;
    justify-content: space-between;
}

.merit .merit-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 634px;
    text-align: left;
}

.merit .merit-main .merit-title {
    margin-bottom: 24px;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 32px;
}

.merit .merit-main .merit-details {
    font-size: 16px;
}
.merit .merit-main .merit-details li {
    list-style: disc;
    margin-left: 24px;
}
.merit .merit-main .merit-details li + li {
    margin-top: 10px;
}
.merit .merit-main .merit-details b {
    color: #F79800;
    font-weight: bold;
}
.merit .merit-main .merit-details .small {
    font-size: 14px;
}

.merit .merit-image {
    display: block;
    width: 296px;
}

/*=============================================================================
    成形方法の比較
=============================================================================*/
.hikaku,
.hikaku-3cols {
    display: flex;
    flex-wrap: wrap;
}

.hikaku-item {
    width: 22.5%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-left: none;
}
.hikaku-3cols .hikaku-item {
    width: 33.3%;
}
.hikaku-item:first-child {
    position: relative;
    width: 32.5%;
    border-color: #0064B9;
    border-left: 4px solid #0064B9;
    border-right: 4px solid #0064B9;
}
.hikaku-3cols .hikaku-item:first-child {
    width: 33.3%;
}
.hikaku-item:first-child::before,
.hikaku-item:first-child::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    content: '';
    display: block;
    background-color: #0064B9;
}
.hikaku-item:first-child::before {
    top: -2px;
}
.hikaku-item:first-child::after {
    bottom: -2px;
}

.hikaku-header {
    position: relative;
    height: 260px;
    padding: 28px 0;
}
.hikaku-3cols .hikaku-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    padding: 0;
}

.hikaku-text {
    margin-bottom: 7px;
    color: #000;
    line-height: 1;
    font-size: 16px;
    font-weight: bold;
}

.hikaku-name {
    color: #000;
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 24px;
}
.hikaku-item:first-child .hikaku-name {
    color: #0064B9;
}
.hikaku-name > span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.hikaku-image {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.hikaku-balloon {
    position: absolute;
    top: -52px;
    left: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 4px;
    background-color: #0064B9;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
.hikaku-balloon::after {
    position: absolute;
    bottom: -8px;
    left: calc(50% - 4px);
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8.5px 0 8.5px;
    border-color: #0064B9 transparent transparent transparent;
}

.hikaku-body {}

.hikaku-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.hikaku-cell:nth-child(odd) {
    background-color: #F2F3F5;
}

.hikaku-label {
    margin-bottom: 4px;
    font-size: 16px;
}

.hikaku-icon {}

.hikaku-value {
    font-size: 18px;
    font-weight: bold;
}
.hikaku-value > b {
    color: #F79800;
}

/*=============================================================================
    年間生産量の比較
=============================================================================*/
#share {
    display: flex;
    justify-content: space-between;
    padding: 24px 32px;
    background-color: #F2F3F5;
    border-radius: 8px;
}

#shareGraph {}

#shareText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 574px;
    text-align: left;
    line-height: 2;
    font-size: 16px;
}

#shareTitle {
    margin-bottom: 24px;
    color: #0064B9;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 24px;
}

/*=============================================================================
    製品から見る特徴
=============================================================================*/
#feature {
    display: flex;
    justify-content: space-between;
}

#feature .item  {
    position: relative;
    display: block;
    width: 296px;
}

#feature .item .thumbnail {
    display: block;
    width: 100%;
}

#feature .item .zoom {
    position: absolute;
    width: 36px;
    bottom: 10px;
    right: 12px;
}

/* LightBox のスタイルを上書き（画面より大きい画像は縮小せずスクロールで表示） */
.lb-outerContainer {
    overflow: auto !important;
}

/*=============================================================================
    生産事例
=============================================================================*/
#c04{
}
#c04 .crosshead{
    text-align: left;
}
#c04 .crosshead span a{
    display: inline-block;
    background: #e5a326;
    color: #FFF;
    margin:0 0 0 10px;
    padding:5px 10px;
    line-height: 1;
    }

#c04 .item{
    padding:1px;
}
#c04 .item .crosshead{
    text-align: left;
}
#c04 .item > .inner{
    margin:5px 0 0;
    text-align: left;
    border:3px solid #CCC;
    border-radius: 10px;
}
#c04 .item a{
    padding:10px 10px 10px;
    display: block;
}
#c04 .item figure{
    padding:0 0 10px 10px;
}
#c04 .item .subhead{
    font-size: 1.3rem;
    font-weight: bold;
}
#c04 .item .summary{
    padding:5px 0 0;
    line-height: 1.8;
    font-size: 1.1rem;
}

/*=============================================================================
    FRP・金属製品のよくある課題 / より優れた製品を目指して
=============================================================================*/
.column {
    padding: 24px 60px 40px;
    background-color: #F2F3F5;
    border-radius: 8px;
    font-size: 16px;
}

.column-title {
    margin-bottom: 24px;
    text-align: center;
    color: #0064B9;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 32px;
}

.needs {
    width: 720px;
    margin: 0 auto;
}

.needs li {
    display: flex;
    align-items: center;
    text-align: left;
}
.needs li + li {
    margin-top: 10px;
}
.needs li::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background: url(../images/oem_odm/icon_negative.svg) 0 0 no-repeat;
    background-size: cover;
}

.spec {
    margin-top: 24px;
}

.spec-item {
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #ccc;
    font-size: 14px;
}
.spec-item:last-child {
    border-bottom: 1px solid #ccc;
}

.spec-item dt {
    width: 135px;
    padding-left: 35px;
    text-align: left;
    font-weight: bold;
}

.spec-item dd{
    width: 715px;
    text-align: left;
}

.spec-item hr {
    width: 100%;
    height: 1px;
    margin: 10px 0;
    background-color: #ccc;
}

.spec-external {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    margin-right: 5px;
    background: url(../images/oem_odm/icon_external.svg) 0 0 no-repeat;
    background-size: cover;
}

/*=============================================================================
    生産の流れ・期間
=============================================================================*/
#flow {}

#fList {
    margin-bottom: 16px;
}

#fList .item {
    position: relative;
    padding: 18px;
    list-style: none;
    text-align: center;
    color: #0064B9;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    background-color: #F2F3F5;
}
#fList .item + .item {
    margin-top: 30px;
}
#fList .item + .item::before {
    position: absolute;
    top: -20px;
    left: 50%;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 11.5px 0 11.5px;
    border-color: #FAA400 transparent transparent transparent;
}

#fNote {
    text-align: right;
    font-size: 16px;
}

/*=============================================================================
    スイコーは、全製品をすべての拠点で製造しています
=============================================================================*/
#base {}

#bPoints {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

#bPoints .item {
    display: flex;
    align-items: center;
    margin: 0 20px;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 28px;
}
#bPoints .item::before {
    content: '';
    display: block;
    width: 35px;
    height: 34px;
    margin-right: 10px;
    background: url(../images/oem_odm/icon_check.svg) 0 0 no-repeat;
    background-size: cover;
}

#bImage {
    display: block;
    margin: 0 auto;
}

/*=============================================================================
    よくあるご質問
=============================================================================*/
.tab {
}

.tab-nav {
    display: flex;
    margin-bottom: 40px;
    padding: 0 8px;
    border-bottom: 1px solid #000;
}
.tab-nav-bottom {
    margin-top: 40px;
    margin-bottom: 0;
    border-top: 1px solid #000;
    border-bottom: none;
}

.tab-nav-item {
    position: relative;
    top: 1px;
    flex-basis: 100%;
    margin: 0 8px 0 0;
}
.tab-nav-item:last-child {
    margin-right: 0;
}

.tab-nav-bottom .tab-nav-item {
    top: auto;
    bottom: 1px;
}

a.tab-nav-link {
    display: block;
    padding: 16px;
    text-align: center;
    background-color: transparent;
    color: #fff;
    background: #0064B9;
    font-size: 16px;
    border: 1px solid #000;
    border-radius: 8px 8px 0 0;
}
a.tab-nav-link[aria-current='page'] {
    background-color: #fff;
    color: #000;
    pointer-events: none;
    border-bottom-color: #fff;
}
.tab-nav-bottom a.tab-nav-link {
    border-radius: 0 0 8px 8px;
}
.tab-nav-bottom a.tab-nav-link[aria-current='page'] {
    border-bottom-color: #000;
    border-top-color: #fff;
}

@keyframes tab-anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.tab-content {
    display: none;
}
.tab-content.is-show {
    display: block;
    animation: tab-anim 0.3s ease-out;
}

.faq {
    font-size: 16px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.faq-item {
}
.faq-item + .faq-item {
    /* margin-top: -1px; */
    border-top: 1px solid #ccc;
}

.faq-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 0;
    background-color: #fff;
    border: none;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #0064B9;
}
.faq-btn::before,
.faq-btn::after {
    position: absolute;
    top: calc(50% - 1px);
    right: 5px;
    display: block;
    width: 22px;
    height: 3px;
    content: '';
    border-radius: 100px;
    background-color: #0064B9;
    transition: transform .3s ease-out;
}

.faq-btn::after {
    transform: rotate(-90deg);
}

.faq-btn[aria-selected='true']::before {
    transform: rotate(45deg);
}
.faq-btn[aria-selected='true']::after {
    transform: rotate(-45deg);
}

.faq-content {
    display: none;
    overflow-y: hidden;
}
.faq-btn[aria-selected='true'] + .faq-content {
    display: block;
    animation: faq-content-fade-in .3s ease-out;
}

.faq-inner {
    padding-bottom: 20px;
    text-align: left;
    line-height: 2;
}

.faq-list { margin-top: 1rem; }
.faq-list > li {
    list-style: disc;
    margin-left: 24px;
}

@keyframes faq-content-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}