@charset "shift_jis";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* --------------------------
all
-------------------------- */
/* border-box */
#contents, #contents *, #contents *:before, #contents *:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
a {
text-decoration: none;
}
#contents {
padding: 1em;
color: #000;
font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana;
text-align: center !important;
max-width: 1045px;
letter-spacing: .1em;
font-size: 1.1em !important;
line-height: 1.3;
word-break: break-all;
word-wrap: break-word;
}
.font-century {
font-family: "Century Gothic", "Avenir Next", 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana;
letter-spacing: 0;
}
#itemDetailMap.foot-itemDetailMap {
margin: 2em 0;
text-align: center !important;
}
#contents strong, strong {
background: linear-gradient(transparent 70%, #ffee5e 70%);
}
.col-blue, .col-blue:before, .col-blue span:before {
color: #2976c6 !important;
}
.col-red, .col-red:before, .col-red span:before {
color: #D80000 !important;
}
.col-orange, .col-orange:before, .col-orange span:before {
color: #FE6604 !important;
}
.col-white, .col-white:before, .col-white span:before {
color: #fff !important;
}
a.col-blue:hover, a.col-blue:hover *, a:hover .col-blue, a:hover .col-blue:before, a:hover .col-blue span:before, a.col-blue:hover span:before {
opacity: 0.8;
}
.bg-gy {
background: #eee !important;
}
.bg-w {
background: #fff !important;
}
.bg-bl {
background: #F8FDFF !important;
}
sup {
vertical-align: text-top;
font-size: .6em;
}
.wid10, .wid20, .wid30, .wid33, .wid40, .wid50, .wid60, .wid70, .wid80, .wid90, .wid100 {
width: 100% !important;
}
img {
-webkit-backface-visibility: hidden;
image-rendering: -webkit-optimize-contrast;
}

@media screen and (min-width:480px) {.pcno {display: none;}}
@media screen and (max-width:480px) {.spno {display: none;}}

