@import "style.css";
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
.p-achieve {
background-color: var(--color-base);
padding-top: calc(66 * var(--width-ratio-1920));
padding-bottom: calc(139 * var(--width-ratio-1920));
}
.p-achieve__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-achieve__list {
display: flex;
flex-wrap: wrap;
column-gap: calc(32 * var(--width-ratio-1920));
row-gap: calc(37 * var(--width-ratio-1920));
}
.p-achieve__item {
width: calc(336 * var(--width-ratio-1920));
height: calc(311 * var(--width-ratio-1920));
background-color: #fff;
border-radius: calc(10 * var(--width-ratio-1920));
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.p-achieve__item--2col {
width: calc(704 * var(--width-ratio-1920));
height: calc(299 * var(--width-ratio-1920));
flex-direction: row;
align-items: flex-start;
column-gap: calc(34 * var(--width-ratio-1920));
padding-top: calc(20 * var(--width-ratio-1920));
}
.p-achieve__item img {
height: auto;
object-fit: cover;
}
.p-achieve__item:nth-of-type(1) img {
width: calc(250 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(2) img {
width: calc(251 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(3) img {
width: calc(106 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(4) img {
width: calc(166 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(5) img {
width: calc(94 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(6) img {
width: calc(148 * var(--width-ratio-1920));
margin-bottom: calc(-11 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(7) img {
width: calc(154 * var(--width-ratio-1920));
margin-bottom: calc(10 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(8) img {
width: calc(162 * var(--width-ratio-1920));
margin-bottom: calc(10 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(9) img {
width: calc(162 * var(--width-ratio-1920));
margin-bottom: calc(10 * var(--width-ratio-1920));
}
.p-achieve__item:nth-of-type(10) img {
width: calc(154 * var(--width-ratio-1920));
margin-bottom: calc(13 * var(--width-ratio-1920));
}
.p-achieve__item-info--2col .p-achieve__item-info {
display: flex;
flex-direction: column;
align-items: center;
}
.p-achieve__item-info .num {
font-size: calc(51 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.45;
text-align: center;
color: var(--color-brown);
}
.p-achieve__item--2col .p-achieve__item-info .num {
font-size: calc(80 * var(--width-ratio-1920));
text-align: left;
margin-bottom: calc(6 * var(--width-ratio-1920));
}
.p-achieve__item-info p {
font-size: max(calc(22 * var(--width-ratio-1920)),10px);
font-weight: 500;
letter-spacing: 0;
line-height: 1.45;
text-align: center;
color: var(--color-brown);
margin-top: calc(-8 * var(--width-ratio-1920));
}
.p-achieve__item--2col .p-achieve__item-info p {
font-family: var(--font-noto-sans);
font-size: calc(28 * var(--width-ratio-1920));
text-align: left;
line-height: 1.43;
margin-top: 0;
}
@media screen and (max-width: 768px) {
.p-achieve {
padding-top: calc(46 * var(--width-ratio));
padding-bottom: calc(50 * var(--width-ratio));
padding-left: calc(20 * var(--width-ratio));
padding-right: calc(20 * var(--width-ratio));
}
.p-achieve .c-secttl {
width: 100vw;
font-size: calc(40 * var(--width-ratio));
margin-left: calc(-20 * var(--width-ratio));
}
.p-achieve__inner {
width: 100%;
margin: 0 auto;
}
.p-achieve__list {
column-gap: calc(10.5 * var(--width-ratio));
row-gap: calc(27 * var(--width-ratio));
}
.p-achieve__item {
width: calc(109 * var(--width-ratio));
height: calc(136.6 * var(--width-ratio));
}
.p-achieve__item--2col {
width: calc(167 * var(--width-ratio));
height: auto;
flex-direction: column;
align-items: center;
column-gap: unset;
row-gap: unset;
padding-top: calc(9 * var(--width-ratio));
padding-bottom: calc(16 * var(--width-ratio));
}
.p-achieve__item--2col .p-achieve__item-info .num {
font-size: calc(32.5 * var(--width-ratio));
text-align: center;
margin-bottom: 0;
}
.p-achieve__item--2col .p-achieve__item-info p {
height: auto;
font-size: calc(11 * var(--width-ratio));
text-align: center;
margin-top: calc(-2.5 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(1) img {
width: calc(125 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(2) img {
width: calc(125 * var(--width-ratio));
}
.p-achieve__item-info .num {
font-size: calc(20 * var(--width-ratio));
}
.p-achieve__item-info p {
font-family: var(--font-noto-sans);
height: calc(30 * var(--width-ratio));
display: flex;
align-items: center;
justify-content: center;
font-size: calc(8.5 * var(--width-ratio));
line-height: 1.5;
text-align: center;
margin: 0 auto;
}
.p-achieve__item:nth-of-type(3) img {
width: calc(34 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(4) img {
width: calc(55 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(5) img {
width: calc(31 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(6) img {
width: calc(49 * var(--width-ratio));
margin-bottom: 0;
}
.p-achieve__item:nth-of-type(7) img {
width: calc(51 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(8) img {
width: calc(54 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(9) img {
width: calc(53 * var(--width-ratio));
margin-bottom: calc(3 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(10) img {
width: calc(51 * var(--width-ratio));
margin-bottom: calc(3 * var(--width-ratio));
}
}
@media screen and (max-width: 480px) {
.p-achieve {
padding-top: calc(46 * var(--width-ratio));
padding-bottom: calc(50 * var(--width-ratio));
padding-left: calc(20 * var(--width-ratio));
padding-right: calc(20 * var(--width-ratio));
}
.p-achieve__inner {
width: 100%;
margin: 0 auto;
}
.p-achieve__list {
column-gap: calc(16 * var(--width-ratio));
row-gap: calc(27 * var(--width-ratio));
}
.p-achieve__item {
width: calc(167 * var(--width-ratio));
height: calc(207 * var(--width-ratio));
}
.p-achieve__item--2col {
width: 100%;
height: auto;
flex-direction: column;
align-items: center;
column-gap: unset;
row-gap: unset;
padding-top: calc(18 * var(--width-ratio));
padding-bottom: calc(33 * var(--width-ratio));
}
.p-achieve__item--2col .p-achieve__item-info .num {
font-size: calc(65 * var(--width-ratio));
text-align: center;
margin-bottom: 0;
}
.p-achieve__item--2col .p-achieve__item-info p {
height: auto;
font-size: calc(22 * var(--width-ratio));
text-align: center;
margin-top: calc(-5 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(1) img {
width: calc(250 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(2) img {
width: calc(251 * var(--width-ratio));
}
.p-achieve__item-info .num {
font-size: calc(30 * var(--width-ratio));
}
.p-achieve__item-info p {
font-family: var(--font-noto-sans);
height: calc(45 * var(--width-ratio));
display: flex;
align-items: center;
font-size: calc(16 * var(--width-ratio));
line-height: 1.5;
margin-top: 0;
}
.p-achieve__item:nth-of-type(3) img {
width: calc(52 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(4) img {
width: calc(83 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(5) img {
width: calc(47 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(6) img {
width: calc(74 * var(--width-ratio));
margin-bottom: 0;
}
.p-achieve__item:nth-of-type(7) img {
width: calc(77 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(8) img {
width: calc(81 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(9) img {
width: calc(80 * var(--width-ratio));
margin-bottom: calc(5 * var(--width-ratio));
}
.p-achieve__item:nth-of-type(10) img {
width: calc(77 * var(--width-ratio));
margin-bottom: calc(5 * var(--width-ratio));
}
}
/* Feature お任せください */
.p-feature {
background-color: var(--color-base);
padding-top: calc(155 * var(--width-ratio-1920));
padding-bottom: calc(253 * var(--width-ratio-1920));
}
.p-feature__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-feature h2 {
font-size: calc(67 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-align: center;
color: #fff;
text-align: center;
margin-bottom: calc(353 * var(--width-ratio-1920));
}
.p-feature h2 span {
display: inline-block;
font-size: calc(113 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.43;
text-align: center;
color: #fff;
position: relative;
z-index: 1;
padding-bottom: calc(30 * var(--width-ratio-1920));
margin-right: 0.2em;
}
.p-feature h2 span::after {
content: '';
position: absolute;
bottom: calc(40 * var(--width-ratio-1920));
left: 0;
width: 101%;
height: calc(28 * var(--width-ratio-1920));
background-color: rgba(255, 255, 255, 0.5);
z-index: -1;
}
.p-feature__list {
width: 100%;
}
.p-feature__item {
width: 100%;
position: relative;
}
.p-feature__item img {
width: calc(1000 * var(--width-ratio-1920));
height: auto;
object-fit: contain;
position: absolute;
z-index: 0;
}
.p-feature__item:nth-of-type(1) {
margin-bottom: calc(266 * var(--width-ratio-1920));
}
.p-feature__item:nth-of-type(2) {
margin-bottom: calc(459 * var(--width-ratio-1920));
}
.p-feature__item:nth-of-type(1) img {
top: calc(-167 * var(--width-ratio-1920));
left: calc(-240 * var(--width-ratio-1920));
border-radius: 0 calc(50 * var(--width-ratio-1920)) calc(50 * var(--width-ratio-1920)) 0;
}
.p-feature__item:nth-of-type(2) img {
top: calc(-143 * var(--width-ratio-1920));
right: calc(-240 * var(--width-ratio-1920));
border-radius: calc(50 * var(--width-ratio-1920)) 0 0 calc(50 * var(--width-ratio-1920));
}
.p-feature__item:nth-of-type(3) img {
top: calc(-327 * var(--width-ratio-1920));
left: calc(-240 * var(--width-ratio-1920));
border-radius: 0 calc(50 * var(--width-ratio-1920)) calc(50 * var(--width-ratio-1920)) 0;
}
.p-feature__cnt {
width: calc(996 * var(--width-ratio-1920));
font-size: calc(47 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.49;
color: #fff;
position: relative;
z-index: 1;
background-color: var(--color-base);
border-radius: calc(20 * var(--width-ratio-1920)) calc(20 * var(--width-ratio-1920)) 0 0;
padding: calc(41 * var(--width-ratio-1920)) 0 calc(66 * var(--width-ratio-1920)) calc(46 * var(--width-ratio-1920));
}
.p-feature__item:nth-of-type(2n+1) .p-feature__cnt {
margin-left: auto;
}
.p-feature__item:nth-of-type(2) .p-feature__cnt {
padding: calc(52 * var(--width-ratio-1920)) 0 calc(66 * var(--width-ratio-1920)) 0;
}
.p-feature__cnt h3 {
font-size: calc(47 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.49;
margin-bottom: calc(26 * var(--width-ratio-1920));
}
.p-feature__cnt h3 .cnt1_col1 {
display: flex;
align-items: flex-end;
margin-bottom: 0.3em;
}
.p-feature__cnt h3 .cnt1_col2 {
display: inline-block;
}
.p-feature__cnt h3 .cnt2_col1 {
display: block;
width: fit-content;
margin-bottom: 0.5em;
}
.p-feature__cnt h3 span {
font-family: var(--font-noto-sans);
display: inline-block;
font-size: calc(74 * var(--width-ratio-1920));
font-weight: 900;
letter-spacing: 0;
line-height: 1.43;
color: #fff;
background-color: var(--color-gold);
padding: 0px calc(30 * var(--width-ratio-1920)) calc(10 * var(--width-ratio-1920)) calc(10 * var(--width-ratio-1920));
}
.p-feature__item:nth-of-type(1) .p-feature__cnt h3 span {
margin-left: 0.2em;
}
.p-feature__cnt p {
width: 103%;
font-family: var(--font-noto-sans);
font-size: max(calc(28 * var(--width-ratio-1920)),14px);
font-weight: 400;
letter-spacing: 0;
line-height: 2.14;
color: #fff;
}
.p-feature__2col {
display: flex;
margin-top: calc(60 * var(--width-ratio-1920));
margin-bottom: calc(27 * var(--width-ratio-1920));
}
.p-feature__2col-item {
width: 50%;
height: calc(141 * var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
}
.p-feature__2col-item:nth-of-type(1) {
font-size: max(calc(23 * var(--width-ratio-1920)),12px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.43;
color: #D2C7B2;
background-color: #500303;
}
.p-feature__2col-item:nth-of-type(2) {
font-size: max(calc(29 * var(--width-ratio-1920)),14px);
font-weight: 400;
letter-spacing: 0;
color: #fff;
background-color: var(--color-red-light);
}
.p-feature__link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: max(calc(73 * var(--width-ratio-1920)),36px);
background-color: var(--color-green);
font-size: max(calc(29 * var(--width-ratio-1920)),14px);
font-weight: 400;
letter-spacing: 0;
color: #fff;
}
.p-feature__comment {
text-indent: -1em;
padding-left: 1em;
}
.p-feature__btns {
width: max(calc(583 * var(--width-ratio-1920)), 380px);
position: relative;
margin-top: max(calc(75 * var(--width-ratio-1920)), 48px);
margin-bottom: max(calc(45 * var(--width-ratio-1920)), 27px);
}
.p-feature__btns-link {
width: 100%;
height: max(calc(113 * var(--width-ratio-1920)), 85px);
display: flex;
align-items: center;
justify-content: center;
border-radius: max(calc(57 * var(--width-ratio-1920)), 40px);
font-size: max(calc(37 * var(--width-ratio-1920)), 27px);
font-weight: 700;
letter-spacing: 0;
color: #fff;
text-decoration: none;
background-color: var(--color-red-light);
border: 5px solid var(--color-red);
position: relative;
transition: all 0.3s ease;
}
.p-feature__btns-link:hover {
background-color: #7a0000;
transform: translateY(-2px);
opacity: 1;
}
.p-feature__bnts-balloon {
width: max(calc(439 * var(--width-ratio-1920)), 313px);
height: max(calc(67 * var(--width-ratio-1920)), 53px);
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-gold);
border-radius: max(calc(34 * var(--width-ratio-1920)), 32px);
font-size: max(calc(25 * var(--width-ratio-1920)), 16px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.25;
text-align: center;
color: #fff;
position: absolute;
bottom: calc(100% - 14px);
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.p-feature__bnts-balloon::after {
content: "";
display: block;
width: max(calc(28 * var(--width-ratio-1920)), 22px);
height: max(calc(24 * var(--width-ratio-1920)), 19px);
background-color: var(--color-gold);
clip-path: polygon(50% 100%, 0 0, 100% 0);
position: absolute;
bottom: max(calc(-15 * var(--width-ratio-1920)), -11px);
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
@media screen and (max-width: 768px) {
.p-feature {
padding-top: 58px;
padding-bottom: 106px;
}
.p-feature__inner {
width: 100%;
padding: 0 26px;
margin: 0 auto;
}
.p-feature h2 {
font-size: 26px;
margin-bottom: 38px;
}
.p-feature h2 span {
font-size: min(calc(43 * var(--width-ratio)), 57px);
line-height: 1.1;
padding-bottom: 0;
margin-right: unset;
}
.p-feature h2 span:nth-of-type(1) {
margin-top: 0.2em;
}
.p-feature h2 span:nth-of-type(2) {
margin-bottom: 0.2em;
}
.p-feature h2 span::after {
bottom: calc(-1 * var(--width-ratio));
left: 0;
width: 101%;
height: calc(9 * var(--width-ratio));
}
.p-feature__item:nth-of-type(1),
.p-feature__item:nth-of-type(2) {
margin-bottom: 87px;
}
.p-feature__item img {
width: calc(100vw - 20 * var(--width-ratio));
position: relative;
z-index: 0;
top: 0;
left: 0;
margin-left: calc(-20 * var(--width-ratio));
}
.p-feature__item:nth-of-type(1) img,
.p-feature__item:nth-of-type(3) img {
top: 0;
left: unset;
border-radius: 0 calc(20 * var(--width-ratio)) calc(20 * var(--width-ratio)) 0;
}
.p-feature__item:nth-of-type(2) img {
top: 0;
right: unset;
margin-left: unset;
margin-right: calc(-20 * var(--width-ratio));
border-radius: calc(20 * var(--width-ratio)) 0 0 calc(20 * var(--width-ratio));
}
.p-feature__cnt {
width: 100%;
font-size: 33px;
line-height: 1.49;
border-radius: 0;
padding: calc(37 * var(--width-ratio)) 0 0;
}
.p-feature__cnt h3 {
width: 102%;
font-size: min(calc(25 * var(--width-ratio)), 33px);
}
.p-feature__cnt h3 span {
font-size: min(calc(26 * var(--width-ratio)), 34px);
padding: 0px min(calc(6 * var(--width-ratio)), 8px) min(calc(4 * var(--width-ratio)), 5px) min(calc(6 * var(--width-ratio)), 8px);
}
.p-feature__cnt h3 .cnt1_col1 {
justify-content: center;
}
.p-feature__cnt h3 .cnt1_col2 {
display: block;
text-align: center;
}
.p-feature__cnt p {
width: 100%;
font-size: min(calc(16 * var(--width-ratio)), 21px);
line-height: 1.875;
}
.p-feature__2col {
flex-direction: column;
row-gap: min(calc(6 * var(--width-ratio)), 8px);
margin-top: min(calc(60 * var(--width-ratio)), 78px);
margin-bottom: min(calc(6 * var(--width-ratio)), 8px);
}
.p-feature__2col-item {
width: min(calc(350 * var(--width-ratio)), 457px);
text-align: center;
height: min(calc(81 * var(--width-ratio)), 106px);
margin: 0 auto;
}
.p-feature__2col-item:nth-of-type(1) {
font-size: min(calc(16 * var(--width-ratio)), 21px);
font-weight: 400;
color: #fff;
background-color: var(--color-gold);
}
.p-feature__2col-item:nth-of-type(2) {
font-size: min(calc(16 * var(--width-ratio)), 21px);
font-weight: 400;
color: #fff;
background-color: var(--color-red-light);
}
.p-feature__link {
width: min(calc(350 * var(--width-ratio)), 457px);
font-size: min(calc(16 * var(--width-ratio)), 21px);
height: min(calc(81 * var(--width-ratio)), 106px);
margin: 0 auto;
}
.p-feature__item:nth-of-type(2) .p-feature__cnt {
padding: min(calc(37 * var(--width-ratio)), 48px) 0 0;
}
.p-feature__btns {
width: min(calc(349 * var(--width-ratio)), 583px);
margin: 75px auto 45px;
}
.p-feature__btns-link {
height: min(calc(68 * var(--width-ratio)), 113px);
border-radius: 57px;
font-size: min(calc(27 * var(--width-ratio)), 37px);
}
.p-feature__bnts-balloon {
width: min(calc(313 * var(--width-ratio)), 439px);
height: min(calc(53 * var(--width-ratio)), 67px);
border-radius: 34px;
font-size: min(calc(16 * var(--width-ratio)), 25px);
bottom: calc(100% - 6px);
z-index: 1;
}
}
@media screen and (max-width: 480px) {
.p-feature {
padding-top: calc(45 * var(--width-ratio));
padding-bottom: calc(82 * var(--width-ratio));
}
.p-feature__inner {
width: 100%;
padding: 0 calc(20 * var(--width-ratio));
margin: 0 auto;
}
.p-feature h2 {
font-size: calc(20 * var(--width-ratio));
margin-bottom: calc(29 * var(--width-ratio));
}
.p-feature h2 span {
font-size: calc(43 * var(--width-ratio));
line-height: 1.1;
padding-bottom: 0;
margin-right: unset;
}
.p-feature h2 span:nth-of-type(1) {
margin-top: 0.2em;
}
.p-feature h2 span:nth-of-type(2) {
margin-bottom: 0.2em;
}
.p-feature h2 span::after {
bottom: calc(-1 * var(--width-ratio));
left: 0;
width: 101%;
height: calc(9 * var(--width-ratio));
}
.p-feature__item:nth-of-type(1),
.p-feature__item:nth-of-type(2) {
margin-bottom: calc(67 * var(--width-ratio));
}
.p-feature__item img {
width: calc(100vw - 20 * var(--width-ratio));
position: relative;
z-index: 0;
top: 0;
left: 0;
margin-left: calc(-20 * var(--width-ratio));
}
.p-feature__item:nth-of-type(1) img,
.p-feature__item:nth-of-type(3) img {
top: 0;
left: unset;
border-radius: 0 calc(20 * var(--width-ratio)) calc(20 * var(--width-ratio)) 0;
}
.p-feature__item:nth-of-type(2) img {
top: 0;
right: unset;
margin-left: unset;
margin-right: calc(-20 * var(--width-ratio));
border-radius: calc(20 * var(--width-ratio)) 0 0 calc(20 * var(--width-ratio));
}
.p-feature__cnt {
width: 100%;
font-size: calc(25 * var(--width-ratio));
line-height: 1.49;
border-radius: 0;
padding: calc(37 * var(--width-ratio)) 0 0;
}
.p-feature__cnt h3 {
width: 102%;
font-size: calc(25 * var(--width-ratio));
}
.p-feature__cnt h3 span {
font-size: calc(26 * var(--width-ratio));
padding: 0px calc(6 * var(--width-ratio)) calc(4 * var(--width-ratio)) calc(6 * var(--width-ratio));
}
.p-feature__cnt h3 .cnt1_col1 {
display: flex;
align-items: flex-end;
margin-bottom: 0.3em;
}
.p-feature__cnt h3 .cnt1_col2 {
display: inline-block;
}
.p-feature__cnt p {
width: 100%;
font-size: calc(16 * var(--width-ratio));
line-height: 1.875;
}
.p-feature__2col {
flex-direction: column;
row-gap: calc(6 * var(--width-ratio));
margin-bottom: calc(6 * var(--width-ratio));
}
.p-feature__2col-item {
width: 100%;
text-align: center;
height: calc(81 * var(--width-ratio));
}
.p-feature__2col-item:nth-of-type(1) {
font-size: calc(16 * var(--width-ratio));
font-weight: 400;
color: #fff;
background-color: var(--color-gold);
}
.p-feature__2col-item:nth-of-type(2) {
font-size: calc(16 * var(--width-ratio));
font-weight: 400;
color: #fff;
background-color: var(--color-red-light);
}
.p-feature__link {
font-size: calc(16 * var(--width-ratio));
}
.p-feature__item:nth-of-type(2) .p-feature__cnt {
padding: calc(37 * var(--width-ratio)) 0 0;
}
}
/* CEO */
.p-ceo {
background: url(../img/bg_ceo.webp) no-repeat center center / cover;
padding-top: calc(207 * var(--width-ratio-1920));
padding-bottom: calc(302 * var(--width-ratio-1920));
}
.p-ceo__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-ceo h2 {
font-size: calc(65 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.47;
text-align: center;
color: var(--color-brown);
text-align: center;
margin-bottom: calc(23 * var(--width-ratio-1920));
}
.p-ceo__flex {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--color-brown);
border-bottom: 1px solid var(--color-brown);
padding-bottom: calc(72 * var(--width-ratio-1920));
margin-bottom: calc(93 * var(--width-ratio-1920));
}
.p-ceo__flex-img {
width: 37%;
display: flex;
justify-content: center;
padding-top: calc(41 * var(--width-ratio-1920));
}
.p-ceo__flex-img img {
width: calc(400 * var(--width-ratio-1920));
height: auto;
object-fit: contain;
}
.p-ceo__flex-txt {
width: 63%;
padding-top: calc(37.6 * var(--width-ratio-1920));
}
.p-ceo__flex-txt .name {
font-size: calc(55 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1;
color: var(--color-brown);
margin-bottom: calc(33.7 * var(--width-ratio-1920));
}
.p-ceo__flex-txt .txt {
font-size: max(calc(28 * var(--width-ratio-1920)),16px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.78;
color: var(--color-brown);
}
.p-coe__history {
width: 100%;
background-color: #fff;
border-radius: calc(20 * var(--width-ratio-1920));
padding: calc(91 * var(--width-ratio-1920)) calc(119 * var(--width-ratio-1920));
}
.p-coe__history-item {
display: flex;
align-items: flex-start;
}
.p-coe__history-item .year {
width: calc(140 * var(--width-ratio-1920));
font-size: max(calc(30 * var(--width-ratio-1920)),14px);
font-weight: 700;
letter-spacing: 0;
line-height: 2;
color: var(--color-brown);
flex-shrink: 0;
}
.p-coe__history-item .txt {
font-size: max(calc(30 * var(--width-ratio-1920)),14px);
font-weight: 700;
letter-spacing: 0;
line-height: 2;
color: var(--color-brown);
border-left: 1px solid var(--color-brown);
padding-left: calc(60 * var(--width-ratio-1920));
position: relative;
}
.p-coe__history-item .txt::before {
content: '';
display: block;
position: absolute;
top: calc(20 * var(--width-ratio-1920));
left: 0;
width: calc(23 * var(--width-ratio-1920));
height: calc(23 * var(--width-ratio-1920));
background-color: var(--color-brown);
border-radius: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
.p-ceo {
background: url(../img/bg_ceo_sp.webp) no-repeat center center / cover;
padding-top: min(calc(57 * var(--width-ratio)), 74px);
padding-bottom: min(calc(67 * var(--width-ratio)), 87px);
}
.p-ceo__inner {
width: 100%;
padding: 0 min(calc(20 * var(--width-ratio)), 26px);
}
.p-ceo h2 {
font-size: min(calc(30 * var(--width-ratio)), 39px);
margin-bottom: min(calc(11 * var(--width-ratio)), 14px);
}
.p-ceo__flex {
flex-direction: column;
justify-content: flex-start;
padding-bottom: min(calc(26 * var(--width-ratio)), 34px);
margin-bottom: min(calc(63 * var(--width-ratio)), 82px);
}
.p-ceo__flex-img {
width: 100%;
display: flex;
justify-content: center;
padding-top: min(calc(30 * var(--width-ratio)), 39px);
}
.p-ceo__flex-img img {
width: min(calc(283 * var(--width-ratio)), 371px);
}
.p-ceo__flex-txt {
width: 100%;
padding-top: 0;
}
.p-ceo__flex-txt .name {
font-size: min(calc(30 * var(--width-ratio)), 39px);
text-align: center;
line-height: 1.66;
margin-bottom: min(calc(40 * var(--width-ratio)), 52px);
}
.p-ceo__flex-txt .txt {
font-size: min(calc(18 * var(--width-ratio)), 23px);
line-height: 2.78;
}
.p-coe__history {
border-radius: min(calc(20 * var(--width-ratio)), 26px);
padding: min(calc(27 * var(--width-ratio)), 35px) min(calc(33 * var(--width-ratio)), 43px) min(calc(28*var(--width-ratio)), 37px) min(calc(22*var(--width-ratio)), 29px);
}
.p-coe__history-item .year {
width: min(calc(71 * var(--width-ratio)), 93px);
font-size: min(calc(15 * var(--width-ratio)), 19px);
flex-shrink: 0;
}
.p-coe__history-item .txt {
font-size: min(calc(13 * var(--width-ratio)), 17px);
padding-left: min(calc(31 * var(--width-ratio)), 40px);
}
.p-coe__history-item .txt::before {
top: min(calc(9 * var(--width-ratio)), 11px);
left: 0;
width: min(calc(11.9 * var(--width-ratio)), 15px);
height: min(calc(11.9 * var(--width-ratio)), 15px);
}
}
@media screen and (max-width: 480px) {
.p-ceo {
background: url(../img/bg_ceo_sp.webp) no-repeat center center / cover;
padding-top: calc(57 * var(--width-ratio));
padding-bottom: calc(67 * var(--width-ratio));
}
.p-ceo__inner {
width: 100%;
padding: 0 calc(20 * var(--width-ratio));
}
.p-ceo h2 {
font-size: calc(30 * var(--width-ratio));
margin-bottom: calc(11 * var(--width-ratio));
}
.p-ceo__flex {
flex-direction: column;
justify-content: flex-start;
padding-bottom: calc(26 * var(--width-ratio));
margin-bottom: calc(63 * var(--width-ratio));
}
.p-ceo__flex-img {
width: 100%;
display: flex;
justify-content: center;
padding-top: calc(30 * var(--width-ratio));
}
.p-ceo__flex-img img {
width: calc(283 * var(--width-ratio));
}
.p-ceo__flex-txt {
width: 100%;
padding-top: 0;
}
.p-ceo__flex-txt .name {
font-size: calc(30 * var(--width-ratio));
text-align: center;
line-height: 1.66;
margin-bottom: calc(40 * var(--width-ratio));
}
.p-ceo__flex-txt .txt {
font-size: calc(18 * var(--width-ratio));
line-height: 2.78;
}
.p-coe__history {
border-radius: calc(20 * var(--width-ratio));
padding: calc(27 * var(--width-ratio)) calc(33 * var(--width-ratio)) calc(28*var(--width-ratio)) calc(22*var(--width-ratio));
}
.p-coe__history-item .year {
width: calc(71 * var(--width-ratio));
font-size: calc(15 * var(--width-ratio));
flex-shrink: 0;
}
.p-coe__history-item .txt {
font-size: calc(13 * var(--width-ratio));
padding-left: calc(31 * var(--width-ratio));
}
.p-coe__history-item .txt::before {
top: calc(9 * var(--width-ratio));
left: 0;
width: calc(11.9 * var(--width-ratio));
height: calc(11.9 * var(--width-ratio));
}
}
/* Flow */
.p-flow {
background-color: var(--color-base);
padding-top: calc(144 * var(--width-ratio-1920));
}
.p-flow__inner {
margin: 0 auto;
width: 100%;
}
.p-flow__btns {
display: flex;
align-items: center;
justify-content: center;
column-gap: calc(78 * var(--width-ratio-1920));
padding: 0 20px;
margin-bottom: calc(118 * var(--width-ratio-1920));
}
.p-flow__btn-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: max(calc(16 * var(--width-ratio-1920)), 10px);
}
.p-flow__btn-item-txt {
font-family: var(--font-noto-sans);
font-size: max(calc(14 * var(--width-ratio-1920)), 12px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
color: #fff;
}
.p-flow__btn {
width: max(calc(396 * var(--width-ratio-1920)), 257px);
height: max(calc(68 * var(--width-ratio-1920)), 44px);
border-radius: max(calc(13 * var(--width-ratio-1920)), 8px);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-noto-sans);
font-size: max(calc(30 * var(--width-ratio-1920)), 20px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
color: #fff;
border: none;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.p-flow__btn--gold {
background-color: var(--color-gold);
}
.p-flow__btn--green {
background-color: var(--color-green);
}
.p-flow__btn--blue {
background-color: var(--color-blue);
}
.p-flow__btn:hover {
transform: translateY(-2px);
opacity: 1;
}
.p-flow__cnt {
display: none;
width: 100%;
padding: max(calc(50 * var(--width-ratio-1920)), 36px) 0 max(calc(117 * var(--width-ratio-1920)), 76px);
}
.p-flow__cnt.js-current {
display: block;
}
.p-flow__cnt.p-flow__cnt--green {
background-color: var(--color-green);
}
.p-flow__cnt.p-flow__cnt--blue {
background-color: var(--color-blue);
}
.p-flow__cnt-inner {
width: calc(1578 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-flow__cnt h3 {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: max(calc(92 * var(--width-ratio-1920)), 60px);
border: 1px solid #fff;
border-radius: max(calc(9 * var(--width-ratio-1920)), 6px);
font-family: var(--font-noto-sans);
font-size: max(calc(30 * var(--width-ratio-1920)), 20px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
color: #fff;
white-space: nowrap;
padding: 0 max(calc(42 * var(--width-ratio-1920)), 27px);
margin-bottom: max(calc(39 * var(--width-ratio-1920)), 25px);
}
.p-flow__cnt-wrap {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: max(calc(20 * var(--width-ratio-1920)), 13px);
}
.p-flow__cnt-item {
width: 29%;
}
.p-flow__cnt-item-label {
display: flex;
justify-content: center;
align-items: center;
width: max(calc(129 * var(--width-ratio-1920)), 84px);
height: max(calc(57 * var(--width-ratio-1920)), 37px);
background-color: var(--color-red);
font-size: max(calc(33 * var(--width-ratio-1920)), 19px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.43;
color: #fff;
margin-bottom: max(calc(26 * var(--width-ratio-1920)), 17px);
}
.p-flow__cnt-item-txt {
width: 100%;
}
.p-flow__cnt-item-txt h4 {
font-family: var(--font-noto-sans);
font-size: max(calc(34 * var(--width-ratio-1920)), 22px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.58;
color: #fff;
margin-bottom: max(calc(26 * var(--width-ratio-1920)), 17px);
}
.p-flow__cnt-item-txt p {
width: 110%;
font-family: var(--font-noto-sans);
font-size: max(calc(21 * var(--width-ratio-1920)),14px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.8;
color: #fff;
}
.p-flow__cnt-item-img img {
width: 100%;
height: auto;
object-fit: contain;
margin-bottom: max(calc(26 * var(--width-ratio-1920)), 17px);
}
.p-flow__link {
display: flex;
justify-content: center;
align-items: center;
width: max(calc(327 * var(--width-ratio-1920)),261px);
height: max(calc(55 * var(--width-ratio-1920)),44px);
background-color: var(--color-green);
font-size: max(calc(15 * var(--width-ratio-1920)),12px);
font-weight: 400;
letter-spacing: 0;
color: #fff;
margin-left: calc(39 * var(--width-ratio-1920));
}
.p-flow__cnt-link {
display: flex;
justify-content: center;
align-items: center;
width: max(calc(404 * var(--width-ratio-1920)),262px);
height: max(calc(78 * var(--width-ratio-1920)),50px);
background-color: var(--color-red);
border: #5D0000 5px solid;
border-radius: max(calc(57 * var(--width-ratio-1920)), 37px);
font-size: max(calc(25 * var(--width-ratio-1920)),16px);
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
margin-top: calc(28 * var(--width-ratio-1920));
}
.p-flow__cnt-link:hover {
transform: translateY(-2px);
opacity: 1;
}
@media screen and (max-width: 768px) {
.p-flow {
padding-top: min(calc(47 * var(--width-ratio)), 61px);
}
.p-flow__inner {
width: 100%;
padding: 0;
}
.p-flow__btns {
flex-wrap: wrap;
column-gap: min(calc(4 * var(--width-ratio)), 6px);
row-gap: min(calc(17.7 * var(--width-ratio)), 23px);
padding: 0;
margin-bottom: min(calc(33 * var(--width-ratio)), 43px);
}
.p-flow__btn-item {
width: calc(171 * var(--width-ratio));
row-gap: min(calc(12 * var(--width-ratio)), 8px);
}
.p-flow__btn-item-txt {
font-size: min(calc(12 * var(--width-ratio)), 16px);
}
.p-flow__btn {
width: 100%;
}
.p-flow__btn-txt {
width: 105%;
font-size: min(calc(13 * var(--width-ratio)), 17px);
line-height: 1.38;
margin-bottom: min(calc(16.4 * var(--width-ratio)), 21px);
transform: translateX(-2.5%);
}
.p-flow__btn {
width: min(calc(171 * var(--width-ratio)), 222px);
height: min(calc(32 * var(--width-ratio)), 42px);
border-radius: 3px;
font-size: min(calc(12 * var(--width-ratio)), 16px);
line-height: 1.2;
text-align: center;
}
.p-flow__btn:first-of-type {
/* width: calc(160 * var(--width-ratio)); */
}
.p-flow__btn-item:nth-of-type(1) .p-flow__btn {
border: 2px solid var(--color-gold);
}
.p-flow__btn-item:nth-of-type(2) .p-flow__btn {
border: 2px solid var(--color-green);
}
.p-flow__btn::after {
width: calc(161 * var(--width-ratio));
height: min(calc(86.4 * var(--width-ratio)), 113px);
border: min(calc(5 * var(--width-ratio)), 6px) solid var(--color-brown);
border-radius: min(calc(2.5 * var(--width-ratio)), 3px);
}
.p-flow__cnt {
padding-bottom: min(calc(30 * var(--width-ratio)), 39px);
}
.p-flow__cnt-inner {
width: 100%;
padding: 0 20px;
}
.p-flow__cnt h3 {
width: min(calc(326 * var(--width-ratio)), 424px);
height: min(calc(68 * var(--width-ratio)), 88px);
border-radius: 9px;
font-size: min(calc(19 * var(--width-ratio)), 25px);
margin-left: auto;
margin-right: auto;
}
.p-flow__cnt-wrap {
flex-direction: column;
align-items: center;
row-gap: min(calc(40 * var(--width-ratio)), 52px);
}
.p-flow__cnt-item {
width: 100%;
}
.p-flow__cnt-item-txt, .p-flow__cnt-item-img {
width: 100%;
}
.p-flow__cnt-item-label {
width: calc(64 * var(--width-ratio));
height: calc(26 * var(--width-ratio));
font-size: calc(12 * var(--width-ratio));
margin-bottom: calc(12 * var(--width-ratio));
}
.p-flow__cnt-item-txt h4 {
font-size: min(calc(21 * var(--width-ratio)), 28px);
margin-bottom: min(calc(19 * var(--width-ratio)), 25px);
}
.p-flow__cnt-item-txt p {
width: 100%;
font-size: min(calc(16 * var(--width-ratio)), 21px);
line-height: 1.875;
}
.p-flow__cnt-item-txt p.small {
font-size: calc(13 * var(--width-ratio-1920));
}
.p-flow__cnt-item:nth-of-type(3n) {
flex-direction: column-reverse;
}
.p-flow__link {
width: min(calc(350 * var(--width-ratio)), 457px);
height: calc(55 * var(--width-ratio));
background-color: var(--color-green);
font-size: min(calc(15 * var(--width-ratio)), 19px);
margin: min(calc(30*var(--width-ratio)), 39px) auto 0;
}
.p-flow__cnt-link {
width: min(calc(237 * var(--width-ratio-1920)),308px);
height: min(calc(46 * var(--width-ratio-1920)),60px);
font-size: min(calc(13 * var(--width-ratio-1920)),17px);
margin-top: calc(23 * var(--width-ratio-1920));
border-radius: min(calc(74 * var(--width-ratio-1920)), 96px);
}
}
@media screen and (max-width: 480px) {
.p-flow {
padding-top: calc(47 * var(--width-ratio));
}
.p-flow__inner {
width: 100%;
}
.p-flow__btns {
margin-bottom: calc(33 * var(--width-ratio));
}
.p-flow__btn-item {
width: calc(171 * var(--width-ratio));
}
.p-flow__btn-txt {
width: 105%;
font-size: calc(13 * var(--width-ratio));
line-height: 1.38;
margin-bottom: calc(16.4 * var(--width-ratio));
transform: translateX(-2.5%);
}
.p-flow__btn {
}
.p-flow__btn-item:nth-of-type(1) .p-flow__btn {
border: 2px solid var(--color-gold);
}
.p-flow__btn-item:nth-of-type(2) .p-flow__btn {
border: 2px solid var(--color-green);
}
.p-flow__btn::after {
width: calc(161 * var(--width-ratio));
height: calc(86.4 * var(--width-ratio));
border: calc(5 * var(--width-ratio)) solid var(--color-brown);
border-radius: calc(2.5 * var(--width-ratio));
}
.p-flow__cnt {
row-gap: calc(50 * var(--width-ratio));
}
.p-flow__cnt-item {
flex-direction: column-reverse;
row-gap: calc(38 * var(--width-ratio));
}
.p-flow__cnt-item-txt, .p-flow__cnt-item-img {
width: 100%;
}
.p-flow__cnt-item-txt .label {
font-size: calc(13 * var(--width-ratio));
width: calc(73 * var(--width-ratio));
height: calc(31 * var(--width-ratio));
margin-bottom: calc(16 * var(--width-ratio));
}
.p-flow__cnt-item-txt h3 {
font-size: calc(21 * var(--width-ratio));
line-height: 1.57;
margin-bottom: calc(19 * var(--width-ratio));
}
.p-flow__cnt-item-txt p {
font-size: calc(13 * var(--width-ratio));
line-height: 1.77;
margin-left: 0;
margin-bottom: 0;
}
.p-flow__cnt-item-txt p.small {
font-size: calc(13 * var(--width-ratio-1920));
}
.p-flow__separator img {
width: calc(30.44 * var(--width-ratio-1920));
}
.p-flow__separator:before, .p-flow__separator:after {
width: calc(145.5 * var(--width-ratio));
height: 1px;
background-image: linear-gradient(to right, #fff calc(5*var(--width-ratio)), transparent calc(5*var(--width-ratio)), transparent calc(6*var(--width-ratio)));
background-size: calc(11*var(--width-ratio)) calc(1*var(--width-ratio));
}
.p-flow__cnt-item:nth-of-type(3n) {
flex-direction: column-reverse;
}
.p-flow__link {
width: calc(350 * var(--width-ratio));
height: calc(55 * var(--width-ratio));
background-color: var(--color-green);
font-size: calc(15 * var(--width-ratio));
margin: calc(30*var(--width-ratio)) auto 0;
}
}
/* Case */
.p-case {
background: url(../img/bg_case.webp) no-repeat center center / cover;
padding-top: calc(225 * var(--width-ratio-1920));
padding-bottom: calc(58 * var(--width-ratio-1920));
}
.p-case__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-case__list {
display: flex;
flex-direction: column;
row-gap: calc(98 * var(--width-ratio-1920));
margin-bottom: calc(58 * var(--width-ratio-1920));
}
.p-case__item {
}
.p-case__flex {
display: flex;
position: relative;
background-color: #fff;
border-radius: calc(10 * var(--width-ratio-1920));
margin-bottom: calc(45 * var(--width-ratio-1920));
}
.p-case__flex .label {
font-size: calc(42 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1;
color: var(--color-red);
position: absolute;
top: calc(35 * var(--width-ratio-1920));
left: 0;
width: calc(181 * var(--width-ratio-1920));
height: calc(61 * var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-red);
color: #fff;
}
.p-case__flex .circle {
font-size: calc(20 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.5;
color: #fff;
text-align: center;
background-color: var(--color-gold);
width: calc(143 * var(--width-ratio-1920));
height: calc(143 * var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
top: calc(-80 * var(--width-ratio-1920));
right: calc(-56 * var(--width-ratio-1920));
}
.p-case__flex-img {
width: calc(587 * var(--width-ratio-1920));
min-height: calc(573 * var(--width-ratio-1920));
}
.p-case__item:nth-of-type(2) .p-case__flex-img {
height: calc(507 * var(--width-ratio-1920));
}
.p-case__flex-img img {
width: 100%;
height: 100%;
border-radius: calc(10 * var(--width-ratio-1920)) 0 0 calc(10 * var(--width-ratio-1920));
object-fit: contain;
}
.p-case__flex-main {
width: calc(853 * var(--width-ratio-1920));
background-color: #fff;
border-radius: 0 calc(10 * var(--width-ratio-1920)) calc(10 * var(--width-ratio-1920)) 0;
padding: calc(55 * var(--width-ratio-1920)) calc(40 * var(--width-ratio-1920)) calc(55 * var(--width-ratio-1920));
box-sizing: border-box;
}
.p-case__item:nth-of-type(2) .p-case__flex-main,
.p-case__item:nth-of-type(3) .p-case__flex-main {
padding-top: calc(83 * var(--width-ratio-1920));
}
.p-case__flex-main h3 {
font-size: calc(44 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.47;
color: var(--color-brown);
margin-left: calc(22 * var(--width-ratio-1920));
}
.p-case__flex-hr {
width: 100%;
height: 1px;
background-color: var(--color-brown);
margin-top: calc(30 * var(--width-ratio-1920));
margin-bottom: calc(18 * var(--width-ratio-1920));
}
.p-case__item:nth-of-type(2) .p-case__flex-hr {
margin-bottom: calc(32 * var(--width-ratio-1920));
}
.p-case__flex-txt {
font-family: var(--font-noto-sans);
font-size: calc(28 * var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.71;
color: var(--color-brown);
}
.p-case__item:nth-of-type(2) .p-case__flex-txt {
margin-left: calc(12 * var(--width-ratio-1920));
}
.p-case__comment {
background-color: var(--color-brown-light);
border-radius: calc(10 * var(--width-ratio-1920));
padding: calc(21 * var(--width-ratio-1920)) calc(152*var(--width-ratio-1920)) calc(52*var(--width-ratio-1920)) calc(23 * var(--width-ratio-1920));
}
.p-case__comment-left {
width: 100%;
}
.p-case__comment-left .label {
font-size: calc(24 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.4;
color: #fff;
width: calc(489*var(--width-ratio-1920));
height: calc(46*var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gold);
border-radius: calc(19*var(--width-ratio-1920));
margin-bottom: calc(22*var(--width-ratio-1920));
}
.p-case__comment-left-flex {
display: flex;
align-items: center;
column-gap: calc(34*var(--width-ratio-1920));
}
.p-case__comment-left-flex .assessor-img {
flex-shrink: 0;
width: min(calc(141*var(--width-ratio-1920)), 184px);
height: min(calc(141*var(--width-ratio-1920)), 184px);
border-radius: 50%;
}
.p-case__comment-left-flex .assessor-img img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
.p-case__comment-left-flex .txt {
font-family: var(--font-noto-sans);
font-size: calc(28*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.71;
color: var(--color-brown);
}
.p-case__comment-right {
display: flex;
align-items: center;
margin-left: calc(249*var(--width-ratio-1920));
}
.p-case__comment-right .label {
font-size: calc(37 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.1;
color: #fff;
width: calc(143*var(--width-ratio-1920));
height: calc(143*var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-red);
}
.p-case__price {
font-size: calc(117*var(--width-ratio-1920));
font-weight: 900;
letter-spacing: 0;
line-height: 1.43;
color: var(--color-red);
display: flex;
align-items: baseline;
margin-left: calc(34.5*var(--width-ratio-1920));
}
.p-case__price span {
font-size: calc(72*var(--width-ratio-1920));
}
@media screen and (max-width: 768px) {
.p-case {
background: url(../img/bg_bottom_sp.webp) no-repeat center center / cover;
padding-top: min(calc(47 * var(--width-ratio)), 61px);
padding-bottom: min(calc(79 * var(--width-ratio)), 103px);
}
.p-case .c-secttl {
width: 100vw;
margin-left: calc(-20 * var(--width-ratio));
}
.p-case__inner {
width: 100%;
padding: 0 min(calc(20 * var(--width-ratio)), 26px);
margin: 0 auto;
}
.p-case__list {
row-gap: min(calc(81 * var(--width-ratio)), 106px);
margin-bottom: 0;
}
.p-case__flex {
flex-direction: column;
margin-bottom: min(calc(33 * var(--width-ratio)), 43px);
}
.p-case__flex .label {
font-size: min(calc(24 * var(--width-ratio)), 31px);
top: min(calc(19 * var(--width-ratio)), 25px);
width: min(calc(108 * var(--width-ratio)), 141px);
height: min(calc(37 * var(--width-ratio)), 48px);
}
.p-case__flex .circle {
display: none;
}
.p-case__flex-img {
width: 100%;
height: 248px;
min-height: unset;
}
.p-case__flex-img img {
object-fit: cover;
border-radius: calc(10 * var(--width-ratio)) calc(10 * var(--width-ratio)) 0 0;
}
.p-case__item:nth-of-type(2) .p-case__flex-img {
height: min(calc(248*var(--width-ratio)), 324px);
}
.p-case__flex-main {
width: 100%;
height: auto;
border-radius: 0 0 min(calc(10 * var(--width-ratio)), 13px) min(calc(10 * var(--width-ratio)), 13px);
padding: min(calc(30 * var(--width-ratio)), 39px) min(calc(19 * var(--width-ratio)), 25px) min(calc(31 * var(--width-ratio)), 40px);
}
.p-case__item:nth-of-type(1) .p-case__flex-main,
.p-case__item:nth-of-type(2) .p-case__flex-main,
.p-case__item:nth-of-type(3) .p-case__flex-main {
height: auto;
}
.p-case__item:nth-of-type(2) .p-case__flex-main,
.p-case__item:nth-of-type(3) .p-case__flex-main {
padding-top: calc(30 * var(--width-ratio-1920));
}
.p-case__flex-main h3 {
width: 106%;
font-size: min(calc(35 * var(--width-ratio)), 42px);
line-height: 1.71;
margin-left: 0;
}
.p-case__flex-hr {
margin-top: min(calc(20 * var(--width-ratio)), 26px);
margin-bottom: min(calc(29 * var(--width-ratio)), 38px);
}
.p-case__flex-txt {
font-size: min(calc(22 * var(--width-ratio)), 24px);
line-height: 1.59;
margin-left: 0;
}
.p-case__item:nth-of-type(2) .p-case__flex-txt {
margin-left: 0;
}
.p-case__comment {
height: auto;
display: flex;
align-items: center;
flex-direction: column-reverse;
border-radius: min(calc(10 * var(--width-ratio)), 13px);
padding: min(calc(22 * var(--width-ratio)), 24px) min(calc(18 * var(--width-ratio)), 24px) min(calc(28*var(--width-ratio)), 37px);
}
.p-case__comment-right {
flex-direction: column;
width: 100%;
margin-left: 0;
}
.p-case__item:nth-of-type(1) .p-case__comment-right,
.p-case__item:nth-of-type(2) .p-case__comment-right,
.p-case__item:nth-of-type(3) .p-case__comment-right {
margin-left: 0;
}
.p-case__comment-right .label {
font-size: min(calc(24 * var(--width-ratio)), 31px);
width: min(calc(350*var(--width-ratio)), 455px);
height: min(calc(46*var(--width-ratio)), 60px);
border-radius: min(calc(23*var(--width-ratio)), 30px);
margin: 0 auto 0;
}
.p-case__price {
font-size: min(calc(48*var(--width-ratio)), 71px);
margin-left: 0;
margin-bottom: min(calc(20*var(--width-ratio)), 26px);
}
.p-case__price span {
font-size: min(calc(44*var(--width-ratio)), 61px);
}
.p-case__comment-left {
width: 100%;
}
.p-case__comment-left .label {
font-size: 24px;
width: min(calc(350*var(--width-ratio)), 455px);
height: min(calc(46*var(--width-ratio)), 60px);
margin: 0 auto calc(22*var(--width-ratio));
}
.p-case__comment-left-flex {
flex-direction: column;
column-gap: unset;
align-items: center;
row-gap: min(calc(14*var(--width-ratio)), 18px);
}
.p-case__comment-left-flex .txt,
.p-case__item:nth-of-type(2) .p-case__comment-left .txt,
.p-case__item:nth-of-type(3) .p-case__comment-left .txt {
font-size: 22px;
line-height: 1.59;
text-align: center;
}
}
@media screen and (max-width: 480px) {
.p-case {
background: url(../img/bg_bottom_sp.webp) no-repeat center center / cover;
padding-top: calc(47 * var(--width-ratio));
padding-bottom: calc(79 * var(--width-ratio));
}
.p-case__inner {
width: 100%;
padding: 0 calc(20 * var(--width-ratio));
margin: 0 auto;
}
.p-case__list {
row-gap: calc(81 * var(--width-ratio));
margin-bottom: 0;
}
.p-case__flex {
flex-direction: column;
margin-bottom: calc(33 * var(--width-ratio));
}
.p-case__flex .label {
font-size: calc(24 * var(--width-ratio));
top: calc(19 * var(--width-ratio));
width: calc(108 * var(--width-ratio));
height: calc(37 * var(--width-ratio));
}
.p-case__flex .circle {
display: none;
}
.p-case__flex-img {
width: 100%;
height: calc(248*var(--width-ratio));
}
.p-case__flex-img img {
border-radius: calc(10 * var(--width-ratio)) calc(10 * var(--width-ratio)) 0 0;
}
.p-case__item:nth-of-type(2) .p-case__flex-img {
height: calc(248*var(--width-ratio));
}
.p-case__flex-main {
width: 100%;
height: auto;
border-radius: 0 0 calc(10 * var(--width-ratio)) calc(10 * var(--width-ratio));
padding: calc(30 * var(--width-ratio)) calc(19 * var(--width-ratio)) calc(31 * var(--width-ratio));
}
.p-case__item:nth-of-type(1) .p-case__flex-main,
.p-case__item:nth-of-type(2) .p-case__flex-main,
.p-case__item:nth-of-type(3) .p-case__flex-main {
height: auto;
}
.p-case__flex-main h3 {
width: 106%;
font-size: calc(35 * var(--width-ratio));
line-height: 1.71;
margin-left: 0;
}
.p-case__flex-hr {
margin-top: calc(20 * var(--width-ratio));
margin-bottom: calc(29 * var(--width-ratio));
}
.p-case__flex-txt {
font-size: calc(22 * var(--width-ratio));
line-height: 1.59;
}
.p-case__comment {
height: auto;
flex-direction: column-reverse;
border-radius: calc(10 * var(--width-ratio));
padding: calc(22 * var(--width-ratio)) calc(18 * var(--width-ratio)) calc(28*var(--width-ratio));
}
.p-case__comment-right {
flex-direction: column;
width: 100%;
margin-left: 0;
}
.p-case__item:nth-of-type(1) .p-case__comment-right,
.p-case__item:nth-of-type(2) .p-case__comment-right,
.p-case__item:nth-of-type(3) .p-case__comment-right {
margin-left: 0;
}
.p-case__comment-right .label {
font-size: calc(24 * var(--width-ratio));
width: 100%;
height: calc(46*var(--width-ratio));
border-radius: calc(23*var(--width-ratio));
margin-top: 0;
}
.p-case__price {
/* font-size: calc(71*var(--width-ratio)); */
margin-left: 0;
margin-bottom: calc(20*var(--width-ratio));
}
.p-case__item:nth-of-type(2) .p-case__price {
font-size: calc(60*var(--width-ratio));
}
.p-case__item:nth-of-type(3) .p-case__price {
font-size: calc(52*var(--width-ratio));
}
.p-case__price span {
font-size: calc(44*var(--width-ratio-1920));
}
.p-case__item:nth-of-type(2) .p-case__price span {
font-size: calc(35*var(--width-ratio));
}
.p-case__item:nth-of-type(3) .p-case__price span {
font-size: calc(30*var(--width-ratio));
}
.p-case__item:nth-of-type(3) .p-case__price {
line-height: 1.43;
}
.p-case__comment-left {
width: 100%;
}
.p-case__comment-left .label {
font-size: calc(24 * var(--width-ratio));
width: 100%;
height: calc(46*var(--width-ratio));
}
.p-case__comment-left-flex {
flex-direction: column;
column-gap: unset;
align-items: center;
row-gap: calc(14*var(--width-ratio));
}
.p-case__comment-left-flex .txt {
font-size: calc(22*var(--width-ratio));
line-height: 1.59;
text-align: center;
}
}
/* Consignment */
.p-consignment {
width: 100%;
background: url(../img/bg_case.webp) repeat-y center center / cover;
padding-top: calc(206 * var(--width-ratio-1920));
padding-bottom: calc(228 * var(--width-ratio-1920));
}
.p-consignment h2.c-secttl {
margin-bottom: calc(36 * var(--width-ratio-1920));
}
.p-consignment__lead {
font-family: var(--font-noto-sans);
font-size: max(calc(28 * var(--width-ratio-1920)),16px);
font-weight: 400;
letter-spacing: 0;
line-height: 1.44;
color: var(--color-brown);
text-align: center;
margin-bottom: calc(80 * var(--width-ratio-1920));
}
.p-consignment__img {
width: 100%;
margin-bottom: calc(114 * var(--width-ratio-1920));
}
.p-consignment__img img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-consignment h3 {
font-size: calc(41 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.56;
color: var(--color-brown);
border: 1px solid var(--color-brown);
width: calc(378*var(--width-ratio-1920));
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto calc(52 * var(--width-ratio-1920));
}
.p-consignment__txt {
width: fit-content;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto calc(99 * var(--width-ratio-1920));
}
.p-consignment__txt.sp-only {
display: none;
}
.p-consignment__txt span {
display: inline-block;
width: fit-content;
font-size: calc(44 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.81;
color: var(--color-brown);
text-align: center;
background:
linear-gradient(to right,
var(--color-brown) 0%,
var(--color-brown) 50%,
transparent 51%,
transparent 100%)
repeat-x left bottom/calc(8*var(--width-ratio-1920)) calc(1*var(--width-ratio-1920));
padding-bottom: 0.1em;
}
.p-consignment__link {
display: flex;
justify-content: center;
align-items: center;
width: calc(326*var(--width-ratio-1920));
height: calc(59*var(--width-ratio-1920));
background-color: var(--color-brown);
font-size: calc(25*var(--width-ratio-1920));
font-weight: 500;
letter-spacing: 0;
color: var(--color-brown-light);
text-decoration: none;
margin: 0 auto calc(102 * var(--width-ratio-1920));
}
@media screen and (max-width: 768px) {
.p-consignment {
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-top: min(calc(51 * var(--width-ratio)), 67px);
padding-bottom: min(calc(59 * var(--width-ratio)), 77px);
}
.p-consignment__lead {
width: min(calc(350*var(--width-ratio)), 460px);
font-size: min(calc(22 * var(--width-ratio)), 29px);
line-height: 1.82;
margin: 0 auto min(calc(26 * var(--width-ratio)), 34px);
}
.p-consignment__img {
margin-bottom: min(calc(59 * var(--width-ratio)), 77px);
}
.p-consignment h3 {
font-size: min(calc(35 * var(--width-ratio)), 46px);
line-height: 1.82;
width: min(calc(350*var(--width-ratio)), 460px);
margin: 0 auto min(calc(30 * var(--width-ratio)), 39px);
}
.p-consignment__txt.pc-only {
display: none;
}
.p-consignment__txt.sp-only {
display: flex;
width: min(calc(360*var(--width-ratio)), 473px);
margin-bottom: min(calc(80 * var(--width-ratio)), 105px);
}
.p-consignment__txt span {
display: block;
width: 100%;
font-size: min(calc(30 * var(--width-ratio)), 39px);
line-height: 2;
}
.p-consignment__link {
width: min(calc(326*var(--width-ratio-1920)), 427px);
height: min(calc(59*var(--width-ratio-1920)), 77px);
font-size: min(calc(25*var(--width-ratio-1920)), 33px);
margin-bottom: min(calc(68 * var(--width-ratio)), 89px);
}
}
@media screen and (max-width: 480px) {
.p-consignment {
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-top: calc(51 * var(--width-ratio));
padding-bottom: calc(59 * var(--width-ratio));
}
.p-consignment__lead {
width: calc(350*var(--width-ratio));
font-size: calc(22 * var(--width-ratio));
line-height: 1.82;
margin: 0 auto calc(26 * var(--width-ratio));
}
.p-consignment__img {
margin-bottom: calc(59 * var(--width-ratio));
}
.p-consignment h3 {
font-size: calc(35 * var(--width-ratio));
line-height: 1.82;
width: calc(350*var(--width-ratio));
margin: 0 auto calc(30 * var(--width-ratio));
}
.p-consignment__txt.pc-only {
display: none;
}
.p-consignment__txt.sp-only {
display: flex;
width: calc(360*var(--width-ratio));
margin-bottom: calc(80 * var(--width-ratio));
}
.p-consignment__txt span {
display: block;
width: 100%;
font-size: calc(30 * var(--width-ratio));
line-height: 2;
}
.p-consignment__link {
margin-bottom: calc(68 * var(--width-ratio));
}
}
/* Access */
.p-access {
width: 100%;
background: url(../img/bg_case.webp) repeat-y center center / cover;
padding-bottom: calc(300 * var(--width-ratio-1920));
}
.p-access__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-access__map {
max-width: calc(1440*var(--width-ratio-1920));
width: 100%;
margin: 0 auto;
}
.p-access__map iframe {
width: 100%;
height: 600px;
object-fit: contain;
}
.p-access__content {
width: 100%;
display: flex;
flex-direction: column;
margin-top: 30px;
}
.p-access__content-inner {
display: flex;
flex-direction: column;
row-gap: calc(30*var(--width-ratio-1920));
}
.p-access__row {
display: flex;
border-bottom: 1px solid var(--color-brown);
padding: 30px;
}
.p-access__label {
width: calc(300*var(--width-ratio-1920));
display: flex;
align-items: center;
font-size: calc(40*var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1;
color: var(--color-brown);
}
.p-access__content-txt {
font-size: calc(32*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.785;
color: var(--color-brown);
}
@media screen and (max-width: 1200px) {
.p-access__map iframe {
width: 100%;
height: 450px;
}
}
@media screen and (max-width: 768px) {
.p-access {
padding-bottom: 100px;
}
.p-access__map iframe {
width: 100vw;
height: 300px;
}
.p-access__map img {
width: 100vw;
}
.p-access__content {
width: 100vw;
padding: 0 calc(20*var(--width-ratio));
}
.p-access__content-inner {
display: flex;
flex-direction: column;
row-gap: 0;
}
.p-access__row {
flex-direction: column;
row-gap: 10px;
padding: 30px 0;
}
.p-access__row:first-of-type {
padding-top: 0;
}
.p-access__label {
width: 100%;
font-size: 28px;
}
.p-access__content-txt {
font-size: 18px;
}
}
/* FAQ */
.p-faq {
width: 100%;
background: url(../img/bg_case.webp) repeat-y center center / cover;
padding-bottom: calc(92 * var(--width-ratio-1920));
}
.p-faq__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-faq__list {
display: flex;
flex-direction: column;
row-gap: calc(74 * var(--width-ratio-1920));
}
.p-faq__item {
}
.p-faq__ttl {
display: flex;
position: relative;
margin-bottom: calc(30*var(--width-ratio-1920));
cursor: pointer;
}
.p-faq__ttl .label {
width: calc(131*var(--width-ratio-1920));
height: calc(82*var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-brown);
border-radius: calc(10*var(--width-ratio-1920));
font-size: calc(45 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1;
color: #fff;
margin-right: calc(21*var(--width-ratio-1920));
}
.p-faq__ttl h3 {
display: flex;
align-items: center;
width: calc(1288*var(--width-ratio-1920));
font-size: calc(44 * var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.19;
color: var(--color-brown);
background:
linear-gradient(to right,
var(--color-brown) 0%,
var(--color-brown) 50%,
transparent 51%,
transparent 100%)
repeat-x left bottom/calc(8*var(--width-ratio-1920)) calc(1*var(--width-ratio-1920));
padding-bottom: 0.1em;
padding-right: 4em;
}
.p-faq__ttl .toggle {
position: absolute;
bottom: calc(5*var(--width-ratio-1920));
right: calc(63*var(--width-ratio-1920));
width: calc(83*var(--width-ratio-1920));
height: calc(83*var(--width-ratio-1920));
border: 1px solid #707070;
border-radius: 50%;
cursor: pointer;
}
.p-faq__ttl .toggle span {
display: block;
width: calc(58*var(--width-ratio-1920));
height: 2px;
background-color: var(--color-brown);
position: absolute;
top: 50%;
left: 50%;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.p-faq__ttl .toggle span:nth-of-type(1) {
transform: translate(-50%, -50%);
}
.p-faq__ttl .toggle span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(90deg);
}
.p-faq__item.is-open .p-faq__ttl .toggle span:nth-of-type(1) {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.p-faq__item.is-open .p-faq__ttl .toggle span:nth-of-type(2) {
transform: translate(-50%, -50%) rotate(0deg);
}
.p-faq__cnt {
background-color: var(--color-brown-light);
padding: calc(53*var(--width-ratio-1920));
border-radius: calc(10*var(--width-ratio-1920));
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
overflow: hidden;
}
.p-faq__cnt p {
font-family: var(--font-noto-sans);
font-size: calc(28*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.785;
color: var(--color-brown);
}
@media screen and (max-width: 768px) {
.p-faq {
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-bottom: min(calc(71 * var(--width-ratio)), 93px);
}
.p-faq .c-secttl {
width: 100vw;
margin-left: calc(-20 * var(--width-ratio));
}
.p-faq__inner {
width: 100%;
padding: 0 min(calc(20 * var(--width-ratio)), 26px);
}
.p-faq__list {
row-gap: min(calc(44 * var(--width-ratio)), 58px);
}
.p-faq__ttl {
flex-direction: column;
margin-bottom: min(calc(22*var(--width-ratio)), 29px);
}
.p-faq__ttl .label {
width: min(calc(350*var(--width-ratio)), 455px);
height: min(calc(50*var(--width-ratio)), 66px);
font-size: min(calc(27 * var(--width-ratio)), 36px);
margin: 0 auto min(calc(15*var(--width-ratio)), 19px);
}
.p-faq__ttl h3 {
width: 100%;
font-size: min(calc(34 * var(--width-ratio-1920)), 34px);
text-align: center;
line-height: 1.176;
padding-bottom: 0.5em;
padding-right: 0;
}
.p-faq__ttl .toggle {
display: none;
}
.p-faq__cnt {
padding: min(calc(36*var(--width-ratio)), 47px) min(calc(30*var(--width-ratio)), 39px);
border-radius: min(calc(10*var(--width-ratio)), 13px);
}
.p-faq__cnt p {
font-size: min(calc(22*var(--width-ratio-1920)), 29px);
line-height: 1.36;
}
}
@media screen and (max-width: 480px) {
.p-faq {
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-bottom: calc(71 * var(--width-ratio));
}
.p-faq__inner {
width: 100%;
padding: 0 calc(20 * var(--width-ratio));
}
.p-faq__list {
row-gap: calc(44 * var(--width-ratio));
}
.p-faq__ttl {
flex-direction: column;
margin-bottom: calc(22*var(--width-ratio));
}
.p-faq__ttl .label {
width: 100%;
height: calc(50*var(--width-ratio));
font-size: calc(27 * var(--width-ratio));
margin-right: unset;
margin-bottom: calc(15*var(--width-ratio));
}
.p-faq__ttl h3 {
width: 100%;
font-size: calc(34 * var(--width-ratio-1920));
text-align: left;
line-height: 1.176;
padding-bottom: 0.5em;
}
.p-faq__ttl .toggle {
display: none;
}
.p-faq__cnt {
padding: calc(36*var(--width-ratio)) calc(30*var(--width-ratio));
border-radius: calc(10*var(--width-ratio));
}
.p-faq__cnt p {
font-size: calc(22*var(--width-ratio-1920));
line-height: 1.36;
}
}
/* Contact */
.p-contact {
width: 100%;
background: url(../img/bg_case.webp) repeat-y center center / cover;
padding-bottom: calc(92 * var(--width-ratio-1920));
}
.p-contact__inner {
width: calc(1440 * var(--width-ratio-1920));
margin: 0 auto;
}
.p-contact__form-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid #707070;
padding: calc(24*var(--width-ratio-1920)) calc(95*var(--width-ratio-1920)) calc(24*var(--width-ratio-1920)) calc(47*var(--width-ratio-1920));
}
.p-contact__form-item:first-of-type {
border-top: 1px solid #707070;
}
.p-contact__form-ttl {
width: calc(463*var(--width-ratio-1920));
display: flex;
justify-content: space-between;
align-items: center;
padding-top: calc(14*var(--width-ratio-1920));
}
.p-contact__form-ttl label {
font-family: var(--font-zen);
font-size: calc(28*var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.785;
color: #404040;
}
.p-contact__form-ttl span {
font-family: var(--font-zen);
font-size: calc(21*var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.785;
color: #fff;
background-color: var(--color-brown-light);
width: calc(82*var(--width-ratio-1920));
height: calc(34*var(--width-ratio-1920));
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(10*var(--width-ratio-1920));
}
.p-contact__form-cnt {
width: calc(801*var(--width-ratio-1920));
}
.p-contact__form-cnt input {
width: 100%;
height: calc(68*var(--width-ratio-1920));
border-radius: calc(10*var(--width-ratio-1920));
padding: calc(12*var(--width-ratio-1920)) calc(19*var(--width-ratio-1920));
font-size: calc(28*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.785;
color: var(--color-brown);
border: none;
}
.p-contact__form-cnt input::placeholder {
font-size: calc(28*var(--width-ratio-1920));
color: #C6C6C6;
}
.p-contact__form-cnt textarea {
width: 100%;
height: calc(195*var(--width-ratio-1920));
border-radius: calc(10*var(--width-ratio-1920));
background-color: #fff;
padding: calc(12*var(--width-ratio-1920)) calc(19*var(--width-ratio-1920));
font-size: calc(29*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.785;
color: var(--color-brown);
border: none;
}
.p-contact__form-cnt input[type="file"] {
display: none;
}
.p-contact__form-cnt-file {
position: relative;
display: block;
cursor: pointer;
margin-bottom: calc(42*var(--width-ratio-1920));
}
.p-contact__form-item:has(input[type="file"]) .p-contact__form-cnt-file::before {
content: "ファイルを選択してください。";
display: block;
width: calc(452*var(--width-ratio-1920));
height: calc(68*var(--width-ratio-1920));
border-radius: calc(10*var(--width-ratio-1920));
background-color: #000;
padding: calc(12*var(--width-ratio-1920)) calc(19*var(--width-ratio-1920));
font-family: var(--font-noto-sans);
font-size: calc(29*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.1;
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
box-sizing: border-box;
padding-left: calc(19*var(--width-ratio-1920));
transition: border-color 0.3s ease, color 0.3s ease;
}
.p-contact__form-item:has(input[type="file"]) .p-contact__form-cnt-file:hover::before {
border-color: var(--color-brown);
color: var(--color-brown);
}
.p-contact__file-display {
margin-top: calc(10*var(--width-ratio-1920));
margin-bottom: calc(20*var(--width-ratio-1920));
}
.p-contact__file-info {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f5f5f5;
border-radius: calc(10*var(--width-ratio-1920));
padding: calc(12*var(--width-ratio-1920)) calc(19*var(--width-ratio-1920));
border: 1px solid #e0e0e0;
}
.p-contact__file-name {
font-size: calc(24*var(--width-ratio-1920));
font-weight: 400;
letter-spacing: 0;
line-height: 1.785;
color: var(--color-brown);
flex: 1;
margin-right: calc(20*var(--width-ratio-1920));
word-break: break-all;
}
.p-contact__file-remove {
background-color: var(--color-red);
color: #fff;
border: none;
border-radius: calc(5*var(--width-ratio-1920));
padding: calc(8*var(--width-ratio-1920)) calc(16*var(--width-ratio-1920));
font-size: calc(20*var(--width-ratio-1920));
font-weight: 500;
letter-spacing: 0;
cursor: pointer;
transition: background-color 0.3s ease;
flex-shrink: 0;
}
.p-contact__file-remove:hover {
background-color: #a00000;
}
@media screen and (max-width: 768px) {
.p-contact {
width: 100%;
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-bottom: min(calc(66 * var(--width-ratio)), 87px);
}
.p-contact__inner {
width: 100%;
padding: 0 min(calc(20 * var(--width-ratio)), 26px);
}
.p-contact__form-item {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
row-gap: min(calc(20*var(--width-ratio)), 26px);
padding: min(calc(17*var(--width-ratio)), 22px) 0;
}
.p-contact__form-item:last-of-type {
border-bottom: none;
}
.p-contact__form-ttl {
width: 100%;
justify-content: flex-start;
align-items: center;
column-gap: min(calc(20*var(--width-ratio)), 26px);
padding-top: 0;
}
.p-contact__form-ttl label {
font-size: min(calc(22*var(--width-ratio)), 29px);
}
.p-contact__form-ttl span {
font-size: min(calc(17*var(--width-ratio)), 22px);
line-height: 1;
width: min(calc(69*var(--width-ratio)), 91px);
height: min(calc(28.5*var(--width-ratio)), 37px);
border-radius: min(calc(10*var(--width-ratio)), 13px);
}
.p-contact__form-cnt {
width: 100%;
}
.p-contact__form-cnt input {
height: min(calc(57*var(--width-ratio)), 75px);
border-radius: min(calc(10*var(--width-ratio)), 13px);
padding: min(calc(10*var(--width-ratio)), 13px) min(calc(16*var(--width-ratio)), 21px);
font-size: min(calc(24*var(--width-ratio)), 32px);
line-height: 1.45;
}
.p-contact__form-cnt input::placeholder {
font-size: min(calc(24*var(--width-ratio)), 32px);
}
.p-contact__form-cnt textarea {
height: min(calc(183*var(--width-ratio)), 241px);
border-radius: min(calc(10*var(--width-ratio)), 13px);
padding: min(calc(10*var(--width-ratio)), 13px) min(calc(16*var(--width-ratio)), 21px);
font-size: min(calc(24*var(--width-ratio)), 32px);
line-height: 1.45;
}
.p-contact__form-cnt textarea::placeholder {
font-size: min(calc(24*var(--width-ratio)), 32px);
}
.p-contact__form-cnt-file {
margin-bottom: min(calc(18*var(--width-ratio)), 24px);
}
.p-contact__form-item:has(input[type="file"]) .p-contact__form-cnt-file::before {
width: min(calc(350*var(--width-ratio)), 455px);
height: min(calc(68*var(--width-ratio)), 89px);
border-radius: calc(10*var(--width-ratio));
padding: 0;
font-size: min(calc(21*var(--width-ratio)), 28px);
padding-left: 0;
justify-content: center;
}
}
@media screen and (max-width: 480px) {
.p-contact {
width: 100%;
background: url(../img/bg_bottom_sp.webp) repeat-y center center / cover;
padding-bottom: calc(66 * var(--width-ratio));
}
.p-contact__inner {
width: 100%;
padding: 0 calc(20 * var(--width-ratio));
}
.p-contact__form-item {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
row-gap: calc(20*var(--width-ratio));
padding: calc(17*var(--width-ratio)) 0;
}
.p-contact__form-item:last-of-type {
border-bottom: none;
}
.p-contact__form-ttl {
width: 100%;
justify-content: flex-start;
align-items: center;
column-gap: calc(20*var(--width-ratio));
padding-top: 0;
}
.p-contact__form-ttl label {
font-size: calc(22*var(--width-ratio));
}
.p-contact__form-ttl span {
font-size: calc(17*var(--width-ratio));
line-height: 1;
width: calc(69*var(--width-ratio));
height: calc(28.5*var(--width-ratio));
border-radius: calc(10*var(--width-ratio));
}
.p-contact__form-cnt {
width: 100%;
}
.p-contact__form-cnt input {
height: calc(57*var(--width-ratio));
border-radius: calc(10*var(--width-ratio));
padding: calc(10*var(--width-ratio)) calc(16*var(--width-ratio));
font-size: calc(24*var(--width-ratio));
line-height: 1.45;
}
.p-contact__form-cnt input::placeholder {
font-size: calc(24*var(--width-ratio));
}
.p-contact__form-cnt textarea {
height: calc(183*var(--width-ratio));
border-radius: calc(10*var(--width-ratio));
padding: calc(10*var(--width-ratio)) calc(16*var(--width-ratio));
font-size: calc(24*var(--width-ratio));
line-height: 1.45;
}
.p-contact__form-cnt textarea::placeholder {
font-size: calc(24*var(--width-ratio));
}
.p-contact__form-cnt-file {
margin-bottom: calc(18*var(--width-ratio));
}
.p-contact__form-item:has(input[type="file"]) .p-contact__form-cnt-file::before {
width: 100%;
height: calc(68*var(--width-ratio));
border-radius: calc(10*var(--width-ratio));
padding: 0;
font-size: calc(21*var(--width-ratio));
padding-left: 0;
justify-content: center;
}
}
/* Contact Messages */
.p-contact__message {
margin-bottom: calc(30*var(--width-ratio-1920));
padding: calc(20*var(--width-ratio-1920));
border-radius: calc(10*var(--width-ratio-1920));
font-size: calc(24*var(--width-ratio-1920));
font-weight: 500;
letter-spacing: 0;
line-height: 1.5;
}
.p-contact__message--success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.p-contact__message--error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.p-contact__message ul {
margin: 0;
padding-left: calc(20*var(--width-ratio-1920));
}
.p-contact__message li {
margin-bottom: calc(5*var(--width-ratio-1920));
}
.p-contact__form-cnt-txt {
font-family: var(--font-zen);
font-size: calc(18*var(--width-ratio-1920));
font-weight: 500;
letter-spacing: 0;
line-height: 1.95;
color: var(--color-base);
text-decoration: underline;
}
.p-contact__form-privacy {
font-family: var(--font-zen);
font-size: calc(28*var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
line-height: 1.44;
color: #404040;
text-align: center;
margin-top: calc(52*var(--width-ratio-1920));
margin-bottom: calc(41*var(--width-ratio-1920));
}
.p-contact__form-privacy a {
color: #419BA5;
text-decoration: underline;
}
.p-contact__form-btn {
width: calc(448*var(--width-ratio-1920));
height: calc(102*var(--width-ratio-1920));
background-color: var(--color-red);
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-zen);
font-size: calc(28*var(--width-ratio-1920));
font-weight: 700;
letter-spacing: 0;
color: #fff;
border: none;
cursor: pointer;
margin: 0 auto;
transition: all 0.3s ease;
}
.p-contact__form-btn:hover {
background-color: #7A0000;
transform: translateY(-2px);
}
@media screen and (max-width: 768px) {
.p-contact__form-cnt-txt {
font-size: min(calc(13*var(--width-ratio)), 18px);
line-height: 1.61;
}
.p-contact__form-privacy {
width: 104%;
font-size: min(calc(18*var(--width-ratio)), 24px);
text-align: left;
margin-top: min(calc(42*var(--width-ratio)), 55px);
margin-bottom: min(calc(71*var(--width-ratio)), 93px);
}
.p-contact__form-btn {
width: min(calc(350*var(--width-ratio)), 455px);
height: min(calc(102*var(--width-ratio)), 110px);
font-size: min(calc(25*var(--width-ratio)), 27px);
}
}
@media screen and (max-width: 480px) {
.p-contact__form-cnt-txt {
font-size: calc(13*var(--width-ratio));
line-height: 1.61;
}
.p-contact__form-privacy {
width: 104%;
font-size: calc(18*var(--width-ratio));
text-align: left;
margin-top: calc(42*var(--width-ratio));
margin-bottom: calc(71*var(--width-ratio));
}
.p-contact__form-btn {
width: 100%;
height: calc(102*var(--width-ratio));
font-size: calc(25*var(--width-ratio));
}
}