@charset "utf-8";
/* ======================================================
* parts_sp.css
* ------------------------------------------------------
* @media only screen and (max-width: 767px)
* - Common
* - Elements >>> Text
* - Elements >>> List
* - Elements >>> Link
* - Elements >>> Image
* - Elements >>> Other
* - Conditional Elements >>> Heading
* - Conditional Elements >>> Navi
* - Layout >>> Table
* - Layout >>> Grid
* - Layout >>> Column
* - Layout >>> Box
* - Layout >>> Other
* - Components
* - Clearfix
* Media Queries
====================================================== */
@media only screen and (max-width: 767px) {
/* ------------------------------------------------------
* Common
------------------------------------------------------ */
/* ----- icon ----- */
.a-blank,
.a-video,
.a-pdf,
.a-word,
.a-excel,
.a-ppt,
.a-mail,
.a-rss,
.a-close,
.link-text > li > .a-blank > .link_label,
.link-text > li > .a-video > .link_label,
.link-text > li > .a-pdf > .link_label,
.link-text > li > .a-word > .link_label,
.link-text > li > .a-excel > .link_label,
.link-text > li > .a-ppt > .link_label,
.link-text > li > .a-mail > .link_label,
.link-text > li > .a-rss > .link_label,
.link-text-v2 > li > .a-blank > .link_label,
.link-text-v2 > li > .a-video > .link_label,
.link-text-v2 > li > .a-pdf > .link_label,
.link-text-v2 > li > .a-word > .link_label,
.link-text-v2 > li > .a-excel > .link_label,
.link-text-v2 > li > .a-ppt > .link_label,
.link-text-v2 > li > .a-mail > .link_label,
.news-layout .news_detail > .news_title,
.index-layout-v4_title .link_label,
.a-blank .related_link > .link_label,
.a-video .related_link > .link_label,
.a-pdf .related_link > .link_label,
.a-word .related_link > .link_label,
.a-excel .related_link > .link_label,
.a-ppt .related_link > .link_label,
.a-mail .related_link > .link_label {
position: relative;
}
.a-blank::after,
.a-video::after,
.a-pdf::after,
.a-word::after,
.a-excel::after,
.a-ppt::after,
.a-mail::after,
.a-rss::after,
.a-close::after,
.link-text > li > .a-blank > .link_label::after,
.link-text > li > .a-video > .link_label::after,
.link-text > li > .a-pdf > .link_label::after,
.link-text > li > .a-word > .link_label::after,
.link-text > li > .a-excel > .link_label::after,
.link-text > li > .a-ppt > .link_label::after,
.link-text > li > .a-mail > .link_label::after,
.link-text > li > .a-rss > .link_label::after,
.link-text-v2 > li > .a-blank > .link_label::after,
.link-text-v2 > li > .a-video > .link_label::after,
.link-text-v2 > li > .a-pdf > .link_label::after,
.link-text-v2 > li > .a-word > .link_label::after,
.link-text-v2 > li > .a-excel > .link_label::after,
.link-text-v2 > li > .a-ppt > .link_label::after,
.link-text-v2 > li > .a-mail > .link_label::after,
.index-layout-v2_item > .a-blank .index-layout-v2_label::after,
.index-layout-v2_item > .a-video .index-layout-v2_label::after,
.index-layout-v2_item > .a-pdf .index-layout-v2_label::after,
.index-layout-v2_item > .a-word .index-layout-v2_label::after,
.index-layout-v2_item > .a-excel .index-layout-v2_label::after,
.index-layout-v2_item > .a-ppt .index-layout-v2_label::after,
.index-layout-v2_item > .a-mail .index-layout-v2_label::after,
.index-layout-v3_item > .a-blank .index-layout-v3_label::after,
.index-layout-v3_item > .a-video .index-layout-v3_label::after,
.index-layout-v3_item > .a-pdf .index-layout-v3_label::after,
.index-layout-v3_item > .a-word .index-layout-v3_label::after,
.index-layout-v3_item > .a-excel .index-layout-v3_label::after,
.index-layout-v3_item > .a-ppt .index-layout-v3_label::after,
.index-layout-v3_item > .a-mail .index-layout-v3_label::after,
.news-layout .news_detail > .news_title::after,
.news-layout .news_detail > .news_inner > .news_title::after,
.news-layout > .news_article > .block.a-pdf.js-esc-filesize .news_title::after,
.news-layout > .news_article > .block.a-blank.js-esc-filesize .news_title::after,
.index-layout-v4_title .link_label::after,
.a-blank .related_link > .link_label::after,
.a-video .related_link > .link_label::after,
.a-pdf .related_link > .link_label::after,
.a-word .related_link > .link_label::after,
.a-excel .related_link > .link_label::after,
.a-ppt .related_link > .link_label::after,
.a-mail .related_link > .link_label::after {
content: "";
display: inline-block;
margin-left: 5px;
border: none !important;
-webkit-transform: rotate(0) !important;
transform: rotate(0) !important;
vertical-align: -2px;
}
.link-text-v2 > li > .a-blank::after,
.link-text-v2 > li > .a-video::after,
.link-text-v2 > li > .a-pdf::after,
.link-text-v2 > li > .a-word::after,
.link-text-v2 > li > .a-excel::after,
.link-text-v2 > li > .a-ppt::after,
.link-text-v2 > li > .a-mail::after,
figure .a-blank::after,
figure .a-video::after,
figure .a-pdf::after,
figure .a-word::after,
figure .a-excel::after,
figure .a-ppt::after,
figure .a-mail::after,
figure .a-close::after,
.index-layout-v4_item > .block > a::after,
.related_item > a::after {
display: none;
}
.a-blank::after,
.link-text > li > .a-blank > .link_label::after,
.link-text-v2 > li > .a-blank > .link_label::after,
.a-blank .related_link > .link_label::after,
.news-layout .news_detail > .news_title::after,
.news-layout > .news_article > .block.a-blank.js-esc-filesize .news_title::after,
.index-layout-v4_title .link_label::after {
margin: 0 5px 0 8px;
vertical-align: 0;
}
.a-blank.link-inline::after,
.a-video.link-inline::after,
.a-pdf.link-inline::after,
.a-word.link-inline::after,
.a-excel.link-inline::after,
.a-ppt.link-inline::after {
margin: 0 5px 0 8px;
}
.link-button > li > .a-blank::after,
.link-button-v2 > li > .a-blank::after,
.link-button > li > .a-pdf::after,
.link-button-v2 > li > .a-pdf::after,
.link-button > li > .a-mail::after,
.link-button-v2 > li > .a-mail::after {
margin-top: -6px;
}
.related_link > .link_label {
color: #369;
}
/* blank icon */
.a-blank::after,
.link-text > li > .a-blank > .link_label::after,
.link-text-v2 > li > .a-blank > .link_label::after,
.a-blank .related_link > .link_label::after,
.news-layout .a-blank .news_detail .news_title::after,
.news-layout > .news_article > .block.a-blank.js-esc-filesize .news_title::after,
.a-blank .index-layout-v4_title .link_label::after {
width: 10px !important;
height: 10px !important;
background: url(/english/common/images/com_ic02_sp.png) no-repeat 0 0;
background-size: 10px 10px;
}
.link-button-v2 > li > .a-blank::after,
.index-layout-v2_item > .a-blank .index-layout-v2_label::after,
.index-layout-v3_item > .a-blank .index-layout-v3_label::after {
width: 10px !important;
height: 10px !important;
background: url(/english/common/images/com_ic01_sp.png) no-repeat 0 0;
background-size: 10px 10px;
}
/* video icon */
.a-video::after,
.link-text > li > .a-video > .link_label::after,
.link-text-v2 > li > .a-video > .link_label::after,
.news-layout .a-video .news_detail .news_title::after {
width: 18px !important;
height: 14px !important;
background: url(/english/common/images/com_ic13_sp.png) no-repeat 0 0;
background-size: 18px 14px;
}
.link-button-v2 > li > .a-video::after,
.index-layout-v2_item > .a-video .index-layout-v2_label::after,
.index-layout-v3_item > .a-video .index-layout-v3_label::after {
background: url(/english/common/images/com_ic12_sp.png) no-repeat 0 0;
background-size: 18px 14px;
}
.link-button > li > .a-video::after,
.link-button-v2 > li > .a-video::after,
.index-layout_item > .a-video::after {
margin-top: -7px !important;
}
/* pdf icon */
.a-pdf::after,
.link-text > li > .a-pdf > .link_label::after,
.link-text-v2 > li > .a-pdf > .link_label::after,
.news-layout .a-pdf .news_detail .news_title::after,
.news-layout > .news_article > .block.a-pdf.js-esc-filesize .news_title::after,
.index-layout-v2_item > .a-pdf .index-layout-v2_label::after,
.index-layout-v3_item > .a-pdf .index-layout-v3_label::after,
.a-pdf .index-layout-v4_title .link_label::after {
width: 14px !important;
height: 14px !important;
background: url(/english/common/images/com_ic03_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
/* word icon */
.a-word::after,
.link-text > li > .a-word > .link_label::after,
.link-text-v2 > li > .a-word > .link_label::after,
.a-word .related_link > .link_label::after,
.news-layout .a-word .news_detail .news_title::after,
.index-layout-v2_item > .a-word .index-layout-v2_label::after,
.index-layout-v3_item > .a-word .index-layout-v3_label::after,
.a-word .index-layout-v4_title .link_label::after {
width: 14px !important;
height: 14px !important;
background: url(/english/common/images/com_ic07_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button-v2 > li >.a-word::after,
.index-layout-v2_item > .a-word .index-layout-v2_label::after,
.index-layout-v3_item > .a-word .index-layout-v3_label::after {
background: url(/english/common/images/com_ic06_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button > li >.a-word::after,
.link-button-v2 > li >.a-word::after,
.index-layout_item > .a-word::after {
margin-top: -7px !important;
}
/* excel icon */
.a-excel::after,
.link-text > li > .a-excel > .link_label::after,
.link-text-v2 > li > .a-excel > .link_label::after,
.a-excel .related_link > .link_label::after,
.news-layout .a-excel .news_detail .news_title::after,
.index-layout-v2_item > .a-excel .index-layout-v2_label::after,
.index-layout-v3_item > .a-excel .index-layout-v3_label::after,
.a-excel .index-layout-v4_title .link_label::after {
width: 14px !important;
height: 14px !important;
background: url(/english/common/images/com_ic09_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button-v2 > li > .a-excel::after,
.index-layout-v2_item > .a-excel .index-layout-v2_label::after,
.index-layout-v3_item > .a-excel .index-layout-v3_label::after {
background: url(/english/common/images/com_ic08_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button > li > .a-excel::after,
.link-button-v2 > li > .a-excel::after,
.index-layout_item > .a-excel::after {
margin-top: -7px !important;
}
/* ppt icon */
.a-ppt::after,
.link-text > li > .a-ppt > .link_label::after,
.link-text-v2 > li > .a-ppt > .link_label::after,
.a-ppt .related_link > .link_label::after,
.news-layout .a-ppt .news_detail .news_title::after,
.index-layout-v2_item > .a-ppt .index-layout-v2_label::after,
.index-layout-v3_item > .a-ppt .index-layout-v3_label::after,
.a-ppt .index-layout-v4_title .link_label::after {
width: 14px !important;
height: 14px !important;
background: url(/english/common/images/com_ic11_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button-v2 > li >.a-ppt::after,
.index-layout-v2_item > .a-ppt .index-layout-v2_label::after,
.index-layout-v3_item > .a-ppt .index-layout-v3_label::after {
background: url(/english/common/images/com_ic10_sp.png) no-repeat 0 0;
background-size: 14px 14px;
}
.link-button > li >.a-ppt::after,
.link-button-v2 > li >.a-ppt::after,
.index-layout_item > .a-ppt::after {
margin-top: -7px !important;
}
/* mail icon */
.a-mail::after,
.link-text > li > .a-mail > .link_label::after,
.link-text-v2 > li > .a-mail > .link_label::after,
.a-mail .related_link > .link_label::after,
.news-layout .a-mail .news_detail .news_title::after,
.index-layout-v2_item > .a-mail .index-layout-v2_label::after,
.index-layout-v3_item > .a-mail .index-layout-v3_label::after,
.a-mail .index-layout-v4_title .link_label::after {
width: 12px !important;
height: 10px !important;
background: url(/english/common/images/com_ic05_sp.png) no-repeat 0 0;
background-size: 12px 10px;
vertical-align: 0;
}
.link-button-v2 > li >.a-mail::after,
.index-layout-v2_item > .a-mail .index-layout-v2_label::after,
.index-layout-v3_item > .a-mail .index-layout-v3_label::after {
background: url(/english/common/images/com_ic04_sp.png) no-repeat 0 0;
background-size: 12px 10px;
}
.a-rss::after {
width: 16px !important;
height: 16px !important;
background-position: -85px -110px;
}
.a-rss .link_label {
display: none;
}
.link-text > li > .a-rss > .link_label{
display: block;
margin-top: -5px !important;
}
.link-text > li > .a-rss::after {
top: 0.7em;
}
.link-text > li > .a-rss > .link_label::after {
margin-bottom: -1px !important;
width: 16px !important;
height: 16px !important;
background: url(/english/common/images/com_ic39_sp.png) no-repeat 0 0;
background-size: 16px 16px;
margin-left: 8px;
}
.a-close::after {
width: 9px !important;
height: 9px !important;
background: url(/english/common/images/com_ic23_sp.png) no-repeat 0 0;
background-size: 9px 9px;
vertical-align: 1px;
}
.news-layout > .news_article > .block::after {
display: none;
width: 0 !important;
height: 0 !important;
}
/* .link-text .gp-al-right */
.link-text.gp-al-right > li > a::after {
display: none;
}
.link-text.gp-al-right > li > a > .link_label {
position: relative;
}
.link-text.gp-al-right > li > a > .link_label::before {
content: "";
position: absolute;
top: .6em;
left: -15px;
width: 8px !important;
height: 8px !important;
margin-top: -5px;
margin-left: 0;
background: none;
border-top: 1px solid #969696 !important;
border-right: 1px solid #969696 !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
transition-property: left;
transition-duration: .2s;
}
/* ----- Micro-interactions ----- */
/* pattern01 */
.heading-lv2 a.block::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 14px;
height: 14px;
margin-top: -7px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
.heading-lv2 a.block.a-blank::after {
right: 0;
}
/* pattern02 */
.heading-lv3 a.block::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 10px;
height: 10px;
margin-top: -6px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
.heading-lv3 a.block.a-blank::after,
.heading-lv3 a.block.a-pdf::after {
right: 0;
}
/* pattern03 */
.heading-lv4 a.block::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 10px;
height: 10px;
margin-top: -6px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
/* pattern04 */
.heading-lv5 a.block::after {
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 8px;
height: 8px;
margin-top: -5px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
/* pattern05 */
.heading-lv2 div.block .heading_more-label::after,
.link-text > li > a::after,
.related_link::after,
a .index-layout-v4_title::after {
content: "";
position: absolute;
top: .7em;
left: 0;
width: 8px !important;
height: 8px !important;
margin-top: -5px;
margin-left: 0;
background: none;
border-top: 1px solid #969696 !important;
border-right: 1px solid #969696 !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
transition-property: left;
transition-duration: .2s;
}
a .index-layout-v4_title::after {
top: .9em;
}
.link-text.assist-local_link > li > a::before {
left: 30px;
width: calc(100% - 30px);
}
.link-text.assist-local_link > li > a::after {
top: 19px;
left: 10px;
}
.link-text.assist-local_link > .is-current > a::before {
display: none;
}
/* pattern06 */
.link-button > li > a::after,
.qa-layout > .qa_question a.block::after,
.site-search-layout .site-search-block .link-button.site-search-button > li > .link_label::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
/* pattern07 */
.link-button-v2 > li > a::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
/* ----- plugin colorbox setting ----- */
#colorbox #cboxLoadedContent {
border: none;
}
#colorbox #cboxContent {
background: #fff;
margin-top: 0;
}
#colorbox #cboxClose {
position: absolute;
top: 10px;
right: 15px;
display: block;
width: 14px;
height: 14px;
background: url(/english/common/images/com_ic24_sp.png) 0 0 no-repeat;
background-size: 14px 14px;
cursor: pointer;
}
#colorbox #cboxPrevious,
#colorbox #cboxNext {
position: absolute;
display: block;
width: 44px;
height: 44px;
margin-top: -22px;
background: rgba(0,0,0,.2);
border-radius: 50%;
}
#colorbox #cboxPrevious:after,
#colorbox #cboxNext:after {
content: '';
display: block;
position: absolute;
top: 50%;
width: 13px;
height: 13px;
margin-top: -7px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
#colorbox #cboxPrevious {
left: 5px;
}
#colorbox #cboxPrevious:after {
left: 20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#colorbox #cboxNext {
right: 5px;
}
#colorbox #cboxNext:after {
right: 20px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#cboxOverlay {
opacity: .4 !important;
}
.modal-photo #cboxContent,
.modal-inline #cboxContent,
.modal-photo-alone #cboxContent {
padding: 30px 15px 30px;
}
.js-modal-content {
display: none;
}
.modal-title {
font-size: 1.7rem;
line-height: 1.4;
}
.modal-image {
margin-top: 10px;
}
.modal-text {
margin-top: 10px;
}
/* ----- modal-jstream ----- */
#modal-jstream .container,
#modal-jstream .contents {
padding: 0;
}
/* ----- plugin slick setting ----- */
.slick-slider {
margin: 0;
}
.slick-slider .slick-arrow {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
-webkit-appearance: none;
appearance: none;
}
.slick-slider .slick-prev,
.slick-slider .slick-next {
position: absolute;
bottom: calc(50% - 10px) !important;
display: block;
width: 44px !important;
height: 44px !important;
margin-top: -22px !important;
padding: 0;
background: rgba(0, 0, 0, .2);
border: none;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 1;
}
.slick-slider .slick-prev {
left: -25px;
}
.slick-slider .slick-next {
right: -25px;
}
.slick-prev::after,
.slick-next::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px !important;
height: 12px !important;
margin: -6px 0 0 0;
background: none;
border-top: 1px solid #fff !important;
border-right: 1px solid #fff !important;
}
.slick-prev::after {
margin-left: -3px;
-webkit-transform: rotate(225deg) !important;
transform: rotate(225deg) !important;
}
.slick-next::after {
margin-left: -9px;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.slick-dots {
width: 100%;
text-align: center;
}
.slick-dots > li {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 5px;
border-radius: 50%;
background: #e4e4e4;
}
.slick-dots > li > button {
display: none;
}
.slick-dots > li.slick-active {
background: #00ada9;
}
.slider-layout-v2.slick-slider {
overflow: visible;
padding-bottom: 0;
text-align: center;
}
.slider-layout-v2.slick-slider .slick-list {
margin-right: 0;
margin-bottom: 10px;
}
.slider-layout-v2.slick-slider .slick-slide {
margin-right: 0;
}
.slider-layout-v2 .slick-prev,
.slider-layout-v2 .slick-next {
position: absolute;
top: calc(50% - 20px);
display: block;
width: 44px !important;
height: 44px !important;
margin-top: -22px !important;
padding: 0;
background: rgba(0, 0, 0, .2) !important;
border: none;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 1;
}
.slider-layout-v2 .slick-prev {
left: -15px;
}
.slider-layout-v2 .slick-next {
right: -15px;
}
.slider-layout-v2 .slick-prev::after,
.slider-layout-v2 .slick-next::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px !important;
height: 12px !important;
margin: -6px 0 0 0;
background: none;
border-top: 1px solid #fff !important;
border-right: 1px solid #fff !important;
}
.slider-layout-v2 .slick-prev::after {
margin-left: -3px;
-webkit-transform: rotate(225deg) !important;
transform: rotate(225deg) !important;
}
.slider-layout-v2 .slick-next::after {
margin-left: -9px;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.slider-layout-v2 .slick-dots {
position: relative;
display: inline-block;
text-align: center;
width: auto;
}
.slider-layout-v2 .slick-dots > li {
display: none !important;
width: auto;
height: auto;
margin: 0;
pointer-events: none;
}
.slider-layout-v2 .slick-dots > li.slick-active {
display: inline-block !important;
background-color: inherit;
}
.slider-layout-v2 .slick-dots > li > button {
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 50%;
overflow: visible;
text-indent: 0 !important;
white-space: nowrap;
z-index: 1;
}
.js-slider-sp-group.is-image-title .slick-prev,
.js-slider-sp-group.is-image-title .slick-next {
bottom: auto !important;
top: calc(50% + 5px) !important;
margin-top: -22px !important;
}
.js-slider-sp-group.is-image-title .slick-prev {
left: -10px!important;
}
.js-slider-sp-group.is-image-title .slick-next {
right: -10px!important;
}
/* ------------------------------------------------------
* Elements >>> Text
------------------------------------------------------ */
/* ----- text-paragraph ----- */
.text-paragraph {
margin-top: 1em;
}
/* ----- text-lead ----- */
.text-lead {
font-size: 1.5rem;
font-weight: 700;
}
.text-lead-v2 {
font-size: 1.7rem;
}
.text-lead-v3 {
font-size: 1.4rem;
font-weight: 700;
color: #00ada9;
}
.text-lead-v4 {
font-size: 1.4rem;
font-weight: 700;
color: #e51e05;
}
/* ----- text-title ----- */
.text-title {
margin-top: 1em;
}
.text-title + [class*="list-note"],
.text-title + [class*="list-bullet"],
.text-title + [class*="list-order"],
.text-title + [class*="list-alphabet"],
.text-title + [class*="list-kana"],
.text-title + [class*="link-text"],
.text-title + [class*="link-button"],
.text-title + [class*="link-local"] {
margin-top: .5em;
}
/* ------------------------------------------------------
* Elements >>> List
------------------------------------------------------ */
[class*="list-note"],
[class*="list-bullet"],
[class*="list-order"],
[class*="list-alphabet"],
[class*="list-kana"],
[class*="list-description"] {
margin-top: 1em;
}
[class*="list-note"] > li,
[class*="list-bullet"] > li,
[class*="list-order"] > li,
[class*="list-alphabet"] > li,
[class*="list-kana"] > li {
margin-top: .5em;
}
[class*="list-note"] > li:first-child,
[class*="list-bullet"] > li:first-child,
[class*="list-order"] > li:first-child,
[class*="list-alphabet"] > li:first-child,
[class*="list-kana"] > li:first-child {
margin-top: 0;
}
[class*="list-note"] > li > .is-nest,
[class*="list-bullet"] > li > .is-nest,
[class*="list-order"] > li > .is-nest,
[class*="list-alphabet"] > li > .is-nest,
[class*="list-kana"] > li > .is-nest,
[class*="list-description"] > dd > .is-nest {
margin-top: .5em;
font-weight: normal;
}
[class*="list-note"].is-nest {
margin-top: .5em !important;
}
[class*="list-note"].is-nest > li {
margin-top: .2em !important;
}
[class*="list-note"].is-nest > li:first-child {
margin-top: 0 !important;
}
.list_mark.mark_asterisk::before,
.list_mark.mark_note::before,
.list_mark.mark_notes::before {
vertical-align: top;
}
.list_mark.mark_asterisk::before {
content: "* ";
font-size: 1.7rem;
}
.list_mark.mark_note::before {
content: "Note: ";
}
.list_mark.mark_notes::before {
content: "Notes: ";
}
/* ----- list-note ----- */
.list-note,
.list-note-v2,
.list-note-v3,
.list-note-v4 {
}
.list-note > li,
.list-note-v2 > li,
.list-note-v3 > li,
.list-note-v4 > li {
position: relative;
color: #666;
line-height: 1.4;
}
.list-note > li,
.list-note-v2 > li {
padding-left: 1em;
}
.list-note-v3 > li,
.list-note-v4 > li {
padding-left: 3.25em;
}
.list-note-v2 > li,
.list-note-v4 > li {
font-size: 1.2rem;
}
.list-note .list_mark,
.list-note-v2 .list_mark,
.list-note-v3 .list_mark,
.list-note-v4 .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/* ----- list-note-order ----- */
.list-note-order,
.list-note-order-v2,
.list-note-order-v3,
.list-note-order-v4 {
}
.list-note-order > li,
.list-note-order-v2 > li,
.list-note-order-v3 > li,
.list-note-order-v4 > li {
position: relative;
color: #666;
}
.list-note-order > li,
.list-note-order-v2 > li {
line-height: 1.4;
}
.list-note-order > li,
.list-note-order-v2 > li {
padding-left: 2.5em;
}
.list-note-order-v3 > li,
.list-note-order-v4 > li {
padding-left: 4.75em;
}
.list-note-order-v2 > li,
.list-note-order-v4 > li {
font-size: 1.2rem;
}
.list-note-order .list_mark,
.list-note-order-v2 .list_mark,
.list-note-order-v3 .list_mark,
.list-note-order-v4 .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/* ----- list-bullet ----- */
.list-bullet > li,
.list-bullet-v2 > li {
position: relative;
padding-left: 1em;
line-height: 1.4;
}
.list-bullet-v2 > li {
font-size: 1.1rem;
}
.list-bullet > li:before {
content: "";
position: absolute;
top: .7em;
left: 2px;
display: inline-block;
width: 7px;
height: 7px;
margin-top: -4px;
background-color: #bbbbbb;
border-radius: 50%;
}
.list-bullet-v2 > li:before {
content: "";
position: absolute;
top: .7em;
left: 4px;
display: inline-block;
width: 4px;
height: 4px;
margin-top: -2px;
background-color: #bbbbbb;
border-radius: 50%;
}
/* ----- list-order ----- */
.list-order > li,
.list-order-v2 > li {
position: relative;
padding-left: 1.8em;
line-height: 1.4;
}
.list-order-v3 > li {
position: relative;
padding-left: 2.2em;
line-height: 1.4;
}
.list-order-v2 > li {
font-size: 1.2rem;
}
.list-order .list_mark,
.list-order-v2 .list_mark,
.list-order-v3 .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/* ----- list-alphabet ----- */
.list-alphabet > li,
.list-alphabet-v2 > li {
position: relative;
padding-left: 1.5em;
line-height: 1.4;
}
.list-alphabet-v2 > li {
font-size: 1.2rem;
}
.list-alphabet .list_mark,
.list-alphabet-v2 .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/* ----- list-kana ----- */
.list-kana > li,
.list-kana-v2 > li {
position: relative;
line-height: 1.4;
}
.list-kana > li {
padding-left: 1.5em;
}
.list-kana-v2 > li {
padding-left: 1.7em;
font-size: 1.2rem;
}
.list-kana .list_mark,
.list-kana-v2 .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
/* ----- list-description ----- */
.list-description > dt {
position: relative;
padding-left: 1em;
line-height: 1.4;
}
.list-description > dt::before {
content: "";
position: absolute;
top: .7em;
left: 2px;
display: inline-block;
width: 8px;
height: 8px;
margin-top: -4px;
background-color: #bbbbbb;
border-radius: 50%;
}
.list-description > dd {
margin-top: .3em;
padding-left: 1em;
line-height: 1.4;
}
.list-description-v2 > dt {
position: relative;
padding-left: 1.8em;
line-height: 1.4;
}
.list-description-v2 > dt .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.list-description-v2 > dd {
margin-top: .3em;
padding-left: 1.8em;
line-height: 1.4;
}
.list-description-v3 {
color: #666;
}
.list-description-v3 > dt {
position: relative;
padding-left: 1em;
line-height: 1.4;
}
.list-description-v3 > dt .list_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.list-description-v3 > dd {
margin-top: .3em;
padding-left: 1em;
line-height: 1.4;
}
/* ------------------------------------------------------
* Elements >>> Link
------------------------------------------------------ */
[class*="link-text"],
[class*="link-button"],
[class*="link-local"] {
margin-top: 1em;
}
[class*="link-text"] > li,
[class*="link-button"] > li {
margin-top: 1em;
}
[class*="link-local"] > li {
margin-top: 0;
}
[class*="link-text"] > li:first-child,
[class*="link-button"] > li:first-child,
[class*="link-local"] > li:first-child {
margin-top: 0;
}
[class*="link-text"] > li > .is-nest,
[class*="link-button"] > li > .is-nest,
[class*="link-local"] > li > .is-nest {
margin-top: .5em;
}
.news-layout + [class*="link-button"] {
margin-top: 20px;
}
/* ----- link-inline ----- */
a.link-inline {
color: #369;
text-decoration: underline;
}
/* ----- link-text ----- */
.link-text > li {
line-height: 1.4;
}
.link-text > li > a {
position: relative;
display: block;
padding-left: 15px;
text-decoration: none;
color: #369;
}
.link-text-v2 {
margin-top: 5px;
}
.link-text-v2 > li,
.link-text-v2 > li:first-child {
margin: 8px 14px 0 0;
border-right: 1px solid #d3d3d3;
line-height: 1.2;
}
.link-text-v2 > li:last-child {
border-right: none;
}
.link-text-v2 > li > a {
position: relative;
display: block;
margin-right: 14px;
text-decoration: none;
color: #369;
}
/* ----- link-button ----- */
.link-button > li {
line-height: 1.4;
}
.link-button > li > a {
position: relative;
display: block;
width: 100%;
padding: 12px 25px 14px;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
text-decoration: none;
}
.link-button > li > a > .link_label {
position: relative;
display: inline-block;
text-align: left;
z-index: 1;
}
.link-button-v2 > li {
line-height: 1.4;
}
.link-button-v2 > li > a {
position: relative;
display: block;
width: 100%;
padding: 18px 25px 20px;
background-color: #666;
text-align: center;
text-decoration: none;
color: #fff;
}
.link-button-v2 > li > a > .link_label {
position: relative;
display: inline-block;
text-align: left;
z-index: 1;
}
.link-button[data-row-sp] > li,
.link-button-v2[data-row-sp] > li {
display: -webkit-flex;
display: flex;
margin-top: .8em;
}
.link-button[data-row-sp] > li > a,
.link-button-v2[data-row-sp] > li > a{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.link-button[data-row-sp="2"] > li > a,
.link-button-v2[data-row-sp="2"] > li > a {
width: 100%;
min-width: inherit;
}
/* ----- link-local ----- */
.link-local {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.link-local + *:first-child {
margin-top: 25px;
}
.link-local > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
height: 5em !important;
}
.link-local > li > a {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
height: 5em;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
font-size: 1.3rem;
text-align: center;
vertical-align: middle;
line-height: 1.4;
color: #666;
}
.link-local > .is-current > a {
background-color: #767676;
border-color: #767676 !important;
color: #fff;
}
.link-local > li > a > .link_label {
position: relative;
display: inline-block;
z-index: 1;
}
/* ------------------------------------------------------
* Elements >>> Image
------------------------------------------------------ */
/* ----- image- ----- */
.image-set {
position: relative;
}
.image-set .image_caption {
margin-top: 5px;
font-size: 1.2rem;
line-height: 1.4;
}
.image-set .image_inner.gp-al-center {
margin: 0 auto;
}
.image-set .image_inner + .image_text,
.image-set .image_text + .image_inner {
margin-top: 10px;
}
.image-set .modal-icon span {
position: absolute;
right: 8px;
bottom: 8px;
display: block;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, .2);
border-radius: 50%;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
cursor: pointer;
}
.image-set .modal-icon span::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 13px;
height: 13px;
margin: -7px 0 0 -7px;
background: url(/english/common/images/com_ic21_sp.png) no-repeat 0 0;
background-size: 13px 13px;
}
.image-set .a-blank {
display: inline-block;
position: relative;
max-width: 100%;
}
.image-set .a-blank::after {
display: inline-block;
position: absolute;
right: 3px !important;
bottom: 3px !important;
width: 12px !important;
height: 12px !important;
margin: 0 !important;
background: url(/english/common/images/com_ic36.png) no-repeat 0 0 !important;
content: "";
}
.js-fitWidth {
margin-left: auto;
margin-right: auto;
}
.gp-al-right.js-fitWidth {
margin-left: auto;
margin-right: 0;
}
.gp-al-left.js-fitWidth {
margin-left: 0;
margin-right: auto;
}
.image-set[data-layout-sp="scroll"] {
overflow-x: scroll;
padding-bottom: 22px;
}
.image-set[data-layout-sp="scroll"]::-webkit-scrollbar {
height: 12px;
}
.image-set[data-layout-sp="scroll"]::-webkit-scrollbar-track {
border-radius: 12px;
background: #f1f1f1;
}
.image-set[data-layout-sp="scroll"]::-webkit-scrollbar-thumb {
border-radius: 12px;
background: #767676;
}
/* ----- image_player_btn ----- */
.image-set.image_player_btn a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
background: rgba(255, 255, 255, .6);
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 1;
}
.image-set.image_player_btn a .image_inner::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 42px;
height: 42px;
margin-top: -21px;
margin-left: -21px;
background: #00ada9;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 2;
}
.image-set.image_player_btn a .image_inner::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 0;
height: 0;
margin: -9px 0 0 -5px;
border-right: 0 solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 2;
}
/* ------------------------------------------------------
* Elements >>> Other
------------------------------------------------------ */
/* ----- line-layout ----- */
.line-layout,
.line-layout-v2 {
margin-top: 30px;
}
.line-layout > .line_hr {
display: block;
border-top: 1px solid #e5e5e5;
}
.line-layout-v2 > .line_hr {
display: block;
height: 1px;
background-image: -webkit-linear-gradient(left, #aaa, #aaa 1px, transparent 1px, transparent 4px);
background-image: linear-gradient(to right, #aaa, #aaa 1px, transparent 1px, transparent 4px);
background-size: 5px 1px;
background-position: top;
background-repeat: repeat-x;
border: none;
}
.select-layout select {
padding: 10px 30px 10px 20px;
}
.select-layout-v2 select {
padding: 10px 30px 10px 20px;
}
.select-layout_detail > *:not(:first-child) {
display: none;
}
/* ------------------------------------------------------
* Conditional Elements >>> Heading
------------------------------------------------------ */
[class*="heading-lv"] + .column-heading-layout {
margin-top: 0 !important;
}
/* ----- heading-lv1 ----- */
#main .heading-lv1 + * {
margin-top: 25px ;
}
.heading-lv1 + section > .heading-lv2:first-child {
margin-top: 0 !important;
}
.heading-lv1 .heading_subtitle {
font-size: 1.1rem;
line-height: 1.2;
}
.heading-lv1 .heading_title {
font-size: 2.3rem;
line-height: 1.2;
}
.heading-lv1 .heading_subtitle + .heading_title {
margin-top: 5px;
}
.heading-lv1 .heading_title > .heading_label {
display: block;
width: 100%;
text-align: left;
}
.heading-lv1 .heading_title > .heading_icon {
display: block;
padding: 2px 0 8px;
text-align: left;
line-height: 1;
font-size: 0;
}
.heading-lv1 .heading_title > .heading_icon i {
display: inline-block;
padding: 4px 8px 3px;
color: #fff;
font-size: 1.3rem;
background-color: #ccc;
text-align: center;
vertical-align: top;
white-space: nowrap;
}
.heading-lv1 .heading_title > .heading_icon .color1 {
background-color: #4d83ab;
}
/* ----- heading-lv2 ----- */
.heading-lv2 {
margin-top: 30px;
}
.heading-lv2 + *,
.heading-lv2 + section + * {
margin-top: 15px;
}
.heading-lv2 .heading_title {
font-size: 2.1rem;
line-height: 1.2;
color: #00ada9;
}
.heading-lv2 .heading_subtitle + .heading_title {
margin-top: 5px;
}
.heading-lv2 a.block {
position: relative;
display: inline-block;
padding-right: 25px;
text-decoration: none;
}
.heading-lv2 div.block {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
}
.heading-lv2 div.block .heading_more {
margin-top: 10px;
}
.heading-lv2 div.block .heading_more-label {
position: relative;
display: inline-block;
padding-left: 20px;
color: #333;
text-decoration: none;
}
/* ----- heading-lv3 ----- */
.heading-lv3 {
margin-top: 30px;
padding: 8px 13px 8px;
background-color: #f4f4f4;
}
.heading-lv3 + *,
.heading-lv3 + section + * {
margin-top: 15px;
}
.heading-lv3 .heading_title {
font-size: 1.9rem;
line-height: 1.2;
}
.heading-lv3 a.block {
position: relative;
display: inline-block;
padding-right: 25px;
text-decoration: none;
}
/* ----- heading-lv4 ----- */
.heading-lv4 {
margin-top: 25px;
padding: 0 13px 8px;
border-bottom: 1px solid #ccc;
}
.heading-lv4 + *,
.heading-lv4 + section + * {
margin-top: 15px !important;
}
.heading-lv4 + .link-button {
margin-top: 5px;
}
.heading-lv4 .heading_title {
font-size: 1.7rem;
line-height: 1.2;
}
.heading-lv4 a.block {
position: relative;
display: inline-block;
padding-right: 25px;
text-decoration: none;
}
/* ----- heading-lv5 ----- */
.heading-lv5 {
margin-top: 20px;
padding: 5px 13px 5px 10px;
border-left: 3px solid #ccc;
}
.heading-lv5 + *,
.heading-lv5 + section + * {
margin-top: 10px !important;
}
.heading-lv5 .heading_title {
font-size: 1.5rem;
line-height: 1.2;
}
.heading-lv5 a.block {
position: relative;
display: inline-block;
padding-right: 20px;
text-decoration: none;
}
/* ------------------------------------------------------
* Conditional Elements >>> Navi
------------------------------------------------------ */
/* ----- navi-anchor ----- */
.navi-anchor {
margin-top: 25px;
}
.navi-anchor + *:not(section) {
margin-top: 20px;
}
.navi-anchor > .navi-anchor_list > li {
border-left: 1px solid #ccc;
}
.navi-anchor > .navi-anchor_list > li + li {
margin-top: 15px;
}
.navi-anchor > .navi-anchor_list[data-row-sp="auto"] {
margin-top: -15px;
}
.navi-anchor > .navi-anchor_list[data-row-sp="auto"] > li {
display: inline-block;
border-left: none;
margin: 15px 20px 0 0;
}
.navi-anchor > .navi-anchor_list > li > a {
position: relative;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
padding-left: 30px;
}
.navi-anchor > .navi-anchor_list[data-row-sp="auto"] > li > a {
display: inline-block;
padding-left: 15px;
}
.navi-anchor > .navi-anchor_list > li > a::before {
content: "";
position: absolute;
top: 50%;
left: 10px;
width: 8px !important;
height: 8px !important;
margin-top: -8px;
margin-left: 0;
background: none;
border-top: 1px solid #969696 !important;
border-right: 1px solid #969696 !important;
-webkit-transform: rotate(135deg) !important;
transform: rotate(135deg) !important;
}
.navi-anchor> .navi-anchor_list[data-row-sp="auto"] > li > a::before {
left: 0;
}
/* ------------------------------------------------------
* Layout >>> Table
------------------------------------------------------ */
/* ----- table-layout ----- */
.table-layout {
margin-top: 25px;
}
.table-layout > *:first-child {
margin-top: 0;
}
.table_unit {
width: 100%;
margin-top: 10px;
border-top: 1px solid #d9d9d9;
}
.table_unit th,
.table_unit td {
padding: 10px 15px;
border-bottom: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
line-height: 1.4;
text-align: left;
}
.table-layout[data-layout-sp="scroll"].f-small .table_unit th,
.table-layout[data-layout-sp="scroll"].f-small .table_unit td {
padding: 5px;
}
.table_unit th > *:first-child,
.table_unit td > *:first-child {
margin-top: 0;
}
.table_unit td {
border-left: 1px solid #d9d9d9;
}
.table_unit tr > td:first-child {
/*border-left: none;*/
}
.table_unit td > ul,
.table_unit td > ol {
margin-top: .3em;
}
.table_unit td > .link-button > li,
.table_unit td > .link-button-v2 > li {
margin-top: .5em;
}
.table_unit td > .link-button > li:first-child,
.table_unit td > .link-button-v2 > li:first-child {
margin-top: 0;
}
.table_title {
font-weight: 700;
font-size: 1.4rem;
}
.table_subtitle {
margin-top: 5px;
font-size: 1.2rem;
line-height: 1.2;
text-align: right;
}
.table_subtitle + .table_inner {
margin-top: 5px;
}
.cell-style1 {
background-color: #767676;
border-left: 1px solid #f4f4f4;
color: #fff;
font-weight: 400;
}
.cell-style2 {
background-color: #f4f4f4;
font-weight: 400;
}
.cell-style3 {
font-weight: 400;
}
.cell-style-graph {
padding: 5px 0 !important;
vertical-align: middle !important;
}
.cell-style-graph [class^="color"] {
display: block;
width: 100%;
min-width: 35px;
height: 20px;
}
.cell-style-graph .color1 {
background-color: #feb855;
}
.cell-style-graph .color2 {
background-color: #e36562;
}
.cell-style-graph .color3 {
background-color: #fbf66e;
}
.cell-style-graph .color4 {
background-color: #638fc3;
}
/* data-layout-sp */
.table-layout[data-layout-sp="shrink"] .table_unit {
table-layout: fixed;
}
.table-layout[data-layout-sp="scroll"] .table_inner {
overflow-x: auto;
padding-bottom: 20px;
}
.table-layout[data-layout-sp="scroll"] .table_inner::-webkit-scrollbar {
height: 12px;
}
.table-layout[data-layout-sp="scroll"] .table_inner:before {
content: 'You can slide this table';
display: block;
margin-bottom: 10px;
}
.table-layout[data-layout-sp="scroll"] .table_inner::-webkit-scrollbar-track {
border-radius: 12px;
background: #f1f1f1;
}
.table-layout[data-layout-sp="scroll"] .table_inner::-webkit-scrollbar-thumb {
border-radius: 12px;
background: #767676;
}
.table-layout[data-layout-sp="scroll"] .table_unit th,
.table-layout[data-layout-sp="scroll"] .table_unit td {
white-space: nowrap;
}
.table-layout[data-layout-sp="vertical"] .table_unit {
table-layout: fixed;
}
.table-layout[data-layout-sp^="vertical"] .table_unit colgroup{
display: none;
}
.table-layout[data-layout-sp^="vertical"] .table_unit th,
.table-layout[data-layout-sp^="vertical"] .table_unit td {
display: block;
width: 100%;
/*border-left: none;*/
}
.table-layout[data-layout-sp="vertical-hidden"] .table_unit,
.table-layout[data-layout-sp="vertical-margin"] .table_unit,
.table-layout[data-layout-sp="vertical-margin-hidden"] .table_unit {
table-layout: fixed;
}
.table-layout[data-layout-sp^="vertical-margin"] .table_unit tr + tr > *:first-child {
margin-top: 20px;
}
.table-layout[data-layout-sp="vertical-hidden"] .table_unit thead,
.table-layout[data-layout-sp="vertical-margin-hidden"] .table_unit thead {
display: none;
}
.table-layout[data-layout-sp="vertical-hidden"] .table_unit tr > *:last-child {
border-bottom: 1px solid #d9d9d9;
}
.table-layout[data-layout-sp="vertical-margin-hidden"] .table_unit tr:not(:first-child) > *:first-child {
border-top: 1px solid #d9d9d9;
}
.table-layout[data-layout-sp="vertical-hidden-v2"] .table_unit,
.table-layout[data-layout-sp="vertical-margin-hidden-v2"] .table_unit {
table-layout: fixed;
}
.table-layout[data-layout-sp="vertical-hidden-v2"] .table_unit tr:first-child,
.table-layout[data-layout-sp="vertical-margin-hidden-v2"] .table_unit tr:first-child {
display: none;
}
.table-layout[data-layout-sp="vertical-addheader"] .table_unit thead {
display: none;
}
.table-layout[data-layout-sp="vertical-addheader"] .table_unit tr >*[data-head]:before {
content: attr(data-head);
display: block;
margin: -10px -15px 10px;
padding: 10px 15px;
background: #767676;
color: #fff;
font-weight: 400;
border-bottom: 1px solid #d9d9d9;
}
/* ------------------------------------------------------
* Layout >>> Grid
------------------------------------------------------ */
[data-row-sp] {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
[data-row-sp="1"] > *:not(.column_item),
[data-row-sp="1"] > .column_item {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}
[data-row-sp="1"] > .column_item {
-webkit-justify-content: center;
justify-content: center;
}
[data-row-sp="1"] > *:first-child {
margin-top: 0 !important;
}
[data-row-sp="2"] > *,
[data-row-sp="3"] > * {
margin-left: 15px;
}
[data-row-sp="auto"] > * {
margin-right: 15px;
}
[data-row-sp="2"] > *:nth-child(-n+2) ,
[data-row-sp="3"] > *:nth-child(-n+3) {
margin-top: 0 !important;
}
[data-row-sp="2"] > *:nth-child(2n+1),
[data-row-sp="3"] > *:nth-child(3n+1) {
margin-left: 0 !important;
}
[data-row-sp="2"] > * {
width: calc((100% - 15px) / 2);
}
[data-row-sp="3"] > * {
width: calc((100% - 30px) / 3);
}
.link-local[data-row-sp="2"] > * {
width: calc(100% / 2);
}
.link-local[data-row-sp="3"] > * {
width: calc(100% / 3);
}
.link-local[data-row-sp] > li {
margin-left: 0 !important;
}
.link-local[data-row-sp] > li > a {
border-left: none;
}
.link-local[data-row-sp="2"] > li:nth-child(n+3) > a,
.link-local[data-row-sp="3"] > li:nth-child(n+4) > a {
border-top: none;
}
.link-local[data-row-sp="2"] > li:nth-child(2n+1) > a,
.link-local[data-row-sp="3"] > li:nth-child(3n+1) > a {
border-left: 1px solid #ccc;
}
.index-layout-v3[data-row-sp] > * {
margin-top: 1px;
margin-left: 1px;
}
.index-layout-v3[data-row-sp="2"] > * {
width: calc((100% - 1px) / 2);
}
.index-layout-v3[data-row-sp="3"] > * {
width: calc((100% - 2px) / 3);
}
/* ------------------------------------------------------
* Layout >>> Column
------------------------------------------------------ */
/* ----- column-media ----- */
.column-media {
margin-top: 25px;
}
.column-media > .column_image > *:first-child,
.column-media > .column_detail > *:first-child {
margin-top: 0 !important;
}
.column-media > .column_detail .link-text {
overflow: hidden;
}
/* data-layout-sp */
.column-media[data-layout-sp="row"] > .column_image {
max-width: calc((100% - 15px) / 2);
}
.column-media[data-layout-sp="row"] > .column_image[data-image="right"] {
float: right;
margin-left: 15px;
}
.column-media[data-layout-sp="row"] > .column_image[data-image="left"] {
float: left;
margin-right: 15px;
}
.column-media[data-layout-sp="row"] > .column_detail[data-wraparound="false"] {
overflow: hidden;
}
.column-media[data-layout-sp="col"] > .column_detail,
.column-media[data-layout-sp="col-reverse"] > .column_image {
margin-top: 15px;
}
.column-media[data-layout-sp="col"] > .column_detail,
.column-media[data-layout-sp="col-reverse"] > .column_detail {
width: 100%;
}
.column-media[data-layout-sp="col"] {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
}
.column-media[data-layout-sp="col-reverse"] {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-align-items: center;
align-items: center;
}
/* ----- column-layout ----- */
.column-layout {
margin-top: 30px;
}
.column-layout > *:first-child {
margin-top: 0 !important;
}
.column-layout > .column_item {
margin-top: 20px;
}
.column-layout > .column_item > *:first-child,
.column-layout > .column_item > section > *:first-child {
margin-top: 0 !important;
}
/* ------------------------------------------------------
* Layout >>> Box
------------------------------------------------------ */
.box-layout,
.box-layout-v2,
.box-layout-v3 {
margin-top: 20px;
}
.accordion_detail .box-layout,
.accordion_detail .box-layout-v2,
.accordion_detail .box-layout-v3 {
margin-top: 15px;
}
.box-layout > *:first-child,
.box-layout-v2 > *:first-child,
.box-layout-v3 > *:first-child {
margin-top: 0;
}
.box-layout > .box_detail > *:first-child,
.box-layout-v2 > .box_detail > *:first-child,
.box-layout-v3 > .box_detail > *:first-child {
margin-top: 0;
}
/* ----- box-layout ----- */
.box-layout {
padding: 18px 15px 25px;
border: 1px solid #ccc;
}
.box-layout + * {
margin-top: 1em;
}
.box-layout > .box_title {
padding: 5px 13px 5px 10px;
border-left: 3px solid #ccc;
font-size: 1.4rem;
font-weight: 700;
}
.box-layout .column-media .box_title {
font-size: 2rem;
}
.box-layout > .box_detail {
margin-top: 15px;
}
.box-layout .column-media .box_detail {
margin-top: 10px;
}
.box-layout > .box_detail > *:first-child {
margin-top: 0;
}
.box-layout > .box_detail .link-button > li a {
width: 100%;
}
/* ----- box-layout-v2 ----- */
.box-layout-v2 {
padding: 15px 15px 20px;
border: 1px solid #ccc;
background-color: #f4f4f4;
}
.box-layout-v2 > .box_title {
padding: 5px 13px 5px 10px;
border-left: 3px solid #ccc;
font-size: 1.4rem;
font-weight: 700;
}
.box-layout-v2 > .box_detail {
margin-top: 10px;
}
.box-layout-v2 > .box_detail > *:first-child {
margin-top: 0;
}
/* ----- box-layout-v3 ----- */
.box-layout-v3 {
margin-left: -15px;
margin-right: -15px;
padding: 25px 15px 20px;
background-color: #f4f4f4;
}
.box-layout-v3 > .box_title {
font-size: 1.6rem;
text-align: center;
}
.box-layout-v3 > .box_detail {
}
.box-layout-v3 > .box_detail >*:first-child {
margin-top: 0 !important;
}
.box-layout-v3 > .box_detail .link-button a {
width: 100%;
}
/* ------------------------------------------------------
* Layout >>> Other
------------------------------------------------------ */
/* ----- accordion-layout ----- */
.accordion-layout > .accordion_detail,
.accordion-layout-v2 > .accordion_detail-v2 {
display: none;
}
.accordion-layout.is-default-open > .accordion_detail {
display: block;
}
.accordion-layout {
margin-top: 30px;
border-top: 1px solid #ddd;
}
.accordion-layout + .accordion-layout {
margin-top: 0;
border-top: none;
}
.accordion-layout > .accordion_trigger {
padding: 15px 10px 15px 15px;
background-color: #fff;
border-bottom: 1px solid #ddd;
transition-property: background-color;
transition-duration: .2s;
cursor: pointer;
}
.accordion-layout > .accordion_trigger.is-active {
background-color: #f4f4f4;
}
.accordion-layout > .accordion_trigger > .accordion_label {
position: relative;
display: block;
padding-right: 35px;
}
.accordion-layout > .accordion_trigger > .accordion_label:after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 18px;
height: 18px;
margin-top: -9px;
background: url(/english/common/images/com_ic17_sp.png) no-repeat 0 0;
-webkit-background-size: 18px 18px;
background-size: 18px 18px;
transition-property: top;
transition-duration: .2s;
}
.accordion-layout > .accordion_trigger.is-active > .accordion_label:after {
background: url(/english/common/images/com_ic18_sp.png) no-repeat 0 0;
-webkit-background-size: 18px 18px;
background-size: 18px 18px;
}
.accordion-layout > .accordion_trigger > .accordion_label [class*="list-note"] {
margin-top: .3em;
}
.accordion-layout > .accordion_detail {
padding: 15px 15px 15px 10px;
border-bottom: 1px solid #ddd;
}
.accordion-layout > .accordion_detail > *:first-child {
margin-top: 0;
}
.accordion-layout > .accordion_trigger.qa_trigger_question {
position: relative;
padding-left: 55px;
}
.accordion-layout > .accordion_trigger.qa_trigger_question::before {
content: "Q";
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 32px;
height: 32px;
background-color: #666;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 2rem;
font-weight: bold;
line-height: 30px;
}
.accordion-layout > .accordion_trigger.qa_trigger_question::after {
content: "";
position: absolute;
top: 34px;
left: 36px;
display: inline-block;
width: 0;
height: 0;
border-top: 10px solid #666;
border-right: 5px solid transparent;
border-bottom: 0 solid transparent;
border-left: 5px solid transparent;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.accordion-layout > .accordion_detail.qa_detail_answer {
position: relative;
padding-left: 55px;
}
.accordion-layout > .accordion_detail.qa_detail_answer::before {
content: "A";
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 32px;
height: 32px;
background-color: #fff;
border: 2px solid #666;
border-radius: 50%;
text-align: center;
color: #666;
font-size: 2rem;
font-weight: bold;
line-height: 27px;
}
.accordion-layout > .accordion_detail.qa_detail_answer::after {
content: "";
position: absolute;
top: 32px;
left: 33px;
display: inline-block;
width: 9px;
height: 8px;
background-color: #fff;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
-webkit-transform: rotate(18deg) skew(32deg);
transform: rotate(18deg) skew(32deg);
}
/* ----- accordion-layout-v2 ----- */
.accordion-layout-v2 {
margin-top: 30px;
}
.accordion-layout-v2 > .accordion_trigger-v2 {
border-top: 1px solid #ccc;
text-align: center;
}
.accordion-layout-v2 > .accordion_trigger-v2 > .accordion_label-v2 {
position: relative;
display: inline-block;
min-width: 165px;
margin-top: -1px;
padding: 5px 40px;
background-color: #fff;
border: 1px solid #ccc;
border-top: 1px solid #fff;
font-size: 1.5rem;
text-align: center;
cursor: pointer;
}
.accordion-layout-v2 > .accordion_trigger-v2 > .accordion_label-v2:after {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 18px;
height: 18px;
margin-top: -9px;
background: url(/english/common/images/com_ic17_sp.png) no-repeat 0 0;
background-size: 18px 18px;
}
.accordion-layout-v2 > .accordion_trigger-v2.is-active > .accordion_label-v2:after {
background: url(/english/common/images/com_ic18_sp.png) no-repeat 0 0;
background-size: 18px 18px;
}
.accordion-layout-v2 > .accordion_detail-v2 {
padding-bottom: 20px;
}
/* ----- tab-layout ----- */
.tab-layout {
margin-top: 50px;
}
.tab-layout .tab_inner {
margin-top: 15px;
}
.tab-layout .tab_list_spWrap {
position: relative;
border: 1px solid #ccc;
}
.tab-layout .tab_list_spWrap::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -4px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #656565 transparent transparent transparent;
}
.tab-layout .tab_list_sp {
/* reset */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
outline: 0;
background: none;
border: none;
/* customize */
width: 100%;
padding: 10px 25px 10px 10px;
font-size: 1.3rem;
}
/* ------------------------------------------------------
* Components
------------------------------------------------------ */
/* ----- news-layout ----- */
.news-layout {
margin-top: 10px;
}
.news-layout > .news_article > .block {
display: block;
padding: 18px 0;
text-decoration: none;
border-bottom: 1px solid #eee;
}
.news-layout .news_detail .news_title {
clear: both;
padding-top: 5px;
line-height: 1.4;
}
.news-layout a.block .news_detail .news_inner > .news_title {
color: #369;
}
.news-layout .news_detail > .news_property > .news_date {
display: block;
font-size: 1.2rem;
line-height: 20px;
}
.news-layout .news_detail > .news_inner > .news_company {
float: left;
display: inline-block;
}
.news-layout .news_detail > .news_title {
overflow: hidden;
line-height: 1.4;
}
/* ----- video-layout ----- */
.video-layout {
margin: 30px auto 0;
width: 85%;
}
.video-layout .video_inner {
position: relative;
height: auto;
}
.video-layout .video_inner video {
max-width: 100%;
}
.video-layout .video_inner .video_player {
display: none;
}
/* ----- video-layout-v2 ----- */
.contents > .video-layout-v2:first-of-type {
margin-top: 0;
}
.video-layout-v2 {
margin-top: 30px;
}
.video-layout-v2 > .video_inner {
width: 100%;
padding-top: 56.25%;
}
.video-layout-v2 > .video_inner > iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ----- contact-layout ----- */
.contact-layout {
margin-top: 30px;
padding: 20px 19px 25px;
border: solid 1px #d8d8d8;
background-color: #f4f4f4;
}
.contact-layout > .contact_heading {
margin-bottom: 15px;
}
.contact-layout > .contact_heading .contact_title {
font-size: 1.7rem;
text-align: center;
}
.contact-layout > .contact_content > *:first-child {
margin-top: 0 !important;
}
/* ----- contact-box-layout ----- */
.contact-box-layout {
margin-top: 20px;
padding: 20px 15px 15px;
background-color: #fff;
}
.contact-box-layout > .box_detail > *:first-child {
margin-top: 0 !important;
}
/* ----- contact-device-layout ----- */
.contact-device-layout {
margin-top: 20px;
}
.contact-device-layout > [class*="device_"] > .device_heading .device_heading_label {
display: block;
position: relative;
font-size: 1.5rem;
line-height: 1.35;
}
.contact-device-layout > [class*="device_"] + [class*="device_"] {
margin-top: 20px;
padding-top: 20px;
border-top: solid 1px #d8d8d8;
}
.contact-device-layout > .device_web > .device_heading .device_heading_label {
padding-left: 40px;
}
.contact-device-layout > .device_web > .device_heading .device_heading_label::before {
position: absolute;
top: -0.2em;
left: 0;
width: 28px;
height: 23px;
background: url(/english/common/images/com_ic34_sp.png) no-repeat 0 0;
background-size: 28px 23px;
content: "";
}
.contact-device-layout > .device_tel > .device_heading .device_heading_label {
padding-left: 28px;
}
.contact-device-layout > .device_tel > .device_heading .device_heading_label::before {
position: absolute;
top: 0.1em;
left: 0;
width: 18px;
height: 17px;
background: url(/english/common/images/com_ic33_sp.png) no-repeat 0 0;
background-size: 18px 17px;
content: "";
}
.contact-device-layout .device_department {
display: -webkit-flex;
display: flex;
margin-top: 1em;
font-size: 1.2rem;
}
.contact-device-layout .device_department > dt {
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.contact-device-layout .device_department > dt::after {
margin-right: 5px;
content: ":";
}
.contact-device-layout .device_department > dd {
width: 100%;
}
.contact-device-layout .device_department > dd > *:first-child {
margin-top: 0 !important;
}
.contact-device-layout .device_note {
position: relative;
margin-top: 1em;
padding-left: 1em;
color: #666;
font-size: 1.2rem;
line-height: 1.4;
}
.contact-device-layout .device_note .device_note_mark {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.contact-device-layout .device_note .device_note_mark.mark_asterisk::before {
content: "* ";
font-size: 1.7rem;
vertical-align: top;
}
/* ----- contact-tel-column ----- */
.contact-tel-column {
margin-top: 1.25em;
}
.contact-tel-column > .column_item + .column_item {
margin-top: 1.25em;
}
.contact-tel-column > .column_item > *:first-child {
margin-top: 0 !important;
}
/* ----- contact-tel-layout ----- */
.contact-tel-layout {
margin-top: 1em;
}
.contact-tel-layout .tel_number {
font-size: 2rem;
font-weight: bold;
line-height: 1;
}
/* ----- index-layout ----- */
.index-layout {
margin-top: 20px;
}
.index-layout_item + .index-layout_item {
margin-top: 15px;
}
.index-layout_item > .block {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: auto !important;
min-height: 60px;
padding: 10px 20px 10px 10px;
border: 1px solid #ccc;
text-decoration: none;
}
.index-layout_item > a::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 10px;
height: 10px;
margin-top: -5px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
.index-layout_inner {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
width: 100%;
}
.index-layout_label {
display: block;
font-size: 1.4rem;
line-height: 1.4;
}
.index-layout_description {
display: none;
}
.index-layout_image {
flex-basis: 100px;
flex-shrink: 0;
margin-right: 20px;
}
.index-layout_link {
margin-top: 1em;
}
.menu-sp_toggleKey {
padding: 12px 10px;
background: #f1f2f4;
text-align: center;
cursor: pointer;
}
.menu-sp_toggleKey:before {
content: '';
display: inline-block;
vertical-align: -4px;
width: 18px;
height: 18px;
margin-right: 10px;
background: url(/english/common/images/com_ic17_sp.png) 0 0 no-repeat;
background-size: 18px 18px;
}
.menu-sp_toggleKey.open:before {
background: url(/english/common/images/com_ic18_sp.png) 0 0 no-repeat;
background-size: 18px 18px;
}
.menu-sp_toggleCnt {
position: relative;
padding: 25px 15px;
border: 1px solid #ccc;
background: #fff;
}
.menu-sp_toggleCnt:before {
content: '';
position: absolute;
top: -7px;
left: 50%;
margin-left: -10px;
display: block;
width: 13px;
height: 13px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-sp_toggleCnt > * {
margin-top: 0 !important;
}
/* ----- index-layout-v2 ----- */
.index-layout-v2 {
margin-top: 30px;
}
.index-layout-v2 > *:nth-child(n+2) {
margin-top: 15px;
}
.index-layout-v2 .index-layout-v2_item > .block {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: auto !important;
min-height: 60px;
padding: 10px 20px 10px 10px;
border: 1px solid #ccc;
text-decoration: none;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_item > .block {
display: block;
min-height: inherit;
padding: 0;
border: none;
background-color: #767676;
text-decoration: none;
}
.index-layout-v2_image {
flex-basis: 100px;
flex-shrink: 0;
margin-right: 20px;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_image {
margin-right: 0;
}
.index-layout-v2_text {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_text {
position: relative;
min-height: 60px;
background: #5f5f5f;
}
.index-layout-v2_label {
font-size: 1.4rem;
line-height: 1.4;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_label {
display: block;
width: 100%;
padding: 5px 20px 5px 15px;
line-height: 1.4;
color: #fff;
font-size: 1.5rem;
}
.index-layout-v2_item > a.block:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 10px;
height: 10px;
margin-top: -5px;
border-top: 1px solid #969696;
border-right: 1px solid #969696;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_item > a.block:after {
display: none;
}
.index-layout-v2_item > a.block .index-layout-v2_label::after {
display: none;
}
.index-layout-v2[data-row-pc="2"] .index-layout-v2_item > a.block .index-layout-v2_label::after {
content: "";
position: absolute;
display: block;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: right;
transition-duration: .2s;
}
.index-layout-v2 .index-layout-v2_description {
display: none;
}
.index-layout-v2 .index-layout-v2_text-v2 {
padding: 5px 0;
line-height: 1.4;
}
/* ----- index-layout-v3 ----- */
.index-layout-v3 {
margin-top: 30px;
}
.index-layout-v3 > *:nth-child(-n+2) {
margin-top: 0;
}
.index-layout-v3_item {
}
.index-layout-v3_item > .block {
position: relative;
text-decoration: none;
}
.index-layout-v3_image {
}
.index-layout-v3_text {
background-color: #5f5f5f;
vertical-align: middle;
display: flex;
align-items: center;
}
.index-layout-v3_label {
display: block;
width: 100%;
position: relative;
padding: 10px 30px 10px 10px;
line-height: 1.4;
color: #fff;
}
.index-layout-v3_item > a.block:after {
display: none;
}
.index-layout-v3_item > a.block .index-layout-v3_label::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin-top: -4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.index-layout-v3_description {
display: none;
}
/* ----- index-layout-v4 ----- */
.index-layout-v4 {
margin-top: 30px;
}
.index-layout-v4_item + .index-layout-v4_item {
margin-top: 15px;
}
.index-layout-v4_item > .block {
display: block;
padding: 15px 15px 18px;
border: 1px solid #ccc;
}
.index-layout-v4_item > .block > *:first-child {
margin-top: 0;
}
.index-layout-v4_inner {
margin-top: 10px;
}
.index-layout-v4_title {
position: relative;
display: inline-block;
margin-top: 15px;
padding-left: 15px;
}
.index-layout-v4_title .link_label {
display: inline-block;
font-size: 1.6rem;
line-height: 1.4;
}
.index-layout-v4 .link-text.index-layout-v4_link {
margin-top: 0;
}
.index-layout-v4 .link-text.index-layout-v4_link > li + li {
margin-top: 10px;
}
/* ----- related-layout ----- */
.related-layout {
margin-top: 30px;
}
.related_item {
margin-top: 25px;
}
.related_item > *:first-child {
margin-top: 0 !important;
}
.related_item .related_link {
position: relative;
display: inline-block;
margin-top: 10px;
padding-left: 15px;
line-height: 1.4;
}
.related_item .related_text {
margin-top: 5px;
line-height: 1.4;
}
/* ----- flow-layout ----- */
.flow-layout + .flow-layout,
.flow-layout-v2 > .column_item + .column_item {
position: relative;
padding-top: 50px;
}
.flow-layout-v2 > .column_item {
margin-top: 0;
}
.flow-layout + .flow-layout:before,
.flow-layout-v2 > .column_item:nth-child(n+2):before {
content: "";
position: absolute;
top: 24px;
left: 50%;
display: block;
width: 39px;
height: 1px;
margin-left: -35px;
background-color: #767676;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.flow-layout + .flow-layout:after,
.flow-layout-v2 > .column_item:nth-child(n+2):after {
content: "";
position: absolute;
top: 24px;
right: 50%;
display: block;
width: 39px;
height: 1px;
margin-right: -35px;
background-color: #767676;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
/* ----- flow-layout-v2 ----- */
.flow-layout-v2 {
margin-top: 30px;
}
/* ----- slider-layout ----- */
.slider-layout,
.js-slider-sp-group {
position: relative;
margin: 30px 15px 0;
}
.slider-layout-v2 {
margin: 30px auto 0;
}
.slider-layout:not(.slick-slider) > *:nth-child(n+2),
.slider-layout-v2:not(.slick-slider) > *:nth-child(n+2),
.js-slider-sp-group:not(.slick-slider) > *:nth-child(n+2){
display: none;
}
/* ----- category-icon ----- */
.category-icon {
}
.table_unit th .category-icon,
.table_unit td .category-icon {
margin-top: 0.3em;
padding-bottom: 0;
}
.category-icon > li {
float: left;
margin: 0 0 5px 0;
padding: 0 8px;
color: #fff;
font-size: 1.3rem;
background-color: #ccc;
text-align: center;
clear: left;
}
.category-icon > li:last-child {
margin-bottom: 0 !important;
}
.category-icon > li.color1 {
background-color: #4d83ab;
}
.category-icon > li.color2 {
background-color: #f37f0d;
}
/* ----- video-gallary-layout ----- */
.video-gallary-layout {
margin-top: 40px;
}
.video-gallary_main .video-gallary_item:not(:first-child) {
display: none;
}
.video-gallary_main .column-layout {
margin-top: 0;
}
.video-gallary_main .image-set a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 54px;
height: 54px;
margin-top: -27px;
margin-left: -27px;
background: rgba(255, 255, 255, .6);
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
}
.video-gallary_main .image-set a .image_inner::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 46px;
height: 46px;
margin-top: -23px;
margin-left: -23px;
background: #00ada9;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
}
.video-gallary_main .image-set a .image_inner::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 0;
height: 0;
margin: -7px 0 0 -4px;
border-right: 0 solid transparent;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
border-left: 13px solid #fff;
}
.video-gallary_item [class*="link-button"] {
margin-top: 1.5em;
}
.video-gallary_banner {
margin: 30px -15px 0;
padding: 20px 22px;
background-color: #f4f4f4;
}
.video-gallary_banner .video-gallary_banner_inner {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
margin: 0 auto;
overflow-x: scroll;
}
.video-gallary_banner .video-gallary_banner_inner > .image-set {
flex-basis: 150px;
flex-shrink: 0;
}
.video-gallary_banner .image_inner {
position: relative;
display: block;
}
.video-gallary_banner .image_inner .image_caption {
min-height: 2.8em;
}
.video-gallary_banner .image_inner > a {
position: relative;
overflow: hidden;
display: block;
background-color: #333;
text-align: center;
box-sizing: content-box;
}
.video-gallary_banner .image_inner.is-active > a {
border: 3px solid #33bdba;
}
.video-gallary_banner .image_inner.is-active > a img {
opacity: .6;
}
.video-gallary_banner .image_inner:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 36px;
height: 36px;
margin-top: -39px;
margin-left: -18px;
background: rgba(255, 255, 255, .8);
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 1;
}
.video-gallary_banner .image_inner > a::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 32px;
height: 32px;
margin-top: -18px;
margin-left: -16px;
background: #00ada9;
border-radius: 50%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
z-index: 2;
}
.video-gallary_banner .image_inner > a::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 0;
height: 0;
margin: -7px 0 0 -3px;
border-right: 0 solid transparent;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-left: 10px solid #fff;
z-index: 2;
}
.video-gallary_banner .image_inner.is-active::before,
.video-gallary_banner .image_inner.is-active > a::before,
.video-gallary_banner .image_inner.is-active > a::after {
display: none;
}
/* ------------------------------------------------------
* Clearfix
------------------------------------------------------ */
.column-media::after,
.index-layout_item > .block > .index-layout_inner::after,
.index-layout-v2_item > .block > .index-layout-v2_inner::after,
.category-icon:after {
clear: both;
content: "";
display: block;
}
}