/*----------------
pankuzu
----------------*/
.topic-path {
width: 100%;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-webkit-transform: translateZ(0);
background: #fff;
}
.topic-path .slides-category {
white-space: nowrap;
}
.topic-path .slides-category .path-category {
display: inline-block;
}
.topic-path .slides-category .path-category a {
display: inline-block;
padding: 1em .6em;
color: #2976c6;
}
.topic-path .slides-category .path-category:not(:last-child)::after {
font-family: "sanwasvg";
content: "\e91e";
}
.topic-path .slides-category .path-category:last-child a {
font-weight: bold;
font-family: 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana;
transform: rotate(0.03deg);
font-size: 1.08em;
letter-spacing: -.01em;
}
/* --------------------------
 video
-------------------------- */
.lead-movie {
margin: 0;
position: relative;
width: 100%;
}
.video-container {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.square .video-container {
padding: 0 0 100%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* --------------------------
ttl
-------------------------- */
h1 img {
max-width: 100%;
}
h1.main-ttl, h2.sub-ttl, h3.third-ttl, h4.fourth-ttl {
line-height: 1.5;
text-align: left;
}
h1.main-ttl {
font-size: 1.3em;
padding: .5em 0;
display: inline-block;
}
.header-ttl-sin img {
max-width: 100%;
max-height: 240px;
margin: 0 auto;
height: auto;
}
h2.sub-ttl {
margin: 2em 0 1em;
font-size: 1.1em;
padding: .5em 1em;
border-left: 5px solid #2976c6;
}
h2.sub-ttl.ttl-stripe {
background: linear-gradient(135deg, transparent 25%, #f0f8ff 25%, #f0f8ff 50%, transparent 50%, transparent 75%, #f0f8ff 75%, #f0f8ff);
background-size: 4px 4px;
}
h2.sub-ttl.ttl-yellow {
border-left: 10px solid #ffee5e;
background: linear-gradient(135deg, transparent 25%, #fbfaef 25%, #fbfaef 50%, transparent 50%, transparent 75%, #fbfaef 75%, #fbfaef);
background-size: 4px 4px;
}
h2.sub-ttl.ttl-green {
border-left: 10px solid #8FC320;
background: linear-gradient(135deg, transparent 25%, #f7ffe5 25%, #f7ffe5 50%, transparent 50%, transparent 75%, #f7ffe5 75%, #f7ffe5);
background-size: 4px 4px;
}
h2.sub-ttl.ttl-orange {
border-left: 10px solid #FF6600;
background: linear-gradient(135deg, transparent 25%, #fff1e8 25%, #fff1e8 50%, transparent 50%, transparent 75%, #fff1e8 75%, #fff1e8);
background-size: 4px 4px;
}
h2.sub-ttl.ttl-gy {
border-left: 10px solid #666;
background: linear-gradient(135deg, transparent 25%, #f6f6f6 25%, #f6f6f6 50%, transparent 50%, transparent 75%, #f6f6f6 75%, #f6f6f6);
background-size: 4px 4px;
}
h1.main-ttl .ttl-icon::before, h2.sub-ttl .ttl-icon::before, h3.third-ttl .ttl-icon::before, h4.fourth-ttl .ttl-icon::before {
font-size: 1.5em;
}
h3.third-ttl {
font-size: 1.1em;
margin: 2em 0 1em;
padding: .5em .5em;
border-bottom: 5px solid;
color: #000;
}
@media screen and (max-width:480px) {
h1.main-ttl, h2.sub-ttl, h3.third-ttl, h4.fourth-ttl {
text-align: center;
}
h2.sub-ttl {
margin: 3em 0 1em;
border-left: none;
}
}
/* 回遊比較表用タイトル */
h2.menu-ttl {
font-size: 1.2em;
padding: 0.5em 1em;
margin: 0;
}
h2#cate-hikaku {
border: 0 !important;
font-weight: bold;
padding: 0.8em 1.2em;
background: #fff !important;
font-size: 1.8em;
text-align: left;
margin: 1.6em auto .5em 0;
}
.cate-hikaku-table-area.mt2 {
margin-top: 0 !IMPORTANT;
}
.block-column-area h3.third-ttl {
margin: 0 0 1em;
}
h4.fourth-ttl {
padding: .5em 1em;
font-size: 1.1em;
margin: 2em 0 1em;
background-color: #f6f6f6;
}
.block-column-area h4.fourth-ttl {
margin: 0 0 1em 0;
}
.checkpoint-ttl {
padding: .5em .8em;
font-size: 1.1em;
margin: 1rem auto .8rem;
border: 2px dotted;
text-align: left;
line-height: 1.5;
}
.img-block .checkpoint-ttl {
margin: 0 auto .5em;
padding: .5em .5em;
width: 100%;
}
.block-column-right .checkpoint-ttl {
width: 100%;
}
.balloon_ttl {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 6em;
padding: 0.5em 1.25em;
color: #fff;
line-height: 1.4;
border-radius: 2px;
}
.balloon_ttl::before {
position: absolute;
bottom: -22px;
left: 1.25em;
width: 0;
height: 0;
border: 12px solid transparent;
visibility: visible;
content: "";
}
.balloon_ttl.txtAC::before {
left: calc(50% - 12px);
}
.balloon_ttl_2 {
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 6em;
padding: 0.5em 1.25em;
line-height: 1.4;
border: solid 1px;
border-radius: 2px;
}
.balloon_ttl_2 {
color: #333;
background-color: #fff;
}
.balloon_ttl_2::before {
position: absolute;
bottom: -7px;
left: 1.25em;
width: 12px;
height: 12px;
background: inherit;
border-right: 1px solid;
border-bottom: 1px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
visibility: visible;
content: "";
}
.balloon_ttl_2.txtAC::before {
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.balloon_ttl, .balloon_ttl_2 {
margin-left: 1em;
}
.balloon_ttl.txtAC, .balloon_ttl_2.txtAC {
margin-left: auto;
margin-right: auto;
}
.circle-no {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
border-radius: 50%;
margin: 0 .5em 0 0;
vertical-align: middle;
position: relative;
}
.circle-no-in {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
text-align: center;
line-height: 1.2;
font-size: .8em;
}
.ttl-icon {
display: inline-block;
vertical-align: middle;
padding: 0 .5em 0;
}
.ttl-icon-img {
max-width: 50px;
vertical-align: middle;
}
/* --------------------------
ttl -slider
-------------------------- */
.header-ttl-slider {
position: relative;
height: 350px;
width: 100%;
overflow: hidden;
}
h1.slider-ttl img {
max-height: 350px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
z-index: 50;
}
@media(max-width:480px) {
.header-ttl-slider {
height: 250px;
}
h1.slider-ttl img {
max-height: 250px;
}
}
.header-ttl-slider ul li:nth-of-type(1) {}
.header-ttl-slider ul li:nth-of-type(2) {
animation-delay: 4s;
}
.header-ttl-slider ul li:nth-of-type(3) {
animation-delay: 8s;
}
.header-ttl-slider ul li:nth-of-type(4) {
animation-delay: 12s;
}
.header-ttl-slider ul li {
animation: 16s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.header-ttl-slider .slider-left {
animation-name: slider-left;
}
.header-ttl-slider .slider-up {
animation-name: slider-up;
}
.header-ttl-slider .slider-down {
animation-name: slider-down;
}
.header-ttl-slider .slider-right {
animation-name: slider-right;
}
.header-ttl-slider .slider-zoomOut {
animation-name: slider-zoomOut;
}
.header-ttl-slider .slider-zoomIn {
animation-name: slider-zoomIn;
}
@keyframes slider-left {
0% {
opacity: 1;
transform: scale(1.1) translateX(-5%) rotate(0.1deg);
}
50% {
opacity: 1;
}
60% {
opacity: 0;
transform: scale(1.1) translateX(5%) rotate(0.1deg);
z-index: 10;
}
100% {
opacity: 0;
transform: scale(1.1) translateX(5%) rotate(0.1deg);
}
}
/* slider-left */
/* slider-up */
@keyframes slider-up {
0% {
opacity: 1;
transform: scale(1.1) translateY(-5%) rotate(0.1deg);
}
50% {
opacity: 1;
}
60% {
opacity: 0;
transform: scale(1.1) translateY(5%) rotate(0.1deg);
z-index: 10;
}
100% {
opacity: 0;
transform: scale(1.1) translateY(5%) rotate(0.1deg);
}
}
/* slider-up */
/* slider-down */
@keyframes slider-down {
0% {
opacity: 1;
transform: scale(1.1) translateY(5%) rotate(0.1deg);
}
50% {
opacity: 1;
}
60% {
opacity: 0;
transform: scale(1.1) translateY(-5%) rotate(0.1deg);
z-index: 10;
}
100% {
opacity: 0;
transform: scale(1.1) translateY(-5%) rotate(0.1deg);
}
}
/* slider-down */
/* slider-zoomOut */
@keyframes slider-zoomOut {
0% {
opacity: 1;
transform: scale(1.2);
}
50% {
opacity: 1;
}
60% {
opacity: 0;
transform: scale(1);
z-index: 10;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* slider-zoomOut */
/* --------------------------
 公開日
-------------------------- */
.post-time-box {
text-align: right;
font-size: 12px;
color: #999;
padding: 0 0 1em;
margin: 0 auto;
}
.post-time-box time:before {
content: "\e953";
font-family: 'sanwasvg';
display: inline-block;
padding: 0 0 0 1em;
}
.post-time-box .post-day:before {
content: "公開日：";
}
.post-time-box .update-day:before {
content: "更新日：";
}
.post-time-box time.post-day:before {
content: "\e953公開日：";
}
.post-time-box time.update-day:before {
content: "\e953更新日：";
}
/* --------------------------
comment
-------------------------- */
.comment-box {
padding: 0;
line-height: 1.5;
text-align: left;
display: inline-block;
width: 100%;
margin: 0 auto 2em;
}
.comment-box.main-comment {
padding: 1.5em;
background-color: #f6f6f6;
}
.comment-box.bottom-comment {
margin: 3em auto 3.5em;
}
p.comment {
padding: 0 0 1.7em;
line-height: 1.8;
}
.comment-box p.comment:last-child {
padding: 0 0 0;
}
/* --------------------------
toc
-------------------------- */
.toc {
border: 1px solid #ccc;
font-size: .9em;
padding: 2em 1.5em 2em 3em;
display: table;
margin: 1em auto 0;
}
.toc-title {
font-size: 1.1em;
text-align: center;
display: block;
padding: 0 0 .5em;
}
label {
cursor: pointer;
}
.toc-checkbox:checked + .toc-title::after {
content: '[ 閉じる ]';
}
.toc-title::after {
content: '[ 開く ]';
margin-left: .5em;
cursor: pointer;
font-size: .8em;
font-weight: normal;
}
.toc-checkbox:checked ~ .toc-content {
visibility: visible;
padding-top: .6em;
height: 100%;
opacity: 1;
}
.toc-content {
visibility: hidden;
height: 0;
opacity: .2;
transition: all .5s ease-out;
text-align: left;
}
ol.toc-list.open {
list-style-type: decimal
}
ol.toc-list.open ol {
list-style-type: decimal;
padding: 0 0 0 1.4em;
}
ol.toc-list li {
padding: .8em 0 0 0;
}
ol.toc-list li ol li {
padding: .3em 0 0 0;
list-style: decimal;
margin: 0 0 0 1.5em;
}
ol.toc-list li span {
color: #000;
}
.toc-checkbox {
display: none;
}
/* --------------------------
fukidashi-box
-------------------------- */
.fukidashi-box {
border: 3px solid #eee;
border-radius: 10px;
padding: 2em;
position: relative;
background-color: #fff;
}
.fukidashi-box-ttl {
font-size: 1.1em;
font-weight: bold;
color: #333;
padding: 0 0 1em;
}
.fukidashi-box:before {
position: absolute;
top: -17px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
width: 30px;
height: 30px;
background: inherit;
border-left: 3px solid #eee;
border-top: 3px solid #eee;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
visibility: visible;
content: "";
background-color: #fff;
}
/* --------------------------
voice-box
-------------------------- */
.voice-box {
width: 90%;
padding: 0 0 2em;
overflow: hidden;
margin: 0 auto;
}
.voice-box .voice-icon {
float: left;
margin-right: -90px;
width: 80px;
}
.voice-box .voice-icon img {
width: 100%;
height: auto;
border: solid 3px #F0F8FF;
border-radius: 50%;
}
.voice-box .voice-area {
width: 100%;
}
.voice-box .voice-area .says {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 1em 1.5em;
border-radius: 12px;
background: #F0F8FF;
text-align: left;
line-height: 1.8;
width: 98%;
width: -webkit-calc(100% - 110px);
width: calc(100% - 110px);
}
.voice-box .voice-area .says:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -30px;
border: 9px solid transparent;
border-right: 21px solid #F0F8FF;
}
.voice-box .voice-area .says p {
margin: 0;
padding: 0;
}
@media screen and (max-width: 480px) {
.voice-box .voice-icon {
width: 50px;
}
.voice-box {
width: 100%;
}
.voice-box .voice-area .says {
margin: 5px 0 0 76px;
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
font-size: 13px;
}
.voice-box .voice-area .says:after {
top: 15px;
}
}
/* --------------------------
img
-------------------------- */
.img-block {
letter-spacing: -.40em;
padding: 0;
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header-area .img-block {
margin: 0 auto .8em;
}
.img-block * {
letter-spacing: normal;
vertical-align: top;
}
.img1 .img-box, .img1 .inner {
width: 100%;
text-align: center;
}
.img2 .img-box, .img2 .inner {width: 50%;}
.img3 .img-box, .img3 .inner {width: 33.3%;}
.img4 .img-box, .img4 .inner {width: 25%;}
.img5 .img-box, .img5 .inner {width: 20%;}
.img6 .img-box, .img6 .inner {width: 16.6%;}
.img7 .img-box, .img7 .inner {width: 14.2%;}
.img8 .img-box, .img8 .inner {width: 12.5%;}
.img1 .inner .link-text, .img2 .inner .link-text, .img3 .inner .link-text, .img4 .inner .link-text, .img5 .inner .link-text, .img6 .inner .link-text, .img7 .inner .link-text, .img8 .inner .link-text {width: 98%;}
.item-img {
max-width: 98%;
height: auto;
margin: auto;
}
.item-img.border {
border: 1px solid #ddd;
}
a figure .item-img {
max-width: 100%;
}
.img1 .item-img {
max-width: 100%;
}
figure {
display: inline-block;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.img-figure {
line-height: 1.5;
color: #555;
font-size: .9em;
padding: .5em;
display: inline-block;
text-align: left;
width: 98%;
}
.img-box a .img-figure {
padding: .5em 0 3.5em;
height: auto;
max-height: 8rem;
overflow: hidden;
}
.img-block .img-box:first-child {
text-align: left;
}
.img-block .img-box:last-child {
text-align: right;
}
.img1 .img-box:first-child, .img1 .img-box:last-child {
text-align: center;
}
.img-block .img-box:first-child .img-figure, .img-block .img-box:last-child .img-figure {
text-align: left;
}
.img-box a {
display: inline-block;
width: 100%;
padding: .1em;
border: 0;
text-align: center;
position: relative;
}
.img-box figure a {
width: 100%;
background-color: #fff;
padding: 0;
border: 0;
}
a:hover span.img-figure, a:hover span.img-figure * {
text-decoration: none;
}
.img-figure strong {
line-height: 3;
}
.img-figure strong:nth-child(n + 2) {
line-height: 1.5;
background: none;
color: #333;
display: inline;
}
.img-box a .item-data-box {
position: absolute;
bottom: 0;
display: block;
margin: auto;
width: 100%;
background: #fff;
}
.change-img .img-box:hover {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
opacity: 0.7;
}
/* --------------------------
item
-------------------------- */
.item-link-block {
display: inline-block;
max-width: 800px;
width: 100%;
margin: 1em auto 2em;
text-align: center;
position: relative;
letter-spacing: -.40em;
background-color: #f6f6f6;
border: 1px solid #ddd;
padding: 1rem 0;
}
.item-link-block * {
letter-spacing: normal;
vertical-align: middle;
}
.item-link-block:hover * {
opacity: 0.8;
}
.item-link-img-area {
display: inline-block;
max-width: 40%;
margin: 0 auto
}
.item-link-txt-area {
display: inline-block;
width: 100%;
padding: .2rem .7rem 0;
}
.item-link-item-img {
max-width: 100%;
height: auto;
}
.item-link-cap {
display: inline-block;
padding: 0 0 .5em;
text-align: left;
}
.item-link-cap span {
border-bottom: 3px solid;
margin: 0;
padding: 0;
display: inline;
font-size: 1.3em;
line-height: 2;
}
.item-link-name {
padding: 0 0 .5rem 0;
text-align: left;
line-height: 1.8;
display: block;
margin: 0 auto;
}
.item-link-btn {
text-align: center;
padding: 1em 0 0 0;
}
.item-link-btn .item-link-btn-in {
color: #fff;
display: inline-block;
padding: .7em 1.8em;
border-radius: 30px;
font-size: .9em;
white-space: nowrap;
}
.tate .item-link-btn .item-link-btn-in {
padding: 0.3em 1.2em;
}
.item-link-btn a:hover .item-link-btn-in {
text-decoration: none;
opacity: .8;
}
.item-link-block:hover .item-link-btn .item-link-btn-in {
filter: saturate(150%);
}
.item-link-btn .item-link-btn-in .icon-greater-right-b.icon-greater-right-b:before {
display: inline-block;
line-height: 1;
padding: 0 0 0 .5em;
color: #fff;
}
.item-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.item-data-box * {
vertical-align: middle !important;
}
.itempr {
display: inline-block;
padding: 0 .3em 0 0;
color: #D80000;
font-size: 1.4em;
letter-spacing: 0em;
}
.yen {
color: #D80000;
}
.itemst {
padding: 0 .3em 0 0;
color: #2976c6;
font-size: .9em;
display: inline-block;
}
.itemre {
color: #2976c6;
font-size: .8em;
vertical-align: middle;
}
.itemre img {
vertical-align: middle !important;
}
.hikaku-table .itemre {
height: 2em !important;
display: block;
}
.hikaku-table .itemre img {
max-width: 65%;
}
.img-box a .img-figure .itemre {
height: 1.8em;
display: block;
}
.item-link-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border: 0;
padding: 0;
margin: .5em auto;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
}
.item-link-table th, .item-link-table td {
border: 1px solid #e7e7e7;
color: #333;
font-size: .8em;
line-height: 1.3;
padding: .45em .7em;
}
.item-link-table th {
background-color: #f0f8ff;
white-space: nowrap;
vertical-align: middle;
font-weight: normal;
text-align: center;
}
.item-link-table td {
background-color: #fff;
white-space: normal;
text-align: left;
}
.hikaku-link-code {
font-size: .9em;
white-space: nowrap;
display: inline-block;
padding: 0.3em 0 0 0;
}
.item2 {
letter-spacing: -.40em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.item2 .item-link-block {
letter-spacing: normal;
margin: 0 1% 1em;
padding: .5em .5em 1.5em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item2 .item-link-block *, .item2 .item-link-block {
text-align: center;
vertical-align: top;
}
.item2 .item-link-txt-area {
padding: 0;
}
.item2 .item-link-img-area {
max-width: 100%;
}
.item2 .item-link-btn {
text-align: center;
padding: 0;
}
.img-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 0 1.5em;
}
/* --------------------------
rank
-------------------------- */
.rank-item .img-box a {
text-align: left;
}
.rank-item.img-block .checkpoint-ttl {
margin: 0 0 .5rem 0;
padding: .3rem .5rem;
color: #fff;
width: auto;
display: inline-block;
border: 0;
background-color: #999;
line-height: 1;
}
.rank-item.img-block .img-box:nth-child(1) .checkpoint-ttl {
background-color: #ecc732;
}
.rank-item.img-block .img-box:nth-child(2) .checkpoint-ttl {
background-color: #cccccc;
}
.rank-item.img-block .img-box:nth-child(3) .checkpoint-ttl {
background-color: #633;
}
/* --------------------------
scroll
-------------------------- */
@media(max-width:480px) {
.clm-scroll-area {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border: 0;
padding: 0 0 1.5em 0;
margin: 0 0 3em;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
background-color: #fff;
}
.clm-scroll-in {
width: 100%;
display: table;
}
}
/* --------------------------
tab
-------------------------- */
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
background-color: #fff;
width: 95%;
margin: 0 auto;
}
/*タブのスタイル*/
.tabs .tab_item {
width: 50%;
height: 50px;
border-bottom: 3px solid;
background-color: #eee;
line-height: 50px;
font-size: 1.2em;
letter-spacing: .05em;
text-align: center;
color: #666;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
border-radius: 10px 10px 0 0;
border-right: 1px solid #fff !important;
border-left: 1px solid #fff !important;
}
.tab2 .tab_item {
width: 50%;
}
.tab3 .tab_item {
width: 33.333%;
}
.tab4 .tab_item {
width: 25%;
}
.tab5 .tab_item {
width: 20%;
}
.tab6 .tab_item {
width: 16.666%;
}
@media(max-width:480px) {
.tabs .tab_item {
width: 48%;
height: 50px;
font-size: 1.2em;
border-radius: 3px;
margin: 1%;
border: 1px solid !important;
}
}
.tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
.tabs input.input_item {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tabs .tab_content {
display: none;
clear: both;
overflow: hidden;
padding: 1.5em 0;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
color: #fff;
}
/* ---- タブ内 5商品 ---- */
.img-block.img5-tab {
display: grid;
grid-template-columns: 55fr 23fr 23fr;
}
.img-block.img5-tab .img-box:first-child {
grid-row: 1 / 3;
grid-column: 1 / 2;
}
.img5-tab .img-figure strong, .img5-tab .img-figure br {
display: none;
}
.img5-tab .img-box a .img-figure {
padding: 0.5em 0 0;
height: 3.7rem;
}
@media(max-width:480px) {
.img-block.img5-tab {
letter-spacing: -.40em;
padding: 0;
width: 100%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.img-block.img5-tab .img-box {
margin: 0 0 .5em;
}
.img-block.img5-tab .img-box:nth-child(1), .img-block.img5-tab .img-box:nth-child(2) {
width: 50%;
}
.img-block.img5-tab .img-box:nth-child(3), .img-block.img5-tab .img-box:nth-child(4), .img-block.img5-tab .img-box:nth-child(5) {
width: 33.33%;
}
.img5-tab .img-box a .img-figure {
height: 5rem;
}
}
/* --------------------------
more-link
-------------------------- */
.link-area.link-s {
text-align: right;
}
.more-link-box {
display: inline-block;
max-width: 800px;
width: 100%;
margin: 1em auto 2em;
text-align: center;
position: relative;
letter-spacing: -.40em;
border: 1px solid;
padding: .5em 0;
border-radius: 30px;
}
.more-link-box *::before {
display: inline-block;
padding: 0 .5rem 0 0;
vertical-align: middle;
line-height: 1;
}
.link-s .more-link-box {
display: inline-block;
max-width: auto;
width: auto;
background-color: #fff;
border: 1px solid;
padding: 0;
border-radius: 5px;
}
.link-s .more-link-box .more-link {
padding: .5em 2rem;
font-size: 1.1em;
}
.more-link-box:hover, .link-text:hover, .more-link:hover * {
opacity: 0.8;
}
.more-link {
display: inline-block;
width: 100%;
font-size: 1em;
}
.more-link, .more-link span, .more-link * {
letter-spacing: normal;
vertical-align: middle !important;
line-height: 1 !important;
}
.more-link-icon {
width: 45px;
margin: 0 .5em 0 0;
}
.more-link-icon[src$=".JPG"] {
mix-blend-mode: darken;
}
.more-link .icon-greater-right-b.icon-greater-right-b:before {
display: inline-block;
padding: 0 0 0 .5em;
}
.img-box .more-link-box {
width: 95%;
margin: 0.8em auto 1em;
padding: 0.3em 0;
}
/* --------------------------
orange-btn
-------------------------- */
.orange-btn-area {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: center;
}
.orange-btn-area.btn1 p {
flex-basis: 95%;
margin: 0 auto;
}
.orange-btn-area.btn2 p {
flex-basis: 49%;
}
.orange-btn-area.btn3 p {
flex-basis: 32%;
}
.orange-btn-area.btn4 p {
flex-basis: 24%;
}
.orange-btn-area.btn5 p {
flex-basis: 19%;
}
.orange-btn-area p a {
padding: 0.5em 1.5em 0.5em 0;
display: block;
border: 3px solid #FE6604;
border-radius: 5px;
font-weight: 500;
letter-spacing: -.03em;
font-size: 15px;
position: relative;
max-width: 800px;
margin: 0 auto;
}
.orange-btn-area p a:hover {
opacity: 0.8;
}
.orange-btn-area p a::after {
font-family: 'sanwasvg';
content: "\e91f";
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.orange-btn-area p.border-btn a {
color: #FE6604;
}
.orange-btn-area p.bg-btn a {
color: #fff;
background-color: #FE6604;
}
.orange-btn-icon:before {
display: inline-block;
vertical-align: middle;
}
.orange-btn-icon:before {
display: inline-block;
vertical-align: middle;
padding: 0 0.3em 0 0;
font-size: 1.5em;
}
@media screen and (max-width:480px) {
.orange-btn-area p a {
font-size: 14px;
}
.orange-btn-area.btn2 p a {
font-size: 10px;
}
}
/* --------------------------
menu-area
-------------------------- */
.menu-area {
text-align: center;
display: inline-block;
margin: 0 auto;
}
.menu {
list-style: none;
letter-spacing: -.40em;
}
.menu .inner {
display: inline-block;
letter-spacing: normal;
text-align: center;
}
.menu .link-text {
letter-spacing: normal;
display: inline-block;
text-align: center;
background-color: #f0f8ff;
border: 1px solid #ccc;
padding: .6em 2em;
border-radius: 30px;
margin: 0 .4em .8em;
font-size: 1em;
}
.menu .link-text:hover {
opacity: 0.8;
}
.menu .link-text:hover .menu-text-ttl {
text-decoration: none;
}
.menu .link-text .icon-greater-right-b:before {
display: inline-block;
padding: 0 0 .3em;
}
/* --------------------------
checkpoint
-------------------------- */
.checkpoint-box {
margin: 0 auto 2em;
padding: 0 .5em;
}
.checkpoint-ul {
line-height: 2;
text-align: left;
}
.checkpoint-li {
padding: .8em 0;
list-style: none;
}
.checkpoint-cap {
padding: .9em .5em 0;
font-size: 1.1em;
background: linear-gradient(transparent 70%, #ffee5e 70%);
vertical-align: middle;
display: inline;
}
.checkpoint-cap .csdf-right-dtl-txt-greater:before {
font-size: 1.5em;
display: inline-block;
vertical-align: middle;
padding: 0 .3em 0 0;
}
p.checkpoint-txt {
padding: 1em 0 0 1em;
}
.checkpoint-box.yes-link a {
color: #000;
}
.checkpoint-box.no-txt .checkpoint-li {
padding: .2em 0;
}
.checkpoint-box.no-txt .checkpoint-cap {
background: none;
}
.checkpoint-box.yes-link.no-txt a {
background: linear-gradient(transparent 70%, #ffee5e 70%);
}
.non-txt .checkpoint-li {
padding: .2em 0;
}
.non-txt .checkpoint-cap {
font-size: 1em;
background: none;
position: relative;
padding: 0 0 5px 28px;
display: block;
line-height: 1.5;
}
.non-txt .checkpoint-cap .csdf-right-dtl-txt-greater:before {
position: absolute;
left: 0;
}
/* --------------------------
table-box
-------------------------- */
.table-box-area {
display: inline-block;
border: 1px solid #ccc;
padding: 0;
margin: 0 auto 3em;
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
width: 100%;
}
.table-box-cap {
font-size: .85em;
background-color: #f0f8ff;
padding: .5em 0;
}
.table-box-txt {
font-size: .9em;
padding: 1em 0;
line-height: 1.5;
}
.table-box-cap, .table-box-txt {
border-right: 1px dotted #ccc;
}
.table-box-area .table-box-cap:last-child, .table-box-area .table-box-txt:last-child {
border-right: 0;
}
.table-box-1 .table-box-cap {
width: 100%;
}
.table-box-2 .table-box-cap {
width: 50%;
}
.table-box-3 .table-box-cap {
width: 33.33%;
}
.table-box-4 .table-box-cap {
width: 25%;
}
.table-box-5 .table-box-cap {
width: 20%;
}
.table-box-6 .table-box-cap {
width: 16.66%;
}
.table-box-7 .table-box-cap {
width: 14.285%;
}
.table-box-8 .table-box-cap {
width: 12.5%;
}
.table-box-9 .table-box-cap {
width: 11.111%;
}
.table-box-10 .table-box-cap {
width: 10%;
}
/* --------------------------
hikaku-table
-------------------------- */
.hikaku-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border: 0;
padding: 0 0 1.5em 0;
margin: 0 0 3em;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
background-color: #fff;
}
.hikaku-table tbody {
width: 100%;
display: table;
}
.hikaku-table th, .hikaku-table td {
border: 1px solid #e7e7e7;
color: #333;
line-height: 1.3;
padding: .8em;
white-space: normal;
text-align: center;
}
.hikaku-table.no-border th, .hikaku-table.no-border td {
border: 0;
}
.hikaku-table th {
background-color: #f7f7f7;
font-weight: normal;
text-align: center;
width: 100px;
white-space: nowrap;
vertical-align: middle;
}
.hikaku-table td {
min-height: 27px;
width: 134px;
vertical-align: middle;
}
.tate.hikaku-table td {
padding: 0.5em;
}
.hikaku-table .all-th th {
text-align: center;
}
.hikaku-table td.hikaku-img-area {
position: relative;
}
.hikaku-table .hikaku-rank {
border-radius: 50%;
font-weight: bold;
height: 28px;
left: 5px;
padding-top: 7px;
position: absolute;
top: 5px;
width: 28px;
color: #333;
background-color: #e7e7e7;
z-index: 2;
line-height: 1;
}
.hikaku-rank.rank1 {
color: #fff;
background-color: #e4c35f;
}
.hikaku-rank.rank2 {
color: #fff;
background-color: #939394;
}
.hikaku-rank.rank3 {
color: #fff;
background-color: #e88348;
}
.hikaku-table-img-link {
display: block;
text-align: center;
}
.hikaku-table-img-link .hikaku-table-txt {
color: #2976c6;
}
.hikaku-table-img {
max-width: 120px;
height: auto;
}
.imgS.hikaku-table td {
padding: .2em .5em;
white-space: nowrap;
}
.imgS .hikaku-table-img {
width: 50px;
}
.tate .hikaku-table-img {
width: 80px;
height: auto;
}
.hikaku-table-txt {
display: inline-block;
text-align: left;
margin: 0 auto;
}
.hikaku-table .item-link-btn {
text-align: center;
padding: .8em 0;
}
.tate.hikaku-table .item-link-btn {
padding: 0.5em 0 0.3em 0;
}
.hikaku-table .item-data-box {
text-align: center;
}
.hover-img-area {
position: relative;
}
.hover-img-area .hover-big-img, .hover-img-area .hover-big-img * {
display: none;
}
.hover-img-area:hover .hover-big-img {
display: inline-block;
line-height: 1.2em;
margin: 0;
padding: 0.5em;
position: absolute;
top: 0.5rem;
left: -6rem;
box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%);
background-color: #fff;
border-radius: .3rem;
z-index: 99;
}
.hikaku-table tr td:last-child .hover-img-area:hover .hover-big-img {
left: -12rem;
}
.hover-img-area:hover .hover-big-img .hover-img-dx {
display: block;
max-width: 300px;
z-index: 1000;
}
.hover-img-icon {
position: absolute;
bottom: .5rem;
right: .5rem;
background-color: #fff;
padding: .3rem;
border-radius: 50%;
border: 1px solid #666;
}
.hover-img-icon:before {
color: #666;
}
.hover-img-area:hover .hover-img-icon, .hover-img-area:hover .hover-img-icon:before {
display: none;
}
.tate.hikaku-table tbody {
width: 1035px;
}
@media only screen and (max-width: 600px) {
.table-scroll-sp {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.table-scroll-sp .hikaku-table {
width: 500px;
}
}
@media screen and (max-width:480px) {
.tate.hikaku-table tbody {
width: auto;
}
.hikaku-table {
overflow-x: scroll;
}
}
.tate.hikaku-table th:first-child, .tate.hikaku-table td:first-child {
position: sticky;
left: 0;
background-color: #fff;
}
.tate.hikaku-table th:first-child {
background-color: #f6f6f6;
z-index: 3;
}
.tate.hikaku-table th:first-child:before, .tate.hikaku-table td:first-child:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
z-index: -1;
}
.hikaku-table-img {
mix-blend-mode: darken;
}
@media screen and (min-width:780px) {
/* head-fix */
table.head-fix {
position: relative;
overflow-x: visible !important;
}
table.head-fix th {
position: sticky;
z-index: 2;
}
}
@media screen and (min-width:1100px) {
table.head-fix th {
top: 68px;
}
}
@media screen and (min-width:780px) and (max-width:1099px) {
table.head-fix th {
top: 118px;
}
}
table.head-fix .hikaku-table-img {
width: 80px;
height: auto;
}
@media screen and (max-width:480px) {
/*---- Chrome ----*/
/*縦方向スクロールバー*/
.hyo-area::-webkit-scrollbar {
width: 3px;
}
/*横方向スクロールバーの高さ*/
.hyo-area::-webkit-scrollbar:horizontal {
height: 3px;
}
/*スクロールバー*/
.hyo-area::-webkit-scrollbar-track {
background-color: #f6f6f6;
border-radius: 100px;
}
/*つまみの部分*/
.hyo-area::-webkit-scrollbar-thumb {
border-radius: 100px;
}
/*---- Firefox ----*/
.hyo-area* {
scrollbar-width: thin; /*細さ*/
}
}
/* ＝＝＝　scrollbar ＝＝＝ */
/*---- Chrome ----*/
/*縦方向スクロールバー*/
.hikaku-table::-webkit-scrollbar {
width: 0;
}
/*横方向スクロールバーの高さ*/
.hikaku-table::-webkit-scrollbar:horizontal {
height: 10px;
}
/*スクロールバー*/
.hikaku-table::-webkit-scrollbar-track {
background-color: #f6f6f6;
border-radius: 100px;
}
/*つまみの部分*/
.hikaku-table::-webkit-scrollbar-thumb {
border-radius: 100px;
}
/*---- Firefox ----*/
.hikaku-table* {
scrollbar-width: thin; /*細さ*/
}
@media screen and (max-width:680px) {
.cate-hikaku-table-area .hikaku-table th {
white-space: normal !important;
position: sticky;
left: -1px;
z-index: 3;
min-width: 80px;
}
.cate-hikaku-table-area .hikaku-table th:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
z-index: -1;
}
.cate-hikaku-table-area .hikaku-table-img {
width: 100px;
height: auto;
}
}
/* --------------------------
cate-menu
-------------------------- */
.cate-menu {}
.cate-menu-list {
list-style: none;
letter-spacing: -.40em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.cate-menu-list .inner {
letter-spacing: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 10px;
margin: 0 1% 1em;
position: relative;
}
.cate-menu-list a {
display: block;
padding: 1em;
width: 100%;
}
.cate-menu-list a span {
display: block;
font-size: .95em;
padding: 0.5em 0 0;
}
.cate-menu-list a span.icon-greater-right-b {
display: inline-block;
padding: 0 5px 0 6px;
transition: all .5s ease-out;
}
.cate-menu-list a:hover span.icon-greater-right-b {
padding: 0 0 0 11px;
}
span.cate-menu-dtltxt {
color: #333 !important;
padding: 0.3em 0 0 !important;
font-size: .9em !important;
}
.cate-menu-list a:hover span {
opacity: 0.8;
}
.cate-menu-list img {
width: 90%;
max-width: 120px;
margin: 0 auto;
}
.cate-menu-list .inner .item-data-box {
font-size: 0.9em;
padding: .6em 0;
background-color: #f6f6f6;
margin: 0 .3em .3em;
border-radius: 0 0 8px 8px;
line-height: 1.3;
}
.menu-area.menu-2 {
text-align: center;
display: inline-block;
margin: 0 auto;
width: 100%;
}
.menu-2 .menu {
letter-spacing: -.40em;
}
.menu-2 .inner {
width: 50%;
display: inline-block;
letter-spacing: normal;
padding: 0 .5rem;
}
.menu-2 .link-text {
width: 100%;
padding: 1.3rem 0;
font-size: 1rem;
position: relative;
}
.link-text.bg-green, .link-text.bg-green *, .link-text.bg-green *:before, .link-text.bg-orange, .link-text.bg-orange *, .link-text.bg-orange *:before {
color: #fff !important;
border: 0;
}
.link-text.bg-green {
background-color: #67bc06;
}
.link-text.bg-orange {
background-color: #f46100;
}
.menu-2 .link-text *:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 20px;
}
.menu-2 .link-text:hover *:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 15px;
}
/* big-photo */
.big-photo-menu .cate-menu-list img {
width: 100%;
max-width: 500px;
max-height: 500px;
border-radius: 8px 8px 0 0;
}
.big-photo-menu .cate-menu-list a {
padding: 0;
overflow: hidden;
}
.big-photo-menu .cate-menu-list a span {
padding: 1em 0 0.5em 0;
color: #333;
font-size: 1.1em;
}
.big-photo-menu .cate-menu-list a span:after, .menu-arrow .cate-menu-list a span:last-child:after {
font-family: 'sanwasvg';
content: "\e921";
display: block;
margin: 10px auto 5px auto;
transition: .5s;
}
.menu-arrow .cate-menu-list .inner {
padding: 0;
position: relative;
}
.menu-arrow .cate-menu-list a span:last-child:after {
font-family: 'sanwasvg';
content: "\e921";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.big-photo-menu .cate-menu-list a:hover span:after, .menu-arrow .cate-menu-list a:hover span:after {
margin: 15px auto 0 auto;
}
.menu-no-border .cate-menu-list .inner {
border: 0;
}
.cate-menu-list .menu-icon::before {
font-size: 4em;
display: inline-block;
padding: 0 0 10px;
padding: 5px 0 10px;
transition: .3s;
}
.cate-menu-list .inner a:hover .menu-icon::before {
padding: 0 0 15px;
filter: saturate(120%);
}
.menu-arrow .cate-menu-list .inner a:hover .menu-icon::before {
padding: 5px 0 10px;
}
.cate-menu-list .inner span {
margin: 0 auto auto;
}
.cate-menu-list .inner span.menu-icon {
margin: 0 auto;
}
@media screen and (min-width:780px) {
.cate-menu .img1 .inner {
width: 100%;
text-align: center;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.cate-menu .img2 .inner {
width: 50%;
-ms-flex-preferred-size: 48%;
flex-basis: 48%;
}
.cate-menu .img3 .inner {
width: 31.3%;
-ms-flex-preferred-size: 31.3%;
flex-basis: 31.3%;
}
.cate-menu .img4 .inner {
width: 25%;
-ms-flex-preferred-size: 23%;
flex-basis: 23%;
}
.cate-menu .img5 .inner {
width: 20%;
-ms-flex-preferred-size: 18%;
flex-basis: 18%;
}
.cate-menu .img6 .inner {
width: 14.6%;
-ms-flex-preferred-size: 14.6%;
flex-basis: 14.6%;
}
.cate-menu .img7 .inner {
width: 13.2%;
-ms-flex-preferred-size: 13.2%;
flex-basis: 13.2%;
margin: 0 .5% 1em;
}
.cate-menu .img8 .inner {
width: 11.5%;
-ms-flex-preferred-size: 13.2%;
flex-basis: 11.5%;
margin: 0 .5% 1em;
}
}
@media screen and (max-width:779px) {
.cate-menu .cate-menu-list.spimg2 .inner {
width: 50%;
-ms-flex-preferred-size: 48%;
flex-basis: 48%;
}
.cate-menu .cate-menu-list.spimg3 .inner {
width: 33.333%;
-ms-flex-preferred-size: 31.333%;
flex-basis: 31.333%;
}
.cate-menu .cate-menu-list.spimg4 .inner {
width: 25%;
-ms-flex-preferred-size: 23%;
flex-basis: 23%;
}
.cate-menu .cate-menu-list.spimg2 .inner a {
display: flex;
}
.cate-menu .cate-menu-list.spimg2 .inner a img {
width: 22%;
margin: 1% 2% 1% 1%;
}
.cate-menu .cate-menu-list.spimg2 .inner a span {
width: 75%;
text-align: left;
vertical-align: middle;
}
}
/* --------------------------
step
-------------------------- */
.clm-step {
counter-reset: step;
-swl-step_arrow_color: #dedede;
text-align: left;
}
.clm-step__item {
position: relative;
margin-bottom: 0 !important;
padding: 0 0 3em 64px
}
.clm-step__item::before {
position: absolute;
top: 0;
left: 23px;
display: block;
width: 0;
height: 100%;
border-left: 1px dashed #ccc;
content: ""
}
.clm-step__item:last-child::before {
content: none
}
.clm-step__number {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: content-box;
width: 48px;
height: 48px;
color: #fff;
line-height: 1;
text-align: center;
}
.clm-step__number .__label {
display: block;
padding-bottom: 1px;
font-size: 10px;
content: attr(data-label)
}
.clm-step__number::after {
display: block;
font-size: 20px;
content: counter(step);
counter-increment: step
}
.clm-step__number[data-num]::after {
content: attr(data-num)
}
.clm-step__number[data-hide] .__label, .clm-step__number[data-hide]::after {
display: none
}
[data-num-style=circle] .clm-step__number {
border-radius: 50%
}
[data-num-style=circle] .clm-step__number .__shape {
border-radius: 50%
}
[data-num-style=horizontal] .clm-step__number {
flex-direction: row;
align-items: flex-end
}
[data-num-style=horizontal] .clm-step__number .__label {
padding-right: 4px;
padding-bottom: 4px
}
.clm-step__title {
font-weight: 700
}
.clm-step__title + .clm-step__body {
margin-top: 1em;
line-height: 1.8;
}
.clm-step:not(.is-style-big):not(.is-style-small) > .clm-step__item > .clm-step__title {
display: flex;
-ms-flex-direction: row;
flex-direction: row;
text-align: -webkit-auto;
justify-content: left;
min-height: 48px;
font-size: 1.2em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.is-style-big > .clm-step__item {
padding: 2em;
border-bottom: dashed 1px var(--swl-step_arrow_color)
}
.is-style-big > .clm-step__item:first-child {
border-top: dashed 1px var(--swl-step_arrow_color)
}
.is-style-big > .clm-step__item::before {
top: 100%;
left: 50%;
display: block;
width: 0;
height: 0;
border: solid 12px transparent;
border-top-color: var(--swl-step_arrow_color);
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.is-style-big > .clm-step__item > .clm-step__number {
position: relative;
width: auto;
height: auto;
margin: 0 auto 1em;
color: inherit;
border-radius: 0;
}
.is-style-big > .clm-step__item > .clm-step__number .__label {
font-size: 12px
}
.is-style-big > .clm-step__item > .clm-step__number::after {
font-size: 24px
}
.is-style-big .clm-step__title {
text-align: center
}
.is-style-small .clm-step__item {
padding: 0 0 2em 24px
}
.is-style-small .clm-step__item::before {
top: 18px;
left: 7px;
height: calc(100% - 20px);
border-left: 2px solid #ccc
}
.is-style-small .clm-step__title {
margin-top: .25em;
text-align: left
}
.is-style-small .clm-step__body {
margin-top: .5em
}
.is-style-small .clm-step__number {
position: relative;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: auto;
height: auto;
margin-left: -24px;
color: inherit;
}
.is-style-small .clm-step__number .__shape {
box-sizing: border-box;
width: 16px;
height: 16px;
margin-right: 8px;
border: solid 2px currentColor
}
.is-style-small .clm-step__number .__label {
padding: 0 2px 0 0;
font-size: 12px;
opacity: .8
}
.is-style-small .clm-step__number::after {
font-size: 14px;
opacity: .8
}
.is-style-small [data-hide] + .clm-step__title {
margin-top: -24px
}
@media (max-width:599px) {
.clm-step:not(.is-style-big):not(.is-style-small) > .clm-step__item::before {
display: none
}
.clm-step:not(.is-style-big):not(.is-style-small) > .clm-step__item > .clm-step__body {
margin-left: -48px
}
.is-style-big > .clm-step__item {
padding: 2em 1em
}
}
@media screen and (max-width:480px) {
.menu-2 .link-text *:before, .menu-2 .link-text:hover *:before {
display: none !important;
}
}
@media screen and (min-width:768px) {
.menu-area.menu-2 {
width: 90%;
}
.menu-2 .link-text {
padding: 1.3rem 0;
font-size: 1.3rem;
}
}
/* --------------------------
keyword-search
-------------------------- */
#contents .keyword-search-list {
list-style: none;
letter-spacing: -.40em;
text-align: left;
}
#contents .keyword-search-list li {
letter-spacing: normal;
display: inline-block;
padding: .01em .6em;
margin: 0 0 .3em;
border-right: 1px solid #ccc;
}
#contents .keyword-search-list li a {
font-size: 14px;
}
#contents .keyword-search-list li a:hover {
text-decoration: underline;
}
/* --------------------------
list-thin
-------------------------- */
.list-thin {
display: inline-block;
list-style: none;
letter-spacing: -.40em;
width: 100%;
}
.list-thin * {
letter-spacing: normal;
}
.list-thin li {
padding: .5em 0 2em;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
.list-thin-box {
display: inline-block;
width: 100%;
text-align: left;
vertical-align: middle !important;
padding: 0 .5em;
}
.list-thin-img {
display: inline-block;
max-width: 80%;
vertical-align: middle !important;
padding: .5em;
}
.list-thin-cap {
display: inline;
font-size: 1.12em;
background: linear-gradient(transparent 70%, #ffee5e 70%);
line-height: 2;
letter-spacing: .1em;
}
.list-thin-txt {
padding: .5em 0 0 0;
letter-spacing: .1em;
line-height: 1.8;
}
.list-thin-txt strong {
background: none;
}
.list-thin-btn-box {
text-align: right;
}
/* --------------------------
 sample
-------------------------- */
#sample-request-box, #sample-request-box *, #sample-request-box *:before, #sample-request-box *:after {
border: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
#sample-request-box {
border: 1px solid;
font-size: .8em;
line-height: 1.5;
margin: 2em auto 3em;
max-width: 960px;
color: #333;
padding: 1em;
text-align: left;
}
#sample-request-box .sample-inner {
padding: 1.5em 0;
}
#sample-request-box .sample-ttl-area {
color: #2976c6;
text-align: center;
padding: .5em 0 1em;
}
#sample-request-box .sample-sub-ttl {
font-size: 1.6em;
}
#sample-request-box .sample-main-ttl {
font-size: 2.3em;
font-weight: bold;
}
#sample-request-box .sample-info {
width: 100%;
margin: 0 auto;
font-size: .7em;
}
#sample-request-box .info-block {
padding: 0 0 1em 0;
}
#sample-request-box .point-txt {
font-size: 1.8em;
padding: 0 0 .3em 0;
}
#sample-request-box .supplement-txt {
font-size: .7em;
}
#sample-request-box .txt-marker {
background-color: #dcf1ff;
display: inline-block;
margin: 0 .2em;
padding: 0 .3em;
}
#sample-request-box .sample-download {
width: 100%;
margin: .5em auto 1em;
text-align: center;
}
#sample-request-box .note-txt {
padding: 1.2em 0;
background-color: #ecf8d9;
}
#sample-request-box .font-red {
color: #e00;
font-size: 1.2em;
padding: 0 0 .3em;
}
#sample-request-box .under-line {
text-decoration: underline;
display: inline-block;
padding: 0 .2em;
font-weight: bold;
}
#sample-request-box .font-small {
font-size: .9em;
}
#sample-request-box .btn-ttl {
border-top: 2px dashed #ccc;
margin: 1.5em 0 0 0;
padding: 1.5em 0 0;
}
#sample-request-box .download-btn-list {
padding: 1em 0 0;
width: 95%;
display: table;
margin: 0 auto;
font-size: .7em;
}
#sample-request-box .link-download {
display: block;
padding: 1em 0;
background-color: #7bad29;
color: #fff;
font-size: 1.4em;
border-radius: 5px;
text-decoration: none;
}
#sample-request-box .link-download:hover {
background-color: #90c539;
}
#sample-request-box .link-ex {
display: inline-block;
padding: .1em .5em;
margin: 0 .2em;
background-color: #7bad29;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: .9em;
font-weight: normal;
}
#sample-request-box .link-ex:hover {
background-color: #90c539;
}
#sample-request-box .link-newmember {
display: inline-block;
padding: .1em .5em;
margin: 0 .2em;
background-color: #7bad29;
color: #fff;
border-radius: 5px;
text-decoration: none;
}
#sample-request-box .link-newmember:hover {
background-color: #90c539;
}
#sample-request-box .icon-download::before {
color: #fff;
margin: 0 .2em 0 0;
}
#sample-request-box .sample-tell {
text-align: center;
}
#sample-request-box .tel-txt {
color: #2976c6;
font-size: 1.6em;
}
#sample-request-box .font-small-more {
font-size: .6em;
}
/* --------------------------
	fix_menu
	-------------------------- */
