.interviewArea { background: #80CDE9; padding: 20px; } .botttom-link{ margin-top: 7%; width: 90%; margin-left: auto; margin-right: auto; max-width: 860px; box-sizing: border-box; padding-right: 2.65%; } .interviewArea__heading { font-size: 30px; font-weight: bold; margin: 0 0 20px; } .clearfix::after{ display: block; content: ""; clear: both; } .trendArea { background: #EDEFF0; padding: 35px 20px 20px; } .trendArea__heading { font-size: 30px; font-weight: bold; margin: 0 0 20px; } .columnList__item { margin: 0 0 20px; } .columnList__item a { display: block; position: relative; } .item-box ul{ } .item-ttl{ margin-bottom: 1%; margin-top: 2%; } .item-box ul li{ width: 266px; padding: 15px 15px; margin-right: 15px; box-sizing: border-box; font-size:13px; line-height: 18px; float: left; border: 1px solid #edeff1; min-height: 380px; } .item-box ul li.no-border{ border:none; } .item-box.ex3 ul li{ width: 406px; padding: 15px 15px; margin-bottom: 15px; box-sizing: border-box; font-size:13px; line-height: 18px; float: left; min-height: 280px; } .item-box.ex2 ul li img{ width: 84%; margin-left: auto; margin-right: auto; display: block; } .item-box.ex3 ul li img{ width: 70%; margin-left: auto; margin-right: auto; display: block; } .item-box.ex ul li{ padding: 15px 15px; box-sizing: border-box; font-size:14px; line-height: 20px; float: left; min-height: 330px; } .item-box.ex2 ul li{ padding: 15px 15px; box-sizing: border-box; font-size:14px; line-height: 20px; float: left; min-height: 288px; margin-bottom: 0; } .item-box.ex2 ul li.minh{ min-height: 260px; } .item-box ul li img,.item-box-2 ul li img{ max-width: 100%; } .item-box ul li:last-child{ margin-right: 0%; } .item-box ul li .title{ font-size: 16px; line-height: 26px; text-align: center; font-weight: bold; padding:1% 1% 2%; } .item-box ul li .icon-img{ width: 80%; } .title-tex{ font-size:20px; line-height: 32px; text-align: center; font-weight: bold; padding:1% 1% 2%; margin-top: 2%; margin-bottom: 0%; } .title-tex.ex2{ font-size:25px; line-height: 36px; text-align: center; font-weight: bold; padding:1% 1% 2%; margin-top: 2%; margin-bottom: 0%; color: #1d2d57; } .title-tex.ex{ display:block; text-align: center; margin-left: auto; margin-right: auto; } .columnList__item a::after { content: ""; display: block; width: 19px; height: 19px; /*background-image: url(../img/arrow_to_detail.png);*/ background-size: contain; position: absolute; right: 20px; bottom: 20px; } span.strong{ font-weight: bold; } span.strong2{ font-weight: bold; font-size:16px; color:#80CDE9; } .columnList__item img { width: 100%; height: auto; } .columnList__thumb { height: 185px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .columnList__content { background: #fff; padding: 20px; } .columnList__title { font-size: 18px; font-weight: bold; margin: 0 0 10px; } .columnList__text { color: #4C4948; line-height: 1.7; margin: 0; } .columnList__date { color: #989496; margin: 20px 0 0; } .columnTagList { margin: 0 0 10px; } .columnTagList__item { display: inline-block; margin: 0 5px 0 0; } .column__headerImage img { width: 100%; height: auto; } .column__headerContent { padding: 15px 15px 0; } .column__categoryList { display: -webkit-box; display: -ms-flexbox; /*display: flex;*/ -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size:0; } .column__categoryItem { margin: 0 5px 0 0; width: 22.9545454545%; } .column__categoryItem img { width: 100%; max-width: 100px; height: auto; } .column__categoryItem.ex img { max-width: 202px; } .caption{ font-size:12px; margin-top: 3%; } .caption.ex{ margin-top: 0; } .head-title { z-index: 0; font-size: 25px; line-height: 1.5; color: #fff; background-color: #1d2d57; padding: 10px 0px; display: inline-block; position: relative; text-align: center; width: 100%; margin-bottom: 32px; font-weight: bold; /*margin-top: 1em;*/ letter-spacing: 1px; } .head-title2 { font-size:24px; color: #0b2669; text-align: center; margin-bottom: 2%; font-weight: bold; } .head-title3 { z-index: 2; font-size: 25px; line-height: 1.5; letter-spacing: 1px; display: inline-block; box-sizing: border-box; background-color: #8daed6; padding: 10px 5%; color: #fff; position: relative; text-align: center; width: 100%; margin-bottom: 20px; font-weight: bold; } .sub-title { position: relative; padding-left: 28px; margin-top: 28px; font-size:18px; font-weight: bold; } .sub-title span.small{ margin-bottom: 1%; display: block; } .column__text .sub-title { line-height: 1.3; color: #27292F; } .sub-title.mth{ margin-top: 0px!important; } .sub-title.mth{ margin-top: 15px!important; } .sub-title.mt2{ margin-top: 52px!important; } .sub-title.mb{ margin-bottom: 1em; } .sub-title.lh{ line-height: 22px; padding-bottom: 10px; margin-top: 12px; } .user-box .user-name{ padding:1% 3%; color:#fff; font-size:24px; font-weight: bold; background:#90a6b3; } .user-box .user-wrap{ background: #e2e8ed; padding:3% 3%; margin-bottom: 30px; } .user-wrap .user-img{ width: 33%; float: left; margin-right: 3%; } .user-wrap .user-img img{ max-width: 100%; } .user-wrap .user-tex{ width: 64%; float: left; padding-top: 3%; } .user-wrap .user-tex .column__text{ margin-bottom: 0; } .user-wrap .user-tex .user-title{ font-size:28px; line-height: 32px; margin-bottom: 4.7%; } .user-wrap .user-tex .user-title span{ font-size:18px; display: block; } .mg-box{ margin-top: 25px; margin-bottom: 25px; } .mb-only{ margin-bottom: 20px; } .plus .mt-only{ margin-top: 80px; } .mt-only{ margin-top: 25px; } .mt-only.pl{ margin-top: 65px; } .mt-only.ptn2{ margin-top: 50px; } .mt-em{ margin-top: 20px; } .link-line{ text-decoration: underline; font-weight: bold; } .center-img{ text-align: center; } .center-img-2 img{ display: block; margin-left: auto; margin-right: auto; } .notes{ font-size:10px; line-height: 14px!important; display: block; } .notes.mt{ margin-top: 0.7%; } .section-list{ margin-top: 28px; } .section-list.nom2{ margin-top: 12px; } .section-list dt { /*border-top: 1px solid #A0D8EF;*/ font-size: 16px; font-weight: bold; padding: 10px 0; font-feature-settings : "palt"; } /*.section-list.nom dt { border-top: 1px solid #b7c4cd; font-size: 16px; font-weight: bold; padding: 20px 0 10px; } .section-list.nom dd { margin-bottom: 20px; position: relative; }*/ .section-list.nom2 dt { border-top: 1px solid #b7c4cd; font-size: 16px; font-weight: bold; padding: 24px 0 10px; font-feature-settings : "palt"; } .section-list.nom2 dd { margin-bottom: 24px; position: relative; } .section-list.nom2 dd:last-child{ margin-bottom: 0; } .section-list.nom3 { margin-top: 9px; margin-bottom: 12px; } .section-list.nom3 dt { border-top: 1px solid #b7c4cd; font-size: 16px; font-weight: bold; padding: 25px 0 10px; } .section-list.nom3 dd { padding-bottom: 20px; position: relative; border-bottom: 1px solid #b7c4cd; } .section-list dd { margin-bottom: 20px; position: relative; line-height: 1.8; } .section-list dd:last-child{ margin-bottom: 0; } .section-list dd { margin-bottom: 30px; position: relative; line-height: 1.8; } .section-list.ex dd:last-child{ margin-bottom: 0; } .section-list dd .bold { display: block; padding-left: 15px; font-weight: bold; position: relative; } .section-list dd .bold.ex{ margin:2% 0 0; } .section-list dd .indent { display: block; padding: 0px 0 0 1em; } .section-list dd .bold::before { content: ""; position: absolute; top: 7px; left: 0; width: 10px; height: 10px; background-color: #80CDE9; border-radius: 50%; } .sub-title::before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; background-color: #80CDE9; border-radius: 50%; } .column__categoryItem--text { width: auto; font-size: 10px; color: #7D7D7D; } .column__title { font-size: 18px; font-weight: bold; color: #4C4948; line-height: 1.5; margin: 20px 0 0; /*white-space:pre-wrap; */ word-break: break-all; } .column__read{ font-size: 14px; font-weight: bold; color: #4C4948; line-height: 1.78; margin: 20px 0 0; /*white-space:pre-wrap; */ word-break: break-all; width: 100%; } .column__author { font-size: 10px; font-weight: bold; color: #4C4948; margin: 15px 0 0; } .column__section,.column__section.first { padding: 15px 15px 30px; } .column__section.no-border { border-bottom: none!important; } .column__section:not(:last-child) { /*border-bottom: 1px solid #A0D8EF;*/ } .plus .column__section{ padding-top: 60px; padding-bottom: 70px; } .plus .column__section:not(:last-child) { border-bottom: 1px solid #ccc; } .column__heading { font-size: 20px; font-weight: bold; color: #80CDE9; } .column__heading.pb{ padding-bottom: 10px; } /*.head-title { margin-bottom: 5%; } .head-title3 { margin-bottom: 3%; }*/ .head-title3{ margin-bottom: 0%; } .inline.img-res{ margin-top: 3%; margin-bottom: 3%; } .keisan-wrap { margin-bottom: 40px; margin-top: 3px; } .keisan-wrap.mtno{ margin-top: 0!important; margin-bottom: 1.5em!important; } .keisan-wrap.mtno .keisan-box{ padding-bottom: 25px; } .keisan-wrap:last-child { margin-bottom: 40px; margin-top: 3px; } .keisan-wrap.last { margin-bottom: 1em; margin-top: 3px; } .keisan-box { background: #EDEFF1; padding: 15px; margin-bottom: 2px; } .keisan-box .column__text{ margin-bottom: 0; } .column__row,.pd-box { padding: 10px 0 0; } .column__row.ttl { padding: 0px 0 0; } .column__row.pd{ padding-top: 1em;; } .column__text { color: #595757; line-height: 1.6; margin: 0 0 1em; } .column__image img { width: 100%; height: auto; } .recommend { padding: 20px 15px; } .recommend { margin-bottom: 30px; margin-top: 30px; } .recommend img { width: 100%; height: auto; } .recommend .pc { display: none; } .recommend--bnr { background: #F9F4D4; max-width: 860px; box-sizing: border-box; } .recommend--bnr img{ max-width: 100%; } .recommend--list { background: #EDEFF0; } .img-wrap img{ max-width: 100%; } .recommend__heading { font-size: 18px; font-weight: bold; text-align: center; } .recommend__list { margin: 15px auto; /*display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;*/ } .recommend__item { width: 48%; /*margin: 0 0 4%;*/ background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3%; text-align: center; /*display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;*/ } .recommend__image { padding: 5px; margin: 0 0 auto; } .recommend__list h2{ text-align: center; color:#57c3e5; font-size:18px; box-sizing: border-box; font-weight: bold; } .recommend__list.col3 .recommend__item{ width: 31%; margin-right: 3.4%; float: left; margin-right: 0; } .recommend__item img{ max-width: 100%; } .recommend--list.col3 li .item-img{ text-align: center; } .recommend__btn { font-size: 12px; font-weight: bold; } .recommend__btn:not(:last-child) { margin: 0 0 5px; } .recommend__btn a { display: block; padding: 5px; background: #FFF100; color: #2F2725; position: relative; } .recommend__btn a::before { content: ""; display: block; width: 5%; height: 0; padding: 9.4444444445% 0 0; background-image: url(../../img/arrow_recommend_list.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 5px; left: 5px; } .bottomBnr { padding: 20px 15px; } .bottomBnr img { width: 100%; height: auto; } .bubble-box { background: #EDEFF1; padding: 15px; margin-bottom: 2px; } .bubble-icon { font-size: 18px; font-weight: 500; color: #fff; width: 80px; height: 80px; padding: 15px; margin-left: 8px; margin-top: 12px; margin-right: 12px; display: inline-block; box-sizing: border-box; vertical-align: top; text-align: center; border-radius: 50%; background-color: #0b2669; } .bubble-icon .mini-tex{ font-size:14px; padding-top:3px; } .bubble-icon .mini-tex.ex{ font-size:12px; } .bubble-icon .number { font-size: 24px; padding-top: 4px; line-height: 24px; } .bubble-icon .number.ex { font-size: 30px; line-height: 30px; } .bubble-tex{ display: inline-block; width: 725px; vertical-align: middle; padding-top: 2.5%; padding-bottom: 2.5%; } .bubble-tex .point{ color: #0b2669; font-weight: bold; } .col-box .icon-box{ width: 400px; float: left; background-color: #eeeff3; padding: 30px; box-sizing: border-box; } .col-box .column__text{ width: 420px; float: right; } .col-box .column__text.fl{ width: 420px; float: left; } .col-box .section-list{ width: 420px; float: left; } .col-box .img{ width: 400px; float: right; padding-top: 30px; } .col-box .img.ex{ padding-top: 0; } .col-box .img img{ max-width: 100%; } .col-box .pic-box.odd{ float: left; width: 420px; box-sizing: border-box; padding:15px; background-color: #eeeff3; } .col-box .pic-box.even{ float: right; width: 420px; box-sizing: border-box; padding:15px; background-color: #eeeff3; } .col-box .pic-box .pic{ float: left; width: 50%; } .col-box .pic-box .cap{ float: right; width: 45%; line-height: 1.7; font-size:12px; } .col-box .pic-box .pic img{ max-width: 100%; } .icon-arrow { bottom: 30%; right: 50%; margin-top: 0px; margin-right: -8px; border-width: 8px 8px 0 8px; border-style: solid; position: absolute; border-color: #282a2f transparent transparent transparent; } .icon-arrow-box{ text-align: center; position: relative; margin: 0 0; padding:5% 0 0; } .icon-black,.icon-blue{ display: inline-block; vertical-align: top; } .icon-black span { width: 80px; height: 80px; display: block; line-height: 80px; font-size: 18px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background-color: #51595f; } .icon-blue span { width: 80px; height: 80px; display: block; line-height: 80px; font-size: 18px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background-color: #8daed6; } .info{ display: inline-block; vertical-align: top; padding-left: 20px; width: 235px; } .info li { position: relative; line-height: 1.8; padding-left: 15px; } .mini-ttl{ color: #0a318d; font-weight: bold; font-size: 26px; margin-bottom: 10px; line-height: 1.26; } .sub-title{ margin-top: 0; } @media screen and (min-width: 641px) { .interviewArea { padding: 30px 30px 20px; } .interviewArea__heading { font-size: 17px; position: relative; } .mt-only.ex{ margin-top: 12px; } .mg-only2{ margin-bottom: 24px!important; } .sub-title.pb{ padding-bottom: 10px; margin-top: 0; } .column__row.ex{ padding-top: 20px; } .sub-title.mtno{ margin-top: 0; } .sub-title.mtex{ margin-top: 50px; } .interviewArea__heading::before { content: ""; display: block; width: 100%; height: 1px; background: #000; position: absolute; top: 50%; left: 0; } .interviewArea__heading__inner { display: inline-block; padding: 0 1em 0 0; background: #80CDE9; position: relative; } .trendArea { padding: 30px 30px 20px; } .trendArea__heading { font-size: 17px; position: relative; } .trendArea__heading::before { content: ""; display: block; width: 100%; height: 1px; background: #000; position: absolute; top: 50%; left: 0; } .trendArea__heading__inner { display: inline-block; padding: 0 1em 0 0; background: #EDEFF0; position: relative; } .trendArea__heading__inner.wt{ background: #fff; } .columnList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .columnList::after { content: ""; display: block; width: 209px; } .columnList__item a::after { right: 10px; bottom: 10px; } .columnList__item { width: 209px; } .columnList__thumb { height: 98px; } .columnList__content { padding: 10px; } .columnList__title { font-size: 13px; } .columnList__text { font-size: 12px; } .columnList__date { font-size: 10px; } .columnTagList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .columnTagList__item { margin: 0; } .column { width: 885px; } .column__header { /*display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;*/ padding: 40px 0px 0 0; } .taglist.haif{ width: 260px; } .taglist.haif li{ font-size: 16px; } .column__header.ex{ padding: 40px 0px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .column__headerlogo{ width: 220px; } .column__headerlogo img{ width: 100%; } .head-box{ background:#f1f1f4; padding:0 40px 30px; box-sizing: border-box; max-width: 860px; } .head-box img{ max-width: 100%; } .head-box.ex{ max-width: 886px; } .column__headerImage { width: 416px; } .column__headerContent { /*width: 760px;*/ padding: 0 20px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .column__headerContent.ex{ width: 580px; } .column__categoryItem { width: auto; margin: 0 10px 0 0; } .column__categoryItem--text { font-size: 13px; margin: 0 10px 0 0; } .column__categoryList .column__categoryItem--text.first{ margin:0 10px 0 10px; } .column__categoryItem--text:first-child{ margin-left: 20px; } .medical .column__categoryItem--text::before{ content: "●"; color:#ec729a; } .shop .column__categoryItem--text::before{ content: "●"; color:#4d8f36; } .financial .column__categoryItem--text::before{ content: "●"; color:#6f4687; } .product-logistic .column__categoryItem--text::before{ content: "●"; color:#cb9319; } .product-financial .column__categoryItem--text::before{ content: "●"; color:#6f4687; } .logistic .column__categoryItem--text::before{ content: "●"; color:#ad6d2d; } .other .column__categoryItem--text::before{ content: "●"; color:#58c3e5; } .column__title { font-size: 23px; margin: 30px 0 0; } .column__author { font-size: 14px; margin: 20px 0 0; } .column__content { padding: 10px 25px 0 0; } .column__section,.column__section.first{ padding: 30px 0px 30px; } .plus2 .column__section,.plus2 .column__section.first{ padding: 50px 0px 30px; } .column__section.last{ padding-bottom: 35px; } .column__heading { font-size: 26px; } .column__row { display: -webkit-box; display: -ms-flexbox; display: flex; clear: both; max-width: 860px; } .column__text { line-height: 1.9; max-width: 860px; } table.column__text { line-height: 1.9; max-width: 980px; } span.mini{ font-size:10px; } .column__text img{ max-width: 100%; } .column__image { width: 258px; margin: 0 0 0 25px; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 1.5em; } .column__image.ex{ margin-bottom: 10px; } .column__image.ex2{ width:342px ; } .recommend { padding: 35px; } .recommend .sp { display: none; } .recommend .pc { display: inline; } .recommend__bnr { text-align: center; } .recommend__bnr img { width: auto; } .recommend__heading { font-size: 26px; line-height: 26px; } /*.recommend__list { margin: 20px auto; } .recommend__item { width: 192px; margin: 0; }*/ .recommend--list { background: #EDEFF0; max-width: 860px; box-sizing: border-box; } .recommend__list h2{ text-align: center; color:#57c3e5; font-size:16px; box-sizing: border-box; font-weight: bold; } .recommend__list .tex{ font-size:12px; line-height: 18px; text-align: center; } .recommend__list.col3 .recommend__item{ width: 31%; margin-right: 3.4%; float: left; } .recommend__list.col2 .recommend__item{ width: 48%; margin-right: 4%; float: left; } .recommend__list.col2 .recommend__item:last-child{ width: 48%; margin-right: 0%; float: left; } .recommend__list.col2 .item-txt{ float: left; width: 45%; padding-top: 12%; } .recommend__list.col2 .item-img{ float: right; width: 50%; } .recommend__list.col2 .item-img img{ margin-bottom: 8%; } .recommend__list.col1 .recommend__item{ width: 100%; } .recommend__list.col1 .item-txt{ float: left; width: 30%; padding-top: 10%; } .recommend__list.col1 .item-img{ width: 35%; margin-right: 3%; float: left; } .recommend__list.col1 .item-btn{ float: right; width: 30%; float: left; padding-top: 8%; } .recommend__list.col1.ex .item-txt{ float: left; width: 25%; margin-right: 3%; float: left; padding-top: 15%; } .recommend__list.col1.ex .item-img{ float: left; width: 37%; margin-right: 3%; float: left; } .recommend__list.col1.ex .item-btn{ float: right; width: 30%; float: left; padding-top: 14%; } .recommend__list.col1.ex2 .item-txt{ float: left; width: 25%; margin-right: 3%; float: left; padding-top: 9%; } .recommend__list.col1.ex2 .item-img{ float: left; width: 37%; margin-right: 3%; float: left; } .recommend__list.col1.ex2 .item-btn{ float: right; width: 30%; float: left; padding-top: 7%; } .recommend__list.col2 .item-img img{ margin-bottom: 8%; } .recommend__list.col3 .recommend__item:last-child{ width: 31%; margin-right: 0%; float: left; } .recommend__list.col3 img{ margin-top: 7%; margin-bottom: 7%; } .recommend__item img{ max-width: 100%; } .recommend--list.col3 li .item-img{ text-align: center; } .recommend__item img { width: auto; } .recommend__image { padding: 15px 0 10px; } .recommend__btn { font-size: 14px; } .recommend__btn a::before { width: 9px; height: 17px; padding: 0; top: 7px; left: 7px; } .recommend__btn a { padding: 7px; } .bottomBnr { padding: 45px 0; text-align: center; } .bottomBnr img { width: auto; } .notes.maps{ padding-left: 16%; padding-top: 3%; } .column__bigimg{ max-width:660px ; margin-left: auto; margin-right: auto; width: 100%; } .column__bigimg img{ width: 100%; } } @media screen and (max-width: 640px) { .trendArea__heading{ font-size: 4.4vw; position: relative; } .trendArea__heading__inner.wt { background: #fff; padding: 0 1em 0 0; } .trendArea__heading::before { content: ""; display: block; width: 76%; height: 1px; background: #000; position: absolute; top: 50%; right:0; } img{ max-width: 100%; } .mg-box{ margin-top: 10px; margin-bottom: 10px; } .mb-only{ margin-bottom: 10px; } .user-box{ width: 90%; margin-left: auto; margin-right: auto; } .user-box .user-wrap{ padding:5%; } .user-wrap .user-img{ width: 100%; float: none; margin-right: 0%; text-align: center; } .user-wrap .user-img img{ max-width: 100%; } .user-wrap .user-tex{ width: 100%; float: none; padding-top: 3%; } .user-wrap .user-tex .user-title{ font-size:28px; line-height: 32px; margin-bottom: 5%; } .user-wrap .user-tex .user-title span{ font-size:18px; display: block!important; } .column__categoryList{ display: block!important; } .column__categoryList .column__categoryItem--text{ display: block!important; margin-top:1%!important; margin-bottom: 0%!important; } .medical .column__categoryItem--text::before{ content: "●"; color:#ec729a; } .shop .column__categoryItem--text::before{ content: "●"; color:#4d8f36; } .financial .column__categoryItem--text::before{ content: "●"; color:#6f4687; } .product-logistic .column__categoryItem--text::before{ content: "●"; color:#cb9319; } .product-financial .column__categoryItem--text::before{ content: "●"; color:#6f4687; } .logistic .column__categoryItem--text::before{ content: "●"; color:#ad6d2d; } .other .column__categoryItem--text::before{ content: "●"; color:#58c3e5; } .bubble-box { background: #EDEFF1; padding: 15px; margin-bottom: 2px; } .bubble-icon { display: block; margin: 0 auto 10px; font-size: 12px; width: 60px; padding:15px 10px; height: 60px; } .bubble-icon .number { font-size: 14px; } .bubble-icon .mini-tex{ font-size:9px; padding-top:2px; } .bubble-tex{ display: inline-block; width: 100%; } .bubble-tex .big{ font-size:20px; } .bubble-tex .mini{ font-size:12px; } .col-box .icon-box{ width: 100%; float: none; background-color: #eeeff3; padding: 30px; box-sizing: border-box; } .col-box .column__text,.col-box .column__text.fl{ width: 100%; float: none; margin-top: 5%; } .info { display: inline-block; vertical-align: top; padding-left: 0px; padding-top: 5%; width: 100%; } .icon-black, .icon-blue { display: block; } .icon-black span { width: 80px; height: 80px; display: block; margin-left: auto; margin-right: auto; line-height: 80px; font-size: 18px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background-color: #51595f; } .icon-blue span { width: 80px; height: 80px; display: block; margin-left: auto; margin-right: auto; line-height: 80px; font-size: 18px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; background-color: #8daed6; } .col-box .section-list{ width: 100%; float: none; } .col-box .img{ width: 100%; float: none; padding-top: 2%; } .col-box .pic-box.odd{ float: none; width: 100%; box-sizing: border-box; padding:5%; background-color: #eeeff3; } .col-box .pic-box.even{ float: none; width: 100%; box-sizing: border-box; margin-top: 3%; padding:5%; background-color: #eeeff3; } .col-box .pic-box .pic img{ max-width: 100%; } .col-box .pic-box .pic{ float: none; width: 100%; margin-bottom: 2%; } .mt-em{ margin-top: 3%; } .col-box .pic-box .cap{ float: none; width: 100%; line-height: 1.9; } .column__categoryList { word-break: break-all; } .column__categoryItem { display: inline-block; vertical-align: bottom; margin-top: 3%; margin-bottom: 1%; } .column__categoryItem.ex{ width: 100%; } .head-title { margin-bottom: 3%; padding:2% 2%; box-sizing: border-box; } .head-title3 { margin-bottom: 2%; padding:2% 2%; box-sizing: border-box; }.item-box ul{ } .user-box .user-name { margin-top: 10%; } .item-ttl { margin-bottom: 2%; margin-top: 12%; } .item-box ul li,.item-box.ex ul li,.item-box.ex2 ul li,.item-box.ex3 ul li{ width: 100%; padding: 15px 15px; margin-right: 0%; margin-bottom: 5%; box-sizing: border-box; font-size:14px; line-height: 20px; float: none; border: 1px solid #edeff1; min-height:inherit; } .item-box ul li.no-border{ border:none; } .item-box ul li .icon-img { width: 80%; margin-left: auto; margin-right: auto; } .item-box.ex2 ul li img{ width: 70%; margin-left: auto; margin-right: auto; display: block; } .item-box.ex3 ul li img{ width: 70%; margin-left: auto; margin-right: auto; display: block; } .item-box ul li img{ max-width: 100%; display: block; margin-left: auto; margin-right: auto; } .item-box ul li:last-child{ width: 100%; padding: 15px 15px; margin-right: 0%; margin-bottom: 0; float: none; } .head-box { background: #f1f1f4; padding: 0 0% 4%; box-sizing: border-box; max-width: 100%; } .recommend__list h2{ text-align: center; color:#57c3e5; font-size:16px; box-sizing: border-box; font-weight: bold; } .recommend__list .tex{ font-size:12px; line-height: 18px; text-align: center; } .recommend__list.col1 .recommend__item,.recommend__list.col2 .recommend__item,.recommend__list.col3 .recommend__item{ width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 5%; float: none; } .recommend__list .recommend__item:last-child{ margin-left: auto; margin-right: auto; float: none; } .recommend__btn a { padding:3%; } .recommend__btn a::before { background-size:55%; background-position: 5% 30%; } .recommend__list img{ margin-top: 7%; margin-bottom: 7%; } .mini-ttl{ font-size: 20px; } } /*ブラザーが聴く*/ .column__mainimg{ width: 50%; } .column__mainimg img{ max-width: 100%; } .column__title-box{ background:#89A8CE; padding:3% 3% 1% 3%; width: 50%; box-sizing:border-box; color:#fff; } .column__title-box h1{ border-bottom: 1px solid #fff; font-size:20px; line-height: 28px; padding-bottom: 6%; } .column__title-box h1 span{ display: block; } .column__title-box p{ font-size:14px; line-height: 22px; padding-top: 6%; } .question{ padding:1% 1%; font-size:19px; line-height: 19px; font-weight: bold; color:#fff; background:#1B2D5A; } .answer{ background: #80CDE9; padding:1% 1%; font-weight: bold; font-size:19px; line-height: 19px; color:#fff; } .column__text .blue{ color:#52B3D6; } .about-box{ border: 1px solid; padding:3% 4%; } .about-box tr td:first-child{ width: 68px; vertical-align: top; position: relative; } .about-box.ex tr td:first-child{ width: 98px; vertical-align: top; position: relative; } .about-box.ex tr td:last-child{ width: 680px; } .about-box tr td:first-child::after{ content: ":"; padding-left: 1%; height: 100%; position: absolute; right: 0; top:0; } .about-box tr td:last-child{ padding-left: 1%; } table.column__text{ margin-bottom: 0; } .img-box img{ width: 100%; } .top-txt{ padding:30px 10px 20px; text-align: center; font-size: 16px; line-height: 1.5; color: #0d2ea1; } .top-txt-2{ padding:0px 30px 40px; text-align: center; font-size: 12px; line-height: 1.66; } .top-txt h2{ font-weight: bold; } /*.caption.tac{ text-align: center; }*/ @media screen and (min-width: 641px) { .column__title-box.ex h1{ padding-bottom: 3%; } .column__title-box.ex p{ padding-top: 3%; } .mini-img{ width: 450px; } .mini-img img{ max-width: 100%; } .mini-img-2{ width: 300px; } .mini-img-2 img{ max-width: 100%; } .col1-1 img,.col1-2 img,.col1-3 img{ max-width: 100%; } .col1-1{ width: 34%; margin-right: 0%; margin-left: 3%; } .col1-2{ width: 38%; margin-right: 5%; margin-top: 7%; } .col1-2.ex{ margin-top: 3%; } .col1-3{ width: 35%; padding-right: 5%; } .col1-3.ex{ width: 35%; } .max-img{ width: 100%; } .plus .item-box.mb{ margin-bottom: 100px; } .img-box{ width: 78%; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 640px) { .column__mainimg{ width: 100%; } .column__title-box{ width: 100%; padding: 6% 6% 6% 6%; } .question,.answer{ padding:2% 2% 2.5%; } table.column__text{ margin-bottom: 0; } .about-box{ padding: 6% 6% 6% 6%; } .about-box tr td:first-child{ width: 23%; } .about-box.ex tr td:first-child{ width: 32%; } .about-box tr td:last-child{ padding-left: 3%; } .pic-cnter{ text-align: center; } .pic-cnter .caption{ text-align: left!important; } .column__row.no-pd{ padding-top: 0; } .tab1List::after {   content: "";   width: 48%; } .tab1List__item { width: 48%;  display: inline-block; } .tab1List__item:nth-child(odd) {  margin-right: 4%; } .tab1List__item:nth-child(even) {  margin-right: 0%; } .plus .column__section { padding-top: 20px; padding-bottom: 65px; } .plus .mt-only{ margin-top: 50px; } .tac{ text-align: center; } span.mini{ font-size:10px; } .img-box{ width: 78%; margin-left: auto; margin-right: auto; } .column__headerlogo{ width: 50%; margin-left: auto; margin-right: auto; margin-top: 2%; } } /*202101追記*/ .columnList.new .columnList__item{ background: #fff; } .columnList.new .columnList__item .text-box{ padding: 10px 10px 15px; position: relative; } .columnList.new .columnList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 22px; } .columnList.new .columnList__item .name-box{ overflow: hidden; height: calc(1.3em * 4); position: relative; line-height: 1.3em; margin-top: 10px; } .columnList.new .columnList__item .name-box p{ font-size: 14px; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .columnList.new .columnList__item .info-box{ overflow: hidden; height: calc(1.3em * 4); position: relative; line-height: 1.3em; margin-top: 5px; } .columnList.new .columnList__item .info-box p{ font-size: 12px; } .columnList.new .columnList__item .day-box{ margin-top: 12px; } .columnList.new .columnList__item .day-box p{ color:#ADADAD; font-size: 11px; } .taglist{ font-size: 0; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 5px 2px; color:#fff; font-size: 11px; text-align: center; font-weight: 700; box-sizing: border-box; } .taglist li:last-child{ margin-right: 0; } .taglist li.medicial{ background:#DD6F91; } .taglist li.product{ background:#D19713; } .taglist li.logistics{ background:#B06F2B; } .taglist li.shop{ background:#539435; } .taglist li.financial{ background:#834F9C; } .taglist li.other{ background:#3D97D3; } .taglist li.maintenance{ background:#3D97D3; } .taglist li.brother{ background:#004898; } .taglist li.genre{ background:#7D7D7E; } .taglist li.cat01{ background:#7385c2; } .taglist li.end{ background:#C9CACA; color: #231815; } .list-img.ex{ margin-bottom: -6px; } .leftSearch__list{ position: relative; z-index: 0; } .leftSearch__item{ border-top: 1px solid #cad1d3; margin-bottom: 0; padding-top: 15px; padding-bottom: 15px; } .leftSearch__item .checkboxIcon{ top:17px; z-index: 1; } .leftSearch__item:last-child{ border-bottom:1px solid #cad1d3 ; } .memo-box{ position: relative; } .memo-box::before{ content: ""; background: url("../img/border_01.png") no-repeat center top; height: 10px; background-size: cover; top:0; left: 0; width: 100%; position: absolute; } .memo-box::after{ content: ""; background: url("../img/border_02.png") no-repeat center top; height: 10px; background-size: cover; bottom:0; left: 0; width: 100%; position: absolute; } .memo-box .memo-wrap{ padding-top: 20px; padding-bottom: 25px; } .memo-ttl img{ width: 212px; margin-left: auto; margin-right: auto; display: block; } /*202201 ワンポイントアドバイス追記箇所*/ .advice-box{ position: relative; padding: 20px 40px 40px; background: #f9f4d4; border-radius: 5px; } .advice-ttl img{ width: 366px; max-width: 100%; margin-left: auto; margin-right: auto; display: block; } /*202201 ワンポイントアドバイス追記箇所ここまで*/ .fukidashi-wrap{ display: flex; } .fukidashi-wrap.ptn2{ flex-direction: row-reverse; } .fukidashi-wrap .fukidashi-icon{ width: 16%; margin-right: 4%; display: block; } .fukidashi-wrap .fukidashi-icon .icon-img{ margin-left: auto; margin-right: auto; width: 94%; margin-bottom: 10px; } .fukidashi-wrap .fukidashi-icon .icon-img img{ width: 100%; } .fukidashi-wrap .fukidashi-icon .icon-name{ font-size: 12px; text-align: center; } .fukidashi-wrap.ptn2 .fukidashi-icon{ width: 16%; margin-left: 4%; } .fukidashi-wrap .fukidashi-mes{ border-radius: 10px; padding: 26px 26px; font-size: 16px; line-height: 2; margin-right: 21%; box-sizing: border-box; width: 56%; position: relative; /*white-space:pre-wrap; */ word-break: break-all; background: #e3e5f1; } .fukidashi-wrap .fukidashi-mes span{ background: linear-gradient(transparent 60%, #fff100 0%); } .fukidashi-wrap .fukidashi-mes::before{ content: ""; position: absolute; top:50px; left: -18px; width: 24px; height: 24px; background: url("../img/fukidashi_01.png") no-repeat left top; background-size: contain; } .fukidashi-wrap.ptn2 .fukidashi-mes::before{ content: ""; position: absolute; top:50px; right: -18px; left: auto; width: 24px; height: 24px; background: url("../img/fukidashi_02.png") no-repeat left top; background-size: contain; } .fukidashi-wrap.ptn2 .fukidashi-mes{ background: #f8ecf2; margin-right: 0; margin-left: 20%; } @media screen and (max-width: 640px) { /*202101追記*/ .columnList.new .columnList__item .text-box{ padding: 16px 16px 25px; } .columnList.new .columnList__item .icon{ position: absolute; bottom: 15px; right: 15px; width: 10%; } .columnList.new .columnList__item .name-box{ overflow: hidden; height: calc(1.8em * 4); position: relative; line-height: 1.8em; margin-top: 15px; } .columnList.new .columnList__item .name-box p{ font-size: 5.0vw; color: #4C4948; /*position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/ font-weight: 700; } .columnList.new .columnList__item .info-box{ overflow: hidden; height: calc(2.0em * 4); position: relative; line-height: 2.0em; margin-top: 10px; } .columnList.new .columnList__item .info-box p{ font-size: 4.4vw; } .columnList.new .columnList__item .day-box{ margin-top: 12px; } .columnList.new .columnList__item .day-box p{ color:#ADADAD; font-size: 3.9vw; } .taglist{ font-size: 0; width: 62%; } .taglist li{ display: inline-block; width: 49%; margin-right: 1.5%; border-radius: 3px; padding:3px 5px; color:#fff; font-size: 3.3vw; text-align: center; font-weight: 700; box-sizing: border-box; } .list-img.ex{ margin-bottom: -2%; } .top-txt{ padding:0px 0px 30px; text-align: center; font-size: 3.9vw; line-height: 1.5; } .top-txt-2{ text-align: center; font-size: 3.3vw; padding: 0 0px 30px; } .memo-box::before{ content: ""; background: url("../img/border_01.png") no-repeat center top; height: 10px; background-size: cover; top:0; left: 0; width: 100%; position: absolute; } .memo-box::after{ content: ""; background: url("../img/border_02.png") no-repeat center top; height: 10px; background-size: cover; bottom:0; left: 0; width: 100%; position: absolute; } .memo-box .memo-wrap{ padding-top: 4vw; padding-bottom: 5vw; } .memo-ttl img{ width: 68%; margin-left: auto; margin-right: auto; display: block; } .fukidashi-wrap{ display: block; } .fukidashi-wrap .fukidashi-icon{ width: 100%; margin-right: 0%; margin-left: 0; } .fukidashi-wrap .fukidashi-icon .icon-box{ display: flex; align-items: center; margin-bottom: 5vw; } .fukidashi-wrap.ptn2 .fukidashi-icon .icon-box{ flex-direction: row-reverse; } .fukidashi-wrap .fukidashi-icon .icon-img{ margin-left: 0; width: 18%; margin-right: 3%; margin-bottom: 0px; } .fukidashi-wrap.ptn2 .fukidashi-icon .icon-img{ margin-right: 2%; margin-left: 3%; } .fukidashi-wrap .fukidashi-icon .icon-img img{ width: 100%; } .fukidashi-wrap .fukidashi-icon .icon-name{ font-size: 12px; text-align: left; width: 78%; } .fukidashi-wrap.ptn2 .fukidashi-icon .icon-name{ text-align: right; } .fukidashi-wrap.ptn2 .fukidashi-icon{ width: 100%; margin-left: 3%; margin-right: 0; } .fukidashi-wrap .fukidashi-mes{ border-radius: 10px; padding: 5% 5%; font-size: 16px; line-height: 2; margin-right: 0%; box-sizing: border-box; width: 100%; margin-top: 7vw; position: relative; /*white-space:pre-wrap; */ } .fukidashi-wrap .fukidashi-mes span{ background: linear-gradient(transparent 60%, #fff100 0%); } .fukidashi-wrap .fukidashi-mes::before{ content: ""; position: absolute; top:-20px; left: 20px; width: 40px; height: 30px; background: url("../img/fukidashi_01_sp.png") no-repeat left top; background-size: contain; } .fukidashi-wrap.ptn2 .fukidashi-mes::before{ content: ""; position: absolute; top:-20px; right: 10px; left: auto; width: 40px; height: 30px; background: url("../img/fukidashi_02_sp.png") no-repeat left top; background-size: contain; } .fukidashi-wrap.ptn2 .fukidashi-mes{ background: #f8ecf2; margin-right: 0; margin-left: 0%; width: 100%; } /*202201 ワンポイントアドバイス追記箇所*/ .advice-box{ position: relative; padding: 3vw 3vw 3vw; background: #f9f4d4; border-radius: 5px; } .advice-ttl img{ width: 366px; max-width: 100%; margin-left: auto; margin-right: auto; display: block; } /*202201 ワンポイントアドバイス追記箇所ここまで*/ }