a[href^="tel:"] {
pointer-events: none;
}
@media only screen and (max-width: 767px) {
a[href^="tel:"] {
pointer-events: all;
}
}
.is_pc {
display: block;
}
@media only screen and (max-width: 767px) {
.is_pc {
display: none;
height: 0;
}
}
.is_sp {
display: none;
height: 0;
}
@media only screen and (max-width: 767px) {
.is_sp {
display: block;
height: auto;
}
}
.mod-font__brandon-grotesque {
font-family: brandon-grotesque,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
/* ===============================================
mod-title
=============================================== */
/* mod-title__style01
----------------------- */
.mod-title__style01 {
text-align: center;
}
.mod-title__style01 strong {
display: block;
margin-bottom: 30px;
font-size: 5rem;
font-weight: 400;
line-height: 1.1;
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.mod-title__style01 strong {
font-size: 2rem;
}
}
.mod-title__style01 em {
display: inline-block;
margin: 0 auto 50px;
padding: 0 40px 20px;
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.1em;
text-align: center;
font-weight: normal;
font-style: normal;
background: linear-gradient(transparent 98.5%, #333 0%);
}
@media only screen and (max-width: 767px) {
.mod-title__style01 em {
display: block;
margin: 0 auto 30px;
padding: 0 5px 10px;
font-size: 1.8rem;
letter-spacing: 0;
font-weight: 400;
background: linear-gradient(transparent 98.5%, #333 0%);
}
}
.wrapper_100.bg_lightgray > .mod-title__style01 {
padding-top: 30px;
}
/* mod-title__style02
----------------------- */
.mod-title__style02 {
margin-bottom: 10px;
font-size: 2.2rem;
font-weight: 400;
line-height: 1.3;
}
@media only screen and (max-width: 767px) {
.mod-title__style02 {
font-size: 2rem;
}
}
.mod-title__style02 + p + .mod-title__style02 {
margin-top: 35px;
}
@media only screen and (max-width: 767px) {
.mod-title__style02 + p + .mod-title__style02 {
margin-top: 0;
}
}
.mod-panel__img + .mod-title__style02 {
margin-top: 25px;
}
@media only screen and (max-width: 767px) {
.mod-panel__img + .mod-title__style02 {
margin-top: 0;
}
}
/* mod-title__style03
----------------------- */
.mod-title__style03 {
margin-bottom: 35px;
font-size: 2.6rem;
font-weight: 400;
letter-spacing: 0.25em;
text-align: center;
}
.mod-title__style03 span {
display: inline-block;
}
.mod-title__style03 span::after {
content: "";
display: block;
margin: 5px auto 0;
width: 3.5em;
height: 2px;
background: #cb1f16;
}
/* mod-title__style04
----------------------- */
.mod-title__style04 {
margin-bottom: 10px;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.3;
}
@media only screen and (max-width: 767px) {
.mod-title__style04 {
font-size: 1.6rem;
}
}
/* mod-title__style05
----------------------- */
.mod-title__style05 {
margin-bottom: 40px;
padding-bottom: 4px;
font-size: 2.4rem;
font-weight: 400;
border-bottom: 1px solid #2f201b;
letter-spacing: 0.2em;
}
@media only screen and (max-width: 767px) {
.mod-title__style05 {
margin-bottom: 20px;
font-size: 1.8rem;
letter-spacing: 0.1em;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
font-weight: 500;
}
}
.mod-title__style05 .mod-link__style01 {
margin-left: 50px;
font-size: 1.4rem;
letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
.mod-title__style05 .mod-link__style01 {
margin-left: 0;
font-size: 1.4rem;
letter-spacing: 0;
}
}
.mod-title__style05 .mod-link__style01:link, .mod-title__style05 .mod-link__style01:visited {
color: #0080ac;
text-decoration: none;
}
.mod-title__style05 .mod-link__style01:hover, .mod-title__style05 .mod-link__style01:active {
color: #0080ac;
text-decoration: none;
}
.products_faq .mod-title__style05 .mod-link__style01:link,
.products_faq .mod-title__style05 .mod-link__style01:visited,
.products_faq .mod-title__style05 .mod-link__style01:hover,
.products_faq .mod-title__style05 .mod-link__style01:active {
color: #333;
}
/* mod-title__style06
----------------------- */
.mod-title__style06 {
padding: 4px 0;
font-size: 2.1rem;
font-weight: 400;
letter-spacing: 0.2em;
text-align: center;
color: #fff;
background: #999999;
}
@media only screen and (max-width: 767px) {
.mod-title__style06 {
font-size: 1.8rem;
letter-spacing: 0;
}
}
/* mod-title__style07
----------------------- */
.mod-title__style07 {
margin-bottom: 10px;
font-size: 2.0rem;
font-weight: 500;
line-height: 1.3;
}
@media only screen and (max-width: 767px) {
.mod-title__style07 {
font-size: 1.8rem;
}
}
/* mod-title__style08
----------------------- */
.mod-title__style08 {
margin-bottom: 25px;
font-size: 2.4rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.12em;
}
@media only screen and (max-width: 767px) {
.mod-title__style08 {
font-size: 2.2rem;
letter-spacing: 0em;
}
}
/* mod-title__style09
----------------------- */
.mod-title__style09 {
margin-bottom: 15px;
font-size: 2.1rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
.mod-title__style09 {
font-size: 2.1rem;
}
}
/* mod-title__style10
----------------------- */
.mod-title__style10 {
margin-bottom: 10px;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.3;
}
@media only screen and (max-width: 767px) {
.mod-title__style10 {
font-size: 1.6rem;
}
}
/* mod-title__style11
----------------------- */
.mod-title__style11 {
margin-bottom: 10px;
font-size: 2.0rem;
font-weight: 400;
line-height: 1.3;
}
@media only screen and (max-width: 767px) {
.mod-title__style11 {
font-size: 2.0rem;
}
}
/* ===============================================
mod-link
=============================================== */
/* mod-link__style01
----------------------- */
.mod-link__style01 {
line-height: 1.2;
}
.mod-link__style01::after {
position: relative;
display: inline-block;
margin-left: 10px;
content: "";
width: 0.7em;
height: 0.7em;
border-top: 1px solid #333;
border-right: 1px solid #333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
line-height: 1.2;
}
.mod-link__style01:link, .mod-link__style01:visited, .mod-link__style01:hover, .mod-link__style01:active {
text-decoration: none;
}
/* ===============================================
mod-button
=============================================== */
.mod-button__style01 {
position: relative;
display: inline-block;
padding: 10px 60px 10px 15px;
background: #ccc;
font-size: 1.3rem;
letter-spacing: 0.1em;
border-radius: 8px;
}
@media only screen and (max-width: 767px) {
.mod-button__style01 {
font-size: 1.4rem;
padding: 6px 30px 6px 15px;
}
}
.mod-button__style01::after {
position: absolute;
right: 20px;
top: 50%;
content: "";
width: 1em;
height: 1em;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg) translateY(-70%);
transform: rotate(45deg) translateY(-70%);
line-height: 1;
}
@media only screen and (max-width: 767px) {
.mod-button__style01::after {
width: 0.6em;
height: 0.6em;
right: 15px;
}
}
.mod-button__style01:link, .mod-button__style01:visited, .mod-button__style01:hover, .mod-button__style01:active {
color: #fff;
text-decoration: none;
}
.mod-button__style02 {
position: relative;
display: inline-block;
padding: 7px 80px 10px 50px;
font-size: 1.6rem;
background: #fff;
border: 1px solid #333;
letter-spacing: 0.1em;
border-radius: 8px;
}
@media only screen and (max-width: 767px) {
.mod-button__style02 {
margin: 10px 0 0;
width: 100%;
padding: 7px 60px 10px 30px;
}
}
.mod-button__style02::after {
position: absolute;
right: 20px;
top: 50%;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg) translateY(-70%);
transform: rotate(45deg) translateY(-70%);
line-height: 1;
border-color: #333;
}
@media only screen and (max-width: 767px) {
.mod-button__style02::after {
width: 0.6em;
height: 0.6em;
right: 15px;
}
}
.mod-button__style02:link,
.mod-button__style02:visited,
.mod-button__style02:hover,
.mod-button__style02:active {
color: #333;
text-decoration: none;
}
/* ===============================================
mod-anchor
=============================================== */
.mod-anchor__list {
margin-bottom: 65px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
@media only screen and (max-width: 767px) {
.mod-anchor__list {
width: 80vw;
margin: 0 auto 60px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
text-align: center;
}
}
.mod-anchor__list li:not(:first-child) {
margin-left: 2px;
}
@media only screen and (max-width: 767px) {
.mod-anchor__list li:not(:first-child) {
margin-left: 0;
}
}
.mod-anchor__list li:first-child a {
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
@media only screen and (max-width: 767px) {
.mod-anchor__list li:first-child a {
border-radius: 4px;
}
}
.mod-anchor__list li:last-child a {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
@media only screen and (max-width: 767px) {
.mod-anchor__list li:last-child a {
border-radius: 4px;
}
}
@media only screen and (max-width: 767px) {
.mod-anchor__list li:not(:last-child) {
margin-bottom: 8px;
}
}
.mod-anchor__list li a {
position: relative;
padding: 10px 35px 10px 20px;
display: block;
font-size: 1.5rem;
line-height: 1.1;
background: #ccc;
color: #fff;
letter-spacing: 0;
}
@media only screen and (max-width: 767px) {
.mod-anchor__list li a {
font-size: 1.3rem;
border-radius: 4px;
}
}
.mod-anchor__list li a::after {
position: absolute;
right: 10px;
top: 0.65em;
content: "";
width: 0.7em;
height: 0.7em;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
line-height: 1.2;
}
.mod-anchor__list li a:link, .mod-anchor__list li a:visited, .mod-anchor__list li a:hover, .mod-anchor__list li a:active {
text-decoration: none;
}
.head-panel + section .mod-anchor__list {
margin-top: -20px;
}
@media only screen and (max-width: 767px) {
.head-panel + section .mod-anchor__list {
margin-top: -10px;
}
}
/* ===============================================
mod-list
=============================================== */
/* mod__nav
----------------------- */
.mod__nav__prev-next {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.mod__nav__prev-next li {
padding: 0 25px;
font-size: 1.6rem;
}
@media only screen and (max-width: 767px) {
.mod__nav__prev-next li {
font-size: 1.5rem;
}
}
.mod__nav__prev-next li a:link, .mod__nav__prev-next li a:visited {
text-decoration: underline;
}
.mod__nav__prev-next li a:hover, .mod__nav__prev-next li a:active {
text-decoration: none;
}
/* ===============================================
mod-list
=============================================== */
/* mod-list__imgbelt
----------------------- */
.mod-list__imgbelt {
display: -webkit-flex;
display: flex;
margin-bottom: 95px;
}
.mod-list__imgbelt li {
position: relative;
}
.mod-list__imgbelt li span {
display: block;
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
font-size: 1.2vw;
color: #fff;
}
.mod-list__imgbelt li:first-of-type span {
color: #333;
}
.mod-list__imgbelt li:first-of-type span {
color: #333;
}
.mod-list__imgbelt li:not(:last-of-type) img {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
@media only screen and (max-width: 767px) {
/* Products用 */
.mod-list__imgbelt {
margin-bottom: 30px;
}
/* トップ/About Us用 */
.mod-list__imgbelt.businessfields_wrap {
margin-bottom: 45px;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100vw;
overflow: hidden;
}
.mod-list__imgbelt li {
-webkit-flex-basis: 33.3333%;
flex-basis: 33.3333%;
width: 33.3333vw;
overflow: hidden;
}
.mod-list__imgbelt.businessfields_wrap li img {
-o-object-fit: cover;
object-fit: cover;
width: 33.333vw;
height: 33.333vw;
}
.mod-list__imgbelt.businessfields_wrap li span {
font-size: 1.2rem;
}
.mod-list__imgbelt.businessfields_wrap li:nth-of-type(3n) img {
border-right: none;
}
}
/* mod__list__entry
----------------------- */
.mod__list__entry {
margin: 100px 0 30px;
}
@media only screen and (max-width: 767px) {
.mod__list__entry {
margin: 60px 0 0;
}
}
.mod__list__entry .wrapper {
position: relative;
}
.mod__list__entry .mod__list__entry__wrapper {
width: 900px;
}
@media only screen and (max-width: 767px) {
.mod__list__entry .mod__list__entry__wrapper {
margin: 0 -5vw;
width: calc(100% + 10vw);
}
}
.mod__list__entry .swiper-button-prev,
.mod__list__entry .swiper-button-next {
top: 50%;
width: 30px;
height: 30px;
}
@media only screen and (max-width: 767px) {
.mod__list__entry .swiper-button-prev,
.mod__list__entry .swiper-button-next {
display: none;
}
}
.mod__list__entry .swiper-button-prev:focus,
.mod__list__entry .swiper-button-next:focus {
outline: none;
}
.mod__list__entry .swiper-button-prev::after,
.mod__list__entry .swiper-button-next::after {
content: "";
width: 30px;
height: 30px;
border: 2px solid black;
border-top: transparent;
border-left: transparent;
}
.mod__list__entry .swiper-button-prev::after {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.mod__list__entry .swiper-button-next::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mod__list__entry .swiper-button-disabled::after {
display: none;
}
.mod__list__entry__panel a:link, .mod__list__entry__panel a:visited {
text-decoration: none;
}
.mod__list__entry__panel a:hover, .mod__list__entry__panel a:active {
opacity: 1;
text-decoration: none;
}
.mod__list__entry__panel a:hover .information__panel__img, .mod__list__entry__panel a:active .information__panel__img {
opacity: 0.7;
}
.mod__list__entry__panel a:hover .information__panel__label, .mod__list__entry__panel a:active .information__panel__label {
opacity: 1;
}
.mod__list__entry__panel a:hover .information__panel__title, .mod__list__entry__panel a:active .information__panel__title {
text-decoration: underline;
}
.mod__list__entry__panel__img {
transition: 0.3s;
}
.mod__list__entry__panel__label {
position: absolute;
right: 0;
margin-top: -2.2rem;
height: 2.2rem;
padding: 4px 14px;
font-size: 1.1rem;
line-height: 1.1;
text-align: center;
background: #d1baa1;
}
@media only screen and (max-width: 767px) {
.mod__list__entry__panel__label {
margin-top: -1.8rem;
height: 1.8rem;
padding: 3px 12px;
font-size: 1rem;
}
}
.mod__list__entry__panel__date {
padding: 3px 0 6px;
text-align: right;
font-size: 1.1rem;
}
@media only screen and (max-width: 767px) {
.mod__list__entry__panel__date {
padding: 2px 0 4px;
font-size: 1rem;
}
}
.mod__list__entry__panel__title {
margin-bottom: 8px;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.7;
}
.mod__list__entry__panel__text {
font-size: 1.3rem;
}
/* mod__list__pager
----------------------- */
.mod__list__pager {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.mod__list__pager li {
padding: 0 15px;
font-size: 1.6rem;
}
@media only screen and (max-width: 767px) {
.mod__list__pager li {
padding: 0 10px;
font-size: 2rem;
}
}
.mod__list__pager li.is_current a:link, .mod__list__pager li.is_current a:visited, .mod__list__pager li.is_current a:hover, .mod__list__pager li.is_current a:active {
font-weight: bold;
text-decoration: underline;
}
/* mod_list__tags
----------------------- */
.mod_list__tags {
display: -webkit-flex;
display: flex;
margin: 35px 0 70px;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
.mod_list__tags {
margin: 20px 0 40px;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
padding-left: 4em;
}
}
.mod_list__tags::before {
content: "TAGS:";
padding-right: 10px;
}
@media only screen and (max-width: 767px) {
.mod_list__tags::before {
position: absolute;
left: 0;
font-size: 1.4rem;
}
}
.mod_list__tags li {
font-size: 1.3rem;
}
@media only screen and (max-width: 767px) {
.mod_list__tags li {
font-size: 1.4rem;
}
}
.mod_list__tags li:not(:last-of-type) {
padding-right: 20px;
}
.mod_list__tags li a:link, .mod_list__tags li a:visited {
text-decoration: underline;
}
.mod_list__tags li a:hover, .mod_list__tags li a:active {
text-decoration: none;
}
/* mod-list__bullet01
----------------------- */
.mod-list__bullet01__wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
@media only screen and (max-width: 767px) {
.mod-list__bullet01__wrapper {
display: block;
}
.mod-list__bullet01__wrapper .mod-list__bullet01:last-of-type {
padding-bottom: 20px;
}
}
.mod-list__bullet01 {
-webkit-flex-basis: 48%;
flex-basis: 48%;
}
.mod-list__bullet01 li {
list-style-type: disc;
margin-left: 30px;
line-height: 1.4em;
-webkit-align-self: flex-start;
align-self: flex-start;
list-style-position: outside;
}
.mod-list__bullet01 li:not(:last-of-type) {
margin-bottom: 6px;
}
@media only screen and (max-width: 767px) {
.mod-list__bullet01 li:not(:last-of-type) {
margin-bottom: 4px;
}
}
.mod-list__bullet01 li.no_marker {
list-style-type: none;
margin-left: 0;
}
/* mod-list__bullet02
----------------------- */
.mod-list__bullet02 {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.mod-list__bullet02 li {
-webkit-flex-basis: 44%;
flex-basis: 44%;
list-style-type: disc;
margin-left: 25px;
line-height: 1.4em;
list-style-position: outside;
}
.mod-list__bullet02 li:not(:last-of-type) {
margin-bottom: 6px;
}
/* mod-list__bullet03
----------------------- */
.mod-list__bullet03 {
margin-bottom: 10px;
}
.mod-list__bullet03 li {
list-style-type: disc;
margin-left: 25px;
line-height: 1.4em;
list-style-position: outside;
}
.mod-list__bullet03 li:not(:last-of-type) {
margin-bottom: 6px;
}
/* mod-list__num01
----------------------- */
.mod-list__num01 li {
list-style-type: decimal;
margin-left: 25px;
line-height: 1.4em;
list-style-position: outside;
}
.mod-list__num01 li:not(:last-of-type) {
margin-bottom: 6px;
}
/* mod-list__num02
----------------------- */
.mod-list__num02 li {
list-style-type: none;
margin-left: 0;
list-style-position: outside;
}
.mod-list__num02 li:not(:last-of-type) {
margin-bottom: 4px;
}
/* mod-list__arrow01
----------------------- */
.mod-list__arrow01 li {
padding-top: 3px;
}
.mod-list__arrow01 li a:link, .mod-list__arrow01 li a:visited {
color: #0080ac;
text-decoration: underline;
}
.mod-list__arrow01 li a:hover, .mod-list__arrow01 li a:active {
color: #0080ac;
text-decoration: none;
}
.mod-list__arrow01 li a::after {
position: relative;
display: inline-block;
margin-left: 10px;
content: "";
width: 0.7em;
height: 0.7em;
border-top: 1px solid #0080ac;
border-right: 1px solid #0080ac;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
line-height: 1.2;
}
/* ===============================================
mod-banner
=============================================== */
.mod-banner__type01 {
margin-top: 60px;
margin-bottom: 60px;
position: relative;
height: 90px;
border: 1px solid #2f201b;
border-radius: 6px;
}
@media print, screen and (max-width: 1100px) {
.mod-banner__type01 {
margin-left: 20px;
margin-right: 20px;
}
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 {
margin-left: 0;
margin-right: 0;
margin-top: 40px;
margin-bottom: 40px;
position: relative;
height: auto;
}
}
.mod-banner__type01 + .mod-banner__type01 {
margin-top: -20px;
}
.mod-banner__type01 a {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
height: 90px;
padding-left: 80px;
line-height: 1.2;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: center;
justify-content: center;
height: auto;
min-height: 95px;
padding: 15px 40px 15px 50px;
}
}
.mod-banner__type01 a::before {
content: "";
display: block;
position: absolute;
left: 50px;
top: 0;
width: 5px;
height: 70px;
background: #cb1f16;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a::before {
left: 25px;
top: 0;
width: 4px;
height: 70px;
}
}
.mod-banner__type01 a::after {
position: absolute;
right: 35px;
top: 50%;
display: block;
content: "";
width: 1.4em;
height: 1.4em;
border-top: 2px solid #2f201b;
border-right: 2px solid #2f201b;
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%);
line-height: 1.2;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a::after {
right: 25px;
}
}
.mod-banner__type01 a:link, .mod-banner__type01 a:visited, .mod-banner__type01 a:hover, .mod-banner__type01 a:active {
text-decoration: none;
}
.mod-banner__type01 a em {
padding-right: 60px;
font-size: 2.6rem;
font-weight: 400;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a em {
padding-right: 0;
font-size: 2rem;
}
}
.mod-banner__type01 a em small {
font-size: 1.6rem;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a em small {
font-size: 1.4rem;
}
}
.mod-banner__type01 a span {
font-size: 1.4rem;
}
@media only screen and (max-width: 767px) {
.mod-banner__type01 a span {
padding-top: 10px;
font-size: 1.2rem;
}
}
section:last-of-type .mod-banner__type01 {
margin-bottom: 0;
}
section:last-of-type .mod-banner__type01 + .mod-banner__type01 {
margin-top: 30px;
}
@media only screen and (max-width: 767px) {
section:last-of-type .mod-banner__type01 + .mod-banner__type01 {
margin-top: 20px;
}
}
.mod-title__style01 ~ .mod-banner__type01 {
margin-top: 0;
}
/* ===============================================
mod-def
=============================================== */
.mod-def__faq01 dt {
position: relative;
padding: 5px 0 20px 8rem;
font-size: 1.8rem;
/* color: #0080ac;*/
color: #333;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: 0.3s;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dt {
padding: 3px 35px 15px 5.5rem;
font-size: 1.6rem;
}
}
.mod-def__faq01 dt:not(:first-child) {
margin-top: 30px;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dt:not(:first-child) {
margin-top: 10px;
}
}
.mod-def__faq01 dt:hover {
cursor: pointer;
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dt:hover {
opacity: 1;
}
}
.mod-def__faq01 dt::after {
text-align: center;
content: "";
position: absolute;
right: 10px;
top: 5px;
font-size: 2.5rem;
line-height: 1;
width: 1em;
height: 1em;
border: 1px solid #333;
border-radius: 50%;
background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%2011v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z%22%2F%3E%3C%2Fsvg%3E") no-repeat 61% 55%;
background-size: 14px auto;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dt::after {
right: 0;
}
}
.mod-def__faq01 dt.is_open::after {
background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2012v1h23v-1h-23z%22%2F%3E%3C%2Fsvg%3E") no-repeat 61% 53%;
background-size: 14px auto;
}
.mod-def__faq01 dt span {
position: absolute;
left: 0;
top: 0;
color: #ce1f15;
font-size: 3.8rem;
font-family: brandon-grotesque,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 1.1;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dt span {
font-size: 2.7rem;
}
}
.mod-def__faq01 dd {
display: none;
position: relative;
padding-left: 8rem;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dd {
padding-left: 3.5rem;
padding-right: 0;
}
}
.mod-def__faq01 dd span {
position: absolute;
left: 5rem;
top: 0;
color: #ce1f15;
font-size: 2.3rem;
font-family: brandon-grotesque,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 1.1;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dd span {
left: 0.25em;
font-size: 2.1rem;
}
}
.mod-def__faq01 dd:not(:last-child) {
margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
.mod-def__faq01 dd:not(:last-child) {
margin-bottom: 20px;
}
}
.mod-def__faq01 dd .mod-list__bullet03 {
margin-top: 5px;
}
.mod-def__faq01 dd .mod-list__bullet03 a:link, .mod-def__faq01 dd .mod-list__bullet03 a:visited {
text-decoration: underline;
}
.mod-def__faq01 dd .mod-list__bullet03 a:hover, .mod-def__faq01 dd .mod-list__bullet03 a:active {
text-decoration: none;
}
/* ===============================================
mod-table
=============================================== */
/* mod-table__style01
----------------------- */
.mod-table__style01 {
width: 100%;
}
@media only screen and (max-width: 767px) {
.mod-table__style01 {
display: -webkit-flex;
display: flex;
}
.mod-table__style01 tr {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
}
.mod-table__style01 th {
padding: 10px 0;
font-size: 1.7rem;
font-weight: 400;
letter-spacing: 0.25em;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #807066;
}
@media only screen and (max-width: 767px) {
.mod-table__style01 th {
padding-top: 15px;
padding-bottom: 0;
font-size: 1.6rem;
border-bottom: none;
}
.mod-table__style01 th.mod-width__14em {
width: 100%;
padding-top: 0;
}
}
.mod-table__style01 td {
padding: 12px 0;
font-size: 1.4rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid #807066;
}
@media only screen and (max-width: 767px) {
.mod-table__style01 td {
padding-top: 10px;
padding-bottom: 15px;
}
}
/* mod-table__style02
----------------------- */
.mod-table__style02 {
width: 80%;
margin-top: 20px;
border-top: 1px solid #807066;
}
@media only screen and (max-width: 767px) {
.mod-table__style02 {
display: table;
width: 100%;
margin-top: 15px;
}
.mod-table__style02 tr {
display: table-row;
}
}
.mod-table__style02 th {
padding: 5px 0 5px 80px;
font-size: 1.4rem;
background: #efefef;
}
@media only screen and (max-width: 767px) {
.mod-table__style02 th {
padding-left: 20px;
}
}
.mod-table__style02 td {
padding: 5px 0 5px 80px;
font-size: 1.4rem;
}
@media only screen and (max-width: 767px) {
.mod-table__style02 td {
padding-left: 20px;
border-bottom-color: #ccc;
}
}
/* mod-table__style03
----------------------- */
.mod-table__style03 {
width: 100%;
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.mod-table__style03 {
width: 800px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px) {
.mod-table__style03.sp__no_scroll {
width: 100%;
}
.mod-table__style03.sp__no_scroll .mod-width__80p {
width: 65% !important;
}
.mod-table__style03.sp__no_scroll .mod-width__22p {
width: 35% !important;
}
}
@media only screen and (max-width: 767px) {
.mod-table__style03__wrapper {
overflow-x: auto;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px) {
.mod-table__style03__wrapper__500 {
overflow-x: auto;
margin-bottom: 20px;
}
.mod-table__style03__wrapper__500 .mod-table__style03 {
width: 500px !important;
}
.mod-table__style03__wrapper__500 .mod-table__style03 .mod-width__22p {
width: 24% !important;
}
.mod-table__style03__wrapper__500 .mod-table__style03 .mod-width__26p {
width: 27% !important;
}
}
.mod-table__style03 th {
padding: 8px 10px;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
vertical-align: top;
background: #e5e5e5;
border: 1px solid #807066;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
.mod-table__style03 th {
padding: 3px 5px;
font-size: 1.4rem;
letter-spacing: 0em;
}
}
.mod-table__style03 th:first-child {
border-left: none;
}
.mod-table__style03 th:last-child {
border-right: none;
}
.mod-table__style03 td {
padding: 8px 10px;
font-size: 1.4rem;
border: 1px solid #807066;
background: #fff;
letter-spacing: 0em;
}
@media only screen and (max-width: 767px) {
.mod-table__style03 td {
padding: 3px 5px;
font-size: 1.4rem;
}
}
.mod-table__style03 td:first-child {
border-left: none;
}
.mod-table__style03 td:last-child {
border-right: none;
}
.mod-table__style03 td a {
font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
.mod-table__style03 td a {
font-size: 1.6rem;
}
}
.mod-table__style03 td a:link {
text-decoration: underline;
color: #0080ac;
}
.mod-table__style03 td a:visited {
color: #0080ac;
opacity: 0.9;
}
.mod-table__style03 td a:hoevr, .mod-table__style03 td a:active {
text-decoration: none;
}
/* mod-table__style04
----------------------- */
.mod-table__style04 {
width: 100%;
margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
.mod-table__style04 {
width: 800px;
}
}
@media only screen and (max-width: 767px) {
.mod-table__style04__wrapper {
overflow-x: auto;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px) {
.mod-table__style04.sp__no_scroll {
width: 100%;
}
.mod-table__style04.sp__no_scroll .mod-width__80p {
width: 65% !important;
}
.mod-table__style04.sp__no_scroll .mod-width__22p {
width: 35% !important;
}
}
.mod-table__style04 th {
padding: 4px 6px;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
vertical-align: top;
background: #e5e5e5;
border: 1px solid #838383;
letter-spacing: 0.1em;
color: #333;
}
.mod-table__style04 th:first-child {
border-left: none;
}
.mod-table__style04 th:last-child {
border-right: none;
}
.mod-table__style04 td {
padding: 4px 6px;
font-size: 1.4rem;
border: 1px solid #838383;
text-align: center;
background: #fff;
letter-spacing: 0em;
color: #333;
}
.mod-table__style04 td:first-child {
border-left: none;
}
.mod-table__style04 td:last-child {
border-right: none;
}
/* ===============================================
mod-text
=============================================== */
.mod-text__center {
text-align: center;
}
.mod-text__right {
text-align: right;
}
.mod-text__indent1_5em {
display: block;
padding-left: 1.5em;
text-indent: -1.5em;
}
/* ===============================================
bg
=============================================== */
.bg_lightgray {
background: #f1f1f1;
}
/* ===============================================
head-panel
=============================================== */
.head-panel {
padding: 40px 0 50px;
}
@media only screen and (max-width: 767px) {
.head-panel {
padding: 0 0 25px;
}
}
.head-panel__title03 {
font-size: 2.6rem;
text-align: center;
font-weight: 400;
margin-bottom: 20px;
letter-spacing: 0.35em;
}
@media only screen and (max-width: 767px) {
.head-panel__title03 {
font-size: 2rem;
text-align: left;
margin-bottom: 20px;
letter-spacing: 0.15em;
}
}
.head-panel__title04 {
font-size: 1.8rem;
text-align: center;
font-weight: 400;
margin-bottom: 20px;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
.head-panel__title04 {
margin-bottom: 15px;
letter-spacing: 0;
text-align: left;
}
}
.head-panel__text:not(:last-child) {
margin-bottom: 1.5em;
}
@media only screen and (max-width: 767px) {
.head-panel__text.mod-text__center {
text-align: left !important;
}
}
/* ===============================================
pickup-panels
=============================================== */
.section-pickup .wrapper {
max-width: 100%;
}
@media print, screen and (max-width: 1100px) {
.section-pickup .wrapper {
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (max-width: 767px) {
.section-pickup .wrapper {
max-width: inherit;
}
}
.section-pickup:nth-child(even) .pickup-panels {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media only screen and (max-width: 767px) {
.section-pickup:nth-child(even) .pickup-panels {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.section-pickup:nth-child(even) .pickup-panels__link a::before {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.pickup-panels {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
@media only screen and (max-width: 767px) {
.pickup-panels {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.pickup-panels:hover {
cursor: pointer;
}
.pickup-panels:hover .pickup-panels__box {
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.pickup-panels:hover .pickup-panels__box {
opacity: 1;
}
}
.pickup-panels__box {
position: relative;
-webkit-flex-basis: 50%;
flex-basis: 50%;
padding: 0 8.3333333333vw;
transition: 0.3s;
}
@media only screen and (max-width: 767px) {
.pickup-panels__box {
-webkit-flex-basis: 100%;
flex-basis: 100%;
padding: 0 5vw;
-webkit-order: 2;
order: 2;
}
}
.pickup-panels__title {
margin-top: -2.5vw;
margin-bottom: 1.6666666667vw;
font-size: 2.5vw;
line-height: 1.2;
font-family: brandon-grotesque,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
@media only screen and (max-width: 767px) {
.pickup-panels__title {
margin-top: 15px;
margin-bottom: 10px;
font-size: 2.8rem;
line-height: 1.2;
}
}
.pickup-panels__lead {
font-size: 1.5vw;
margin-bottom: 1.3vw;
font-weight: 400;
line-height: 1.6;
}
@media only screen and (max-width: 767px) {
.pickup-panels__lead {
font-size: 1.8rem;
margin-bottom: 15px;
line-height: 1.5;
}
}
.pickup-panels__text {
margin-bottom: 2.5vw;
}
@media only screen and (max-width: 767px) {
.pickup-panels__text {
margin-bottom: 20px;
}
}
.pickup-panels__link {
font-size: 1.6rem;
}
@media only screen and (max-width: 767px) {
.pickup-panels__link {
padding-bottom: 30px;
text-align: right;
font-size: 1.8rem;
}
}
.pickup-panels__link a {
display: block;
}
.pickup-panels__link a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100vw;
height: 36.5vw;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/* ã‚¹ãƒžãƒ›ãƒªãƒ³ã‚¯é ˜åŸŸèª¿æ•´ */
@media only screen and (max-width: 767px) {
.section-pickup:nth-child(even) .pickup-panels__link a::before,
.pickup-panels__link a::before {
top: 50%;
width: 100vw;
height: 100%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
/* background-color: rgba(255,0,0,0.5);*/
}
}
.pickup-panels__link a:link, .pickup-panels__link a:visited, .pickup-panels__link a:hover, .pickup-panels__link a:active {
opacity: 1;
}
.pickup-panels__img {
-webkit-flex-basis: 50%;
flex-basis: 50%;
transition: 0.3s;
}
@media only screen and (max-width: 767px) {
.pickup-panels__img {
-webkit-flex-basis: 100%;
flex-basis: 100%;
-webkit-order: 1;
order: 1;
}
}
_:-ms-fullscreen,
:root .pickup-panels__box {
flex-basis: calc(50% - 16.66vw);
}
/* ===============================================
relation__panel
=============================================== */
.relation__panel {
margin-top: 100px;
}
/* ===============================================
delighter
=============================================== */
.delighter.scroll__fade {
opacity: 0;
transition: all 1s ease-in-out;
}
.delighter.scroll__fade.started {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.delighter.scroll__center {
-webkit-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
transition: all 1s ease-in-out;
}
.delighter.scroll__center.started {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.delighter.scroll__right {
-webkit-transform: translate(-25%);
transform: translate(-25%);
opacity: 0;
transition: all 1s ease-in-out;
}
.delighter.scroll__right.started {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.delighter.scroll__left {
-webkit-transform: translate(25%);
transform: translate(25%);
opacity: 0;
transition: all 1s ease-in-out;
}
.delighter.scroll__left.started {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.delighter.scroll__text {
opacity: 0;
transition: all 1s ease-in-out;
}
.delighter.scroll__text.started {
-webkit-transform: none;
transform: none;
opacity: 1;
}
/* ===============================================
mod-mb mod-mt
=============================================== */
.mod-mb__5px {
margin-bottom: 5px !important;
}
.mod-mb__10px {
margin-bottom: 10px !important;
}
.mod-mb__15px {
margin-bottom: 15px !important;
}
.mod-mb__20px {
margin-bottom: 20px !important;
}
.mod-mb__30px {
margin-bottom: 30px !important;
}
.mod-mb__50px {
margin-bottom: 50px !important;
}
.mod-mb__80px {
margin-bottom: 80px !important;
}
.mod-mt__10px {
margin-top: 10px !important;
}
.mod-mt__15px {
margin-top: 15px !important;
}
.mod-mt__20px {
margin-top: 20px !important;
}
/* ===============================================
mod-width
=============================================== */
@media only screen and (min-width: 768px) {
.mod-width__4em {
width: 4em;
}
.mod-width__5em {
width: 5em;
}
.mod-width__6em {
width: 6em;
}
.mod-width__7em {
width: 7em;
}
.mod-width__8em {
width: 8em;
}
.mod-width__9em {
width: 9em;
}
.mod-width__10em {
width: 10em;
}
.mod-width__12em {
width: 12em;
}
.mod-width__14em {
width: 14em;
}
.mod-width__15em {
width: 15em;
}
.mod-width__16em {
width: 16em;
}
.mod-width__17em {
width: 17em;
}
.mod-width__18em {
width: 18em;
}
.mod-width__20em {
width: 20em;
}
.mod-width__16_0p {
width: 16%;
}
.mod-width__16p {
width: 16.66%;
}
.mod-width__20p {
width: 20%;
}
.mod-width__22p {
width: 22.2%;
}
.mod-width__26p {
width: 26%;
}
.mod-width__33p {
width: 33.3%;
}
.mod-width__36p {
width: 36%;
}
.mod-width__50p {
width: 50%;
}
.mod-width__58p {
width: 58%;
}
.mod-width__62p {
width: 62%;
}
.mod-width__66p {
width: 66.6%;
}
.mod-width__80p {
width: 80%;
}
.mod-width__100p {
width: 100% !important;
-webkit-flex-basis: 100% !important;
flex-basis: 100% !important;
}
}
.letter-space_none {
letter-spacing: 0;
}