#fix_menu.fix_menu-area {
position: fixed;
right: -4px;
top: 300px;
width: 175px;
z-index: 99;
}
#fix_menu .fix_menu-box {
background-color: #2976c6;
margin: 0 0 5px 0;
text-align: left;
display: block;
border-radius: 5px 0 0 5px;
}
#fix_menu .fix_menu-link {
text-decoration: none;
}
#fix_menu .fix_menu-item {
padding: 13px 10px 12px 10px;
border-bottom: solid 1px #fff;
}
#fix_menu .fix_menu-item:last-of-type {
border-bottom: none;
}
#fix_menu .fix_menu-text {
font-size: 1.2em;
font-weight: bold;
color: #fff;
}
#fix_menu .fix_menu-text i {
margin: 0 8px 0 2px;
font-size: 1.2em;
vertical-align: middle;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* --------------------------
 present
-------------------------- */
#present-cam-box {
border: 5px solid;
font-size: 1.3em;
line-height: 1.5;
margin: 2em auto 3em;
max-width: 900px;
color: #333;
padding: 1em 3em;
text-align: left;
}
#present-cam-box .present-inner {
padding: 1.5em;
}
#present-cam-box .txt-ttl {
font-size: 1.2em;
font-weight: bold;
}
#present-cam-box .txt-marker {
background-color: #fff4bd;
display: inline-block;
margin: 0.2em 0.3em 0.5em 0;
padding: 0.1em 0.3em;
border-radius: 3px;
}
/* --------------------------
sq-bnr
-------------------------- */
.sq-bnr-area {
text-align: center;
padding: 1em 0;
}
ul.sq-bnr-ul {
list-style: none;
text-align: left;
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0;
letter-spacing: -.40em;
}
.sq-bnr-list {
display: inline-block;
width: 50%;
margin: 0 auto 1em;
vertical-align: top;
text-align: center;
letter-spacing: normal;
}
.sq-bnr-area.bnr-4 .sq-bnr-list {
width: 25%;
}
.sq-bnr-link {
width: 90%;
display: inline-block;
margin: 0 auto;
}
.sq-bnr-img {
width: 100%;
max-width: 300px;
}
.sq-bnr-link:hover .sq-bnr-img {
opacity: 0.7;
}
/* --------------------------
 block-column
-------------------------- */
.block-column-area {
display: flex;
flex-wrap: wrap;
}
.block-column-left, .block-column-right {
letter-spacing: normal;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 768px) {
.block-column-left {
padding: 0 .5em 0 0;
}
.block-column-right {
padding: 0 0 0 .5em;
}
}
/* --------------------------
 column-reverse
-------------------------- */
@media screen and (min-width: 768px) {
.column-reverse .block-column-area {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.column-reverse .block-column-area .block-column-left, .column-reverse .block-column-area .block-column-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
padding: 0 .5em;
}
.column-reverse .block-column-area .comment {
display: inline-block;
margin: auto;
}
.column-reverse .block-column-area:nth-child(even) .block-column-left {
order: 1;
}
.column-reverse .block-column-area .hikaku-table {
width: 100%;
}
}
/* ========== review ========== */
.pickup-review-box {
padding: 1em;
font-size: 1.1em;
border: 1px solid #ddd;
margin: 1em auto;
text-align: left
}
.pickup-review-area .pickup-review-box:last-child {
margin: 1em auto 3em;
}
.pickup-review-ttl {}
.pickup-review-star {
color: #e9be1b;
display: block;
}
.pickup-review-txt {
font-size: .8em;
padding: .5em;
}
.pickup-review-box .img-box {
margin: 0;
}
.pickup-review-box .img-box a {
padding: 0;
}
@media screen and (max-width: 480px) {
.pickup-review-box .img1 .item-img {
max-width: 50% !important;
}
}
/* 組合せ */
.item-set-area {
letter-spacing: -.40em;
font-size: .9em;
text-align: left;
}
.item-set-area .circle-no {
background-color: #e43a83;
font-weight: 900;
}
.item-set-area * {
box-sizing: border-box !important;
}
.item-set-area a:hover * {
text-decoration: none;
}
.item-set-ctr {
background-color: #f1eaea;
padding: 2em;
position: relative;
}
h2, h3.item-set-thirdttl {
text-align: left;
letter-spacing: normal;
}
h3.item-set-thirdttl {
font-size: 1.5em;
padding: 2em 0 1em .5em;
color: #e43a83;
line-height: 1.3;
}
.item-set-head {
letter-spacing: normal;
text-align: left;
letter-spacing: -.40em;
padding: .3em .5em .6em .5em;
font-size: 1.2em;
position: relative;
}
.item-set-ttl {
display: inline-block;
letter-spacing: normal;
}
.item-set-price {
display: inline-block;
letter-spacing: normal;
line-height: 1.3;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 0;
}
.item-set-ctr, .item-set-more-ctr {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.item-set-sum-icon, .item-set-sepa-box {
display: inline-block;
letter-spacing: normal;
vertical-align: top;
text-align: center;
}
.item-set-item2 .item-set-sum-icon {
width: 1.2em;
height: 1.2em;
font-size: 2em;
color: #fff;
background-color: #e43a83;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
.item-set-item2 .item-set-sum-in {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
font-weight: 800;
}
.item-set-item2 .item-set-sepa-box {
width: 48%;
margin: 1%;
}
.item-set-item3 .item-set-sepa-box {
width: 32%;
margin: 1%;
}
.item-set-item1 .item-set-sepa-box {
width: 100%;
}
.item-set-sepa-box {
padding: 1em;
background-color: #fff;
}
.item-set-sepa-img {
width: 100%;
max-width: 300px;
}
.item-set-more-ctr .item-set-sepa-img {
width: 30%;
vertical-align: middle !important;
}
.item-set-sepa-name {
color: #000;
display: inline-block;
padding: .5em 0;
font-size: 1em;
line-height: 1.5;
}
.set-price, .item-set-yen, .item-set-sepa-price, .item-set-sepa-yen {
color: #FF0000;
}
.set-price {
font-size: 1.5em;
}
.item-set-sepa-price {
font-size: 1.5em;
}
.item-set-sepa-stc {
display: inline-block;
color: #666;
padding: 0 0 0 .5em;
line-height: 1.2;
font-size: .9em;
background-color: #FFFFFF;
}
.item-set-more-ctr {
background-color: #eee;
padding: 2em;
vertical-align: top;
width: 100%;
margin: 0;
}
.item-set-more-ttl {
letter-spacing: normal;
color: #4cae03;
font-size: 1.5em;
padding: 0 0 .5em;
vertical-align: middle;
}
.item-set-more-ctr .item-set-sum-icon {
width: 1.1em;
height: 1.1em;
font-size: 1.3em;
color: #fff;
background-color: #4cae03;
border-radius: 50%;
position: relative;
margin: 0 .1em 0 0;
vertical-align: middle;
}
.item-set-more-ctr .item-set-sum-in {
border-radius: 50%;
position: absolute;
top: 47%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
font-weight: 800;
}
.item-set-more-ctr .item-set-sepa-dtl-box {
display: inline-block;
width: 68%;
padding: 0 0 0 1em;
vertical-align: middle !important;
}
/*----------------
法人見積もりフッター
----------------*/
.work-inquire-area {
background-color: #ffd200;
text-align: center;
}
.work-inquire-box {
display: inline-block;
width: 100%;
margin: 0 auto 1em;
background-color: #f6f6f6;
font-size: 1.1em;
line-height: 1.3;
padding: 1em 0 2em;
}
.work-inquire-tell-box {
padding: 1em 0;
}
.thin-work-inquire-tell-box {
background-color: #fffef1;
padding: 1em;
border: 5px solid #FE6604;
line-height: 1.5;
text-align: center;
}
.thin-work-inquire-tell-box .work-inquire-tell-box {
padding: 0;
}
@media screen and (max-width: 780px) {
.thin-work-inquire-tell-box .fsLLL {
font-size: 1.8em;
}
}
.work-inquire-tell-box .more-link-box {
background-color: #FE6604;
border: 1px solid #FE6604;
margin: .8em auto;
border-radius: 50px;
font-size: .8em;
max-width: 750px;
width: 90%;
}
.work-inquire-tell-box .more-link-box:hover {
background-color: #FF9900;
border: 1px solid #FF9900;
}
.work-inquire-tell-box .more-link, .work-inquire-tell-box .more-link:hover, .work-inquire-tell-box .more-link .icon-greater-right-b.icon-greater-right-b:before, .work-inquire-tell-box .more-link:hover .icon-greater-right-b.icon-greater-right-b:before {
color: #fff;
}
.font-blue, .font-blue *, .font-blue:before, .font-blue *:before {
color: #2976c6 !important;
}
.font-white, .font-white *, .font-white:before, .font-white *:before {
color: #fff !important;
}
.font-orange, .font-orange *, .font-orange:before, .font-orange *:before {
color: #FE6604 !important;
}
.fsLLL {
font-size: 3.5em;
}
/* --------------------------
箇条書き
-------------------------- */
.clm-normal-list {
list-style-type: disc;
text-align: left;
padding: 0 0 0 2.5em;
}
.clm-normal-list li {
line-height: 1.5;
padding: 0.3em 0;
}
/*---------------------------
Q and A
---------------------------*/
.cate-q-a-list {
padding: 2em 1%;
text-align: left;
list-style: none;
}
.cate-q-a-list li {
font-size: 1.15em;
border: 1px solid #ddd;
padding: 1.5em;
line-height: 1.5;
box-sizing: border-box;
margin: 0 auto 1em;
}
.cate-q-a-list .left_icon:before {
font-size: 2em;
display: inline-block;
padding: 0 .3em 0 0;
vertical-align: top;
line-height: 1;
}
.cate-q-a-list .q_text {
padding: 0 0 1.5em;
}
.cate-q-a-list .q_text, .cate-q-a-list .a_text {
letter-spacing: -.40em;
}
.q_text span, .a_text span {
letter-spacing: normal;
}
.q_text .left_icon:before {
color: #fe6604;
}
.a_text .left_icon:before {
color: #2976c6;
}
.cate-q-a-list .right_text {
display: inline-block;
vertical-align: top;
line-height: 2.1;
width: 90%;
}
.cate-q-a-list a {
color: #2976c6;
}
.cate-q-a-list .cate-suggest-area {
font-size: .9em;
}
.cate-q-a-list .cate-suggest-cap span {
font-size: 1em;
padding: .3em 1em;
background-color: #2976c6;
}
@media screen and (min-width: 768px) {
.cate-q-a-list .division-1 .cate-suggest-image {
width: 15%;
}
.cate-q-a-list .division-1 .cate-suggest-dtl-area {
width: 85%;
}
.cate-q-a-list .division-4 .cate-suggest-item-box, .cate-q-a-list .division-3 .cate-suggest-item-box, .cate-q-a-list .division-2 .cate-suggest-item-box {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
padding: .5em;
}
.cate-q-a-list .right_text {
width: 95%;
}
}
@media screen and (max-width: 480px) {
.cate-q-a-list .right_text {
display: inline-block;
width: 84%;
}
.cate-q-a-list .left_icon {
display: inline-block;
width: 15%;
}
}
/* --------------------------
qa 開閉式
-------------------------- */
.qa-area details {
border-bottom: 1px solid #ddd;
text-align: left;
}
.qa-area details summary {
list-style: none; /** デフォルト三角削除 **/
cursor: pointer;
padding: 20px 15px;
font-size: 1.3em;
font-weight: bold;
position: relative;
letter-spacing: .05em;
display: flex;
}
.qa-area details .qa-summary-in {
margin: 0;
}
/** Chrome用のデフォルト三角削除 **/
.qa-area details summary::-webkit-details-marker {
display: none;
}
.qa-area details summary::before {
font-family: 'sanwasvg';
content: "\e931";
color: #0C2579;
font-size: 30px;
vertical-align: middle;
display: inline-block;
padding: 0 0.8em 0 0;
font-weight: normal;
}
.qa-area details .qa-dtl-box::before {
font-family: 'sanwasvg';
content: "\e930";
color: #FE6604;
font-size: 30px;
vertical-align: middle;
display: inline-block;
padding: 0 0.8em 0 0;
position: absolute;
left: 15px;
top: -8px;
}
.qa-area details summary::after {
content: '＋';
margin-right: 20px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
color: #0C2579;
font-size: 1.5em;
}
.qa-area details[open] summary::after {
content: '−';
}
.qa-dtl-box {
margin: 0;
padding: 0 0 25px 68px;
font-size: 1.2em;
letter-spacing: .05em;
line-height: 1.7;
position: relative;
}
.qa-dtl-txt {}
.qa-dtl-link {
color: #2976c6;
border: 1px solid #2976c6;
display: inline-block;
padding: .2em .8em;
margin: .6em .8em 0 0;
border-radius: 30px;
}
.qa-dtl-link:after {
font-family: 'sanwasvg';
content: "\e91f";
display: inline-block;
padding: 0 0 0 .25em;
vertical-align: middle;
}
.qa-area .col-orange {
color: #0C2579;
}
.qa-area .col-orange {
color: #FE6604;
}
@media screen and (max-width:980px) {
.qa-area details summary {
padding: 15px 30px 15px 0;
font-size: 1.2em;
}
.qa-area details summary::after {
margin-right: 0;
}
.qa-dtl-box {
padding: 0 0 25px 0;
}
.qa-area details summary::before {
padding: 0 0.5em 0 0;
line-height: 1.1;
}
.qa-area details .qa-dtl-box::before {
display: none;
}
.qa-area details .qa-summary-in {
font-size: 1em;
line-height: 1.7;
}
.qa-area details .qa-dtl-txt, .qa-area details .qa-dtl-link {
font-size: 15px;
}
}
/* --------------------------
 chart-box
-------------------------- */
.chart-box {
padding: 1em .5em;
margin: 0 0 2em;
}
.chart-base {
position: relative;
margin: 0 auto 2em;
text-align: center;
}
.chart-page {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: #fff;
display: none;
}
.selecting {
display: block !important;
}
.chart-txt {
font-size: 1.6em;
line-height: 1.4;
padding: 0 0 .5em;
}
.chart-q {
display: flex;
width: 80%;
margin: 0 auto;
}
.chart-q-btn {
width: 48%;
margin: 0 1%;
font-size: 1.2em;
padding: .5em 0;
}
.chart-base .chart-btn {
color: #fff;
text-decoration: none;
width: 100%;
display: block;
background-color: #666;
padding: 1.5em 0;
border-radius: 5px;
}
.chart-base .chart-btn.back {width: 60%;margin: .5em auto 2em;}
.chart-base .chart-btn-link {margin: 0 auto;width: 80%;}
.chart-base .chart-btn:hover {background-color: #888;}
.chart-base .chart-btn.yes {background-color: #2976C6;}
.chart-base .chart-btn.yes:hover {background-color: #4899ec;}
.chart-base .chart-btn.no {background-color: #DC4E41;}
.chart-base .chart-btn.no:hover {background-color: #ea746a;}
.chart-item .img-box {
border: 1px #ccc solid;
border-radius: 5px;
padding: 0 0 1em;
}
@media only screen and (min-width: 680px) {
.chart-txt.q-txt {margin-top: 3em;}
.chart-base {height: 35em;}
.chart-item .img-block.img1 {width: 200px;}
.chart-item .img-block.img2 {width: 400px;}
.chart-item .img-block.img3 {width: 600px;}
.chart-item .img-block.img4 {width: 800px;}
.chart-item .img2 .img-box {width: 49%;margin: 0 .5% 1em;}
.chart-item .img3 .img-box {width: 32%;margin: 0 .5% 1em;}
.chart-item .img4 .img-box {width: 24%;margin: 0 .5% 1em;}
}
@media only screen and (max-width: 679px) {
.chart-base {
height: 40em;
}
.chart-item .img1 .img-box, .chart-item .img2 .img-box, .chart-item .img3 .img-box, .chart-item .img4 .img-box {
width: 49%;
margin: 0 .5% 1em;
}
.chart-item .img-box:nth-of-type(n+3) {
display: none;
}
.chart-q {
width: 95%;
}
.chart-base .chart-btn.back {
width: 80%;
}
.chart-base .chart-btn {
padding: 1em 0;
}
}
/*----------------
自動ランキング調整
----------------*/
.ranking_part2 .ranking_goods .rankno {
font-size: 15px;
margin: 0.5em auto 0.3em;
line-height: 1 !IMPORTANT;
}
/* ========== font ========== */
.noto100 {font-weight: 100;}
.noto200 {font-weight: 200;}
.noto300 {font-weight: 300;}
.noto400 {font-weight: 400;}
.noto500 {font-weight: 500;}
.noto600 {font-weight: 600;}
.noto700 {font-weight: 700;}
.noto800 {font-weight: 800;}
.noto900 {font-weight: 900;}
.text-left {text-align: left;}
.ver-top {vertical-align: top;}
.max-100 {max-width: 100%;}
.col-white {color: #fff;}
/*----------------
sns-share
----------------*/
.share-ttl {
padding: 3em 0 1em;
font-size: 1.2em;
}
.sns-list {
margin: 0 auto 5px;
letter-spacing: -.40em;
}
.sns-list li {
letter-spacing: normal;
display: inline-block;
*display: inline;
*zoom: 1;
width: 30%;
height: 2.5em;
position: relative;
margin: 0 1%;
}
.sns-list li a {
display: block;
width: 100%;
height: 3em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
.sns-list li.sns-twi a {
background-color: #000;
border: 2px #000 solid;
}
.sns-list li.sns-x a {
background-color: #000;
border: 2px #000 solid;
}
.sns-list li.sns-fb a {
background-color: #4267b2;
border: 2px #4267b2 solid;
}
.sns-list li.sns-line a {
background-color: #00b900;
border: 2px #00b900 solid;
}
.sns-list li:hover a {
background-color: rgba(255, 255, 255, 0);
}
.sns-list li.sns-twi:hover a {
border: 2px #000 solid;
}
.sns-list li.sns-x:hover a {
border: 2px #000 solid;
}
.sns-list li.sns-fb:hover a {
border: 2px #4267b2 solid;
}
.sns-list li.sns-line:hover a {
border: 2px #00b900 solid;
}
.sns-ison::before {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
color: #fff;
z-index: 100;
font-size: 1.5em;
}
.sns-list li:hover .icon-twitter::before, .sns-list li:hover * {
color: #000;
}
.sns-list li:hover .icon-x::before, .sns-list li:hover * {
color: #000;
}
.sns-list li:hover .icon-facebook::before {
color: #4267b2;
}
.sns-list li:hover .icon-line::before {
color: #00b900;
}
.sns-list li:hover a {
z-index: 101;
}
.sns-box.top-share {
display: inline-block;
width: 100%;
margin: 0 0 .5em auto;
text-align: right;
}
.sns-box.top-share .sns-list {
display: inline-block;
width: 100%;
max-width: 250px;
}
.sns-box.top-share .sns-list li a {
height: 2.5em;
}
.column-sns-circle-menu {
padding: 0 8px;
}
.column-sns-circle-menu-inner .link-twitter .column-sns-circle-menu-icon {
background-color: #000;
border: 2px solid #000;
}
.column-sns-circle-menu-inner .link-x .column-sns-circle-menu-icon {
background-color: #000;
border: 2px solid #000;
}
.column-sns-circle-menu-inner .link-facebook .column-sns-circle-menu-icon {
background-color: #4267b2;
border: 2px solid #4267b2;
}
.column-sns-circle-menu-inner .link-line .column-sns-circle-menu-icon {
background-color: #00b900;
border: 2px solid #00b900;
}
.column-sns-circle-menu-inner .link-instagram .column-sns-circle-menu-icon {
background-color: #ba53a3;
border: 2px solid #ba53a3;
}
.column-sns-circle-menu-inner .link-youtube .column-sns-circle-menu-icon {
background-color: #ff0000;
border: 2px solid #ff0000;
}
.column-sns-circle-menu-ul {
list-style: none;
letter-spacing: -.40em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.column-sns-circle-menu-inner {
letter-spacing: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 1px;
margin: 0;
width: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
padding: 0.3rem 0;
text-align: center;
}
.column-sns-circle-menu-inner .link-twitter .column-sns-circle-menu-icon {
background-color: #000000;
border: 2px solid #000000;
}
.column-sns-circle-menu-inner .link-x .column-sns-circle-menu-icon {
background-color: #000000;
border: 2px solid #000000;
}
.column-sns-circle-menu-icon {
display: block;
width: 53px;
height: 53px;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
.column-sns-circle-menu-txt {
font-size: 11px;
color: #333;
text-align: center;
}
.column-sns-circle-menu-ul {
margin: 0 auto;
width: 40%;
}
.column-sns-circle-menu-icon:before {
color: #fff !important;
position: absolute;
font-size: 1.5em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 480px) {
.column-sns-circle-menu-ul {
width: 100%;
}
}
/* ====================== .coupon ====================== */
.coupon-number-copy-area {
font-family: 'Oswald', 'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana;
}
.coupon-number-copy-area .coupon-box {
background-color: #eee;
padding: 1.5em 1em .5em;
border-radius: 8px;
margin: 0 auto 1em;
}
@media screen and (min-width:680px) {
.coupon-number-copy-area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.coupon-number-copy-area .coupon-box {
display: flex;
flex-direction: column;
margin: 0 1% 1em;
}
.coupon-number-copy-area.coupon-1 .coupon-box {
flex-basis: 100%;
font-size: 1.4em;
padding: 1em 1em 1.5em;
}
.coupon-number-copy-area.coupon-2 .coupon-box {flex-basis: 48%;}
.coupon-number-copy-area.coupon-3 .coupon-box {flex-basis: 31.3%;}
.coupon-number-copy-area.coupon-4 .coupon-box {flex-basis: 23%;}
.coupon-number-copy-area.coupon-5 .coupon-box {flex-basis: 18%;}
.coupon-number-copy-area.coupon-6 .coupon-box {flex-basis: 14.6%;}
.coupon-number-copy-area.coupon-7 .coupon-box {flex-basis: 13.2%;}
.coupon-number-copy-area.coupon-8 .coupon-box {flex-basis: 11.5%;}
.coupon-number-copy-area.coupon-1 .coupon-dtl-box {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.coupon-number-copy-area.coupon-1 .coupon-copy-box {
display: flex;
justify-content: center;
align-items: center;
}
.coupon-number-copy-area.coupon-1 .coupon-num {
margin: 10px 0 auto auto;
width: 50%;
font-size: 2em;
padding: 0.25em 0;
}
.coupon-number-copy-area.coupon-1 .coupon-copy-btn-area {
margin: auto auto auto 0.5em;
}
}
.coupon-number-copy-area .coupon-dtl-box {
color: #fff;
font-weight: bold;
padding: 0 0 .5em;
font-size: 1.1em;
}
.coupon-number-copy-area .terms-of-use {
font-size: 1.5em;
}
.coupon-number-copy-area .discount {
font-size: 2.3em;
}
.coupon-number-copy-area .coupon-num {
background-color: #fff;
color: #333;
display: block;
padding: 0.3em 0.5em;
font-size: 1.8em;
border: 2px solid;
}
.coupon-yen, .coupon-off {
font-size: .6em;
}
.coupon-box .coupon-copy-box:nth-of-type(3) {
padding: 1em 0 0;
border-top: 1px #fff dashed;
}
/*コピー部分
-------------------------------*/
.coupon-copy-btn-area {
margin: 0 auto 1.5em;
}
.url_copy_container {
transform: rotate(0.03deg);
}
.url_copy_container .hp_url {
border: 1px solid #ddd;
display: inline-block;
padding: 15px 20px;
background-color: #f6f6f6;
text-align: left;
}
.coupon-copy-btn {
display: inline-block;
text-align: center;
background-color: #d5ca00;
border-radius: 5px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
padding: 0 0 6px 0;
margin: 10px auto 0;
}
.btn-copy {
transform: rotate(0.05deg);
background-color: #fff200;
color: #333;
font-size: 1.1em;
font-weight: bold;
border-radius: 5px;
border: none;
padding: 0.5em 1.5em;
width: 100%;
}
.coupon-number-copy-area.coupon-2 .coupon-copy-box, .coupon-number-copy-area.coupon-3 .coupon-copy-box {
width: 90%;
margin: 0 auto;
}
.coupon-number-copy-area.coupon-2 .coupon-copy-btn, .coupon-number-copy-area.coupon-3 .coupon-copy-btn {
width: 100%;
}
@media screen and (max-width:680px) {
.coupon-copy-box {
width: 90%;
margin: 0 auto;
}
.coupon-copy-btn {
width: 100%;
}
.btn-copy {
padding: .7em 1.5em;
}
}
.coupon-copy-btn:hover {
padding: 0 0 0 0;
margin: 16px auto 0;
}
.coupon-copy-btn:hover .btn-copy:active {
background-color: #ce6f00;
}
.coupon-copy-btn.coupon-end {
background-color: #333;
}
.coupon-list .copy .coupon-end .btn-copy {
background-color: #666;
}
.coupon-copy-btn.coupon-end:hover {
padding: 0 0 6px 0;
margin: 10px auto 0;
}
.coupon-copy-btn.coupon-end:hover .btn-copy:active {
background-color: #666;
}
/*コピー完了
-------------------------------*/
.tooltipped {
z-index: 999;
}
.tooltipped:after {
position: absolute;
z-index: 1000000;
display: none;
padding: 5px 8px;
font: normal normal 13px/1.5 Meiryo, "Hiragino Kaku Gothic ProN", Osaka, sans-serif, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(50, 50, 50, 0.9);
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased
}
.tooltipped:before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(50, 50, 50, 0.9);
pointer-events: none;
content: "";
border: 5px solid transparent
}
.tooltipped:hover:before, .tooltipped:hover:after, .tooltipped:active:before, .tooltipped:active:after, .tooltipped:focus:before, .tooltipped:focus:after {
display: inline-block !important;
text-decoration: none
}
.tooltipped-s:after, .tooltipped-se:after, .tooltipped-sw:after {
bottom: -25px;
right: 50%;
margin-top: 5px
}
.tooltipped-s:before, .tooltipped-se:before, .tooltipped-sw:before {
top: auto;
right: 50%;
bottom: 5px;
margin-right: -5px;
border-bottom-color: rgba(50, 50, 50, 0.9)
}
.tooltipped-s:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-multiline:after {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 250px;
word-break: break-word;
word-wrap: normal;
white-space: pre-line;
border-collapse: separate
}
.tooltipped-multiline.tooltipped-s:after {
right: 0;
left: 0;
}
@media screen and (min-width: 0\0) {
.tooltipped-multiline:after {
width: 250px
}
}
/* ====================== .magazin ====================== */
.magazin-area .right-dtl-menu {
list-style: none;
letter-spacing: -.40em;
padding: 2rem .5rem;
}
.magazin-area .right-dtl-article-list {
letter-spacing: normal;
display: inline-block;
width: 25%;
}
.magazin-area .right-dtl-article-link {
display: inline-block;
width: 94%;
padding: 1.5rem 1.2rem;
letter-spacing: normal;
margin: 0 auto 1em;
font-size: 1.15em;
-webkit-transition: color 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 0.5s ease-out, background 0.5s ease-out;
-o-transition: color 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, background 0.5s ease-out;
border: 1px solid #eee;
}
.magazin-area .right-article-txt-area {
display: block;
text-align: center;
margin: 0 1% 0 0;
vertical-align: middle;
word-break: break-all;
word-wrap: break-word;
}
.magazin-area .right-article-img {
width: 100%;
margin: .8em auto 0;
max-width: 300px;
}
.magazin-area .right-article-ttl {
font-size: 1.2rem;
line-height: 1.5;
display: inline-block;
color: #333;
font-weight: 600;
text-align: left;
height: 2.8em;
overflow: hidden;
margin: 0 auto .5em;
}
.magazin-area .right-article-ttl:first-letter {
color: #FF7200;
}
.magazin-area a.right-dtl-article-link:hover {
text-decoration: none;
opacity: 0.8;
}
.magazin-area a.right-dtl-article-link:hover * {
text-decoration: none;
}
.magazin-area a.right-dtl-article-link:hover .right-article-img {
opacity: 0.7;
}
.magazin-area .right-article-cap {
font-size: .85rem;
display: block;
padding: 0;
color: #666;
height: 4.2em;
overflow: hidden;
line-height: 1.5;
margin: 0 auto .5em;
text-align: left;
}
.magazin-area .right-article-upday {
font-size: .9em;
display: block;
padding: .8em 0 0 .1em;
color: #333;
font-weight: 300;
}
.magazin-area .rank-info {
padding: 0 0 1.5em;
}
.magazin-area .wid100 {
width: 100%;
}
@media screen and (max-width: 780px) {
.magazin-area .right-dtl-article-list {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.magazin-area .right-dtl-menu {
padding: 1rem 0;
}
.magazin-area .right-dtl-article-list {
width: 100%;
}
.magazin-area .right-dtl-article-link {
width: 100%;
padding: 1rem 1rem;
margin: 0 auto;
font-size: 1.15em;
border: 0;
border-bottom: 1px solid #eee;
}
.magazin-area .right-article-txt-area {
display: inline-block;
width: 70%;
margin: 0;
}
.magazin-area .right-article-ttl {
font-size: .9rem;
height: 4.1em;
margin: 0 auto .5em;
display: block;
}
.magazin-area .right-article-cap {
display: none;
}
.magazin-area .right-article-upday {
font-size: .8em;
text-align: left;
padding: .1em 0 0 0;
color: #999;
}
.magazin-area .right-article-img {
width: 30%;
margin: 0;
}
}
.magazin-area .relation-menu {
list-style: none;
letter-spacing: -.40em;
padding: 2rem .5rem;
}
.magazin-area .relation-list {
letter-spacing: normal;
display: inline-block;
width: 25%;
}
.magazin-area .relation-link {
display: inline-block;
width: 94%;
padding: 1.5rem 1.2rem;
letter-spacing: normal;
margin: 0 auto 1em;
font-size: 1.15em;
-webkit-transition: color 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 0.5s ease-out, background 0.5s ease-out;
-o-transition: color 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, background 0.5s ease-out;
border: 1px solid #eee;
}
.magazin-area .relation-img {
width: 100%;
margin: 0 auto .5rem;
max-width: 300px;
}
.magazin-area .relation-ttl {
font-size: 1rem;
line-height: 1.5;
display: inline-block;
color: #333;
font-weight: 600;
text-align: left;
height: 4.3em;
overflow: hidden;
margin: 0 auto .5em;
}
.magazin-area .relation-ttl:first-letter {
color: #FF7200;
}
.magazin-area .relation-link:hover {
background-color: #fff3c4;
text-decoration: none;
}
.magazin-area .relation-link:hover * {
text-decoration: none;
}
.magazin-area .relation-link:hover .relation-img {
opacity: 0.7;
}
@media screen and (max-width: 780px) {
.magazin-area .relation-list {width: 50%;}
.spwid10 {width: 10% !important;flex-basis: 10% !important;}
.spwid15 {width: 15% !important;flex-basis: 15% !important;}
.spwid20 {width: 20% !important;flex-basis: 20% !important;}
.spwid25 {width: 25% !important;flex-basis: 25% !important;}
.spwid30 {width: 30% !important;flex-basis: 30% !important;}
.spwid33 {width: 33.333% !important;flex-basis: 33.333% !important;}
.spwid35 {width: 35% !important;flex-basis: 35% !important;}
.spwid40 {width: 40% !important;flex-basis: 40% !important;}
.spwid45 {width: 45% !important;flex-basis: 45% !important;}
.spwid50 {width: 50% !important;flex-basis: 50% !important;}
.spwid55 {width: 55% !important;flex-basis: 55% !important;}
.spwid60 {width: 60% !important;flex-basis: 60% !important;}
.spwid65 {width: 65% !important;flex-basis: 65% !important;}
.spwid70 {width: 70% !important;flex-basis: 70% !important;}
.spwid75 {width: 75% !important;flex-basis: 75% !important;}
.spwid80 {width: 80% !important;flex-basis: 80% !important;}
.spwid85 {width: 85% !important;flex-basis: 85% !important;}
.spwid90 {width: 90% !important;flex-basis: 90% !important;}
.spwid95 {width: 95% !important;flex-basis: 95% !important;}
.spwid100 {width: 100% !important;flex-basis: 100% !important;}
}
@media screen and (max-width: 480px) {
.magazin-area .relation-menu {
padding: 1rem 0;
}
.magazin-area .relation-list {
width: 100%;
}
.magazin-area .relation-link {
width: 100%;
padding: 1rem 1rem;
margin: 0 auto;
font-size: 1.15em;
border: 0;
border-bottom: 1px solid #eee;
}
.magazin-area .relation-ttl {
display: inline-block;
width: 70%;
margin: 0;
font-size: .9rem;
height: 4.1em;
vertical-align: middle;
padding: 0 0 0 1rem;
}
.magazin-area .relation-img {
width: 30%;
margin: 0;
vertical-align: middle !important;
}
}
/* --------------------------

-------------------------- */
@media screen and (min-width: 480px) {
.sns-list li.sns-line {
display: none;
}
.top-share {
width: 48%;
}
.sns-list li {
width: 48%;
}
}
@media screen and (min-width:768px) {
#contents {
padding: 10px 0 0 10px;
font-size: 1.2em !important;
}
.sns-box {
margin: .5em 0 1em;
}
/* 幅 */
.comment-box, .img-block, .item-link-block, .table-box-area, .checkpoint-box, .checkpoint-ttl, .pickup-review-box, .menu-area .list-thin, .work-inquire-box, .post-time-box, .sns-box.top-share {
width: 96%;
}
.wid10 {width: 10% !important;flex-basis: 10% !important;}
.wid15 {width: 15% !important;flex-basis: 15% !important;}
.wid20 {width: 20% !important;flex-basis: 20% !important;}
.wid25 {width: 25% !important;flex-basis: 25% !important;}
.wid30 {width: 30% !important;flex-basis: 30% !important;}
.wid33 {width: 33.333% !important;flex-basis: 33.333% !important;}
.wid35 {width: 35% !important;flex-basis: 35% !important;}
.wid40 {width: 40% !important;flex-basis: 40% !important;}
.wid45 {width: 45% !important;flex-basis: 45% !important;}
.wid50 {width: 50% !important;flex-basis: 50% !important;}
.wid55 {width: 55% !important;flex-basis: 55% !important;}
.wid60 {width: 60% !important;flex-basis: 60% !important;}
.wid65 {width: 65% !important;flex-basis: 65% !important;}
.wid70 {width: 70% !important;flex-basis: 70% !important;}
.wid75 {width: 75% !important;flex-basis: 75% !important;}
.wid80 {width: 80% !important;flex-basis: 80% !important;}
.wid85 {width: 85% !important;flex-basis: 85% !important;}
.wid90 {width: 90% !important;flex-basis: 90% !important;}
.wid95 {width: 95% !important;flex-basis: 95% !important;}
.wid100 {width: 100% !important;flex-basis: 100% !important;}
/* --------------------------
ttl
-------------------------- */
h1.main-ttl {
padding: 1em 0 .7em;
font-size: 1.8em;
}
h2.sub-ttl {
margin: 3em auto 1em;
font-size: 1.5em;
border-left: 10px solid;
}
h3.third-ttl {
font-size: 1.45em;
}
h4.fourth-ttl {
font-size: 1.3em;
}
.checkpoint-ttl {
text-align: center;
}
/* --------------------------
toc
-------------------------- */
.toc {
padding: 2em 1.5em 2em 4em;
width: 70%;
}
/* --------------------------
item
-------------------------- */
.item-link-block {
text-align: left;
padding: 0;
}
.item-link-img-area {
display: inline-block;
max-width: 30%;
}
.item-link-txt-area {
display: inline-block;
width: 70%;
padding: 0 2em;
}
.item2 .item-link-img-area {
display: inline-block;
max-width: 100%;
}
.item2 .item-link-txt-area {
display: inline-block;
width: 100%;
padding: 0 2em;
}
.item-link-name {
padding: .5em 0;
}
.item-link-btn {
text-align: right;
padding: 0;
}
.img-box a {
padding: .5em;
}
.img-box figure a {width: 100%;
background-color: #fff;
padding: 0;
border: 0;
}
.img-box a .img-figure {
max-height: 8em;
overflow: hidden;
}
.img5 .img-box a .img-figure {
max-height: 9.1rem;
}
.img-box a .img-figure .itemre {
height: auto;
display: inline-block;
}
/* --------------------------
comment
-------------------------- */
p.comment {
padding: 0 0 1em;
line-height: 1.8;
}
/* --------------------------
checkpoint
-------------------------- */
.checkpoint-box {
padding: 1em 2em;
background-color: #f6f6f6;
}
/* --------------------------
more-link
-------------------------- */
.more-link {
font-size: 1.2em;
}
/* --------------------------
list-thin
-------------------------- */
.list-thin li {
padding: 1em 0;
}
.list-thin-box {
width: 84%;
}
.list-thin-txt {
letter-spacing: .1em;
line-height: 2;
}
.list-thin-img {
width: 15%;
}
/* --------------------------
 組合せ
-------------------------- */
.item-set-sepa-name {
font-size: 1.2em;
}
.item-set-price {
line-height: 1.3;
}
.item-set-head {
font-size: 1.4em;
}
.item-set-more-ctr {
width: 29%;
margin: 0 auto 0 1%;
}
.item-set-more-ctr .item-set-sepa-img {
width: 100%;
}
.item-set-more-ctr .item-set-sepa-dtl-box {
width: 100%;
padding: 0;
}
/* --------------------------
 sample
-------------------------- */
#sample-request-box {
border: 12px solid #2976c6;
font-size: 1.3em;
text-align: center;
}
#sample-request-box .sample-main-ttl {
font-size: 3.2em;
}
#sample-request-box .download-btn-list {
width: 70%;
font-size: 1em;
}
/* --------------------------
 present
-------------------------- */
#present-cam-box {
border-color: #412513;
padding: 0;
font-size: 1.3em;
}
/* --------------------------
sq-bnr
-------------------------- */
.sq-bnr-area {
padding: 3em 1em 1em;
background-color: #f0f8ff;
}
.sq-bnr-area.bnr-4 {
padding: 0;
background-color: #fff;
}
ul.sq-bnr-ul {
width: 95%;
}
.bnr-4 ul.sq-bnr-ul {
width: 100%;
}
.sq-bnr-list {
width: 33.3%;
margin: 0 auto 2em;
}
.bnr-4 .sq-bnr-list {
width: 25%;
}
/*----------------
法人見積もりフッター
----------------*/
.work-inquire-box {
font-size: 2em;
}
.work-inquire-box ul.sq-bnr-ul {
width: 90%;
}
.work-inquire-box .sq-bnr-list {
margin: 0 auto;
}
}
/*--------------------------
画像2アイコン入
--------------------------*/
#contents .category {
margin-top: 90px;
}
#contents .cate-inner .item {
margin-top: 20px;
text-align: left;
}
#contents .cate-inner .item + .item {
margin-top: 30px;
padding-top: 30px;
border-top: 1px dashed #ccc;
}
#contents .item .item-l {
width: 45%;
display: inline-block;
vertical-align: top;
}
#contents .item .item-r {
width: 52%;
display: inline-block;
vertical-align: top;
position: relative;
margin-left: 1.7%;
}
#contents .item .item-l > p {
display: inline-block;
width: 48.5%;
vertical-align: top;
}
#contents .item .item-l > p + p {
margin-left: 1%;
}
#contents .item .item-l > p img {
max-width: 100%;
border: 1px solid #BFBFBF;
}
#contents .item .item-r .sku {
font-size: 1.2em;
font-weight: bold;
line-height: 1.4;
}
#contents .item .item-r .sku a {
color: #2976c6;
}
#contents .item .item-r .price {
font-size: 1.25em;
font-weight: bold;
color: #D80000;
margin: 0.5% 0;
line-height: 1.4;
}
#contents .item .item-r .link {
position: absolute;
top: 0;
right: 0;
width: 9.5em;
max-width: 50%;
}
#contents .item .item-r .link a {
display: block;
color: #2976c6;
border: 2px solid;
border-radius: 5px;
background-color: #FFF;
position: relative;
text-align: center;
font-weight: bold;
line-height: 40px;
padding: 0 10px 0 0;
}
#contents .item .item-r .link a::after {
content: "\e91f";
font-family: 'sanwasvg';
display: block;
height: 100%;
width: 8%;
max-width: 10px;
position: absolute;
top: 0;
right: 10%;
}
#contents .item .item-r .link a:hover {
opacity: 0.6;
}
#contents .item .item-r .link a:hover * {
text-decoration: none;
}
#contents .item .item-r .icon ul {
margin: 10px 0;
padding: 0;
}
#contents .item .item-r .icon ul li {
list-style: none;
display: inline-block;
background-color: #eee;
padding: 0 3%;
min-width: 5em;
text-align: center;
font-weight: bold;
font-size: 0.9em;
height: 28px;
line-height: 28px;
margin-bottom: 1.2%;
}
#contents .item .item-r .note {
line-height: 1.7;
}
#contents .item .colorvari {
margin: 0.5% 0 0.7% 0.5%;
}
#contents .item .colortip {
margin: 0;
width: 14px;
height: 14px;
display: inline-block;
}
#contents .item .colortip + .colortip {
margin-left: 1%;
}
#contents .item .colortip.black {
background-color: #1B1B1B;
}
#contents .item .colortip.gray {
background-color: #1B1B1B;
}
#contents .item .colortip.red {
background-color: #D60403;
}
#contents .item .colortip.blue {
background-color: #107DF2;
}
@media(max-width:480px) {
/*--------------------------
	画像2アイコン入
	--------------------------*/
#contents .category {
margin-top: 60px;
}
#contents .cate-inner .item {
margin-top: 15px;
}
#contents .cate-inner .item + .item {
margin-top: 20px;
padding-top: 20px;
border-top: 1px dotted #999;
}
#contents .item .item-l {
width: 95%;
display: block;
vertical-align: top;
margin: 0 auto;
}
#contents .item .item-r {
width: 95%;
display: block;
vertical-align: top;
position: relative;
margin: 10px auto 0;
}
#contents .item .item-l > p {
display: inline-block;
width: 48.5%;
vertical-align: top;
}
#contents .item .item-l > p + p {
margin-left: 1.2%;
}
#contents .item .item-l > p img {
max-width: 100%;
border: 1px solid #BFBFBF;
}
#contents .item .item-r .sku {
font-size: 1.2em;
font-weight: bold;
line-height: 1.4;
}
#contents .item .item-r .price {
font-size: 1.25em;
font-weight: bold;
color: #D80000;
margin: 0.5% 0;
line-height: 1.4;
}
#contents .item .item-r .link {
position: absolute;
top: 0;
right: 1%;
width: 10em;
max-width: 50%;
}
#contents .item .item-r .link a::after {
content: "\e91f";
font-family: 'sanwasvg';
display: block;
height: 100%;
width: 8%;
max-width: 10px;
position: absolute;
top: 0;
right: 10%;
}
#contents .item .item-r .link a:hover {
opacity: 0.6;
}
#contents .item .item-r .link a:hover * {
text-decoration: none;
}
#contents .item .item-r .icon ul {
margin: 10px 0;
padding: 0;
}
#contents .item .item-r .icon ul li {
list-style: none;
display: inline-block;
padding: 0 3%;
min-width: 5em;
text-align: center;
font-weight: bold;
font-size: 0.9em;
height: 25px;
line-height: 25px;
margin-bottom: 1.2%;
}
#contents .item .item-r .note {
line-height: 1.7;
}
#contents .item .colorvari {
margin: 1% 0 2% 0.5%;
}
#contents .item .colortip {
margin: 0;
width: 14px;
height: 14px;
display: inline-block;
}
#contents .item .colortip + .colortip {
margin-left: 1%;
}
#contents .item .colortip.black {
background-color: #000;
}
#contents .item .colortip.red {
background-color: #D60403;
}
#contents .item .colortip.blue {
background-color: #107DF2;
}
}
/*----------------
プロフィール
----------------*/

.profile-area{
display: flex;
flex-wrap: wrap;
padding: 2em 0;
border: 1px solid #cccccc;
margin: 0 auto 1em;
}
.profile-left{
flex-basis: 20%;
text-align: center;
}
.profile-left img{
border-radius: 50%;
width:100px;
height:auto;
}
.profile-name{
font-weight: bold;
padding: .5em 0 .2em;
}

.sub-name{
font-size:.8em;
color:#666666;
}

.profile-right{
flex-basis: 80%;
border-left: 1px solid #cccccc;
padding: 0 2em;
}

.profile-text{
color:#333333; 
text-align: left;
line-height: 1.5;
}
@media screen and (max-width: 480px) {
.profile-left,.profile-right{
flex-basis: 100%;
border-left:none;
}

.profile-left {
    padding: 0 0 1em;
    font-size: 1.2em;
}


}

/*---------------------------
coltip
---------------------------*/
.coltip-area {
display: inline-block;
padding: .2em;
margin-right: .5em;
}
.coltip-area:last-child {
margin-right: 0;
}
.coltip {
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 1px #CCCCCC;
display: inline-block;
vertical-align: middle;
margin: 0 0 0 .3em;
}
.colname {
display: inline-block;
vertical-align: middle;
margin-left: .3em;
}
.coltip.col_bk {background: #313131;}
.coltip.col_w {background: #ffffff;}
.coltip.col_gy {background: #808080;}
.coltip.col_lgy {background: #d3d3d3;}
.coltip.col_bl {background: #005ebf;}
.coltip.col_lbl {background: #4dbee9;}
.coltip.col_nv {background: #2e2e7b;}
.coltip.col_r {background: #ef5663;}
.coltip.col_wr {background: #c21b3c;}
.coltip.col_g {background: #008000;}
.coltip.col_y {background: #fed14c;}
.coltip.col_o {background: #f98140;}
.coltip.col_sv {background: #dcdcdc;}
.coltip.col_br {background: #81604c;}
.coltip.col_lbr {background: #e0d1ad;}
.coltip.col_dbr {background: #3d3026;}
.coltip.col_m {background: #69472b;}
.coltip.col_p {background: #f8afd7;}
.coltip.col_pu {background: #ad8eef;}
.coltip.col_cl {background: #f6ffff;}
.coltip.col_hcl {background: #ffffff;}
.coltip.col_ot {background: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);}
.coltip.col_sgy {background: #96979D;}
.coltip.col_bg {background: #e0d1ad;}
.coltip.col_d {background: #f98140;}
.coltip.col_gd {background: #e3c542;}
.coltip.col_s {background: #dcdcdc;}
.coltip.col_mx {background: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);}
.col-bk {color: #313131;}
.col-w {color: #ffffff;}
.col-gy {color: #808080;}
.col-lgy {color: #d3d3d3;}
.col-bl {color: #2976C6;}
.col-lbl {color: #4dbee9;}
.col-nv {color: #2e2e7b;}
.col-r {color: #ef5663;}
.col-wr {color: #c21b3c;}
.col-g {color: #008000;}
.col-y {color: #fed14c;}
.col-o {color: #f98140;}
.col-sv {color: #dcdcdc;}
.col-br {color: #81604c;}
.col-lbr {color: #e0d1ad;}
.col-dbr {color: #3d3026;}
.col-m {color: #69472b;}
.col-p {color: #f8afd7;}
.col-pu {color: #ad8eef;}
.col-cl {color: #f6ffff;}
.col-hcl {color: #ffffff;}
.col-ot {color: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);}
.col-sgy {color: #96979D;}
.col-bg {color: #e0d1ad;}
.col-d {color: #f98140;}
.col-gd {color: #e3c542;}
.col-s {color: #dcdcdc;}
.col-mx {color: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);}
/* --------------------------------------------------------------------------------------------------------
 Blue デフォルト
-------------------------------------------------------------------------------------------------------- */
h1.main-ttl .ttl-icon::before, h2.sub-ttl .ttl-icon::before, h2.sub-ttl.ttl-stripe .ttl-icon:before, h3.third-ttl .ttl-icon::before, h4.fourth-ttl .ttl-icon::before, h4.fourth-ttl, .checkpoint-ttl, .checkpoint-box.yes-link a:hover, .toc-title::after, ol.toc-list, ol.toc-list a, .more-link-box *::before, .more-link, .more-link .icon-greater-right-b.icon-greater-right-b:before, .menu .link-text, .menu .link-text .icon-greater-right-b:before, .checkpoint-cap .csdf-right-dtl-txt-greater:before, .cate-menu-list a span, .big-photo-menu .cate-menu-list a span:after, .cate-menu-list .menu-icon::before, .fukidashi-box-ttl, .qa-area details summary::before, .qa-area details summary::after {color: #2976c6;
}
.balloon_ttl, .circle-no, .item-link-btn .item-link-btn-in, .hyo-area::-webkit-scrollbar-thumb, .hikaku-table::-webkit-scrollbar-thumb, .clm-step__number, h2#cate-hikaku, .tabs input:checked + .tab_item {
background-color: #2976c6;
}
h3.third-ttl, h2.sub-ttl, .checkpoint-ttl, .item-link-cap span, .link-s .more-link-box, #sample-request-box, .more-link-box, .tabs .tab_item {
border-color: #2976c6;
}
.balloon_ttl::before {
border-top-color: #2976c6;
}
.hikaku-table* {
scrollbar-color: #2976c6 #f6f6f6;
}
@media screen and (max-width:480px) {
.hyo-area* {
scrollbar-color: #2976c6 #f6f6f6;
}
}
/* ----------------hover時color---------------- */
.more-link:hover, .more-link:hover .icon-greater-right-b.icon-greater-right-b:before, .menu .link-text:hover .icon-greater-right-b:before {
opacity: 0.8;
}
/* --------------------------------------------------------------------------------------------------------
clm-simple
-------------------------------------------------------------------------------------------------------- */
.clm-simple h2.sub-ttl {
margin: 0 auto;
font-size: 1.8rem;
border-left: 0;
text-align: center;
padding: 3rem 0 2rem;
}
.clm-simple h2.sub-ttl::after {
content: '―';
display: block;
font-size: 4rem;
line-height: .8;
}
.clm-simple h3.third-ttl {
font-size: 1.2rem;
margin: 0 auto;
border-bottom: 0;
text-align: center;
padding: 2rem 0 1.5rem;
}
.clm-simple .block-column-area h3.third-ttl {
padding: 0 0 1.5rem;
}
.clm-simple h3.third-ttl.border-ttl {
display: flex;
align-items: center;
}
.clm-simple h3.third-ttl.border-ttl:before, .clm-simple h3.third-ttl.border-ttl:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}
.clm-simple h3.third-ttl.border-ttl:before {
margin-right: 1rem;
}
.clm-simple h3.third-ttl.border-ttl:after {
margin-left: 1rem;
}
.clm-simple h4.fourth-ttl {
background-color: #f6f6f6;
text-align: center;
}
.clm-simple .comment-box {
color: #333;
text-align: center;
}
.clm-simple .block-column-area .comment-box {
text-align: left;
}
.clm-simple p.comment {
margin: 0 auto;
text-align: left;
}
.clm-simple .more-link-box, .clm-simple .menu .link-text {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}
.clm-simple .more-link, .clm-simple .menu .link-text {
color: #666;
}
.clm-simple .more-link .icon-greater-right-b.icon-greater-right-b:before, .clm-simple .menu .link-text .icon-greater-right-b:before {
color: #ccc;
}
.clm-simple .img1 .item-img {
max-width: 100%;
border-radius: 3px;
}
.clm-simple .checkpoint-box.yes-link.no-txt a {
background: none;
}
.clm-simple .list-thin-cap {
background: none;
}
.clm-simple .tate.hikaku-table tbody {
width: 939px;
}
/* -------------------
clm-simple color
------------------- */
.clm-simple h2.sub-ttl::after, .clm-simple h4.fourth-ttl, .clm-simple .checkpoint-ttl, .clm-simple .toc-title::after, .clm-simple ol.toc-list, .clm-simple ol.toc-list a, .clm-simple .checkpoint-cap .csdf-right-dtl-txt-greater:before, .clm-simple .itemst, .clm-simple .itemre, #contents.clm-simple .item .item-r .sku a, #contents.clm-simple .item .item-r .link a, .clm-simple .big-photo-menu .cate-menu-list a span:after, .clm-simple .cate-menu-list a span, .clm-simple .cate-menu-list .menu-icon::before, .clm-simple h1.main-ttl .ttl-icon::before, .clm-simple h2.sub-ttl .ttl-icon::before, .clm-simple h3.third-ttl .ttl-icon::before, .clm-simple h4.fourth-ttl .ttl-icon::before, .clm-simple .hikaku-link-code, .clm-simple .fukidashi-box-ttl, .clm-simple .qa-area details summary::before, .clm-simple .qa-area details summary::after {
color: #637e8d;
}
.clm-simple .circle-no, .clm-simple .item-link-btn .item-link-btn-in, .clm-simple .ranking_title2 span a, .clm-simple .table-box-cap, .clm-simple .balloon_ttl, .clm-simple .clm-step__number, .clm-simple .hikaku-table::-webkit-scrollbar-thumb, .clm-simple .cate-hikaku-table-area .item-link-btn .item-link-btn-in, .clm-simple h2#cate-hikaku, .clm-simple .tabs input:checked + .tab_item {
background-color: #637e8d;
}
.clm-simple .checkpoint-ttl, .clm-simple .item-link-cap span, .clm-simple .ranking_title2, .clm-simple .ranking_title2 span a, .clm-simple .balloon_ttl_2, .clm-simple .balloon_ttl_2::before, .clm-simple .tabs .tab_item {
border-color: #637e8d;
}
.clm-simple .balloon_ttl::before {
border-top-color: #637e8d;
}
.clm-simple .hikaku-table* {scrollbar-color: #637e8d #f6f6f6;}
@media screen and (max-width:480px) {
.clm-simple .hyo-area::-webkit-scrollbar-track {background-color: #637e8d;}
.clm-simple .hyo-area::-webkit-scrollbar-thumb {background-color: #637e8d;}
}
/*---- Firefox ----*/
.clm-simple .hyo-area* {
scrollbar-width: thin; /*細さ*/
scrollbar-color: #637e8d #f6f6f6;
}
.clm-simple .sq-bnr-area {background: none;}
.clm-simple .disp_ranking_parts a {
color: #333;
font-size: .9em;
text-align: left;
}
.clm-simple .table-box-cap {color: #fff;}
.clm-simple .thin-work-inquire-tell-box {background-color: #fff;border: 5px solid #cccccc;}
@media screen and (min-width:680px) {
.clm-simple section {padding: 2rem 3rem;}
.clm-simple h2.sub-ttl {font-size: 2.3rem;padding: 3rem 0 2rem;}
.clm-simple h3.third-ttl {font-size: 1.6rem;padding: 3rem 0 2.5rem;}
.clm-simple .block-column-area h3.third-ttl {padding: 0 0 2.5rem;}
}
@media screen and (max-width:480px) {
.clm-simple h2.sub-ttl {font-size: 1.6rem;}
.clm-simple h3.third-ttl {font-size: 1.1rem;}
}
/* --------------------------------------------------------------------------------------------------------
 color 
-------------------------------------------------------------------------------------------------------- */
h2.sub-ttl.ttl-stripe .ttl-icon:before {color: #2976c6;}
h2.sub-ttl.ttl-yellow .ttl-icon:before {color: #ffee5e;}
h2.sub-ttl.ttl-green .ttl-icon:before {color: #8FC320;}
h2.sub-ttl.ttl-orange .ttl-icon:before {color: #FF6600;}

/*---------------------------
icon color
---------------------------*/
.bg-y {background: #FFEC16 !important;color: #333 !important;}
.bg-bl {background: #2976C6 !important;color: #fff !important;}
.bg-r {background: #DC4E41 !important;color: #fff !important;}
.bg-o {background: #FF7200 !important;color: #fff !important;}
.bg-g {background: #2FB949 !important;color: #fff !important;}
.bg-p {background: #FF086E !important;color: #fff !important;}
.bg-bk {background: #111 !important;color: #fff !important;}
.bg-w {background: #eee !important;color: #333 !important;}
.bg-br {background: #442B22 !important;color: #fff !important;}
.bg-lbr {background: #CE9B6C !important;color: #fff !important;}
.bg-dbr {background: #2E1F19 !important;color: #fff !important;}
.bg-dgy {background: #888 !important;color: #fff !important;}
.bg-gy {background: #aaa !important;color: #333 !important;}
.bg-lgy {background: #ccc !important;color: #333 !important;}
.bg-wgy {background: #f7f7f7 !important;color: #333 !important;}

/* --------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:980px) {
.img3 .img-box, .img3 .inner, .img4 .img-box, .img4 .inner, .img5 .img-box, .img5 .inner {width: 33.33%;}
.img5.change-img .img-box {width: 20%;}
.img-block .img-box:first-child {text-align: center;}
.img-block .img-box:last-child {text-align: center;}
}
@media screen and (max-width:480px) {
.cate-menu-list a {padding: .5em .2em .8em;}
.cate-menu-list a span {line-height: 1.3;}
.img-figure strong {
line-height: 1.8;
display: inline-block;
margin: 0 auto .5em;
background: none;
}
#itemDetailMap.foot-itemDetailMap {line-height: 1.8;padding: 1em !important;}
.img1 .inner, .img2 .inner, .img3 .inner, .img4 .inner {width: 100%;}
.cate-menu-list .inner {-ms-flex-preferred-size: 31%;flex-basis: 31%;margin: 0 1% 1em;}
.img3 .img-box, .img3 .inner {width: 33.33%;}
.img4 .img-box, .img4 .inner {width: 50%;}
.img5 .img-box, .img5 .inner, .img6 .img-box, .img6 .inner, .img7 .img-box, .img7 .inner, .img8 .img-box, .img8 .inner {width: 33.33%;}
}
.mt4 {margin-top: 4em !important;}
.mt5 {margin-top: 5em !important;}
/* --------------------------
 clm_recommend
-------------------------- */
.rt_item {padding: .8em !important}
.rt_item a {padding: 0 !important}
.rt_item figcaption a {height: auto;width: auto;}
.rt_item .carousel-icon {text-align: left;}
.rt_item .rt-name {text-align: left;display: inline-block;}
.rt_item .carousel-icon .carousel-icon-link .carousel-icon-in {height: 2em;}
.img-block.img4 .rt_item .carousel-svg.icon-star-on {font-size: .9em;}
.img-block.img4 .rt_item .carousel-review-quantity {font-size: .8em;}
.img-block.img5 .rt_item .carousel-svg.icon-star-on {font-size: .7em;}
.img-block.img5 .rt_item .carousel-review-quantity {font-size: .7em;}
.link-area.rt-cate-link {text-align: center;}
@media screen and (min-width: 768px) {
.img-block.img5 .rt_item figcaption a {height: 4.5em;}
.img-block.img5 .rt_item figcaption a.carousel-icon-link {height: 1.5em;}
.rt_item figcaption .item-data-box a {height: 2em !important}
.img-box .rt_item .item-data-box a {width: auto !important;padding: 0 !important;}
.img-box .rt_item a .img-figure {padding: .5em 0 !important;}
.rt_item .item-data-box {width: auto !important;text-align: left !important;}
}
@media screen and (max-width: 767px) {
.rt_item figcaption .item-data-box a {
height: 1.5em;
text-align: left;
}
.img2.rt-block .img-box, .img3.rt-block .img-box, .img4.rt-block .img-box, .img5.rt-block .img-box {width: 50%;}
}