@charset "utf-8"; :root{ --base-font: "Noto Sans JP", sans-serif; --zen-maru: "Zen Maru Gothic", sans-serif; --base-font-color: #1A1A1A; --base-font-size: clamp(1.5rem, var(--comp-30), 2rem); --gray: #C4C4C5; --darkgray: #9EA0A8; --mint: #32B4BB; --shadowMint: rgb(50 180 187 / 0.25); --pink: #E96DA3; --shadowPink: rgb(233 109 163 / 0.25); --palePink: #FFF5F5; --orange: #F67936; --green: #009E58; --paleGreen:#EDF9EA; --blue: #005EB8; --comp-660: 89.1891891891891vw; --comp-580: 78.3783783783783vw; --comp-540: 72.9729729729729vw; --comp-520: 70.2702702702702vw; --comp-500: 67.5675675675675vw; --comp-480: 64.8648648648648vw; --comp-400: 54.054054054054vw; --comp-360: 48.6486486486486vw; --comp-350: 47.2972972972972vw; --comp-340: 45.9459459459459vw; --comp-330: 44.5945945945945vw; --comp-300: 40.5405405405405vw; --comp-280: 37.83783783783784vw; --comp-260: 35.1351351351351vw; --comp-250: 33.7837837837837vw; --comp-240: 32.4324324324324vw; --comp-225: 30.4054054054054vw; --comp-220: 29.7297297297297vw; --comp-200: 27.027027027027vw; --comp-195: 26.3513513513513vw; --comp-190: 25.6756756756756vw; --comp-185: 25vw; --comp-180: 24.3243243243243vw; --comp-175: 23.6486486486486vw; --comp-170: 22.9729729729729vw; --comp-165: 22.2972972972972vw; --comp-160: 21.6216216216216vw; --comp-155: 20.9459459459459vw; --comp-150: 20.2702702702702vw; --comp-145: 19.5945945945945vw; --comp-140: 18.9189189189189vw; --comp-135: 18.2432432432432vw; --comp-130: 17.5675675675675vw; --comp-125: 16.8918918918918vw; --comp-120: 16.2162162162162vw; --comp-115: 15.5405405405405vw; --comp-110: 14.8648648648648vw; --comp-105: 14.1891891891891vw; --comp-100: 13.5135135135135vw; --comp-95: 12.83783783783783vw; --comp-90: 12.1621621621621vw; --comp-85: 11.48648648648648vw; --comp-80: 10.8108108108108vw; --comp-75: 10.13513513513513vw; --comp-70: 9.459459459459459vw; --comp-65: 8.738738738738738vw; --comp-60: 8.108108108108108vw; --comp-55: 7.432432432432432vw; --comp-50: 6.756756756756756vw; --comp-45: 6.081081081081081vw; --comp-40: 5.405405405405405vw; --comp-35: 4.729729729729729vw; --comp-30: 4.054054054054054vw; --comp-25: 3.378378378378378vw; --comp-20: 2.702702702702702vw; --comp-15: 2.027027027027027vw; --comp-10: 1.351351351351351vw; --comp-5: 0.6756756756756756vw; --comp-96: 12.97297297297297vw; --comp-88: 11.89189189189189vw; --comp-86: 11.62162162162162vw; --comp-68: 9.189189189189189vw; --comp-64: 8.648648648648648vw; --comp-62: 8.378378378378378vw; --comp-58: 7.837837837837837vw; --comp-57: 7.702702702702707vw; --comp-56: 7.567567567567567vw; --comp-54: 7.297297297297297vw; --comp-52: 7.027027027027027vw; --comp-48: 6.486486486486486vw; --comp-46: 6.216216216216216vw; --comp-44: 5.945945945945945vw; --comp-42: 5.675675675675675vw; --comp-39: 5.270270270270270vw; --comp-38: 5.135135135135135vw; --comp-36: 4.864864864864864vw; --comp-34: 4.594594594594594vw; --comp-33: 4.459459459459459vw; --comp-32: 4.324324324324324vw; --comp-28: 3.783783783783783vw; --comp-27: 3.648648648648648vw; --comp-26: 3.513513513513513vw; --comp-24: 3.243243243243243vw; --comp-22: 2.972972972972972vw; --comp-21: 2.837837837837837vw; --comp-19: 2.567567567567567vw; --comp-18: 2.432432432432432vw; --comp-17: 2.297297297297297vw; --comp-16: 2.162162162162162vw; --comp-14: 1.891891891891891vw; --comp-13-5: 1.82432432432432432vw; --comp-12: 1.621621621621621vw; --comp-8: 1.08108108108108108vw; --comp-7: 0.94594594594594594vw; --comp-4: 0.54054054054054054vw; --comp-3: 0.40540540540540540vw; } @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) { img { image-rendering: -webkit-optimize-contrast !important; } } html{ font-size: 62.5%;} body{ margin:0 auto; padding:0; font-display: auto; -webkit-font-smoothing: antialiased !important; font-smoothing: antialiased !important; color: var(--base-font-color); letter-spacing: 0.03em; width: 100%; letter-spacing: 0.1em; animation: openingFadeIn 1.5s ease forwards; animation-delay: 0.3s; opacity: 0; color: var(--base-font-color); } img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto; max-width: 100%;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0; line-height: 2; font-size: var(--base-font-size); font-family: var(--base-font); font-feature-settings: "palt";} p b{ font-weight: 700;} p:not([class]) .pink{ color: var(--pink);} .nowrap{ text-wrap: nowrap; display: inline-block;} *:not(p, p > span, p > a, p > b){ font-family: var(--zen-maru);} p:not([class]) a.pdf{ color: var(--pink); text-decoration: underline;} p:not([class]) a.pdf::after{ content: ""; display: inline-block; width: clamp(30px, var(--comp-60), 40px); height: 2em; background-image: url(../img/professionals/icon-pdf.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: 10px; vertical-align: middle;} .indent01{ text-indent: -1em; padding-left: 1em; display: inline-block; } /* IE8+, Chrome */ a{ transition: all ease 0.3s; outline: 0;} @media (any-hover: hover) { a:hover{ opacity: 0.75;} } @media screen and (width > 800px){ .sp{ display: none !important;} } @media screen and (width <= 800px){ .pc{ display: none !important;} } /* Firefox */ a::-moz-focus-inner, a::-moz-focus-inner { border: 0;} /* 基本：idを持つ全要素 */ [id] { scroll-margin-top: 100px; } /* 見出しだけ少し多め（h1～h6） */ :is(h1,h2,h3,h4,h5,h6)[id] { scroll-margin-top: 120px; } @media (max-width: 1040px) { [id] { scroll-margin-top: 82px; } :is(h1,h2,h3,h4,h5,h6)[id] { scroll-margin-top: 90px; } } /*---------------------------------------------- COMMON ----------------------------------------------*/ /* HEADER --------------------------------*/ header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: #fff; transition: all 0.5s ease;} @media screen and (width > 1040px){ .innerSpHeader{ display: none;} .innerPcHeader{ padding: 27px 32px 32px; box-sizing: border-box; display: flex; align-items: center; width: 100%; transition: all ease 0.5s; height: 160px;} .innerPcHeader h1{ width: 340px; transition: all ease 0.5s;} .innerPcHeader .PcHeaderLinkBox{ flex: 1; display: flex; justify-content: flex-end; flex-wrap: wrap; } .innerPcHeader .innerPcHeaderLinkBox{ display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 30px; padding-bottom: 30px; transition: all ease 0.5s;} .innerPcHeader .innerPcHeaderLinkBox .headerTel{ width: 294px; line-height: 1;} .innerPcHeader .innerPcHeaderLinkBox .headerTel a{ display: block;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList{ display: flex; gap: 8px; width: 558px; } .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li{ flex: 1;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li a{ color: #fff; height: 100%; border-radius: 0.4rem; font-size: 1.8rem; font-weight: 700; display: flex; justify-content: center; padding: 15px 0; gap: 10px; font-size: 18px;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:first-child a{ background-color: var(--pink); border: 2px solid var(--pink);} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:last-child a{ background-color: var(--mint); border: 2px solid var(--mint);} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:first-child a .icon{ background-color: #fff; display: block; aspect-ratio: 1 / 1; width: 16px; mask-image: url(../img/common/icon-professionals01.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; transition: all ease 0.3s;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:last-child a .icon{ background-color: #fff; display: block; aspect-ratio: 21 / 16; width: 21px; mask-image: url(../img/common/icon-contact01.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; transition: all ease 0.3s;} .innerPcHeader .headerLinkTextList{ display: flex; justify-content: flex-end; font-size: 18px; font-weight: 500; gap: 40px; width: 100%; padding-right: 20px;} header.scroll .innerPcHeader{ padding: 0 32px 0; height: 100px; } header.scroll .innerPcHeader h1{ width: 250px;} header.scroll .innerPcHeader .innerPcHeaderLinkBox{ opacity: 0; padding: 0; height: 0; pointer-events: none;} } @media screen and (width > 1040px) and (width <= 1300px){ .innerPcHeader .innerPcHeaderLinkBox .headerBtnList{ display: none;} .innerPcHeader .headerLinkTextList{ padding-right: 0;} } @media screen and (width > 1040px) and (width <= 1200px){ .innerPcHeader .headerLinkTextList{ font-size: 16px; gap: 20px} } @media (any-hover: hover) { .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:first-child a:hover{ background-color: #fff; color: var(--pink); opacity: 1;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:last-child a:hover{ background-color: #fff; color: var(--mint); opacity: 1;} .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:first-child a:hover .icon{ background-color: var(--pink); } .innerPcHeader .innerPcHeaderLinkBox .headerBtnList li:last-child a:hover .icon{ background-color: var(--mint); display: block; aspect-ratio: 21 / 16; width: 21px; mask-image: url(../img/common/icon-contact01.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;} .innerPcHeader .headerLinkTextList a:hover{ opacity: 1; color: var(--pink);} } @media screen and (width <= 1040px){ header.active{ background-color: transparent; } .innerPcHeader{ display: none;} .innerSpHeader{ padding: 0 clamp(15px, var(--comp-30), 25px); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; transition: all ease 0.5s; height: 82px;} .innerSpHeader h1{ width: min(60%, 210px); transition: all ease 0.5s;} .spHeaderLinkBox{ display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: clamp(15px, var(--comp-30), 30px);} .innerSpHeader .headerTel{ width: min(30px, var(--comp-56), 45px); line-height: 1;} .innerSpHeader .headerTel a{ display: block;} header.active .innerSpHeader .headerTel{ opacity: 0; pointer-events: none; transition: all 0.5s ease;} #hamburger{ width: 50px; aspect-ratio: 1 / 1; background-color: var(--pink); position: relative; text-align: center; border-radius: 5px; cursor: pointer;} .innerHamburger{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; height: 100%;} .innerHamburger .text{ font-size: 10px; color: #fff; font-family: var(--zen-maru); font-weight: 700; line-height: 1;} .innerHamburger .line{ width: 32px; height: 8px; margin-bottom: 6px; position: relative; line-height: 1;} .innerHamburger .line::before, .innerHamburger .line::after{ content: ""; display: block; width: 100%; height: 2px; background-color: #fff; position: absolute; transition: all 0.3s ease;} .innerHamburger .line::before{ top: 0; left: 0;} .innerHamburger .line::after{ bottom: 0; left: 0;} #hamburger.active .line::before{ top: calc(50% - 1px); transform: rotate(20deg);} #hamburger.active .line::after{ bottom: calc(50% - 1px); transform: rotate(-20deg);} #navi{ position: fixed; z-index: 99;} .naviScroll{ height: 100dvh; width: 100%; overflow-y: scroll;} .naviScroll .naviLinkListBox{ background-color: #FFF7F7; padding: calc(82px + 4rem) 10% 6rem; } .naviScroll .naviLinkListBox ul li{ padding: 0 5px 15px; font-size: clamp(1.7rem, var(--comp-34), 2rem); line-height: 2; border-bottom: 1px solid #FFA5C6; font-weight: 500;} .naviScroll .naviLinkListBox ul li:not(:last-child){ margin-bottom: 15px;} } /* NAVI --------------------------------*/ #navi{ display: none;} /* FIXED BTN BOX --------------------------------*/ #fixedBtnBox{ width: 144px; position: fixed; right: 0; bottom: 30px; z-index: 10; opacity: 0; transition: all 0.3s ease; pointer-events: none; } #fixedBtnBox.scroll{ opacity: 1; pointer-events: all;} @media screen and (width <= 1080px){ #fixedBtnBox{ background-color: rgb(255 255 255 / 0.8); bottom: 0; right: 0; width: 100%;; border-top: 2px solid #B4B4B5; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #fixedBtnBox > ul{ width: min(90%, 700px); margin: 0 auto; display: flex; gap: 20px;} #fixedBtnBox > ul li{ flex: 1; height: 60px;} #fixedBtnBox > ul li a{ display: block; box-sizing: border-box; padding: 10px ; width: 100%; height: 100%; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #fixedBtnBox > ul li a img.pc{ display: none !important;} #fixedBtnBox > ul li a img.sp{ display: block !important; aspect-ratio: 288 / 72; max-height: 100%;} #fixedBtnBox > ul li:first-child a{ background-color: var(--pink);} #fixedBtnBox > ul li:last-child a{ background-color: var(--mint);} } /* FOOTER --------------------------------*/ footer{ margin-top: clamp(6rem, var(--comp-120), 16rem); } .wrapFooter01{ width: min(80%, 1280px); margin: 0 auto; padding: clamp(4rem, var(--comp-80), 12rem) 0 clamp(2rem, var(--comp-40), 8rem); } .innerFooter01{ display: flex; justify-content: space-between; margin: 0 auto clamp(5.5rem, var(--comp-110), 6rem);} .innerFooter01 .logoBox{ width: min(35%, 400px);} .innerFooter01 .logoBox h1{ width: min(100%, 382px); margin: 0 0 clamp(3.5rem, var(--comp-70), 9rem);} .innerFooter01 .logoBox .textBox{ display: flex; flex-wrap: wrap; gap: 2rem;} .innerFooter01 .logoBox .textBox p{ font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); font-weight: 500; line-height: 1.5555555; width: 100%; } .innerFooter01 .logoBox .textBox p a{ text-decoration: underline;} .innerFooter01 .logoBox .textBox p.indent5{ text-indent: -5.2em; padding-left: 5.2em;} .innerFooter01 .logoBox .textBox .caution{ font-size: clamp(1.3rem, var(--comp-26), 1.6rem); font-weight: 400;} .innerFooter01 .linkListBox{ width: min(61%, 700px); display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: clamp(5.5rem, var(--comp-110), 9rem);} .innerFooter01 .linkListBox > ul{ width: min(45%, 320px); font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-weight: 500; line-height: 2; display: flex; flex-wrap: wrap; gap: clamp(1.5rem, var(--comp-30), 2.5rem);} .innerFooter01 .linkListBox > ul li{ position: relative; width: 100%;} .innerFooter01 .linkListBox > ul li > ul li{ padding-left: clamp( 2.8rem, var(--comp-56), 4.2rem);} .innerFooter01 .linkListBox > ul li > ul li::before{ content: ""; display: block; width: clamp(1.2rem, var(--comp-24), 1.6rem); height: 1px; background-color: var(--base-font-color); position: absolute; left: 0; top: 1em;} .innerFooter01 .linkListBox > p{ width: 100%; font-size: clamp(1.3rem, var(--comp-26), 1.6rem); font-family: var(--zen-maru); font-weight: 400;} .innerFooter02{ background-color: #F7F7F5; border-radius: 1rem; box-sizing: border-box; padding: 40px; display: flex; gap: 40px;} .innerFooter02 h2{ font-size: clamp(1.6rem, var(--comp-32), 2rem); font-weight: 500; text-wrap: nowrap; margin: 0;} .innerFooter02 h3{ font-size: clamp(1.6rem, var(--comp-32), 2rem); font-weight: 500; margin-bottom: clamp(2rem, var(--comp-40), 2.5rem);} .innerFooter02 p{ font-size: clamp(1.4rem, var(--comp-28), 1.6rem); font-family: var(--zen-maru);} .innerFooter02 .relatedBox{ border-left: 1px solid #D7D5D5; flex: 1; padding-left: 40px;} .innerFooter02 .relatedBox:last-child{ border-right: none;} .footerPrivacy{font-size: clamp(1.3rem, var(--comp-26), 1.6rem); font-family: var(--zen-maru); color: var(--base-font-color); margin-top: clamp(2rem, var(--comp-40), 4rem);} #copy{ font-size: clamp(1rem, var(--comp-20), 1.4rem); font-family: var(--zen-maru); color: #666666; margin-top: clamp(2rem, var(--comp-40), 4rem);} .blankIcon{ aspect-ratio: 1 / 1; display: inline-block; background-image: url(../img/common/icon-el.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: 0.8em; margin-left: 0.5em;} @media (any-hover: hover) { .innerFooter01 .logoBox .textBox p a:hover{ color: var(--pink); opacity: 1; } .innerFooter01 .linkListBox ul li a:hover{ color: var(--pink); opacity: 1;} .innerFooter02 h3 a:hover{ color: var(--pink); opacity: 1; } } @media screen and (width <= 1080px){ .wrapFooter01{ width: 100%; padding-bottom: calc(clamp(2rem, var(--comp-40), 8rem) + 82px); } .innerFooter01{ flex-wrap: wrap; width: 80%;} .innerFooter01 .logoBox{ width: 100%; margin-bottom: clamp(3.5rem, var(--comp-80), 5.5rem);} .innerFooter01 .linkListBox{ flex-wrap: wrap; gap: clamp(1.5rem, var(--comp-30), 2.5rem); width: 100%;} .innerFooter01 .linkListBox > ul{ width: 100%;} .innerFooter01 .linkListBox > p{ margin-top: clamp(4rem, var(--comp-80), 5rem);} .innerFooter02{ box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 5rem) 10% clamp(3.5rem, var(--comp-70), 4rem); border-radius: 0; flex-wrap: wrap;} .innerFooter02 > *{ width: 100%;} .innerFooter02 .relatedBox{ padding: clamp(3.5rem, var(--comp-70), 5rem) 0 0; flex: none; border-left: none; border-top: 1px solid #D7D5D5;} .footerPrivacy{ width: 80%; margin-left: auto; margin-right: auto;} #copy{ text-align: center; width: 80%; margin-left: auto; margin-right: auto;} } /* INFO --------------------------------*/ .infoBox{ background-image: url(../img/common/bg-texture.webp); background-repeat: repeat-x; background-position: center center; background-size: auto 100%; padding: clamp(3.2rem, var(--comp-64), 8rem) min(5vw, 60px);} .infoBox .innerInfoBox{ width: 1280px; display: flex; margin: 0 auto; justify-content: space-between;} .infoBox .whiteBox{ background-color: #fff; border-radius: clamp(0.5rem, var(--comp-10), 2rem); width: calc((100% - clamp(2rem, var(--comp-40), 4.8rem) - 1px) / 2); box-sizing: border-box; padding: clamp(3rem, var(--comp-60), 6rem) clamp(2rem, var(--comp-40), 3.2rem); display: flex; flex-direction: column;} .infoBox .whiteBox > *:last-child{ margin-top: auto; margin-bottom: 0;} .infoBox .ttl{ text-align: center; font-family: var(--zen-maru); color: var(--pink); margin-bottom: clamp(2.5rem, var(--comp-50), 4.5rem);} .infoBox .ttl .ja{ font-size: clamp(2.8rem, var(--comp-56), 4.2rem); font-weight: 700; display: block; } .infoBox .ttl .ja span{ text-wrap: nowrap;} .infoBox .ttl .en{ font-size: clamp(1.4rem, var(--comp-28), 2.4rem); font-weight: 500; display: block;} .infoBox .btntype01{ margin-left: auto; margin-right: auto;} .infoBox .text{ font-family: var(--zen-maru); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 500; text-align: center; margin-bottom: clamp(1rem, var(--comp-20), 2rem);} .infoBox .tel{ width: min(100%, 418px); margin: 0 auto clamp(1.25rem, var(--comp-25), 2.5rem);} .infoBox .caution{ font-size: clamp(1.5rem, var(--comp-30), 1.8rem); font-family: var(--zen-maru); text-align: center; font-weight: 500;} .infoBox .caution span{ text-wrap: nowrap;} .infoBox .infoBlock{ margin-bottom: clamp(2.5rem, var(--comp-50), 4rem);} .infoBox .infoBlock .btntype01{ margin-top: 0;} .infoBox figure{ margin-bottom: clamp(3rem, var(--comp-60), 3.5rem);} @media screen and (width <= 1380px){ .infoBox .innerInfoBox{ width: 100%; flex-wrap: wrap;} .infoBox .whiteBox{ width: 100%; max-width: 700px; margin-right: auto; margin-left: auto;} .infoBox .whiteBox:not(:last-child){ margin-bottom: clamp(2rem, var(--comp-40), 3rem);} } /* AREA --------------------------------*/ .areaBox{ margin: clamp(7.25rem, var(--comp-145), 16rem) auto 0; background-color: #35C384; display: flex; align-items: center; width: 1040px; gap: clamp(2.5rem, var(--comp-50), 5rem); padding: 1rem 1rem 1rem 6rem; border-radius: clamp(0.5rem, var(--comp-10), 2rem);} .areaBox figure{ border-radius: clamp(0.5rem, var(--comp-10), 1rem); overflow: hidden; aspect-ratio: 376 / 260; width: 376px;} .areaBox figure img{ object-fit: cover; width: 100%; height: 100%;} .areaBox h2{ color: #fff; font-weight: 700; font-size: clamp(2.4rem, var(--comp-48), 3.2rem); position: relative; padding-left: clamp(4.5rem, var(--comp-90), 6rem); margin-bottom: clamp(1rem, var(--comp-20), 1.5rem); margin-top: 1rem;} .areaBox h2::before{ content: ""; display: block; background-image: url(../img/common/icon-map.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 38 / 60; position: absolute; width: clamp(2.85rem, var(--comp-57), 3.8rem); left: 0; top: 50%; transform: translateY(-50%);} .areaBox p{ color: #fff; font-family: var(--zen-maru); font-size: clamp(1.5rem, var(--comp-30), 1.8rem); font-weight: 700; font-feature-settings: "palt"; letter-spacing: 0.03em; margin-bottom: clamp(1.2rem, var(--comp-25), 2.5rem);} .areaList{ display: flex; flex-wrap: wrap; column-gap: clamp(1rem, var(--comp-20), 1.6rem); row-gap: 1rem;} .areaList li{ font-family: var(--zen-maru); font-size: clamp(1.5rem, var(--comp-30), 1.8rem); font-weight: 500; background-color: #fff; text-align: center; border-radius: clamp(0.25rem, var(--comp-5), 0.4rem); width: calc((100% - (clamp(1rem, var(--comp-20), 1.6rem) * 2) - 1px) / 3); padding: clamp(0.3rem, var(--comp-10), 0.7rem); line-height: 1.4;} @media screen and (width <= 1080px){ .areaBox{ width: 90%;} .areaBox figure{ flex: 1; aspect-ratio: none; height: 100%;} .areaBox .textBox{ width: 40%;} .areaList li{ width: calc((100% - clamp(1rem, var(--comp-20), 1.6rem) - 1px) / 2);} } @media screen and (width <= 1040px){ .areaBox{ width: 90%; max-width: 700px; flex-wrap: wrap; padding: clamp(2rem, var(--comp-40), 3rem);} .areaList li{ width: calc((100% - clamp(1rem, var(--comp-20), 1.6rem) - 1px) / 2); } .areaBox .textBox{ width: 100%;} .areaBox figure{ aspect-ratio: 580 / 520; width: 100%;} .areaBox figure .pc{ display: none !important;} .areaBox figure .sp{ display: block !important;} } /* SECTION --------------------------------*/ .wrapBody{ padding-top: 160px;} section > .inner{ margin: 0 min(10vw, 80px);} @media screen and (width <= 1040px){ .wrapBody{ padding-top: 82px;} } /* HEADING --------------------------------*/ .headingType01{ line-height: 1.6; margin-bottom: clamp(3.5rem, var(--comp-70), 4rem);} .headingType01::before{ content: ""; display: block; aspect-ratio: 172 / 120; width: clamp(4.3rem, var(--comp-86), 8.6rem); background-image: url(../img/top/icon-heart.webp); background-repeat: no-repeat; background-position: center center; background-size: contain;} .headingType01 .ja{ font-size: clamp(2.8rem, var(--comp-56), 4.8rem); display: block; font-weight: 700; color: var(--pink);} .headingType01 .en{ font-size: clamp(1.4rem, var(--comp-28), 2.4rem); font-weight: 500; color: var(--pink);} @media screen and (width <= 800px){ .headingType01::before{ margin: 0 auto;} } /* LIST --------------------------------*/ .checkList{ border-top: 2px solid var(--pink); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 500; line-height: 1.75;} .checkList li{ padding: 1.2rem 0 1.2rem clamp(4.5rem, var(--comp-100), 6.2rem); border-bottom: 2px solid var(--pink); position: relative;} .checkList li::before{ content: ""; display: block; background-image: url(../img/common/icon-check.svg); aspect-ratio: 32 / 22; width: clamp(2.4rem, var(--comp-48), 3.2rem); position: absolute; left: clamp(0.7rem, var(--comp-15), 10px); top: calc(1.2rem + 1rem); background-repeat: round no-repeat;} .checkList li .pink{ color: var(--pink);} /* BUTTON --------------------------------*/ .btntype01{ width: min(100%, 400px); position: relative; margin-top: clamp(3.5rem, var(--comp-80), 6rem); line-height: 1.6;} .btntype01.wide{ width: min(100%, 620px);} .btntype01 a{ display: block; border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: relative; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-25), 1.8rem) clamp(5rem, var(--comp-100), 7rem) clamp(1.2rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem); z-index: 1; background-color: #fff; transition: all ease 0.3s; font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2rem);} .btntype01:has(> a){ padding-bottom: clamp(0.6rem, var(--comp-12), 0.8rem);} .btntype01:has(> a)::after{ content: ""; display: block; width: 100%; height: calc(100% - clamp(0.6rem, var(--comp-12), 0.8rem)); border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: absolute; bottom: 0; left: clamp(0.6rem, var(--comp-12), 0.8rem); } .btntype01 a::after{ content: ""; display: block; position: absolute; top: 50%; right: clamp(2.5rem, var(--comp-50), 2.8rem); transform: translateY(calc(-50% + 0.5px)); } .btntype01.pink a{ border: 2px solid var(--pink); color: var(--pink); } .btntype01.pink:has(> a)::after{ background-color: var(--shadowPink);} .btntype01.pink a::after{ mask-image: url(../img/common/arrow-p01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); background-color: var(--pink); transition: all ease 0.3s;} .btntype01.mint a{ border: 2px solid var(--mint); color: var(--mint); } .btntype01.mint:has(> a)::after{ background-color: var(--shadowMint);} .btntype01.mint a::after{ mask-image: url(../img/common/arrow-b01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); background-color: var(--mint); transition: all ease 0.3s;} .btnList{ width: min(100%, 400px); display: flex; flex-wrap: wrap; gap: clamp(1.6rem, var(--comp-32), 2.4rem);} .btnList li{ width: 100%;} .btnList li a{ display: block; border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: relative; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-25), 1.8rem) clamp(6.5rem, var(--comp-130), 9rem) clamp(1.2rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem); z-index: 1; background-color: #fff; transition: all ease 0.3s; font-family: var(--zen-maru); width: 100%; font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2.1rem); width: 100%; color: var(--pink); line-height: 1.8;} .btnList li a::after{ content: ""; display: block; position: absolute; top: 50%; right: clamp(2.5rem, var(--comp-50), 2.8rem); transform: translateY(calc(-50% + 0.5px)); mask-image: url(../img/common/arrow-p01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); background-color: var(--pink); transition: all ease 0.3s;} .btnFlexList{ width: 100%; display: flex; flex-wrap: wrap; gap: clamp(1.6rem, var(--comp-32), 2.4rem); column-gap: 65px; justify-content: center; margin-top: clamp(3.5rem, var(--comp-80), 6rem);} .btnFlexList > .btntype01{ margin-top: 0;} @media (any-hover: hover) { .btntype01 a:hover{ transform: translate(clamp(0.6rem, var(--comp-12), 0.8rem) , clamp(0.6rem, var(--comp-12), 0.8rem)); opacity: 1;} .btntype01.pink a:hover{ background-color: var(--pink); color: #fff;} .btntype01.pink a:hover::after{ background-color: #fff;} .btntype01.mint a:hover{ background-color: var(--mint); color: #fff;} .btntype01.mint a:hover::after{ background-color: #fff;} } @media screen and (width <= 800px){ .btntype01{ width: min(100%, 80vw); margin-left: auto; margin-right: auto;} .btntype01:has(> a)::after{ left: 0; } } @media screen and (width <= 800px) and (any-hover: hover) { .btntype01 a:hover{ transform: translate(0 , clamp(0.6rem, var(--comp-12), 0.8rem));} } /*-------------------------------------------------------------------------------------------- TOP --------------------------------------------------------------------------------------------*/ /* topMain --------------------------------*/ #topMain .innerTopMain{ position: relative; padding-bottom: 130px;} #topMain .slide{ --h: clamp(36.8rem, 99.45945945945946vw, 60rem); height: var(--h); background-repeat: repeat-x; background-position: 0 0; background-size: auto 100%; --speed: 10; --img-ar: calc(2208 / 600); --tile: calc(var(--h) * var(--img-ar)); --dur: 40s; animation: bg-slide var(--dur) linear infinite; will-change: background-position; border-radius: clamp(1rem, var(--comp-20), 2rem); overflow: hidden; width: calc(100% - 60px); margin: 0 auto; background-image: url(../img/top/slide-pc.webp);} #topMain .icon{ width: calc(100% - 100px); margin: calc(clamp(180px, var(--comp-300), 390px) * (-1)) auto 0; pointer-events: none; position: relative; z-index: 2;} #topMain .icon img{ width: 500px; pointer-events: all;} #topMain .mainNews{ position: absolute; background-color: #fff; bottom: 0; right: 0; z-index: 2; width: 38%; min-width: 654px; padding: 50px; box-sizing: border-box; border-radius: 2rem 0 0 0;} #topMain .innerMainNews a{ display: block; max-width: 450px; position: relative; box-sizing: border-box;} #topMain .innerMainNews h2{ display: flex; flex-wrap: wrap; color: var(--pink); line-height: 1; align-items: center; font-weight: 700; gap: 2rem; line-height: 1; margin-bottom: clamp(2rem, var(--comp-40), 3rem);} #topMain .innerMainNews h2 .en{ font-size: clamp(3rem, var(--comp-60), 4rem); display: inline-block;} #topMain .innerMainNews h2 .ja{ font-size: clamp(1.6rem, var(--comp-32), 2rem); display: inline-block;} #topMain .innerMainNews .innerPickUpNewsBox{ display: flex; align-items: center; gap: clamp(var(--comp-), 1.5rem); gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1rem, var(--comp-20), 1.5rem);} #topMain .innerMainNews .date{ font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); font-weight: 500;} #topMain .innerMainNews .category{ font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); color: #fff; display: inline-block; background-color: var(--pink); border-radius: 200px; font-weight: 500; padding: 0.3em 0.7em; line-height: 1.4;} #topMain .innerMainNews .ttl{ font-size: clamp(1.6rem, var(--comp-32), 2rem); padding-right: clamp(5rem, var(--comp-100), 6rem); text-decoration: underline; position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} #topMain .innerMainNews .ttl::after{ content: ""; display: block; background-image: url(../img/common/arrow-p02.svg); aspect-ratio: 10 / 18; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: clamp(0.7rem, var(--comp-15), 1rem); } @keyframes bg-slide { from { background-position: 0 0; } to { background-position: calc(-1 * var(--tile)) 0; } } @media screen and (width > 1350px){ .pickUpNewsBox:last-child{ display: none;} } @media screen and (width <= 1350px){ #topMain{ display: flex; flex-wrap: wrap;} #topMain .innerTopMain{ display: contents;} #topMain .slide{ background-image: url(../img/top/slide-sp.webp); --img-ar: calc(1932 / 736); order: 1; margin: 0 auto;} #topMain .icon{ width: 86.486486486486%; order: 2; margin: calc(clamp(120px, var(--comp-220), 270px) * (-1)) auto 0;} #topMain .icon img{ width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; display: block;} #topMain .mainNews{ position: relative; background-color: none; bottom: auto; right: auto; width: 100%; min-width: 0; max-width: 100%; padding: 6rem 5% 0; order: 3;} .wrapPickUpNewsBox{ display: flex; gap: 50px; width: 100%; flex-wrap: wrap;} .wrapPickUpNewsBox .pickUpNewsBox{ flex: 1;} #topMain .innerMainNews a{ padding-right: clamp(5rem, var(--comp-100), 6rem); width: 100%; max-width: 100%;} #topMain .innerMainNews a::after{ content: ""; display: block; background-image: url(../img/common/arrow-p02.svg); aspect-ratio: 10 / 18; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: clamp(0.7rem, var(--comp-15), 1rem); } #topMain .innerMainNews h2{ display: flex; flex-wrap: wrap; color: var(--pink); line-height: 1; align-items: center; font-weight: 700; gap: 2rem; line-height: 1; } #topMain .innerMainNews h2 .en{ font-size: clamp(3rem, var(--comp-60), 4rem); display: inline-block;} #topMain .innerMainNews h2 .ja{ font-size: clamp(1.6rem, var(--comp-32), 2rem); display: inline-block;} #topMain .innerMainNews .ttl{ padding-right: 0;} #topMain .innerMainNews .ttl::after{ content: none; } } @media screen and (width <= 800px){ #topMain .slide{ width: 100%; border-radius: 0; } .pickUpNewsBox:last-child{ display: none;} } /* topConcept --------------------------------*/ #topConcept{ position: relative; padding: clamp(8rem, var(--comp-160), 13rem) 0 clamp(4rem, var(--comp-85), 5rem); width: 100%; overflow: hidden; } #topConcept .inner01{ width: min(80%, 1160px) ; margin: 0 auto; } #topConcept .inner02{ position: relative; width: min(80%, 1160px) ; margin: 0 auto; padding-left: 330px;} #topConcept .enLead{ padding-right: 60px; display: flex; align-items: center; gap: 20px; font-size: clamp(1.4rem, var(--comp-27), 1.8rem); color: var(--pink); font-weight: 500; width: 100%; margin: 0 auto clamp( 3.2rem, var(--comp-110), 7rem);} #topConcept .enLead::before{ content: ""; display: block; width: 145px; height: 1px; background-color: var(--pink); } #topConcept .enLead span{ flex: 1; } #topConcept .jaLead{ font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; color: var(--pink); line-height: 2em; margin-bottom: clamp(6rem, var(--comp-110), 7rem); font-family: var(--zen-maru); padding-left: calc(145px + 20px);} #topConcept .imgTopConcept01{ position: absolute; top: 0; left: calc(50% + 305px); width: 690px;} #topConcept .imgTopConcept02{ position: absolute; top: 0; right: calc(50% + 305px); width: 500px;} #topConcept .inner02 .textBox p{ font-size: clamp(1.6rem, var(--comp-32), 2rem); font-weight: 500; font-family: var(--zen-maru); margin-bottom: 1.5em;} @media screen and (width <= 1150px){ #topConcept .inner01{ width: 100%; } #topConcept .inner02{ width: 80%; padding-left: 0;} #topConcept .enLead{ padding-right: 0; display: block; width: 80%; margin: 0 auto clamp(3rem, var(--comp-60), 4rem);} #topConcept .enLead::before{ content: ""; display: block; width: clamp(10rem, var(--comp-200), 20rem); max-width: 100%; margin-bottom: clamp(1rem, var(--comp-20), 2rem);} #topConcept .jaLead{ width: 80%; padding: 0; margin: 0 auto clamp(6rem, var(--comp-120), 7rem);} #topConcept .imgTopConcept01{ position: relative; top: auto; left: auto; width: min(90%, 700px); margin: 0 auto clamp(4rem, var(--comp-80), 5rem); } #topConcept .imgTopConcept01 .pc{ display: none !important;} #topConcept .imgTopConcept01 .sp{ display: block !important;} #topConcept .imgTopConcept02{ display: none;} #topConcept .inner02 .textBox p .pc{ display: none !important;} } @media screen and (width <= 800px){ #topConcept .imgTopConcept01{ position: relative; top: auto; left: auto; width: 100%;} } /* topFeatures --------------------------------*/ #topFeatures{ position: relative; overflow: hidden; padding-bottom: clamp(6rem, var(--comp-120), 11rem);} #topFeatures::before{ content: ""; display: block; width: 1920px; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: var(--palePink); mask-image: url(../img/top/bg-care-pc.svg), url(../img/common/mask.webp); mask-size: 100% auto, 100% calc(100% - 323px); mask-repeat: no-repeat; mask-position: 0 0, 0 323px;} #topFeatures .inner{ position: relative; z-index: 1;} #topFeatures h2{ width: min(80%, 820px); margin: 0 auto 6.4rem;} #topFeatures .catch{ text-align: center; font-size: clamp(1.9rem, var(--comp-38), 2.4rem); font-weight: 700; margin: 0 auto clamp(3.5rem, var(--comp-75), 4.5rem); font-family: var(--zen-maru);} #topFeatures .catch span{ text-wrap: nowrap;} #topFeatures .checkList{ width: min(100%, 800px); margin: 0 auto;} #topFeatures .btntype01{ margin-left: auto; margin-right: auto;} .topBigVisual01{ width: 100%; max-height: 680px; display: block; aspect-ratio: 1600 / 680;} .topBigVisual01 img{ width: 100%; height: 100%; object-fit: cover; object-position: top 0% left 50%;} @media screen and (width <= 800px){ #topFeatures{ padding-top: clamp(4rem, var(--comp-80), 5rem);} #topFeatures::before{ mask-image: url(../img/top/bg-care-sp.svg), url(../img/common/mask.webp); mask-size: 100% auto, 100% calc(100% - 530px); mask-repeat: no-repeat; mask-position: 0 0, 0 530px;} #topFeatures .inner{ position: relative; z-index: 1; margin: 0;} #topFeatures h2{ width: min(67.567567567567%, 500px); margin: 0 auto 6.4rem;} #topFeatures .catch{ width: 80%;} #topFeatures .checkList{ width: 80%; margin: 0 auto;} .topBigVisual01{ aspect-ratio: 740 / 400;} } /* topService --------------------------------*/ #topService{ padding: clamp(8rem, var(--comp-160), 16rem) 0 clamp(1.1rem, var(--comp-220), 22rem); mask-image: url(../img/top/bg-service-pc02.webp), url(../img/common/mask.webp); mask-repeat: no-repeat; mask-position: bottom center, top center; mask-size: max(100%, 1920px) 224px, 100% calc(100% - 223px); background-color: var(--palePink); background-image: url(../img/top/bg-service-pc01.webp); background-repeat: no-repeat; background-position: center top;} #topService .headingType01{ text-align: center; margin-bottom: clamp(4rem, var(--comp-80), 8rem);} #topService .headingType01::before{ margin: 0 auto;} #topService .inner{ margin: 0;} #topService .inner02{ position: relative; padding-top: clamp(6rem, var(--comp-80), 8rem); } #topService figure{ height: 672px; width: 60%; border-radius: 0 clamp(0.5rem, var(--comp-10), 2rem) clamp(0.5rem, var(--comp-10), 2rem) 0; overflow: hidden; position: absolute; top: 0; left: 0;} #topService figure img{ object-fit: cover; width: 100%; height: 100%; object-position: top center;} #topService .textBox{ width: min(50%, 584px); margin: 0 auto; border-radius: clamp(0.5rem, var(--comp-10), 2rem); overflow: hidden; background: #FF8EAA; box-sizing: border-box; padding: clamp(5rem, var(--comp-110), 7rem) clamp(4rem, var(--comp-80), 6.5rem) clamp(6rem, var(--comp-120), 8rem); position: relative; margin-left: calc(50% + 5.5rem);} #topService .textBox p{ color: #fff; line-height: 2; font-size: var(--base-font-size); margin-bottom: clamp(3.5rem, var(--comp-70), 4rem); font-weight: 500;} #topService .btnList{ width: 100%; } @media screen and (width > 800px) and (width <= 1260px){ #topService .textBox{ border-radius: clamp(0.5rem, var(--comp-10), 2rem) 0 0 clamp(0.5rem, var(--comp-10), 2rem); margin-left: auto; margin-right: 0;} } @media screen and (width <= 800px){ #topService{ padding-bottom: var(--comp-220); mask-image: url(../img/top/bg-service-sp02.webp), url(../img/common/mask.webp); mask-repeat: no-repeat; mask-position: bottom center, top center; mask-size: 100% var(--comp-220), 100% calc(100% - var(--comp-220) + 1px); background-color: var(--palePink); background-image: url(../img/top/bg-service-sp01.webp); background-repeat: no-repeat; background-position: center top; background-size: 100%;} #topService .inner02{ padding-top: 0; } #topService figure{ height: auto; width: 80%; border-radius: clamp(0.5rem, var(--comp-10), 2rem) ; overflow: hidden; position: relative; top: auto; left: auto; margin: 0 auto; z-index: 2;} #topService figure img{ object-fit: fill; width: 100%; height: auto; object-position: top center;} #topService .textBox{ width: 100%; border-radius: 0; padding: clamp(11rem, var(--comp-220), 13rem) clamp(4rem, var(--comp-80), 6.5rem) clamp(6rem, var(--comp-120), 8rem); position: relative; margin: calc(clamp(8rem, var(--comp-160), 8.5rem) * (-1)) 0 0;} #topService .btnList{ width: 100%; } } /* topCases --------------------------------*/ #topCases{ padding: clamp(17rem, var(--comp-340), 38rem) 0 clamp(7rem, var(--comp-145), 16rem); margin-top: calc(clamp(11.25rem, var(--comp-225), 22rem) * (-1)); background-image: url(../img/top/bg-case-pc.webp); background-size: contain; background-position: center top; background-repeat: no-repeat;} #topCases .inner{ max-width: 1280px; margin-left: auto; margin-right: auto; display: flex; gap: 9.5rem;} #topCases .inner > hgroup{ width: 280px; } #topCases .inner > hgroup p{ font-size: var(--base-font-size); font-weight: 500;} #topCases .wrapCasesBox{ display: flex; flex-wrap: wrap; gap: clamp(5rem, var(--comp-100), 9rem); width: calc(100% - 280px - 9.5rem);} #topCases .wrapCasesBox .casesBox{ position: relative; padding-top: 210px; width: 100%; } #topCases .wrapCasesBox hgroup{ display: contents; } #topCases .wrapCasesBox figure{ position: absolute; top: 0; right: 0; border-radius: clamp(1rem, var(--comp-20), 2rem); overflow: hidden; height: 400px; width: 720px;} #topCases .wrapCasesBox figure img{ object-fit: cover; width: 100%; height: 100%;} #topCases .wrapCasesBox .casesBox *:not(figure){ position: relative; z-index: 1;} #topCases .wrapCasesBox h3{ width: 206px; margin: 0; } #topCases .wrapCasesBox .whiteBox{ margin-left: 65px; background-color: #fff; width: 480px; border-radius: 0 clamp(1rem, var(--comp-20), 2rem); padding: clamp(3.2rem, var(--comp-65), 5.5rem) clamp(3rem, var(--comp-80), 4rem) 0 0;} #topCases .wrapCasesBox .casesBox .whiteBox h4{ font-size: clamp(1.7rem, var(--comp-34), 2.4rem); color: var(--pink); font-weight: 700; margin-bottom: 3rem; line-height: 1.875;} #topCases .wrapCasesBox .casesBox .whiteBox p:not([class]){ font-size: var(--base-font-size);} @media screen and (width > 1080px) and (width <= 1320px){ #topCases{ background-image: none;} #topCases .inner{ width: 90%; flex-wrap: wrap;} #topCases .inner > hgroup{ width: 100%; text-align: center;} #topCases .inner > hgroup h2::before{ margin: 0 auto;} #topCases .wrapCasesBox{ margin-left: auto; margin-right: auto; width: calc(100% - 9.5rem);} } @media screen and (width <= 1080px){ #topCases{ padding: clamp(17rem, var(--comp-340), 38rem) 0 0; margin-top: calc( var(--comp-225) * (-1)); background-image: url(../img/top/bg-case-sp01.webp) , url(../img/top/bg-case-sp02.webp); background-position: center top, center bottom; background-repeat: no-repeat; background-size: 100% auto;} #topCases .inner{ max-width: 100%; display: block; } #topCases .inner > hgroup{ width: 80%; margin: 0 auto;} #topCases .inner > hgroup p{ margin-bottom: clamp(3rem, var(--comp-60), 4rem); text-align: center;} #topCases .inner > hgroup h2{ text-align: center;} #topCases .wrapCasesBox{ display: block; width: 100%; padding-bottom: clamp(2rem, var(--comp-40), 3rem);} #topCases .wrapCasesBox .casesBox{ padding: 0 0 clamp(5.5rem, var(--comp-110), 6.5rem); } #topCases .wrapCasesBox hgroup{ display: block; position: relative; } #topCases .wrapCasesBox figure{ position: relative; top: auto; right: auto; border-radius: 0; overflow: hidden; height: auto; width: 100%; mask-image: url(../img/top/mask-sp.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: 100% auto; aspect-ratio: 740 / 400;} #topCases .wrapCasesBox .casesBox *:not(figure){ z-index: 1;} #topCases .wrapCasesBox .casesBox h3{ position: absolute !important; width: 42.2972972972972972%; left: 0; bottom: 12%;} #topCases .wrapCasesBox .whiteBox{ margin-left: auto; margin-right: auto; background: none; width: 80%; border-radius: 0; padding: 0;} #topCases .wrapCasesBox .casesBox .whiteBox p .pc{ display: none !important;} #topCases .wrapCasesBox .casesBox .whiteBox .btntype01{ margin-left: auto; margin-right: auto;} } @media screen and (width <= 800px){ #topCases .inner > hgroup p{ margin-bottom: clamp(3rem, var(--comp-60), 4rem); text-align: left;} } /* topFaq --------------------------------*/ #topFaq{ position: relative; } #topFaq .inner{ padding: 0 0 min(7rem, var(--comp-140), 11rem); position: relative;} #topFaq .inner::before{ content: ""; width: min(70%, 1040px); height: calc(100% - clamp(7.5rem, var(--comp-150), 10rem)); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 2rem; background-color: #FBE9F1;} #topFaq h2{ width: min(91.62%, 45.2rem); margin: 0 auto; position: relative; margin-bottom: clamp(4.5rem, var(--comp-90), 6rem);} #topFaq .topFaqlist{ width: min(90%, 1280px); margin: 0 auto; display: flex; justify-content: space-between;} #topFaq .topFaqlist li{ width: min(31.25%, 400px); position: relative; padding-bottom: clamp(0.6rem, var(--comp-12), 0.8rem);} #topFaq .topFaqlist li a{ border: clamp(0.6rem, var(--comp-12), 0.8rem) solid #fff; border-radius: clamp(0.75rem, var(--comp-15), 1rem); display: block; border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: relative; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem) clamp(1.2rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem); z-index: 1; background-color: #FF8EAA; transition: all ease 0.3s; font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2rem); color: #fff; height: 100%; display: flex; flex-direction: column;} #topFaq .topFaqlist li::after{ content: ""; display: block; width: 100%; height: calc(100% - clamp(0.6rem, var(--comp-12), 0.8rem)); border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: absolute; bottom: 0; left: clamp(0.6rem, var(--comp-12), 0.8rem); background-color: var(--shadowPink);} #topFaq .topFaqlist h3{ position: relative; padding-left: clamp(4rem, var(--comp-80), 5.5rem); letter-spacing: 0.1em; margin: 0 auto clamp(1rem, var(--comp-20), 2rem); width: 100%;} #topFaq .topFaqlist h3::before{ content: "Q"; position: absolute; top: 0; left: 0; font-size: clamp(2rem, var(--comp-40), 4rem);} #topFaq .topFaqlist h3 span{ display: block; line-height: 1.8; padding-top: calc(clamp(2rem, var(--comp-40), 4rem) / 7);} #topFaq .topFaqlist figure{ width: clamp(14.4rem, 38.9181981981981vw, 19.2rem); margin: 0 auto clamp(1rem, var(--comp-20), 1.6rem);} #topFaq .topFaqlist .btn{ background-color: #fff; margin: auto auto 0; color: var(--pink); font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.5rem, var(--comp-30), 2rem); display: inline-block; border-radius: 80px; width: 17.3rem; padding: 0 clamp(3rem,var(--comp-60), 3rem) 0 clamp(1.75rem,var(--comp-35), 2.5rem); letter-spacing: 0; box-sizing: border-box; position: relative;} #topFaq .topFaqlist .btn::after{ content: ""; display: block; aspect-ratio: 10 / 18; position: absolute; width: clamp(0.75rem, var(--comp-15), 1rem); background-image: url(../img/common/arrow-p02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; top: 50%; right: clamp(1.75rem,var(--comp-35), 2.5rem); transform: translateY(-50%);} @media (any-hover: hover) { #topFaq .topFaqlist li a:hover{ transform: translate(clamp(0.6rem, var(--comp-12), 0.8rem) , clamp(0.6rem, var(--comp-12), 0.8rem)); opacity: 1;} } @media screen and (width <= 1340px){ #topFaq .inner{ width: 100%; box-sizing: border-box; margin: 0;} #topFaq .inner::before{ width: 100%; border-radius: 0; } } @media screen and (width <= 940px){ #topFaq .inner::before{ width: 100%; border-radius: 0; } #topFaq .topFaqlist{ flex-wrap: wrap; width: 81%;} #topFaq .topFaqlist li{ width: 100%;} #topFaq .topFaqlist li:not(:last-child){ margin-bottom: clamp(1.4rem, var(--comp-28), 1.6rem);} #topFaq .topFaqlist li::after{ left: 0;} #topFaq .topFaqlist h3{ padding-left: calc(clamp(2rem, var(--comp-40), 4rem) + 0.5em); } } @media screen and (width <= 940px) and (any-hover: hover) { #topFaq .topFaqlist li a:hover{ transform: translate(0, clamp(0.6rem, var(--comp-12), 0.8rem));} } /* topNews --------------------------------*/ #topNews .innerTopNews{ display: flex; width: 1280px; margin: clamp(6rem, var(--comp-120), 16rem) auto 0; justify-content: space-between;} #topNews hgroup{ width: 280px;} #topNews .topNewsList{ width: 900px; display: flex; gap: 3.2rem;} #topNews .topNewsList li{ flex: 1;} #topNews .topNewsList figure{ aspect-ratio: 1200 / 630; width: 100%; border-radius: clamp(0.8rem, var(--comp-20), 1rem); overflow: hidden; margin-bottom: clamp(1rem, var(--comp-20), 1.5rem);} #topNews .topNewsList figure img{ object-fit: cover; width: 100%; height: 100%;} #topNews .topNewsList .date{ text-align: right; font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); line-height: 1; margin-bottom: clamp(1.25rem, var(--comp-25), 1.5rem);} #topNews .topNewsList .category{ display: inline-block; line-height: 1.4; font-size: clamp(1.5rem, var(--comp-30), 1.8rem); color: var(--pink); background-color: #fff; border: clamp(0.15rem, 0.4vw, 0.2rem) solid var(--pink); font-weight: 500; border-radius: 80px; padding: clamp(0.2rem, var(--comp-5), 0.4rem) clamp(1.2rem, var(--comp-25), 1.5rem); margin-bottom: 1.5rem;} #topNews .topNewsList h3{ color: var(--pink); font-size: clamp(1.9rem, var(--comp-38), 2.4rem); font-family: var(--base-font); font-weight: 500; margin-bottom: 1rem; line-height: 1.75;} #topNews .topNewsList p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--base-font-size);} @media screen and (width > 800px) and (width <= 1400px){ #topNews .innerTopNews{ display: flex; width: 100%; flex-wrap: wrap;} #topNews hgroup{ display: contents;} #topNews hgroup h2{order: 1; text-align: center; width: 100%;} #topNews hgroup h2::before{ margin: 0 auto;} #topNews .topNewsList{ order: 2; width: 100%;} #topNews .btntype01{ order: 3; margin-left: auto; margin-right: auto;} } @media screen and (width <= 940px){ #topNews .inner{ width: 90%; margin: 0 auto;} #topNews .innerTopNews{ display: flex; width: 100%; flex-wrap: wrap; margin: clamp(6rem, var(--comp-120), 16rem) auto 0;} #topNews hgroup{ display: contents;} #topNews hgroup h2{order: 1; text-align: center; width: 100%;} #topNews .topNewsList{ order: 2; flex-wrap: wrap;} #topNews .topNewsList li{ width: 100%; flex: none;} #topNews .btntype01{ order: 3;} } /*-------------------------------------------------------------------------------------------- ANIMATION --------------------------------------------------------------------------------------------*/ .fadein{ opacity: 0;} .fadein.scrollin{ animation: openingSlideIn 1s ease forwards; animation-delay: 0.1s;} @keyframes slideOutIn-Rotate { 0% { transform: translateX(0%) translateY(-50%) rotate(45deg); } 40% { transform: translateX(200%) translateY(-50%) rotate(45deg); } 40.0001% { transform: translateX(-200%) translateY(-50%) rotate(45deg); } 60% { transform: translateX(-200%) translateY(-50%) rotate(45deg); } 100% { transform: translateX(0%) translateY(-50%) rotate(45deg); } } @keyframes slideOutIn { 0% { transform: translateX(0%); } 40% { transform: translateX(110%); } 40.0001% { transform: translateX(-110%); } 60% { transform: translateX(-110%); } 100% { transform: translateX(0%); } } @keyframes slideOutIn-re { 0% { transform: translateX(0%); } 40% { transform: translateX(-110%); } 40.0001% { transform: translateX(110%); } 60% { transform: translateX(110%); } 100% { transform: translateX(0%); } } @keyframes slideOutIn-tb { 0% { transform: translateY(0%); } 40% { transform: translateY(-110%); } 40.0001% { transform: translateY(110%); } 60% { transform: translateY(110%); } 100% { transform: translateY(0%); } } @keyframes openingFadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes openingSlideIn { 0% { transform: translateY(min(var(--comp-20), 20px)); opacity: 0;} 100% { transform: translateY(0); opacity: 1;} } @keyframes slideOutInCF { 0% { background-position: 0% center; } 40% { background-position: 110% center; } 40.0001% { background-position: -110% center; } 60% { background-position: -110% center; } 100% { background-position: 0% center; } } @keyframes slideOutInCF-re { 0% { background-position: 0% center; } 40% { background-position: calc(min(var(--comp-20), 15px)*(-1) - 1px) center; } 40.0001% { background-position: calc(min(var(--comp-20), 15px) + 1px) center; } 60% { background-position: calc(min(var(--comp-20), 15px) + 1px) center; } 100% { background-position: 0% center; } } @keyframes pagerarrow { 0% { background-position: 0% center; } 40% { background-position: calc(min(var(--comp-25), 18px) * (-1) - 1px) center; } 40.0001% { background-position: calc(min(var(--comp-25), 18px) + 1px) center; } 60% { background-position: calc(min(var(--comp-25), 18px) + 1px) center; } 100% { background-position: 0% center; } } @keyframes pagerarrow-re { 0% { background-position: 0% center; } 40% { background-position: calc(min(var(--comp-25), 18px) + 1px) center;} 40.0001% { background-position: calc(min(var(--comp-25), 18px) * (-1) - 1px) center; } 60% { background-position: calc(min(var(--comp-25), 18px) * (-1) - 1px) center; } 100% { background-position: 0% center; } } /*-------------------------------------------------------------------------------------------- SECOND --------------------------------------------------------------------------------------------*/ /* BASE --------------------------------*/ /*-- heading --*/ .secondTtlBox{ background-color: var(--palePink); background-image: url(../img/common/bg-pageheader-pc.webp); background-repeat: no-repeat; background-position: center top; width: 100%; min-height: 480px; mask-image: url(../img/common/bg-pageheader-pc.webp), url(../img/common/mask.webp); mask-position: center bottom, center top; mask-repeat: no-repeat; mask-size: max(1920px, 100%) 480px, 100% calc(100% - 479px); padding: clamp(40px, var(--comp-80), 100px) 0 clamp(75px, var(--comp-150), 220px); pointer-events: none; display: flex; flex-direction: column; justify-content: center;} .secondTtlBox h2{ width: min(80%, 1280px); margin: 0 auto; font-size: clamp(2.4rem, var(--comp-48), 4.8rem); font-weight: 700; line-height: 1.75;} @media screen and (width <= 800px){ .secondTtlBox{ background-image: url(../img/common/bg-pageheader-sp.webp); background-repeat: no-repeat; background-position: center top; min-height: clamp(240px, var(--comp-480), 480px); mask-image: url(../img/common/bg-pageheader-sp.webp), url(../img/common/mask.webp); mask-position: center bottom, center top; mask-repeat: no-repeat; mask-size: 100% clamp(240px, var(--comp-480), 480px), 100% calc(100% - clamp(240px, var(--comp-480), 480px) + 1px); padding: clamp(40px, var(--comp-80), 100px) 0 clamp(75px, var(--comp-150), 220px); pointer-events: none;} } /*-- breadcrumbs --*/ .breadcrumbsBox{ width: min(80%, 1280px); margin: calc(clamp(14px, var(--comp-28), 18px) * (-1)) auto clamp(8rem, var(--comp-160), 12rem); } .breadcrumbsBox ol{ width: 100%; line-height: 1.8; font-size: clamp(1.4rem, var(--comp-28), 1.8rem);} .breadcrumbsBox ol li > *{ margin-right: 10px; } .breadcrumbsBox ol li{ display: contents;} .breadcrumbsBox ol li a, .breadcrumbsBox ol li span{ font-size: clamp(1.4rem, var(--comp-28), 1.8rem); display: inline; font-family: var(--base-font); } .breadcrumbsBox ol li a{ color: var(--base-font-color);} .breadcrumbsBox ol li span{ color: var(--pink);} .breadcrumbsBox ol li:first-child::before{ content: ""; display: inline-block; width: clamp(0.8rem, var(--comp-16), 1rem); background-color: var(--pink); aspect-ratio: 1 / 1; border-radius: 50%; vertical-align: middle; margin-right: 10px;} .breadcrumbsBox ol li:not(:first-child)::before{ content: ""; display: inline-block; width: clamp(2.4rem, var(--comp-48), 3.2rem); background-color: #666666; height: 1px; vertical-align: middle; margin-right: 10px;} @media (any-hover: hover) { .breadcrumbsBox ol li a:hover{ color: var(--pink); opacity: 1;} } @media screen and (width <= 1280px){ .breadcrumbsBox{ margin-top: clamp(15px, var(--comp-30), 30px);} .breadcrumbsBox ol{ width: 100%;} } /* BOX --------------------------------*/ /*-- pageLeadBox --*/ .pageLeadBox{ padding-bottom: clamp(6rem, var(--comp-120), 10rem);} .pageLeadBox .inner{ width: min(80%, 1160px); margin-right: auto; margin-left: auto;} .pageLeadBox .lead{ font-size: clamp(1.6rem, var(--comp-30), 2.2rem); font-weight: 500;} .pageLeadBox .lead a{ text-decoration: underline;} .pageLeadBox .lead b{ font-weight: 800;} /*-- SECTION --*/ section.bgPink01{ background-color: var(--palePink); padding: clamp(6rem, var(--comp-120), 10rem) 0;} section.bgPink02{ background-color: #FBE9F1; padding: clamp(6rem, var(--comp-120), 10rem) 0;} section.bgGreen01{ background-color: var(--paleGreen); padding: clamp(6rem, var(--comp-120), 10rem) 0;} section.bgWhite01{ background-color: #fff; padding: clamp(6rem, var(--comp-120), 10rem) 0;} section.bgPink01 .inner, section.bgPink02 .inner, section.bgGreen01 .inner, section.bgWhite01 .inner{ width: min(80%, 1160px); margin-right: auto; margin-left: auto;} section.upSection{ padding-bottom: clamp(6rem, var(--comp-120), 10rem);} section.upSection.pink{ position: relative; padding-bottom: clamp(6rem, var(--comp-120), 10rem) !important;} section.upSection > figure{ width: 100%; margin: 0; height: clamp(200px, var(--comp-400), 640px); width: 100%; overflow: hidden; position: relative;} section.upSection > figure img{ display: block; object-fit: cover; width: 100%; height: 100%;} section.upSection .inner{ width: min(90%, 1280px); background-color: #fff; position: relative; z-index: 1; margin-top: calc(clamp(40px, var(--comp-80), 120px) * (-1)); padding-top: clamp(40px, var(--comp-80), 120px); border-radius: clamp(10px, var(--comp-20), 20px); margin-right: auto; margin-left: auto;} section.upSection.pink .inner{ background-color: var(--palePink); } section.upSection.pink::before{ content: ""; display: block; height: calc(100% - clamp(40px, var(--comp-80), 120px)); width: 100%; position: absolute; bottom: 0; left: 0; background-color: var(--palePink);} section:has( + section.upSection){ padding-bottom: calc(clamp(6rem, var(--comp-120), 10rem) + clamp(40px, var(--comp-80), 120px));} section:has( + section.upSection):has( > figure){ padding-bottom: 0;} section:has( + section.upSection):has( > figure) .inner{ padding-bottom: clamp(6rem, var(--comp-120), 10rem);} section.bgWhite01:last-child{ padding-bottom: 0;} section.upSection:last-child{ padding-bottom: 0;} section.bgPink01 .inner > .btntype01, section.bgPink02 .inner > .btntype01, section.bgGreen01 .inner > .btntype01, section.bgWhite01 .inner > .btntype01{ margin-right: auto; margin-left: auto;} section.bgPink01 .inner > .btnFlexList, section.bgPink02 .inner > .btnFlexList, section.bgGreen01 .inner > .btnFlexList, section.bgWhite01 .inner > .btnFlexList{ margin-right: auto; margin-left: auto;} section.innerBg > hgroup{ padding: clamp(6rem, var(--comp-120), 10rem) 0 clamp(3rem, var(--comp-60), 7rem); width: min(80%, 1160px); margin: 0 auto;} section.innerBg > hgroup .catch{ text-align: center; font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; width:min(100%, 1080px) ; margin-right: auto; margin-left: auto;} section.innerBg > .btntype01{ margin-right: auto; margin-left: auto; margin-bottom: clamp(6rem, var(--comp-120), 10rem);} section.innerBg:has( + .bgWhite01) > .btntype01{ margin-bottom: clamp(3rem, var(--comp-60), 6rem);} /* 見出しだけ少し多め（h1～h6） */ section.upSection{ scroll-margin-top: 140px; } @media (max-width: 1040px) { section.upSection{ scroll-margin-top: 100px; } } /*-- FLEX --*/ .flexBox{ display: flex;} .flexBox.headingBox{ justify-content: space-between; width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto;} .flexBox.headingBox hgroup{ width: min(29.6551724%, 344px);} .flexBox.headingBox hgroup p{ font-size: var(--base-font-size); font-weight: 500;} .flexBox.headingBox .textBox{ width: min(62.0689655%, 720px);} @media screen and (width <= 1100px){ .flexBox.headingBox{ flex-wrap: wrap;} .flexBox.headingBox hgroup{ width: 100%; margin-bottom: clamp(4.5rem, var(--comp-90), 5.5rem);} .flexBox.headingBox hgroup .headingType01{ text-align: center;} .flexBox.headingBox hgroup .headingType01::before{ margin-right: auto; margin-left: auto;} .flexBox.headingBox .textBox{ width: 100%;} } /*-- numBlockBox --*/ .numBlockBox{ display: flex; flex-wrap: wrap; gap: clamp(6rem, var(--comp-120), 10rem);} .numBlockBox h3{ position: relative; display: flex; align-items: flex-start; gap: clamp(1.5rem, var(--comp-30), 4rem); justify-content: space-between; margin: 0 auto clamp(2rem, var(--comp-40), 5rem);} .numBlockBox h3::before{ content: ""; display: block; aspect-ratio: 88 / 80; width: clamp(4.4rem, var(--comp-88), 88px);} .numBlockBox .wrapNumBlockBox:nth-child(1) h3::before{ background-image: url(../img/common/no01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(2) h3::before{ background-image: url(../img/common/no02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(3) h3::before{ background-image: url(../img/common/no03.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(4) h3::before{ background-image: url(../img/common/no04.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(5) h3::before{ background-image: url(../img/common/no05.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(6) h3::before{ background-image: url(../img/common/no06.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(7) h3::before{ background-image: url(../img/common/no07.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(8) h3::before{ background-image: url(../img/common/no08.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox .wrapNumBlockBox:nth-child(9) h3::before{ background-image: url(../img/common/no09.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox h3 span{ font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; color: var(--pink); line-height: 2; padding-top: 0.15rem; display: block; width: calc(100% - clamp(4.4rem, var(--comp-88), 88px) - clamp(1.5rem, var(--comp-30), 4rem) - 1px);} .numBlockBox .wrapNumBlockBox.nonum h3 span{ padding-top: 0 !important; } .numBlockBox .wrapNumBlockBox.nonum h3::before{ content: none !important;} .numBlockBox .innerNumBlockBox{ display: flex; justify-content: space-between;} .numBlockBox .wrapNumBlockBox:nth-child(odd) .innerNumBlockBox{ flex-direction: row-reverse;} .numBlockBox .wrapNumBlockBox:nth-child(even) .innerNumBlockBox{ flex-direction: row;} .numBlockBox .innerNumBlockBox figure{ width: min(55.1724137%, 640px); aspect-ratio: 640 / 410; overflow: hidden; border-radius: 20px;} .numBlockBox .innerNumBlockBox .textBox{ width: min(37.9310344%, 440px);} .numBlockBox h4{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; line-height: 2; margin: 0 auto clamp(2rem, var(--comp-40), 3rem);} .numBlockBox p{ font-size: var(--base-font-size); line-height: 2;} .numBlockBox p .pink{ color: var(--pink); font-weight: 700;} /*-- numBlockBox02 --*/ .numBlockBox02{ display: flex; flex-wrap: wrap; row-gap: clamp(6rem, var(--comp-120), 10rem);} .numBlockBox02 .innerNumBlockBox{ display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; justify-content: space-between; row-gap: clamp(2.5rem, var(--comp-50), 5rem);} .numBlockBox02 .innerNumBlockBox:nth-child(odd){ flex-direction: row;} .numBlockBox02 .innerNumBlockBox:nth-child(even){ flex-direction: row-reverse;} .numBlockBox02 .innerNumBlockBox figure{ width: min(55.1724137%, 640px); overflow: hidden; border-radius: clamp(10px, var(--comp-20), 20px);} .numBlockBox02 .innerNumBlockBox .textBox{ width: min(37.9310344%, 440px); font-weight: 500;} .numBlockBox02 .innerNumBlockBox .textBox::before{ content: ""; display: block; aspect-ratio: 88 / 80; width: clamp(4.4rem, var(--comp-88), 88px); margin-bottom: clamp(1.75rem, var(--comp-35), 4rem);} .numBlockBox02 .innerNumBlockBox:nth-child(1) .textBox::before{ background-image: url(../img/common/no01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(2) .textBox::before{ background-image: url(../img/common/no02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(3) .textBox::before{ background-image: url(../img/common/no03.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(4) .textBox::before{ background-image: url(../img/common/no04.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(5) .textBox::before{ background-image: url(../img/common/no05.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(6) .textBox::before{ background-image: url(../img/common/no06.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(7) .textBox::before{ background-image: url(../img/common/no07.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .numBlockBox02 .innerNumBlockBox:nth-child(8) .textBox::before{ background-image: url(../img/common/no08.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} @media screen and (width <= 1000px){ .numBlockBox h3{ display: block;} .numBlockBox h3 span{ width: 100%; margin-top: clamp(1.5rem, var(--comp-30), 3rem);} .numBlockBox .wrapNumBlockBox.nonum h3 span{ margin-top: 0; } .numBlockBox .innerNumBlockBox{ flex-wrap: wrap; gap: clamp(2rem, var(--comp-40), 4rem);} .numBlockBox .innerNumBlockBox figure{ width: 100%;} .numBlockBox .innerNumBlockBox .textBox{ width: 100%;} .numBlockBox02 .innerNumBlockBox figure{ width: 100%;} .numBlockBox02 .innerNumBlockBox .textBox{ width: 100%;} .numBlockBox02 .innerNumBlockBox .textBox::before{ content: ""; display: block; aspect-ratio: 88 / 80; width: clamp(4.4rem, var(--comp-88), 88px); margin-bottom: clamp(1.75rem, var(--comp-35), 4rem);} } /* HEADING --------------------------------*/ /*-- pinkHeading --*/ .pinkHeading01{ color: var(--pink); font-size: clamp(2rem, var(--comp-40), 4rem); font-weight: 700; line-height: 1.8; margin: clamp(8rem, var(--comp-160), 12rem) auto clamp(2.5rem, var(--comp-50), 5rem);} .pinkHeading02{ color: var(--pink); font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; line-height: 2; margin: clamp(8rem, var(--comp-160), 12rem) auto clamp(2rem, var(--comp-40), 3rem);} .pinkHeading03{ color: var(--pink); font-size: clamp(2.8rem, var(--comp-56), 4.8rem); font-weight: 700; line-height: 1.6; margin: clamp(8rem, var(--comp-160), 12rem) auto clamp(2.5rem, var(--comp-50), 5rem); text-align: center;} .pinkHeading03 span{ display: block; line-height: 1; font-size: clamp(1.8rem, var(--comp-36), 3.2rem); font-weight: 500; margin-top: 1rem;} .pinkHeading04{ font-size: clamp(1.6rem, var(--comp-34), 2.2rem); font-weight: 700; margin: clamp(2.5rem, var(--comp-50), 6rem) auto clamp(1rem, var(--comp-20), 1.5rem); font-family: var(--base-font); color: var(--pink); font-weight: 700; line-height: 1.6; font-feature-settings: "palt";} /*-- blackHeading --*/ .blackHeading01{ color: var(--base-font-color); font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; line-height: 2; margin: clamp(4rem, var(--comp-80), 8rem) auto clamp(2rem, var(--comp-40), 4rem); } .blackHeading02{ color: var(--base-font-color); font-size: clamp(2rem, var(--comp-40), 4rem); font-weight: 700; line-height: 2; margin: clamp(10rem, var(--comp-200), 20rem) auto clamp(7rem, var(--comp-145), 12rem); text-align: center;} .pinkHeading01:first-child, .pinkHeading02:first-child, .pinkHeading03:first-child, .pinkHeading04:first-child, .blackHeading01:first-child, .blackHeading02:first-child{ margin-top: 0;} .pinkHeading01:last-child, .pinkHeading02:last-child, .pinkHeading03:last-child, .pinkHeading04:last-child, .blackHeading01:last-child, .blackHeading02:last-child{ margin-bottom: 0;} /*-- lineTtl --*/ .lineTtl{ width: 100%; max-width: 1160px; margin: clamp(4rem, var(--comp-80), 10rem) auto clamp(2.5rem, var(--comp-50), 6rem); border-bottom: 2px solid var(--pink); font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; line-height: 2;} .lineTtl + p{ font-weight: 500;} .lineTtl:first-child, .pinkHeading03 + .lineTtl{ margin-top: 0;} .lineTtl:last-child{ margin-bottom: 0;} .lineTtl[caution]::before { content: attr(caution) !important; display: block; color: var(--pink); line-height: 1; font-size: var(--base-font-size);} .lineTtl[box]{display: flex; flex-direction: column; align-items: flex-start;} .lineTtl[box]::before { content: attr(box) !important; display: inline-block; line-height: 1; font-size: clamp(1.5rem, var(--comp-30), 2.4rem); color: #fff; background-color: var(--pink); padding: 1.2rem clamp(15px, var(--comp-30), 25px); border-radius: 5px; } /*-- dotTtl --*/ .dotTtl{ color: var(--pink); border-bottom: 4px dotted var(--pink); font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; line-height: 1.8; margin: clamp(8rem, var(--comp-160), 12rem) auto clamp(2rem, var(--comp-40), 3rem); padding-bottom: clamp(0.5rem, var(--comp-10), 1rem); font-family: var(--zen-maru); } /*-- circleTtl --*/ .circleTtl{ font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2.4rem); padding-left: 1.5em; text-indent: -1.5em; line-height: 1.8; color: var(--pink); margin: clamp(2.5rem, var(--comp-50), 5rem) auto 1rem;} .circleTtl::before{ content: "● "; margin-right: 0.2em;} .dotTtl:first-child{ margin-top: 0;} .dotTtl:last-child{ margin-bottom: 0;} /* LIST・TABLE --------------------------------*/ /*-- lineListBox --*/ .lineListBox{ border-top: 1px solid #BFBFBF;} .lineListBox dl, .lineListBox > div{ border-bottom: 1px solid #BFBFBF; box-sizing: border-box; padding: clamp(2.25rem, var(--comp-45), 3rem) clamp(12px, var(--comp-24), 16px); font-family: var(--base-font); font-size: var(--base-font-size); line-height: 2; } .lineListBox dt{ color: var(--pink); font-family: var(--base-font);} .lineListBox dd{ font-family: var(--base-font);} .lineListBox b, .lineListBox span{ font-family: inherit;} .lineListBox .pink{ color: var(--pink);} /*-- simpleAnchorList --*/ .simpleAnchorList{ display: flex; flex-wrap: wrap; gap: clamp(10px, var(--comp-20), 30px); width: 100%; margin-right: auto; margin-left: auto;} .simpleAnchorList > li{ width: calc((100% - (clamp(10px, var(--comp-20), 30px) * 3) - 1px) / 4);} .simpleAnchorList > li a{ display: block; height: 100%; position: relative; font-size: clamp(1.5rem, var(--comp-30), 2rem); font-weight: 700; text-align: center; border: 2px solid var(--pink); border-radius: clamp(0.4rem, var(--comp-8), 0.8rem); padding: clamp(1.5rem, var(--comp-30), 2rem) 5px 40px; line-height: 1.4; } .simpleAnchorList > li a::after{ content: ""; display: block; width: 18px; aspect-ratio: 18 / 10; position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); transition: all ease 0.3s; background-image: url(../img/common/down-p.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} @media (any-hover: hover) { .simpleAnchorList > li a:hover{ opacity: 1;} .simpleAnchorList > li a:hover::after{ bottom: 10px;} } @media screen and (width <= 1200px){ .simpleAnchorList > li{ width: calc((100% - (clamp(10px, var(--comp-20), 30px) * 2) - 1px) / 3);} } @media screen and (width <= 1000px){ .simpleAnchorList > li{ width: calc((100% - (clamp(10px, var(--comp-20), 30px)) - 1px) / 2);} } /*-- squareNumList --*/ .squareNumList{ border-top: 2px solid var(--pink); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 500; line-height: 1.75;} .squareNumList li{ padding: 1.2rem 0 1.2rem clamp(4.5rem, var(--comp-100), 6.2rem); border-bottom: 2px solid var(--pink); position: relative;} .squareNumList li::before{ content: ""; display: block; aspect-ratio: 1 / 1; width: clamp(2.4rem, var(--comp-48), 3.2rem); position: absolute; left: clamp(0.7rem, var(--comp-15), 10px); top: calc(1.2rem + 0.5rem); background-repeat: round no-repeat;} .squareNumList li:nth-child(1):before{ background-image: url(../img/professionals/icon-01.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li:nth-child(2):before{ background-image: url(../img/professionals/icon-02.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li:nth-child(3):before{ background-image: url(../img/professionals/icon-03.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li:nth-child(4):before{ background-image: url(../img/professionals/icon-04.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li:nth-child(5):before{ background-image: url(../img/professionals/icon-05.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li:nth-child(6):before{ background-image: url(../img/professionals/icon-06.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .squareNumList li .pink{ color: var(--pink);} /*-- tableType01 --*/ p:has( + .tableType01){ margin-bottom: clamp(20px, var(--comp-40), 40px);} .tableType01{ width: 100%; border-top: 1px solid #BFBFBF;} .tableType01 th, .tableType01 td{ padding: clamp(1.5rem, var(--comp-30), 3rem) clamp(20px, var(--comp-40), 40px); font-size: clamp(1.65rem, var(--comp-33), 2.2rem); border-bottom: 1px solid #BFBFBF; font-family: var(--base-font); text-align: left; width: 50%; line-height: 2; vertical-align: middle;} .tableType01 th{ background-color: var(--palePink); font-weight: 500;} .tableType01 td{ font-weight: 400;} .tableType01.num th{ padding-left: calc(clamp(20px, var(--comp-40), 40px) + 1em); text-indent: -1em;} .tableType01 + .tableCaution{ margin-top: clamp(1.5rem, var(--comp-30), 2rem);} .tableType01 + .tableCaution a{ color: var(--pink); text-decoration: underline;} .tableType01 + .tableCaution a.pdf::after{ content: ""; display: inline-block; width: clamp(30px, var(--comp-60), 40px); height: 2em; background-image: url(../img/professionals/icon-pdf.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: 10px; vertical-align: middle;} .tableCaution + .pdfBtnList{ margin-top: clamp(15px, var(--comp-30), 30px);} @media screen and (width <= 1000px){ .tableType01{ display: block;} .tableType01 tbody, .tableType01 tr{ display: block;} .tableType01 th, .tableType01 td{ display: block; width: 100%;} } /* ABOUT --------------------------------*/ /*-- aboutDetail --*/ #aboutDetail .flexBox{ width: 100%; justify-content: space-between; align-items: center;} #aboutDetail h3{ width: 480px;} #aboutDetail .textBox{ width: calc(100% - 480px - 80px);} #aboutDetail .textBox p{ font-family: var(--zen-maru); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 500; } @media screen and (width <= 1300px){ #aboutDetail .inner{ width: min(90%, 1280px);} #aboutDetail .flexBox{ flex-wrap: wrap; gap: clamp(1.5rem, var(--comp-30), 3rem);} #aboutDetail h3{ width: min(100%, 480px); margin: 0 auto;} #aboutDetail .textBox{ width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto;} #aboutDetail .textBox .pc{ display: none !important;} } /*-- office --*/ #office .map{ margin-top: clamp(4rem, var(--comp-80), 8rem); width: min(100%, 1280px); margin-right: auto; margin-left: auto; height: clamp(165px, var(--comp-330), 640px); border-radius: clamp(10px, var(--comp-20), 20px); overflow: hidden;} #office .map iframe{ width: 100%; height: 100%;} #office .flexBox figure{ margin-top: clamp(40px, var(--comp-80), 120px);} @media screen and (width <= 1100px){ #office .flexBox figure{ width: min(72.4137931%, 420px); margin-left: auto; margin-right: auto;} } /*-- philosophy --*/ #philosophy .inner{ width: min(80%, 1280px);} #philosophy .headingType01{ text-align: center;} #philosophy .headingType01::before{ margin-right: auto; margin-left: auto;} #philosophy .catch{ text-align: center; margin: 0 auto clamp(3rem, var(--comp-60), 8rem);} #philosophy .catch span{ display: block;} #philosophy .catch .black{ font-size: clamp(1.6rem, var(--comp-32), 2.4rem); font-weight: 500; color: var(--base-font-color); font-family: var(--zen-maru);} #philosophy .catch .pink{ font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; color: var(--pink); font-family: var(--zen-maru);} #philosophy .flexBox{ justify-content: space-between;} #philosophy .flexBox .textBox{ width: min(37.5%, 480px);} #philosophy .flexBox .textBox p{ font-size: var(--base-font-size);} #philosophy .flexBox figure{ width: min(55.46875%, 710px);} @media screen and (width <= 1000px){ #philosophy .inner{ width: min(90%, 1280px);} #philosophy .catch{ width: min(87.8787878787878787%, 1160px);} #philosophy .flexBox{ flex-wrap: wrap;} #philosophy .flexBox .textBox{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; margin-bottom: clamp(4rem, var(--comp-80), 5rem);} #philosophy .flexBox figure{ width: 100%;} } /* CASE --------------------------------*/ .caseAnchorList{ display: flex; width: 100%; margin-top: clamp(4rem, var(--comp-80), 11rem); gap: clamp(25px, var(--comp-50), 34px); justify-content: center;} .caseAnchorList li{ flex: 1;} .caseAnchorList li a{ display: block; width: 100%; border-radius: clamp(5px, var(--comp-10), 7px); position: relative; padding: 45px clamp(22px, var(--comp-45), 30px) 40px; box-sizing: border-box; height: 100%;} .caseAnchorList li a::before{ content: ""; display: block; width: 64px; aspect-ratio: 1 / 1; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);} .caseAnchorList li:nth-child(1) a{ border: 2px solid var(--pink);} .caseAnchorList li:nth-child(2) a{ border: 2px solid var(--orange);} .caseAnchorList li:nth-child(3) a{ border: 2px solid var(--green);} .caseAnchorList li:nth-child(1) a::before{ background-image: url(../img/case/icon-case-p01.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li:nth-child(2) a::before{ background-image: url(../img/case/icon-case-o01.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li:nth-child(3) a::before{ background-image: url(../img/case/icon-case-g01.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li a::after{ content: ""; display: block; width: 18px; aspect-ratio: 18 / 10; position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); transition: all ease 0.3s;} .caseAnchorList li:nth-child(1) a::after{ background-image: url(../img/common/down-p.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li:nth-child(2) a::after{ background-image: url(../img/common/down-o.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li:nth-child(3) a::after{ background-image: url(../img/common/down-g.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseAnchorList li .cate{ font-family: var(--zen-maru); font-weight: 700; text-align: center; font-size: clamp(1.4rem, var(--comp-28), 2rem); margin-bottom: clamp(0.5rem, var(--comp-10), 1.5rem); padding-bottom: clamp(0.25rem, var(--comp-5), 0.5rem);} .caseAnchorList li a::after{ content: ""; } .caseAnchorList li .catch{ font-family: var(--zen-maru); font-weight: 500; text-align: center; font-size: var(--base-font-size);} .caseAnchorList li:nth-child(1) .cate{ color: var(--pink); border-bottom: 1px solid var(--pink);} .caseAnchorList li:nth-child(2) .cate{ color: var(--orange); border-bottom: 1px solid var(--orange);} .caseAnchorList li:nth-child(3) .cate{ color: var(--green); border-bottom: 1px solid var(--green);} @media (any-hover: hover) { .caseAnchorList li a:hover{ opacity: 1;} .caseAnchorList li a:hover::after{ bottom: 10px;} } @media screen and (width > 820px) and (width <= 1240px){ .caseAnchorList{ flex-wrap: wrap; row-gap: clamp(35px, var(--comp-70), 50px)} .caseAnchorList li{ width: 45%; flex: none;} } @media screen and (width <= 820px){ .caseAnchorList{ flex-wrap: wrap;} .caseAnchorList li{ width: 100%; flex: none;} .caseAnchorList li a{ padding: clamp(20px, var(--comp-40), 30px) clamp(60px, var(--comp-120), 80px) clamp(20px, var(--comp-40), 30px) calc(clamp(48px, var(--comp-96), 64px) / 2);} .caseAnchorList li a::before{ left: 0; width: clamp(48px, var(--comp-96), 64px);} .caseAnchorList li a::after{ bottom: 50%; left: auto; right: calc(clamp(60px, var(--comp-120), 80px) / 2); transform: translate(50%, 50%);} .caseAnchorList li .cate{ text-align: left;} .caseAnchorList li .catch{ text-align: left;} } @media screen and (width <= 800px) and (any-hover: hover){ .caseAnchorList li a:hover::after{ bottom: 50%; transform: translate(50%, calc(50% + 10px));} } /*-- case01-03 --*/ section.caseBox .inner{ width: min(90%, 1280px);} .caseBox hgroup{ padding-bottom: clamp(1rem, var(--comp-30), 1.5rem); margin: 0 auto clamp(2rem, var(--comp-40), 5rem); width: min(87.8787878787878787%, 1160px);} #case01.caseBox hgroup{ border-bottom: 2px solid var(--pink);} #case02.caseBox hgroup{ border-bottom: 2px solid var(--orange);} #case03.caseBox hgroup{ border-bottom: 2px solid var(--green);} .caseBox hgroup .caseName{ font-weight: 700; font-size: clamp(1.8rem, var(--comp-36), 2.6rem); font-family: var(--zen-maru); display: flex; gap: clamp(1rem, var(--comp-20), 2rem); align-items: center; margin-bottom: clamp(1rem, var(--comp-20), 2rem);} #case01.caseBox hgroup .caseName{ color: var(--pink);} #case02.caseBox hgroup .caseName{ color: var(--orange);} #case03.caseBox hgroup .caseName{ color: var(--green);} .caseBox hgroup .caseName::before{ content: ""; aspect-ratio: 115 / 54; width: 115px;} #case01.caseBox hgroup .caseName::before{ background-image: url(../img/case/icon-case-p02.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} #case02.caseBox hgroup .caseName::before{ background-image: url(../img/case/icon-case-o02.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} #case03.caseBox hgroup .caseName::before{ background-image: url(../img/case/icon-case-g02.svg); background-position: center center; background-repeat: no-repeat; background-size: contain;} .caseBox hgroup h3{ font-weight: 700; font-size: clamp(2rem, var(--comp-40), 3.2rem); line-height: 2;} .caseBox .flexBox{ justify-content: space-between; width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto; align-items: flex-start;} .caseBox .flexBox .textBox{ width: min(37.9310344%, 440px);} .caseBox .flexBox .textBox p:not([class]){ font-weight: 500; font-size: var(--base-font-size); line-height: 2;} .caseBox .flexBox figure{ width: min(50%, 640px); overflow: hidden; border-radius: clamp(10px, var(--comp-20), 20px);} .caseBox .caseWhiteBox{ background-color: #fff; margin-top: clamp(2.5rem, var(--comp-55), 5.5rem); border-radius: clamp(5px, var(--comp-10), 20px); padding: clamp(4rem , var(--comp-80), 8rem) 0;} .caseBox .caseWhiteBox > *{ width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto;} .caseBox .caseWhiteBox > dl{ border-bottom: 1px solid #BFBFBF; padding-bottom: clamp(3rem, var(--comp-60), 6rem); margin-bottom: clamp(3rem, var(--comp-60), 6rem);} .caseBox .caseWhiteBox > dl:has( + .bdrText){ border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(3.5rem, var(--comp-70), 7rem);} .caseBox .caseWhiteBox > dl > dt{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); text-indent: calc((clamp(1.2rem, var(--comp-24), 1.6rem) + clamp(0.7rem, var(--comp-15), 1.5rem)) * (-1)); margin-left: calc(clamp(1.2rem, var(--comp-24), 1.6rem) + clamp(0.7rem, var(--comp-15), 1.5rem)); margin-bottom: clamp(2rem, var(--comp-40), 3.5rem);} #case01.caseBox .caseWhiteBox > dl > dt{ color: var(--pink);} #case02.caseBox .caseWhiteBox > dl > dt{ color: var(--orange);} #case03.caseBox .caseWhiteBox > dl > dt{ color: var(--green);} .caseBox .caseWhiteBox > dl > dt::before{ content: ""; display: inline-block; aspect-ratio: 1 / 1; width: clamp(1.2rem, var(--comp-24), 1.6rem); border-radius: 50%; margin-right: clamp(0.7rem, var(--comp-15), 1.5rem);} #case01.caseBox .caseWhiteBox > dl > dt::before{ background-color: var(--pink);} #case02.caseBox .caseWhiteBox > dl > dt::before{ background-color: var(--orange);} #case03.caseBox .caseWhiteBox > dl > dt::before{ background-color: var(--green);} .caseBox .caseWhiteBox > dl > dd .catch{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; font-family: var(--zen-maru); margin: clamp(3rem, var(--comp-60), 4rem) auto clamp(0.5rem, var(--comp-10), 1rem); line-height: 2;} .caseBox .caseWhiteBox > dl > dd .text{ font-size: var(--base-font-size);} .caseBox .caseWhiteBox > dl > dd .catch:first-child{ margin-top: 0;} .caseBox .caseWhiteBox > .bdrText{ font-size: clamp(1.6rem, var(--comp-32), 2.4rem); padding: clamp(1.5rem, var(--comp-30), 3rem) clamp(20px, var(--comp-40), 6rem); line-height: 2; border-radius: clamp(5px, var(--comp-10), 10px); font-weight: 500;} #case01.caseBox .caseWhiteBox > .bdrText{ border: 1px solid var(--pink);} #case02.caseBox .caseWhiteBox > .bdrText{ border: 1px solid var(--orange);} #case03.caseBox .caseWhiteBox > .bdrText{ border: 1px solid var(--green);} .caseBox .caseWhiteBox .innerCaseWhiteBox{ background-color: #F7F7F5; border-radius: clamp(5px, var(--comp-10), 10px); padding: clamp(4rem, var(--comp-80), 6rem) clamp(22px, var(--comp-45), 60px); margin-top: clamp(3rem, var(--comp-60), 3.5rem); counter-reset: case;} .caseBox .caseWhiteBox .innerCaseWhiteBox > dl:not(:last-child){ margin-bottom: clamp(2.5rem, var(--comp-50), 3rem); } .caseBox .caseWhiteBox .innerCaseWhiteBox > dl{ counter-increment: case;} .innerCaseWhiteBox > dl > dt{ font-size: clamp(1.6rem, var(--comp-32), 2rem); font-family: var(--base-font); line-height: 2; margin-bottom: clamp(0.5rem, var(--comp-15), 0.5rem); font-weight: 500;} .innerCaseWhiteBox > dl > dd{ padding-left: calc(clamp(1.6rem, var(--comp-32), 2rem) * 1.2); font-size: var(--base-font-size); line-height: 2;} .innerCaseWhiteBox > dl > dt::before{ content: counter(case) ". ";} #case01.caseBox .innerCaseWhiteBox > dl > dt{ color: var(--pink);} #case02.caseBox .innerCaseWhiteBox > dl > dt{ color: var(--orange);} #case03.caseBox .innerCaseWhiteBox > dl > dt{ color: var(--green);} #case03.caseBox .innerCaseWhiteBox > dl > dd{ font-family: var(--base-font);} .caseBox .inductionBox{ margin: clamp(7.5rem, var(--comp-150), 16rem) auto 0; width: min(87.8787878787878787%, 1160px); font-weight: 500; text-align: center;} .caseBox .inductionBox .text{ font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem);} .caseBox .inductionBox .btntype01{ margin-left: auto; margin-right: auto;} @media screen and (width <= 980px){ .caseBox .flexBox{ flex-wrap: wrap; gap: clamp(2.2rem, var(--comp-55), 4rem);} .caseBox .flexBox .textBox{ width: 100%;} .caseBox .flexBox figure{ width: min(100%, 640px); margin-right: auto; margin-left: auto;} } /* INQUIRTY-ENTRYFORM --------------------------------*/ /*-- formBox --*/ .formSection .inner{ width: 100% !important; } .formSection .inner > .btntype01:only-child{ margin-left: auto; margin-right: auto; margin-top: 0;} .formSection .formBox{ width: min(80%, 1160px); display: flex; gap: clamp(3rem, var(--comp-60), 4rem); flex-wrap: wrap; margin: 0 auto clamp(6rem, var(--comp-120), 11rem);} .formSection .formBox dl{ display: flex; width: 100%; gap: 40px; align-items: flex-start; border-bottom: 1px solid #BFBFBF; padding-bottom: clamp(3rem, var(--comp-60), 4rem);} .formSection .formBox dl:last-child{ border-bottom: none; padding-bottom: 0;} .formSection .formBox dl dt:not(:has(> p)), .formSection .formBox dl dt > p{ display: flex; width: 390px; align-items: center; justify-content: space-between; gap: 20px;} .formSection .formBox dl dt .text{ font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); display: inline-block;} .formSection .formBox dl dt .must{ display: inline-block; background-color: var(--pink); color: #fff; font-size: clamp(1.4rem, var(--comp-27)); font-family: var(--zen-maru); line-height: 1; padding: calc(clamp(0.5rem, var(--comp-10), 1rem) / 2) clamp(0.5rem, var(--comp-10), 1rem); border-radius: clamp(0.25rem, var(--comp-5), 0.5rem); font-weight: 700;} .formSection .formBox dl dd{ width: calc(100% - 400px - 1px);} .formSection .formBox dl dd input[type="text"], .formSection .formBox dl dd input[type="email"], .formSection .formBox dl dd input[type="tel"]{ background-color: #fff; width: 100%; border-radius: clamp(0.5rem, var(--comp-10), 1rem); padding: clamp(2rem, var(--comp-40), 3rem) clamp(2rem, var(--comp-40), 3rem); font-size: clamp(1.6rem, var(--comp-30), 2rem); font-family: var(--base-font-size);} .formSection .formBox dl dd textarea{ background-color: #fff; width: 100%; max-width: 100%; border-radius: clamp(0.5rem, var(--comp-10), 1rem) clamp(0.5rem, var(--comp-10), 1rem) 0 clamp(0.5rem, var(--comp-10), 1rem); padding: clamp(2rem, var(--comp-40), 3rem) clamp(2rem, var(--comp-40), 3rem); font-size: clamp(1.6rem, var(--comp-30), 2rem); height: 300px; font-family: var(--base-font-size);} .formSection .formBox dl dd input[type="radio"] { -webkit-appearance: radio; appearance: radio;} .formSection .formBox dl dd input[type="radio"] { opacity: 0; visibility: hidden; position: absolute;} .formSection .formBox dl dd .wpcf7-radio{ display: flex; flex-wrap: nowrap; align-items: center; column-gap: clamp(40px, var(--comp-80), 60px); row-gap: clamp(1.5rem, var(--comp-40), 2rem); width: 100%; box-sizing: border-box; flex-wrap: wrap;} .formSection .formBox dl dd .wpcf7-radio .wpcf7-list-item{ margin-left: 0;} .formSection .formBox dl dd .wpcf7-radio span.wpcf7-list-item-label { position: relative; display: flex; align-items: center; cursor: pointer; font-family: var(--base-font); font-weight: 500;} .formSection .formBox dl dd .wpcf7-radio span.wpcf7-list-item-label::before { display: block; content: ""; border-radius: 50%; border: 2px solid var(--base-font-color); background: #fff; width: clamp(1.5rem, var(--comp-30), 2rem); aspect-ratio: 1 / 1; margin-right: min(var(--comp-15), 15px); box-sizing: border-box;} .formSection .formBox dl dd .wpcf7-radio span.wpcf7-list-item-label::after { display: block; position: absolute; content: ""; border-radius: 50%; width: min(var(--comp-15), 10px); height: min(var(--comp-15), 10px); background-color: var(--base-font-color); left: calc(min(var(--comp-15), 10px) / 2); top: 50%; transform: translateY(-50%); display: none; box-sizing: border-box;} .formSection .formBox dl dd input[type="radio"]:checked + span.wpcf7-list-item-label::after { display: block;} #secondContent p:has(.wpcf7-radio){ margin-bottom: 0;} .formSection .formBox dl dd .mainText{font-size: clamp(1.5rem, var(--comp-30), 2rem); font-weight: 500; margin: clamp(2.5rem, var(--comp-50), 4rem) auto clamp(1.5rem, var(--comp-30), 2rem);} .formSection .formBox dl dd .caution{ font-size: clamp(1.3rem, var(--comp-26), 1.8rem); margin: clamp(1.5rem, var(--comp-30), 2rem) auto 0;} .formSection .formBox dl dd .caution a{ text-decoration: underline;} .formSection .formBox dl dd:has( > .formSplitBox){ display: flex; gap: 40px; flex-wrap: wrap;} .formSection .formBox dl dd .formSplitBox{ display: flex; align-items: center; column-gap: 15px; row-gap: 10px;} .formSection .formBox dl dd .formSplitBox.name{ width: calc(50% - 20px - 1px);} .formSection .formBox dl dd .formSplitBox.name .text{ min-width: 2.5em; } .formSection .formBox dl dd .formSplitBox.birthYear select{ width: 10em;} .formSection .formBox dl dd .formSplitBox.birthMonth select, .formSection .formBox dl dd .formSplitBox.birthDay select{ width: 7em;} .formSection .formBox dl dd:has( > .formLineBox){ display: flex; gap: 30px; width: 100%; flex-wrap: wrap;} .formSection .formBox dl dd > .formLineBox{ display: flex; column-gap: 15px; row-gap: 10px; width: 100%; align-items: center;} .formSection .formBox dl dd .formLineBox .text{ width: 9em;} .formSection .formBox dl dd .formLineBox .text + p{ width: calc(100% - 9em - 40px - 1px);} .formSection .formBox dl dd .formLineBox.addressnum .text{ width: 1em;} .formSection .formBox dl dd .formLineBox.addressnum input{width: 10em;} .formSection .formBox dl dd select{ background-color: #fff; border-radius: clamp(0.5rem, var(--comp-10), 1rem); padding: clamp(2rem, var(--comp-40), 3rem) calc(clamp(2rem, var(--comp-40), 3rem) + 8px + 10px) clamp(2rem, var(--comp-40), 3rem) clamp(2rem, var(--comp-40), 3rem); font-size: clamp(1.6rem, var(--comp-30), 2rem); width: 100%; background-image: url(../img/common/down-p.svg); background-position: right clamp(2rem, var(--comp-40), 3rem) center; background-repeat: no-repeat; background-size: auto 10%; font-family: var(--base-font-size); } .formSection .formBox dl dd input[type="file"]::file-selector-button{ border: 2px solid var(--pink); background-color: #fff; color: var(--pink); border-radius: clamp(5px, var(--comp-10), 10px); cursor: pointer; margin-right: 10px; font-size: clamp(1.6rem, var(--comp-30), 2rem);} .formSection .formBox dl dd input[type="file"]{ width: 100%; font-family: var(--base-font-size);} .hidden-pref { position: absolute !important; left: -99999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; border: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0; } #tldx-toast-container, #autozip { display: none !important; } @media screen and (width <= 1200px){ .formSection .formBox dl{ display: block;} .formSection .formBox dl dt{ margin-bottom: clamp(2.5rem, var(--comp-50), 3rem);} .formSection .formBox dl dt:not(:has(> p)), .formSection .formBox dl dt > p{ width: 100%;} .formSection .formBox dl dd{ width: 100%;} .formSection .formBox dl dd .formSplitBox{ flex-wrap: wrap;} .formSection .formBox dl dd .formSplitBox.name{ width: 100%;} .formSection .formBox dl dd .formSplitBox.birthYear{ width: 100%;} .formSection .formBox dl dd .formSplitBox.birthYear select{ width: 10em;} .formSection .formBox dl dd .formSplitBox.birthMonth select, .formSection .formBox dl dd .formSplitBox.birthDay select{ width: 7em;} .formSection .formBox dl dd > .formLineBox{ flex-wrap: wrap;} .formSection .formBox dl dd .formLineBox .text{ width: 100%;} .formSection .formBox dl dd .formLineBox .text + p{ width: 100%;} .formSection .formBox dl dd .formLineBox.addressnum .text{ width: 1em;} .formSection .formBox dl dd .formLineBox.addressnum input{width: 10em;} .formSection .formBox dl dd .formLineBox.addressnum .text + p{ width: calc(100% - 1em - 15px - 1px);} } /*-- privacyScrollBox --*/ .privacyScrollBox{ width: min(90%, 1280px); margin: 0 auto;} .privacyScrollBox h3{ width: min(87.8787878787878787%, 1160px);} .privacyScrollBox h3 + p{ width: min(87.8787878787878787%, 1160px); margin: 0 auto clamp(2.5rem, var(--comp-50), 5rem);} .wrapPrivacyScrollBox{ width: 100%; background-color: #fff; border-radius: clamp(0.5rem, var(--comp-10), 2rem); padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 60px); height: clamp(300px, 115vw, 660px);} .innerPrivacyScrollBox{ overflow-y: scroll; max-height: 100%; padding-right: clamp(10px, var(--comp-20), 30px);} .innerPrivacyScrollBox .privacyMainBox{ margin-bottom: clamp(3.25rem, var(--comp-65), 6rem);} .innerPrivacyScrollBox .privacyMainBox .pinkTtl{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); text-indent: calc((clamp(1.2rem, var(--comp-24), 1.6rem) + clamp(0.7rem, var(--comp-15), 1.5rem)) * (-1)); margin-left: calc(clamp(1.2rem, var(--comp-24), 1.6rem) + clamp(0.7rem, var(--comp-15), 1.5rem)); margin-bottom: clamp(2rem, var(--comp-40), 3.5rem); font-family: var(--zen-maru); font-weight: 700; color: var(--pink);} .innerPrivacyScrollBox .privacyMainBox .pinkTtl::before{ content: ""; display: inline-block; aspect-ratio: 1 / 1; width: clamp(1.2rem, var(--comp-24), 1.6rem); border-radius: 50%; margin-right: clamp(0.7rem, var(--comp-15), 1.5rem); background-color: var(--pink);} .innerPrivacyScrollBox .privacyMainBox p{ font-size: clamp(1.5rem, var(--comp-30), 1.8rem);} .innerPrivacyScrollBox dl{ border-top: 1px solid #BFBFBF; padding: clamp(3.25rem, var(--comp-65), 6rem) 0 0; margin-bottom: clamp(3.25rem, var(--comp-65), 6rem);} .innerPrivacyScrollBox dl:last-child{ margin-bottom: 0;} .innerPrivacyScrollBox dl dt{ margin: 0 auto clamp(1.5rem, var(--comp-30), 2rem); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-family: var(--zen-maru); } .innerPrivacyScrollBox dl dt p{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-family: var(--zen-maru);} .innerPrivacyScrollBox dl dd p{ font-size: clamp(1.5rem, var(--comp-30), 1.8rem);} .innerPrivacyScrollBox dl dd p.caution{ font-size: clamp(1.4rem, var(--comp-28), 1.6rem);} .innerPrivacyScrollBox dl dd ul{ font-size: clamp(1.5rem, var(--comp-30), 1.8rem);} .innerPrivacyScrollBox dl dd ul li::before{ content: "・"; } .innerPrivacyScrollBox dl dd ul li{ font-size: clamp(1.5rem, var(--comp-30), 1.8rem); text-indent: -1em; padding-left: 1em;} .innerPrivacyScrollBox dl dd ul li p{ display: contents;} .innerPrivacyScrollBox dl dd p:not(:last-child), .innerPrivacyScrollBox dl dd ul:not(:last-child){ margin-bottom: 1.5em; } /*-- formSubmitBox --*/ .formSubmitBox{ margin: clamp(3rem, var(--comp-60), 5rem) auto 0; width: min(90%, 1280px);} .formSubmitBox > *{ width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto;} .privacyCheckBox label{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;} .privacyCheckBox .must{ display: inline-block; background-color: var(--pink); color: #fff; font-size: clamp(1.4rem, var(--comp-27)); font-family: var(--zen-maru); line-height: 1; padding: calc(clamp(0.5rem, var(--comp-10), 1rem) / 2) clamp(0.5rem, var(--comp-10), 1rem); border-radius: clamp(0.25rem, var(--comp-5), 0.5rem); font-weight: 700;} .privacyCheckBox .check, .privacyCheckBox .wpcf7-form-control-wrap, .privacyCheckBox .wpcf7-form-control{ display: contents;} .privacyCheckBox .wpcf7-not-valid-tip{ width: 100%; text-align: center;} .privacyCheckBox .wpcf7-list-item{ display: flex; justify-content: center; align-items: center; margin-left: 30px;} .privacyCheckBox input[type="checkbox"] { position: relative; width: clamp(1.5rem, var(--comp-30), 2rem); aspect-ratio: 1 / 1; box-sizing: border-box; border: 2px solid #000; background: #FFF; margin-right: 2rem;} .privacyCheckBox input[type="checkbox"]:checked:before { content: ''; position: absolute; top: 50%; left: 50%; transform: rotate(50deg) translate(-121%, -20%); width: 33%; height: 60%; border-right: 2px solid #000; border-bottom: 2px solid #000; } .privacyCheckBox .wpcf7-list-item-label{ font-size: clamp(1.5rem, var(--comp-30), 2.4rem); font-family: var(--base-font); font-weight: 500;} .formSubmitBox .wrapSubmitBtn, .formSubmitBox .wrapPrevBtn{ width: min(100%, 400px); position: relative; margin-top: clamp(3.5rem, var(--comp-80), 6rem); line-height: 1.6; padding-bottom: clamp(0.6rem, var(--comp-12), 0.8rem);} .formSubmitBox .wrapSubmitBtn input, .formSubmitBox .wrapSubmitBtn button, .formSubmitBox .wrapPrevBtn input{ display: block; border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: relative; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-25), 1.8rem) clamp(6.5rem, var(--comp-130), 9rem) clamp(1.2rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem); z-index: 1; background-color: #fff; transition: all ease 0.3s; font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2rem); width: 100%;} .formSubmitBox .wrapSubmitBtn input, .formSubmitBox .wrapSubmitBtn button{ border: 2px solid var(--pink); color: var(--pink);} .formSubmitBox .wrapPrevBtn input{ border: 2px solid var(--mint); color: var(--mint);} .formSubmitBox .wrapSubmitBtn::after, .formSubmitBox .wrapPrevBtn::after{ content: ""; display: block; width: 100%; height: calc(100% - clamp(0.6rem, var(--comp-12), 0.8rem)); border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: absolute; bottom: 0; left: clamp(0.6rem, var(--comp-12), 0.8rem); } .formSubmitBox .wrapSubmitBtn::after{ background-color: var(--shadowPink);} .formSubmitBox .wrapPrevBtn::after{ background-color: var(--shadowMint);} .formSubmitBox .wrapSubmitBtn::before, .formSubmitBox .wrapPrevBtn::before{ content: ""; display: block; position: absolute; top: 50%; right: clamp(2.5rem, var(--comp-50), 2.8rem); transform: translateY(calc(-50% + 0.5px - (clamp(0.6rem, var(--comp-12), 0.8rem) / 2))); mask-image: url(../img/common/arrow-p01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); transition: all ease 0.3s; z-index: 2;} .formSubmitBox .wrapSubmitBtn::before{ background-color: var(--pink);} .formSubmitBox .wrapPrevBtn::before{ background-color: var(--mint);} .formSubmitBox:has( > .wrapPrevBtn){ display: flex; flex-wrap: wrap; column-gap: clamp(30px, var(--comp-60), 60px); justify-content: center;} .formSubmitBox:has( > .wrapPrevBtn) > *{ margin-left: 0; margin-right: 0;} .cf7ms-next-real { visibility:hidden; height: 0; width: 0;} .formSubmitBox .wpcf7-spinner{ display: none;} .wpcf7 form .wpcf7-response-output{ display: none} .wpcf7 form.invalid .wpcf7-response-output{ width: min(90%, 1280px); margin-left: auto !important; margin-right: auto !important; font-size: var(--base-font-size); text-align: center; font-family: var(--zen-maru); font-weight: 700; padding: 1em !important; line-height: 2; border-radius: clamp(10px, var(--comp-20), 20px); display: block;} @media (any-hover: hover) { .formSubmitBox .wrapSubmitBtn input:hover, .formSubmitBox .wrapSubmitBtn button:hover, .formSubmitBox .wrapPrevBtn input:hover{ transform: translate(clamp(0.6rem, var(--comp-12), 0.8rem) , clamp(0.6rem, var(--comp-12), 0.8rem)); opacity: 1; color: #fff;} .formSubmitBox .wrapSubmitBtn input:hover, .formSubmitBox .wrapSubmitBtn button:hover{ background-color: var(--pink);} .formSubmitBox .wrapPrevBtn input:hover{ background-color: var(--mint);} .formSubmitBox .wrapSubmitBtn:has( input:hover)::before, .formSubmitBox .wrapSubmitBtn:has( button:hover)::before, .formSubmitBox .wrapPrevBtn:has( input:hover)::before{ background-color: #fff; transform: translate(clamp(0.6rem, var(--comp-12), 0.8rem), calc(-50% + 0.5px + (clamp(0.6rem, var(--comp-12), 0.8rem) / 2)))} } @media screen and (width <= 1200px){ .privacyCheckBox label{ justify-content: flex-start;} .privacyCheckBox .must{ margin-bottom: clamp(1rem, var(--comp-20), 1.5rem);} .privacyCheckBox .check{ display: block; width: 100%;} .privacyCheckBox .wpcf7-not-valid-tip{ text-align: left;} .privacyCheckBox .wpcf7-list-item{ margin-left: 0; justify-content: flex-start;} } @media screen and (width <= 800px){ .formSubmitBox .wrapSubmitBtn, .formSubmitBox .wrapPrevBtn{ width: min(100%, 80vw); margin-left: auto; margin-right: auto;} .formSubmitBox .wrapSubmitBtn::after, .formSubmitBox .wrapPrevBtn::after{ left: 0;} .wpcf7-response-output{ text-align: left;} } @media screen and (width <= 800px) and (any-hover: hover) { .formSubmitBox .wrapSubmitBtn input:hover, .formSubmitBox .wrapPrevBtn input:hover{ transform: translate(0 , clamp(0.6rem, var(--comp-12), 0.8rem));} .formSubmitBox .wrapSubmitBtn:has( input:hover)::before, .formSubmitBox .wrapPrevBtn:has( input:hover)::before{ background-color: #fff; transform: translate(0, calc(-50% + 0.5px + (clamp(0.6rem, var(--comp-12), 0.8rem) / 2)))} } /* RECRUIT --------------------------------*/ /*-- simpleAnchorList --*/ .simpleAnchorList{ width: 100%; } /*-- recruitIntro --*/ #recruitIntro .intro > .pinkHeading02{ margin-right: auto; margin-left: auto;} #recruitIntro .inner > .flexBox{ justify-content: space-between; margin-left: auto; margin-right: auto; align-items: flex-start; flex-direction: row-reverse; margin-right: auto; margin-left: auto; row-gap: clamp(3rem, var(--comp-60), 6rem);} #recruitIntro .inner > .flexBox figure{ width: min(55.1724137%, 640px); overflow: hidden; border-radius: clamp(10px, var(--comp-20), 20px);} #recruitIntro .inner > .flexBox .textBox{ width: min(37.9310344%, 440px); font-weight: 500;} #recruitIntro .subAreaBox{ width: min(100%, 800px); margin: clamp(3.5rem, var(--comp-70), 4rem) auto 0; border-radius: clamp(5px, var(--comp-10), 10px); border: 2px solid var(--pink); overflow: hidden;} #recruitIntro .subAreaBox h4{ background: var(--pink); color: #fff; font-size: clamp(1.8rem, var(--comp-36), 2rem); font-weight: 700; font-family: var(--base-font); text-align: center; line-height: 1; padding: 1.8rem clamp(1.5rem, var(--comp-30), 2rem); margin: 0 auto;} #recruitIntro .subAreaBox p{ background-color: #fff; margin: 0 auto; font-weight: 700; padding: 1.8rem clamp(1.5rem, var(--comp-30), 2rem); text-align: center;} .visitBox{ border: 4px solid #F2AAC9; border-radius: clamp(10px, var(--comp-20), 20px); background-color: #FFFFF0; position: relative; box-sizing: border-box; margin: clamp(3.5rem, var(--comp-70), 12rem) auto 0; padding: clamp(3.5rem, var(--comp-75), 5rem) clamp(18px, var(--comp-36), 36px) 3.5rem clamp(4rem, var(--comp-80), 6rem); } .visitBox::before{ content: ""; display: block; aspect-ratio: 212 / 142; width: clamp(125px, var(--comp-250), 212px); background-image: url(../img/recruit/icon-resume.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: calc(clamp(1.75px, var(--comp-35), 25px) * (-1)); right: min(var(--comp-80), 50px); } .visitBox .pinkHeading02{ width: 100% !important; margin-top: 0;} .visitBox .flexBox{ justify-content: space-between; } .visitBox figure{ width: 49.2424242424242%; } .visitBox .textBox{ width: 45.45454545454%;} .visitBox .textBox .telBox{ margin-top: clamp(2.5rem, var(--comp-50), 3rem);} .visitBox .textBox .telBox .band{ background-color: var(--pink); color: #fff; text-align: left; border-radius: 5px; font-weight: 700; line-height: 1.6; padding: 1rem 2rem; margin: 0 auto clamp(1.5rem, var(--comp-30), 2rem);} .visitBox .textBox .telBox .num{ width: min(100%, 373px); margin-bottom: clamp(1.5rem, var(--comp-30), 2rem);} .visitBox .textBox .telBox .text{ font-weight: 500;} .visitBox .textBox .telBox .text small{ font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--base-font);} @media screen and (width <= 1100px){ .visitBox{ padding: clamp(3.5rem, var(--comp-75), 5rem) clamp(18px, var(--comp-36), 36px) 3.5rem ; } .visitBox::before{ right: calc(clamp(15px, var(--comp-30), 30px) * (-1)); } .visitBox .flexBox{ flex-wrap: wrap; row-gap: clamp(2rem, var(--comp-40), 4rem); } .visitBox figure{ width: 100%; } .visitBox .textBox{ width: 100%;} .visitBox .pinkHeading02 .sp{ display: block !important; } } @media screen and (width <= 1000px){ #recruitIntro .inner > .flexBox{ flex-wrap: wrap; } #recruitIntro .inner > .flexBox figure{ width: 100%;} #recruitIntro .inner > .flexBox .textBox{ width: 100%} #recruitIntro .subAreaBox p{ text-align: left;} } /*-- appeal --*/ #appeal .inner > *{ width: 100%; margin-right: auto; margin-left: auto;} /*-- staff --*/ #staff .inner{ width: min(90%, 1280px); margin-right: auto; margin-left: auto;} #staff .inner > .lineTtl{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} .commentBlockBox{ display: flex; row-gap: clamp(6rem, var(--comp-120), 10rem); flex-wrap: wrap; width: 100%; margin-right: auto; margin-left: auto;} .commentBlockBox hgroup{ display: flex; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); padding: clamp(2rem, var(--comp-40), 6rem) clamp(20px, var(--comp-40), 60px); justify-content: space-between;} .commentBlockBox hgroup figure{ width: min(37.9310344%, 440px); height: 0;} .commentBlockBox hgroup figure img{ border-radius: clamp(10px, var(--comp-20), 20px); width: 100%;} .commentBlockBox hgroup .textBox{ width: min(55.1724137%, 640px);} .commentBlockBox hgroup .textBox .tag{ background-color: #FBE9F1; font-weight: 500; padding: 0.3em 0.7em; display: inline-block; border-radius: clamp(0.25rem, var(--comp-5), 0.5rem);} .commentBlockBox .commentTextBox{ padding: 3rem clamp(20px, var(--comp-40), 60px) 0;} .commentBlockBox .commentTextBox > *{ width: min(55.1724137%, 640px); margin-left: auto;} .commentBlockBox .commentTextBox .imgBox{ margin-top: clamp(3rem, var(--comp-60), 5rem); display: flex; justify-content: space-between;} .commentBlockBox .commentTextBox .imgBox figure{ width: 48.125%; border-radius: clamp(5px, var(--comp-10), 10px); overflow: hidden;} @media screen and (width <= 1000px){ .commentBlockBox hgroup{ flex-wrap: wrap; background: none; padding: 0;} .commentBlockBox hgroup figure{ width: min(75.7575757575%, 500px); height: auto; margin-right: auto; margin-left: auto; position: relative; z-index: 2;} .commentBlockBox hgroup figure img{ border-radius: clamp(10px, var(--comp-20), 20px); width: 100%;} .commentBlockBox hgroup .textBox{ width: 100%; background-color: #fff; padding: calc(clamp(2rem, var(--comp-40), 6rem) + clamp(4rem, var(--comp-80), 8rem)) clamp(20px, var(--comp-40), 60px) clamp(2rem, var(--comp-40), 6rem); margin-top: calc(clamp(4rem, var(--comp-80), 8rem) * (-1)); border-radius: clamp(10px, var(--comp-20), 20px); position: relative; z-index: 1;} .commentBlockBox hgroup .textBox .dotTtl{ text-align: center;} .commentBlockBox hgroup .textBox .dotTtl span{ text-wrap: nowrap;} .commentBlockBox hgroup .textBox .tag{ display: block; width: 100%; text-align: center; box-sizing: border-box;} .commentBlockBox .commentTextBox{ padding: 3rem clamp(20px, var(--comp-40), 60px) 0; box-sizing: border-box;} .commentBlockBox .commentTextBox > *{ width: 100%;} .commentBlockBox .commentTextBox .imgBox{ display: none;} } /*-- strength --*/ #strength .inner{ width: min(90%, 1280px);} #strength, #serviceMessage{ overflow: hidden;} #strength .inner > figure, #serviceMessage .inner > figure{ height: 518px;} #strength .inner > figure img, #serviceMessage .inner > figure img{ height: 100%; width: auto !important; max-width: none; aspect-ratio: 1392 / 518; position: relative; left: 50%; transform: translateX(-50%);} #strength .lineTtl{ width: min(87.8787878787878787%, 1160px);} .strengthBox{ display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: clamp(4rem, var(--comp-80), 5rem); padding-bottom: 100px; margin-right: auto; margin-left: auto; width: min(87.8787878787878787%, 1160px);} .strengthBox .innerStrengthBox > *{ position: relative; z-index: 2;} .strengthBox .innerStrengthBox{ background-color: var(--palePink); position: relative; border-radius: 10px; width: 47.4137931%; padding: clamp(2.5rem, var(--comp-50), 4rem) clamp(20px, var(--comp-40), 40px);} .strengthBox .innerStrengthBox::before{ content: ""; display: block; aspect-ratio: 100 / 94; background-image: url(../img/common/icon-heart-single.svg); background-repeat: no-repeat; background-position: center; background-size: contain; width: clamp(75px, var(--comp-150), 100px); position: absolute; top: -15px; left: -20px; z-index: 1;} .strengthBox .innerStrengthBox:nth-child(even){ transform: translateY(100px);} .strengthBox .innerStrengthBox h4{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; color: var(--pink); margin-bottom: clamp(1rem, var(--comp-20), 2rem); line-height: 1.6;} .strengthBox .innerStrengthBox p{ width: min(100%, 420px); margin-left: auto;} @media screen and (width <= 900px){ #strength .inner > figure, #serviceMessage .inner > figure{ height: auto;} #strength .inner > figure img.sp, #serviceMessage .inner > figure img.sp{ height: auto; width: 100% !important; aspect-ratio: 740 / 438; left: auto; transform: translateX(0); display: block !important;} #strength .inner > figure img.pc, #serviceMessage .inner > figure img.pc{ display: none !important;} .strengthBox{ margin-top: clamp(3rem, var(--comp-60), 6rem); padding-bottom: 0;} .strengthBox .innerStrengthBox{ width: 100%;} .strengthBox .innerStrengthBox:nth-child(even){ transform: translateY(0);} .strengthBox .innerStrengthBox p{ width: 100%; margin-left: auto;} } /*-- welcome --*/ #welcome .inner{ width: min(90%, 1280px);} #welcome .inner > .lineTtl{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #welcome .flexBox{ justify-content: space-between; width: 100%; row-gap: clamp(6rem, var(--comp-120), 10rem);} #welcome .flexBox .whiteBox{ position: relative; padding: clamp(2rem, var(--comp-40), 5.5rem) clamp(20px, var(--comp-40), 60px) 0; display: flex; flex-direction: column; width: 48.4375%; } #welcome .flexBox .whiteBox > *{ position: relative; z-index: 2; width: 100%;} #welcome .flexBox .whiteBox::before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 170px); background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); z-index: 1;} #welcome .flexBox .whiteBox p{ margin-bottom: clamp(2rem, var(--comp-40), 5rem); font-weight: 500;} #welcome .flexBox .whiteBox figure{ margin-top: auto; border-radius: clamp(10px, var(--comp-20), 20px); overflow: hidden;} #welcome .flexBox .whiteBox figure img{ display: block; } .messageBox{ background-color: #FFFAE0; max-width: min(87.8787878787878787%, 1040px); margin: clamp(6rem, var(--comp-120), 10rem) auto 0; position: relative; border-radius: clamp(10px, var(--comp-20), 20px); padding: clamp(3.5rem, var(--comp-70), 6rem) clamp(20px, var(--comp-30), 30px); box-sizing: border-box;} .messageBox::before{ content: ""; display: block; aspect-ratio: 220 / 96; background-image: url(../img/recruit/flag-message.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: min(40%, 220px); position: absolute; top: calc(clamp(25px, var(--comp-50), 60px) * (-1)); left: 50%; transform: translateX(-50%);} .messageBox p{ font-family: var(--zen-maru); text-align: center; font-weight: 500;} @media screen and (width <= 1280px){ .messageBox p{ text-align: left;} } @media screen and (width <= 1000px){ #welcome .flexBox{ flex-wrap: wrap;} #welcome .flexBox .whiteBox{ width: 100%;} #welcome .flexBox .whiteBox figure{ width: min(86.2068965%, 500px); margin-right: auto; margin-left: auto;} .messageBox p{ text-align: left; } } /*-- schedule --*/ #schedule .inner{ width: min(90%, 1280px);} #schedule .inner > *{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #schedule hgroup{ text-align: center;} #schedule hgroup .catch{ font-size: clamp(1.5rem, var(--comp-30), 2.4rem); font-family: var(--zen-maru); font-weight: 500; text-align: center;} #schedule hgroup .band{ font-size: clamp(1.5rem, var(--comp-30), 2rem); text-align: center; display: inline-block; background-color: #FBE9F1; padding: 0.5rem clamp(10px, var(--comp-20), 30px); border-radius: clamp(3px, var(--comp-5), 5px); margin-top: clamp(1.5rem, var(--comp-30), 2rem);} #schedule .schedureBox{ position: relative; background-color: var(--palePink); padding: 8rem clamp(20px, var(--comp-40), 60px) 8rem ; border-radius: clamp(10px, var(--comp-20), 20px); display: flex; flex-wrap: wrap; gap: clamp(4rem, var(--comp-80), 8rem); box-sizing: border-box; margin-top: clamp(4rem, var(--comp-80), 6.5rem);} #schedule .schedureBox::before{ content: ""; position: absolute; top: 4rem; left: calc(clamp(20px, var(--comp-40), 60px) + (clamp(10px, var(--comp-20), 18px) / 2)); display: block; width: 2px; height: calc(100% - (4rem * 2)); background-color: var(--pink); } #schedule .schedureBox dl{ display: flex; flex-wrap: wrap; position: relative; align-items: stretch; gap: 20px; align-items: stretch; box-sizing: border-box; width: 100%;} #schedule .schedureBox dl::after{ content: ""; display: block; height: 1px; background-color: #999999; width: 40px; order: 2; margin-top: calc(clamp(2rem, var(--comp-40), 3.2rem) * 1.4 / 2 );} #schedule .schedureBox dl dt{ display: flex; flex-direction: column; justify-content: space-between; order: 1; font-size: clamp(2rem, var(--comp-40), 3.2rem); color: var(--pink); font-weight: 700; width: calc(clamp(2rem, var(--comp-40), 3.2rem) * 2.4 + clamp(27px, var(--comp-55), 35px));} #schedule .schedureBox dl dt span{ line-height: 1.2; display: block; width: 100%; position: relative; padding-left: clamp(27px, var(--comp-55), 35px);} #schedule .schedureBox dl dt span::before{ content: ""; display: block; width: clamp(10px, var(--comp-20), 18px); aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--pink); position: absolute; left: 0; top: calc(clamp(2rem, var(--comp-40), 3.2rem) / 2); transform: translateY(-20%);} #schedule .schedureBox dl dd{ order: 3; width: calc(100% - (calc(clamp(2rem, var(--comp-40), 3.2rem) * 2.4) + 40px + 40px + clamp(27px, var(--comp-55), 35px)));} #schedule .schedureBox dl:not(:has( > dt)){ padding-left: clamp(27px, var(--comp-55), 35px); } #schedule .schedureBox dl:not(:has( > dt))::before{ content: ""; display: block; width: clamp(10px, var(--comp-20), 18px); aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--pink); position: absolute; left: 0; top: calc(clamp(2rem, var(--comp-40), 3.2rem) / 2); transform: translateY(-20%); } #schedule .schedureBox dl:not(:has( > dt))::after{ width: calc(40px + calc(clamp(2rem, var(--comp-40), 3.2rem) * 2.4) + 20px); order: 1;} #schedule .schedureBox dl:not(:has( > dt)) dd{ order: 2;} #schedule .schedureBox dl h4{ font-size: clamp(1.8rem, var(--comp-36), 2.6rem); font-weight: 700; margin-bottom: clamp(1rem, var(--comp-20), 2rem); line-height: 1.6; font-feature-settings: "palt";} #schedule .schedureBox dl h4:first-child{ margin-top: 0.5rem;} #schedule .schedureBox dl h5{ font-size: clamp(1.6rem, var(--comp-34), 2.2rem); font-weight: 700; margin: clamp(2.5rem, var(--comp-50), 6rem) auto clamp(1rem, var(--comp-20), 1.5rem); font-family: var(--base-font); color: var(--pink); font-weight: 700; line-height: 1.6; font-feature-settings: "palt";} #schedule .schedureBox dl h4 + h5{ margin-top: 0;} #schedule .schedureBox dl dd p{ font-weight: 500;} #schedule .schedureBox dl .pointBox, #schedule .schedureBox dl .ifBox{ background-color: #fff; border-radius: clamp(5px , var(--comp-10), 10px); box-sizing: border-box; padding: clamp(25px, var(--comp-50), 40px) clamp(20px, var(--comp-40), 40px) clamp(2.5rem, var(--comp-50), 4rem); position: relative; margin-top: clamp(5rem, var(--comp-100), 6rem);} #schedule .schedureBox dl .pointBox::before, #schedule .schedureBox dl .ifBox::before{ content: ""; display: block; aspect-ratio: 162 / 44; width: clamp(110px, var(--comp-220), 160px); position: absolute; left: clamp(20px, var(--comp-40), 40px); top: calc(clamp(20px, var(--comp-40), 25px) * (-1));} #schedule .schedureBox dl .pointBox::before{ background-image: url(../img/recruit/flag-point.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } #schedule .schedureBox dl .ifBox::before{ background-image: url(../img/recruit/flag-if.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } #schedule .schedureBox dl .pointBox h5, #schedule .schedureBox dl .ifBox h5{ margin-top: 0;} #schedule .schedureBox dl .whiteBox{ background-color: #fff; border-radius: clamp(5px , var(--comp-10), 10px); box-sizing: border-box; padding: clamp(25px, var(--comp-50), 40px) clamp(20px, var(--comp-40), 40px) clamp(2.5rem, var(--comp-50), 4rem); position: relative;} #schedule .schedureBox dl .whiteBox > .pointBox, #schedule .schedureBox dl .whiteBox > .ifBox{ background-color: #FFFAE0;} #schedule .schedureBox dl .whiteBox > h4{ margin-top: 0;} #schedule .schedureBox dl .imgBox{ display: flex; flex-wrap: wrap; gap: clamp(10px, var(--comp-20), 40px); width: min(100%, 640px); margin-top: clamp(2.5rem, var(--comp-50), 4rem);} #schedule .schedureBox dl .imgBox figure{ width: calc((100% - clamp(10px, var(--comp-20), 40px) - 1px) / 2); border-radius: clamp(9px, var(--comp-18), 12px); overflow: hidden;} #schedule .bottomImg{ width: min(87.8787878787878787%, 680px); margin: 4rem auto 0;} @media screen and (width <= 800px){ #schedule hgroup .band{ display: block; width: 100%;} #schedule .schedureBox{ width: 100%;} #schedule .schedureBox dl::after{ content: none;} #schedule .schedureBox dl dt{ display: contents;} #schedule .schedureBox dl dt span:nth-child(1){ order: 1;} #schedule .schedureBox dl dt span:nth-child(2){ order: 3;} #schedule .schedureBox dl dd{ width: 100%; padding-left: clamp(27px, var(--comp-55), 35px); order: 2;} #schedule .schedureBox dl:not(:has( > dt)){ padding-left: 0; } #schedule .schedureBox dl .imgBox{ width: 100%;} #schedule .schedureBox dl .imgBox:has( > figure:only-child) figure{ width: 100%; } } /*-- job-description --*/ .job-descriptionBox{ display: flex; flex-wrap: wrap; gap: clamp(2rem, var(--comp-40), 5rem);} .job-descriptionBox .innerJob-descriptionBox{ width: 100%;} .job-descriptionBox h4{ font-size: clamp(1.5rem, var(--comp-30), 2.4rem); font-family: var(--base-font); color: var(--pink); font-weight: 700; margin-bottom: clamp(1.5rem, var(--comp-30), 2rem);} .job-descriptionBox .whiteBox{ padding: clamp(2rem, var(--comp-40), 4rem) clamp(20px, var(--comp-40), 60px); background-color: #fff; border-radius: clamp(5px, var(--comp-10), 10px);} .job-descriptionBox .whiteBox p, .job-descriptionBox .whiteBox ol{ font-size: clamp(1.3rem, var(--comp-26), 1.8rem); line-height: 2; letter-spacing: 0.01em; list-style: none;} .job-descriptionBox .whiteBox ol li{ font-weight: 700; font-family: var(--base-font);} .job-descriptionBox .whiteBox p small, .job-descriptionBox .whiteBox ol small{ font-size: clamp(1rem, var(--comp-20), 1.6rem); font-family: var(--base-font);} .job-descriptionBox .whiteBox p b, .job-descriptionBox .whiteBox ol b{ font-weight: 700; font-family: var(--base-font);} .job-descriptionBox .whiteBox .band{ background-color: var(--pink); color: #fff; font-size: clamp(1.4rem, var(--comp-28), 2.2rem); font-family: var(--base-font); font-weight: 700; border-radius: 4px; line-height: 1.6; padding: clamp(0.5rem, var(--comp-10), 1rem) clamp(10px, var(--comp-20), 20px); box-sizing: border-box; margin: clamp(2.5rem, var(--comp-50), 5rem) auto clamp(1rem, var(--comp-20), 2rem);} .job-descriptionBox .whiteBox > *:first-child{ margin-top: 0 !important;} .job-descriptionBox .whiteBox h6, .job-descriptionBox .whiteBox .black{ font-family: var(--base-font); font-weight: 700; font-size: clamp(1.4rem, var(--comp-28), 2.2rem); margin: clamp( 1.5rem, var(--comp-30), 3rem) auto clamp( 1rem, var(--comp-20), 2rem); line-height: 1.8;} .job-descriptionBox .whiteBox .band + h6{ margin-top: 0 !important;} /*-- flow --*/ .flowBox{ display: flex;} .flowBox > .innerFlowBox{ flex: 1; box-sizing: border-box;} .flowBox > .innerFlowBox hgroup{ height: 240px; text-align: center; position: relative;} .flowBox > .innerFlowBox hgroup::after{ content: ""; display: block; aspect-ratio: 16 / 32; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 16px; position: absolute; top: 50% ; left: calc(100% - 1px);} .flowBox > .innerFlowBox:nth-child(1) hgroup, .flowBox > .innerFlowBox:nth-child(1) hgroup::after{ background-color: #F2A7C8; z-index: 4;} .flowBox > .innerFlowBox:nth-child(2) hgroup, .flowBox > .innerFlowBox:nth-child(2) hgroup::after{ background-color: #EF92BA; z-index: 3;} .flowBox > .innerFlowBox:nth-child(3) hgroup, .flowBox > .innerFlowBox:nth-child(3) hgroup::after{ background-color: #EB7CAC; z-index: 2;} .flowBox > .innerFlowBox:nth-child(4) hgroup{ background-color: #E96DA3; z-index: 1;} .flowBox > .innerFlowBox:nth-child(4) hgroup::after{ content: none;} .flowBox > .innerFlowBox hgroup .num{ color: #fff; font-size: clamp(3.2rem, var(--comp-64), 6.4rem); font-family: var(--zen-maru); font-weight: 700; } .flowBox > .innerFlowBox hgroup h4{ color: #fff; font-size: clamp(2rem, var(--comp-40), 2.6rem); font-family: var(--zen-maru); font-weight: 700; line-height: 1.6;} .flowBox > .innerFlowBox > p{ padding: clamp(1.5rem, var(--comp-30), 3rem) clamp(15px, var(--comp-30), 30px) 0 0;} @media screen and (width <= 1080px){ .flowBox{ flex-wrap: wrap;} .flowBox > .innerFlowBox{ width: 100%; flex: none; position: relative; padding: clamp(3rem, var(--comp-60), 6rem) clamp(20px, var(--comp-40), 60px);} .flowBox > .innerFlowBox::after{ content: ""; display: block; aspect-ratio: 64 / 32; clip-path: polygon(0 0, 100% 0, 50% 100%); width: clamp(3.2rem, var(--comp-64), 64px); position: absolute; bottom: 0; transform: translate(-50%, calc(100% - 1px)); left: 50%;} .flowBox > .innerFlowBox:nth-child(1), .flowBox > .innerFlowBox:nth-child(1)::after{ background-color: #F2A7C8; z-index: 4;} .flowBox > .innerFlowBox:nth-child(2), .flowBox > .innerFlowBox:nth-child(2)::after{ background-color: #EF92BA; z-index: 3;} .flowBox > .innerFlowBox:nth-child(3), .flowBox > .innerFlowBox:nth-child(3)::after{ background-color: #EB7CAC; z-index: 2;} .flowBox > .innerFlowBox:nth-child(4){ background-color: #E96DA3; z-index: 1;} .flowBox > .innerFlowBox:nth-child(4)::after{ content: none;} .flowBox > .innerFlowBox hgroup{ height: auto; display: flex; align-items: center; gap: clamp(15px, var(--comp-30), 30px); margin-bottom: clamp(1.25rem, var(--comp-25), 2.5rem);} .flowBox > .innerFlowBox hgroup::after{ content: none;} .flowBox > .innerFlowBox hgroup .num{ line-height: 1; width: 0.6em; text-align: left;} .flowBox > .innerFlowBox hgroup h4{ text-align: left; flex: 1;} .flowBox > .innerFlowBox hgroup h4 .pc{ display: none !important;} .flowBox > .innerFlowBox > p{ background-color: #fff; border-radius: clamp(5px, var(--comp-10), 10px); padding: clamp(20px, var(--comp-40), 60px) clamp(20px, var(--comp-40), 60px); box-sizing: border-box;} } /* SERVICE --------------------------------*/ /*-- serviceLead --*/ #serviceLead .inner{ width: min(90%, 1280px);} #serviceLead .pinkHeading01, #serviceLead .flexBox{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; display: flex; justify-content: space-between;} #serviceLead .flexBox p{ width: 34.4827586%;} #serviceLead .flexBox figure{ width: 56.8965517%;} #serviceLead .serviceCategoryBox{ margin-top: clamp(5.5rem, var(--comp-110), 10rem);} #serviceLead .pinkHeading03 + .serviceCategoryBox{ margin-top: 0;} #serviceLead .serviceCategoryBox .lineTtl, #serviceLead .serviceCategoryBox .lineTtl + p{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; } .serviseList01{ display: flex; row-gap: clamp(2rem, var(--comp-40), 4rem); column-gap: clamp(15px, var(--comp-30), 32px); flex-wrap: wrap; margin-top: clamp(3rem, var(--comp-60), 6rem);} .serviseList01 > li{ padding: clamp(1rem, var(--comp-20), 1.8rem) 18px; border-radius: clamp(10px,var(--comp-20), 20px); width: calc((100% - (clamp(15px, var(--comp-30), 32px) * 3) - 1px) / 4); box-sizing: border-box;} .serviseList01 > li > figure{ margin-bottom: clamp(0.5rem, var(--comp-10), 1rem); width: min(100%, 384px); aspect-ratio: 256 / 168; margin-left: auto; margin-right: auto;} .serviseList01 > li > .ttl{ background-color: #fff; border-radius: clamp(5px, var(--comp-10), 10px); text-align: center; font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; line-height: 1.75; padding: 1rem 5px; margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;} .serviseList01.pink > li{ border: 2px solid var(--pink); background-color: var(--palePink); } .serviseList01.green > li{ border: 2px solid var(--green); background-color: var(--paleGreen); } .serviseList01.pink > li > .ttl{ color: var(--pink);} .serviseList01.green > li > .ttl{ color: var(--green);} .circleList li{ padding-left: 1.5em; text-indent: -1.5em; font-size: var(--base-font-size); font-family: var(--base-font); line-height: 1.8; } .circleList li:not(:last-child){ margin-bottom: 0.4em;} .circleList li::before{ content: "● "; margin-right: 0.2em;} .circleList li b{font-family: inherit;} .circleList.pink li::before, .serviseList01.pink .circleList li::before{ color: var(--pink);} .circleList.green li::before, .serviseList01.green .circleList li::before{ color: var(--green);} .serviseList02{ display: flex; row-gap: clamp(2rem, var(--comp-40), 4rem); column-gap: clamp(15px, var(--comp-30), 32px); flex-wrap: wrap; margin-top: clamp(3rem, var(--comp-60), 6rem);} .serviseList02 > li{ padding: clamp(2rem, var(--comp-40), 4rem) 30px; border-radius: clamp(10px,var(--comp-20), 20px); width: calc((100% - (clamp(15px, var(--comp-30), 32px) * 3) - 1px) / 4); box-sizing: border-box; text-align: center; line-height: 1.75; font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center;} .serviseList02.blue > li{ color: var(--blue); border: 2px solid var(--blue);} #visiting-nursing .serviseList01 > li > .ttl{ min-height: 104px;} #rehabilitation .serviseList01 > li > .ttl{ min-height: 146px;} @media screen and (width <= 1300px){ .serviseList01 > li, .serviseList02 > li{ width: calc((100% - (clamp(15px, var(--comp-30), 32px) * 2) - 1px) / 3);} } @media screen and (width <= 1100px){ .serviseList01 > li, .serviseList02 > li{ width: calc((100% - clamp(15px, var(--comp-30), 32px) - 1px) / 2);} } @media screen and (width <= 1000px){ #serviceLead .flexBox{ flex-wrap: wrap; gap: clamp(2.75rem, var(--comp-55), 5.5rem);} #serviceLead .flexBox p{ width: 100%;} #serviceLead .flexBox figure{ position: relative; width: 100%;} #serviceLead .flexBox figure img{ width: 113%; position: relative; left: 50%; transform: translate(-50%); max-width: 113% !important;} } @media screen and (width <= 800px){ .serviseList01 > li, .serviseList02 > li{ width: 100%;} #visiting-nursing .serviseList01 > li > .ttl{ min-height: 0;} #rehabilitation .serviseList01 > li > .ttl{ min-height: 0;} } /*-- serviceMessage --*/ #serviceMessage .lead{ text-align: center; font-size: var(--base-font-size); font-family: var(--zen-maru); font-weight: 500; line-height: 2.4; margin-top: clamp(5rem, var(--comp-100), 7.5rem);} #value{ margin-top: clamp(5.5rem, var(--comp-110), 11rem);} .valueBox{ display: flex; flex-wrap: wrap; row-gap: 2rem; margin-top: clamp(3rem, var(--comp-60), 6rem)} .valueBox .innerValueBox{ box-sizing: border-box; width: min(100%, 1040px); display: flex; column-gap: 40px; row-gap: min(var(--comp-30)); align-items: center;} .valueBox .innerValueBox:nth-child(odd){ margin-right: auto;} .valueBox .innerValueBox:nth-child(even){ margin-left: auto;} .valueBox .innerValueBox figure{ width: 270px; margin-bottom: 0;} .valueBox .innerValueBox p{ width: calc(100% - 40px - 270px - 1px);} @media screen and (width <= 800px){ .valueBox{ row-gap: min(var(--comp-80), 8rem);} .valueBox .innerValueBox{ flex-wrap: wrap;} .valueBox .innerValueBox figure{ width: clamp(200px, 54.72972972972972972vw, 405px); margin-right: auto; margin-left: auto;} .valueBox .innerValueBox p{ width: 100%;} } /*-- staffMessage --*/ #staffMessage .inner{ width: min(90%, 1280px);} #staffMessage .pinkHeading03, #staffMessage .catch, #staffMessage .catch + p{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #staffMessage .catch{ text-align: center; font-family: var(--zen-maru); font-size: clamp(1.7rem, var(--comp-34), 2.3rem); font-weight: 700; margin-bottom: clamp(1.5rem, var(--comp-30), 3rem);} #staffMessage .staffMessageBox{ display: flex; flex-wrap: wrap; gap: min(2rem, var(--comp-40), 3rem); margin-top: clamp(2.75rem, var(--comp-55), 7rem);} #staffMessage .staffMessageBox .innerStaffMessageBox{ border: 2px solid var(--pink); border-radius: clamp(10px, var(--comp-20), 20px); display: flex; width: 100%; column-gap: 70px; row-gap: clamp(20px, var(--comp-40), 40px); justify-content: space-between; padding: clamp(2rem, var(--comp-40), 4rem) clamp(20px, var(--comp-40), 48px);} #staffMessage .staffMessageBox hgroup{ width: 182px; text-align: center; } #staffMessage .staffMessageBox hgroup figure{ width: 164px; margin: 0 auto 20px;} #staffMessage .staffMessageBox hgroup h4{ line-height: 1; font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-family: var(--base-font); color: var(--pink); font-weight: bold; letter-spacing: 0;} #staffMessage .staffMessageBox p{ width: calc(100% - 185px - 70px - 1px); background-color: #FBE9F1; border-radius: clamp(5px, var(--comp-10), 10px); position: relative; padding: clamp(2rem, var(--comp-40), 4rem) clamp(20px, var(--comp-40), 40px);} #staffMessage .staffMessageBox p::before{ content: ""; display: block; width: 40px; height: 32px; background-color: #FBE9F1; clip-path: polygon(100% 0, 100% 100%, 0 50%); position: absolute; top: 50%; left: 0; transform: translate(calc(-100% + 1px) , -50%);} @media screen and (width <= 1000px){ #staffMessage .staffMessageBox .innerStaffMessageBox{ flex-wrap: wrap;} #staffMessage .staffMessageBox hgroup{ width: 100%; display: flex; gap: min(var(--comp-30), 30px); align-items: center;} #staffMessage .staffMessageBox hgroup figure{ width: clamp(90px, var(--comp-180), 180px); margin: 0;} #staffMessage .staffMessageBox hgroup h4{ width: calc(100% - clamp(90px, var(--comp-180), 180px) - 1px - min(var(--comp-30), 30px)); text-align: left;} #staffMessage .staffMessageBox p{ width: 100%;} #staffMessage .staffMessageBox p::before{ width: clamp(16px, var(--comp-32), 32px); height: clamp(12px, var(--comp-24), 24px); clip-path: polygon(0 100%, 100% 100%, 50% 0); top: 0; left: calc(clamp(90px, var(--comp-180), 180px) / 2); transform: translate(-50%, calc(-100% + 1px));} } /*-- serviceFlow --*/ #serviceFlow .inner{ width: min(90%, 1280px);} #serviceFlow .bandList{ width: min(87.8787878787878787%, 1160px); display: flex; justify-content: center; gap: clamp(2rem, var(--comp-20), 24px); flex-wrap: wrap; margin: 0 auto clamp(3rem, var(--comp-60), 5rem);} #serviceFlow .bandList li{ background-color: var(--pink); color: #fff; font-weight: 700; font-size: clamp(1.8rem, var(--comp-36), 2.4rem); padding: clamp(1.5rem, var(--comp-30), 2rem) clamp(15px, var(--comp-30), 20px); width: min(100%, 352px); text-align: center; border-radius: clamp(6px, var(--comp-12), 8px);} .serviceFlowHead{ width: min(100%, 1040px); display: flex; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); padding: 2rem clamp(20px, var(--comp-40), 20px); column-gap: 40px; row-gap: clamp(1.5rem, var(--comp-30), 2rem); align-items: center; margin: 0 auto clamp(5.5rem, var(--comp-110), 6.5rem); box-sizing: border-box;} .serviceFlowHead figure{ width: clamp(150px, var(--comp-300), 240px); } .serviceFlowHead hgroup{ width: calc(100% - clamp(150px, var(--comp-300), 240px) - 40px - 1px);} .serviceFlowHead hgroup h4{ color: var(--pink); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 500; font-family: var(--base-font); margin-bottom: clamp(0.5rem, var(--comp-10), 1rem);} #serviceFlow .service-flowBox{ width: min(100%, 1160px); margin-right: auto; margin-left: auto; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); display: flex; flex-wrap: wrap; column-gap: min(var(--comp-80), 80px); padding: 4rem clamp(20px, var(--comp-40), 60px) 8rem ; align-items: flex-start; box-sizing: border-box;} #serviceFlow .service-flowBox > div{ position: relative; width: calc((100% - min(var(--comp-80), 80px) - 1px) / 2); display: flex; flex-wrap: wrap; gap: 4rem; justify-content: flex-start; padding: 4rem 0 ; flex-direction: column;} #serviceFlow .service-flowBox > div::before{ content: ""; position: absolute; top: 0; left: calc(clamp(10px, var(--comp-20), 18px) / 2); display: block; width: 2px; height: 100%; } #serviceFlow .service-flowBox > div.noon::before{ background-color: var(--pink);} #serviceFlow .service-flowBox > div.afternoon::before{ background-color: var(--blue);} #serviceFlow .service-flowBox dl{ display: flex; flex-wrap: wrap; position: relative; align-items: stretch; gap: 20px; align-items: stretch; box-sizing: border-box; width: 100%;} #serviceFlow .service-flowBox dl::after{ content: ""; display: block; height: 1px; background-color: #999999; width: 40px; order: 2; margin-top: calc(clamp(2rem, var(--comp-40), 3.2rem) * 1.4 / 2 );} #serviceFlow .service-flowBox dl dt{ display: flex; flex-direction: column; justify-content: space-between; order: 1; font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; width: calc(clamp(2rem, var(--comp-40), 3.2rem) * 2.4 + clamp(27px, var(--comp-55), 35px)); row-gap: 90px;} #serviceFlow .service-flowBox > div.noon dl dt{ color: var(--pink);} #serviceFlow .service-flowBox > div.afternoon dl dt{ color: var(--blue);} #serviceFlow .service-flowBox dl dt > span{ line-height: 1.2; display: block; width: 100%; position: relative; padding-left: clamp(27px, var(--comp-55), 35px);} #serviceFlow .service-flowBox dl dt > span::before{ content: ""; display: block; width: clamp(10px, var(--comp-20), 18px); aspect-ratio: 1 / 1; border-radius: 50%; position: absolute; left: 0; top: calc(clamp(2rem, var(--comp-40), 3.2rem) / 2); transform: translateY(-20%);} #serviceFlow .service-flowBox > div.noon dl dt span::before{ background-color: var(--pink);} #serviceFlow .service-flowBox > div.afternoon dl dt span::before{ background-color: var(--blue);} #serviceFlow .service-flowBox dl dd{ order: 3; width: calc(100% - (calc(clamp(2rem, var(--comp-40), 3.2rem) * 2.4) + 40px + 40px + clamp(27px, var(--comp-55), 35px)));} #serviceFlow .service-flowBox dl:not(:has( > dd))::after{ content: none;} #serviceFlow .service-flowBox dl h4{ font-size: clamp(1.8rem, var(--comp-36), 2.6rem); font-weight: 700; margin-bottom: clamp(1rem, var(--comp-20), 2rem); line-height: 1.6; font-feature-settings: "palt";} #serviceFlow .service-flowBox dl h4 span{ text-wrap: nowrap;} #serviceFlow .service-flowBox dl h4:first-child{ margin-top: 0;} #serviceFlow .service-flowBox dl h4:last-child{ margin-bottom: 0;} #serviceFlow .service-flowBox dl .circleList{ font-weight: 700;} #serviceFlow .service-flowBox dl .ifBox{ background-color: #DFEBF6; border-radius: clamp(5px , var(--comp-10), 10px); box-sizing: border-box; padding: clamp(25px, var(--comp-50), 40px) clamp(20px, var(--comp-40), 40px) clamp(2.5rem, var(--comp-50), 4rem); position: relative; margin-top: clamp(5rem, var(--comp-100), 6rem);} #serviceFlow .service-flowBox dl .ifBox::before{ content: ""; display: block; aspect-ratio: 162 / 44; width: clamp(110px, var(--comp-220), 160px); position: absolute; left: clamp(20px, var(--comp-40), 40px); top: calc(clamp(20px, var(--comp-40), 25px) * (-1)); background-image: url(../img/recruit/flag-if.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} #serviceFlow .service-flowBox dl .ifBox h5{ margin-top: 0;} #serviceFlow .service-flowBox dl .ifBox:first-child{ margin-top: clamp(20px, var(--comp-40), 25px);} #serviceFlow .service-flowBox dl .ifBox p:not(:first-of-type){ margin-top: clamp(1.5rem, var(--comp-30), 2rem);} #serviceFlow .service-flowBox dl .ifBox p{ line-height: 1.8;} #serviceFlow .service-flowBox dl .ifBox b{ font-family: var(--base-font); font-weight: 700;} #serviceFlow .service-flowBox dl .ifBox .pink{ color: var(--pink); font-weight: 700;} #serviceFlow .service-flowBox dl .pinkBox, #serviceFlow .service-flowBox dl .greenBox{ border-radius: clamp(5px , var(--comp-10), 10px); box-sizing: border-box; padding: clamp(25px, var(--comp-50), 40px) clamp(20px, var(--comp-40), 40px) clamp(2.5rem, var(--comp-50), 4rem); position: relative;} #serviceFlow .service-flowBox dl .pinkBox{ background-color: #FBE9F1;} #serviceFlow .service-flowBox dl .greenBox{ background-color: #CCECDE;} #serviceFlow .service-flowBox dl figure{ width: clamp(147px, 39.72972972972972vw, 196px); margin: clamp(1rem, var(--comp-20), 2rem) auto 0 0;} #serviceFlow .flowConclusionBox{ width: min(87.8787878787878787%, 1040px); margin-right: auto; margin-left: auto; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); border: 2px solid var(--pink); box-sizing: border-box; padding: clamp(3rem, var(--comp-60), 6rem) clamp(20px, var(--comp-40), 60px); text-align: center; margin-top: clamp(3.25rem, var(--comp-65), 5.5rem);} #serviceFlow .flowConclusionBox .catch{ font-family: var(--zen-maru); font-size: clamp(1.5rem, var(--comp-30), 2.4rem); margin-bottom: clamp(1.5rem, var(--comp-30), 3rem); font-weight: 700;} #serviceFlow .flowConclusionBox p:not([class]){ font-family: var(--zen-maru); font-weight: 500;} @media screen and (width <= 1280px){ #serviceFlow .service-flowBox > div{ width: 100%; padding-top: 0; padding-bottom: 4rem;} } @media screen and (width <= 800px){ .serviceFlowHead{ flex-wrap: wrap;} .serviceFlowHead figure{ margin-right: auto; margin-left: auto;} .serviceFlowHead hgroup{ width: 100%;} #serviceFlow .service-flowBox dl::after{ content: none;} #serviceFlow .service-flowBox dl dt{ display: contents;} #serviceFlow .service-flowBox dl dt > span:nth-child(n + 1):not(:first-child){ margin-top: 3rem; } #serviceFlow .service-flowBox dl dt > span:nth-child(1){ order: 1;} #serviceFlow .service-flowBox dl dt > span:nth-child(2){ order: 3;} #serviceFlow .service-flowBox dl dt > span:nth-child(3){ order: 4;} #serviceFlow .service-flowBox dl dt > span:nth-child(4){ order: 5;} #serviceFlow .service-flowBox dl dt > span:nth-child(5){ order: 6;} #serviceFlow .service-flowBox dl dt > span:nth-child(6){ order: 7;} #serviceFlow .service-flowBox dl dt > span:nth-child(7){ order: 8;} #serviceFlow .service-flowBox dl dt > span:nth-child(8){ order: 9;} #serviceFlow .service-flowBox dl dt > span:nth-child(9){ order: 10;} #serviceFlow .service-flowBox dl dd{ width: 100%; padding-left: clamp(27px, var(--comp-55), 35px); order: 2;} } /*-- serviceTime --*/ #serviceTime .inner{ width: min(90%, 1280px);} #serviceTime .inner > .lineTtl{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #serviceTime .flexBox{ justify-content: space-between; width: 100%; row-gap: clamp(6rem, var(--comp-120), 10rem);} #serviceTime .flexBox .pinkBox{ position: relative; padding: clamp(2rem, var(--comp-40), 5.5rem) clamp(20px, var(--comp-40), 60px) 0; display: flex; flex-direction: column; width: 48.4375%; } #serviceTime .flexBox .pinkBox > *{ position: relative; z-index: 2; width: 100%;} #serviceTime .flexBox .pinkBox::before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 170px); background-color: var(--palePink); border-radius: clamp(10px, var(--comp-20), 20px); z-index: 1;} #serviceTime .flexBox .pinkBox p{ margin-bottom: clamp(2rem, var(--comp-40), 5rem); font-weight: 500;} #serviceTime .flexBox .pinkBox figure{ margin-top: auto; border-radius: clamp(10px, var(--comp-20), 20px); overflow: hidden;} #serviceTime .flexBox .pinkBox figure img{ display: block; } .simplePinkBox{ background-color: var(--palePink); max-width: min(87.8787878787878787%, 1040px); margin: clamp(6rem, var(--comp-120), 10rem) auto 0; position: relative; border-radius: clamp(10px, var(--comp-20), 20px); padding: clamp(2rem, var(--comp-40), 4rem) clamp(20px, var(--comp-40), 60px); box-sizing: border-box;} @media screen and (width <= 1000px){ #serviceTime .flexBox{ flex-wrap: wrap;} #serviceTime .flexBox .pinkBox{ width: 100%;} #serviceTime .flexBox .pinkBox figure{ width: min(86.2068965%, 500px); margin-right: auto; margin-left: auto;} } /* PROFESSIONALS --------------------------------*/ /*-- professionalsIntro --*/ #professionalsIntro .inner{ width: min(90%, 1280px);} #professionalsIntro .troublesBox{ border: 4px solid #F3A9CA; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(3rem, var(--comp-60), 6rem) clamp(20px, var(--comp-40), 40px); margin: 0 auto clamp(3rem, var(--comp-60), 8rem); width: min(100%, 1160px);} #professionalsIntro .troublesBox h3{ width: min(100%, 700px); margin: 0 auto clamp(2.5rem, var(--comp-50), 6rem);} #professionalsIntro .troublesBox .checkList{ width: min(100%, 800px); margin: 0 auto clamp(2rem, var(--comp-40), 4rem);} #professionalsIntro .troublesBox figure{ width: min(100%, 648px); margin: 0 auto;} #professionalsIntro .solutionBox{ border: 4px solid #F3A9CA; background-color: #FEFFF1; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(3rem, var(--comp-60), 6rem) clamp(20px, var(--comp-40), 40px); margin: 0 auto; width: min(100%, 1160px);} #professionalsIntro .solutionBox h3{ width: min(100%, 700px); margin: 0 auto clamp(2.5rem, var(--comp-50), 6rem);} #professionalsIntro .solutionBox .squareNumList{ width: min(100%, 800px); margin: 0 auto;} /*-- use --*/ #use > .inner{ width: min(90%, 1280px);} #use > .inner .pinkHeading03{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #use > .inner .catch{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; text-align: center; font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; } #use > .inner .lineTtl{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #use .useBlockList{ display: flex; flex-wrap: wrap; width: min(100%, 1280px); gap: clamp(2rem, var(--comp-40), 40px);} #use .useBlockList > li{ width: calc((100% - (clamp(2rem, var(--comp-40), 40px) * 2) - 1px) / 3); border: 2px solid var(--pink); padding: clamp(2.5rem, var(--comp-50), 4rem) clamp(20px, var(--comp-40), 38px); background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px);} #use .useBlockList > li .ttl{ border-bottom: 4px dotted var(--pink); font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.8rem, var(--comp-36), 2.4rem); text-align: center; margin-bottom: clamp(1.5rem, var(--comp-30), 3rem);} @media screen and (width <= 1080px){ #use .useBlockList > li{ width: calc((100% - clamp(2rem, var(--comp-40), 40px) - 1px) / 2); } } @media screen and (width <= 800px){ #use .useBlockList > li{ width: 100%; } } /*-- medical-care --*/ #medical-care > .inner, #life-support > .inner, #rehabilitationDetail .inner{ width: min(90%, 1280px);} #medical-care > .inner .lineTtl, #life-support > .inner .lineTtl, #rehabilitationDetail > .inner .lineTtl{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; } /*-- popupList --*/ .popupList{ display: flex; flex-wrap: wrap; width: min(100%, 1280px); gap: clamp(2rem, var(--comp-40), 40px);} .popupList .wrapPopupBox{ display: contents;} .popupList .wrapPopupBox .popupLinkBox{ background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); overflow: hidden; display: flex; flex-direction: column; width: calc((100% - (clamp(2rem, var(--comp-40), 40px) * 2) - 1px) / 3); padding-bottom: clamp(1.5rem, var(--comp-30), 3rem);} .popupList .wrapPopupBox .popupLinkBox figure{ width: 100%; margin-bottom: clamp(1.5rem, var(--comp-30), 3rem);} .popupList .wrapPopupBox .popupLinkBox .ttl{ font-weight: 700; font-family: var(--zen-maru); margin: 0 auto clamp(1rem, var(--comp-20), 2rem); width: calc(100% - (clamp(10px, var(--comp-20), 40px) * 2)); font-size: clamp(1.7rem, var(--comp-36), 2.4rem); text-align: center; line-height: 1.5;} .popupList .wrapPopupBox .popupLinkBox p:has( > .popupBtn){ margin-top: auto; text-align: center;} .popupList .wrapPopupBox .popupLinkBox .popupBtn{ display: block; width: 100%; background-color: var(--pink); border: 2px solid var(--pink); border-radius: clamp(5px, var(--comp-10), 8px); color: #fff; font-family: var(--zen-maru); font-size: clamp(1.5rem, var(--comp-28), 2rem); text-align: center; padding: clamp(0.5rem, var(--comp-10), 1.5rem) clamp(2px, var(--comp-5), 10px); line-height: 1.6; width: calc(100% - (clamp(10px, var(--comp-20), 40px) * 2)); margin: auto auto 0; font-weight: 700;} .zoom.mfp-removing .zoom-anim-dialog{ opacity: 0; } .mfp-bg { background: rgba(233,109,163,0.8) !important; opacity: 0; transition: opacity 0.3s; width: 100%;} .mfp-wrap{ width: 100%; margin: 0 auto;} .mfp-ready.mfp-bg{ opacity: 1; } .mfp-ready.mfp-removing.mfp-bg{ opacity: 0; } .mfp-ready .itemDetail{ opacity: 1;} .mfp-ready.mfp-removing .popupDeatil{ opacity: 0;} button.mfp-close{ width: clamp(50px, var(--comp-100), 80px); aspect-ratio: 1 / 1; position: absolute; top: 0 !important; right: clamp(20px, var(--comp-40), 40px) !important; opacity: 1; transform: translateY(-50%); transition: all 0.3s; transition: all 0.3s; background-size: 100% 100%; z-index: 10; pointer-events: all; display: block;} button.mfp-close::after{ content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: block;} button.mfp-close span{ width: 100%; height: 100%; position: relative; display: block; background-image: url(../img/professionals/btn-close.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .mfp-auto-cursor .mfp-content{ width: min(90%, 1040px); margin: 0 auto !important;} .popupDeatil{ background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 80px); transition: opacity 0.3s;} .popupDeatil .lead{ font-size: clamp(1.65rem, var(--comp-33), 2.2rem); margin: 0 auto clamp(2rem, var(--comp-40), 3rem); font-weight: 500;} .popupDeatil .lead:has( + .mfp-close){ margin-bottom: 0;} .popupDeatil .flexBox{ column-gap: clamp(40px, var(--comp-80), 80px); row-gap: 0.3em; flex-wrap: wrap;} .popupDeatil .flexBox > ul{ width: calc((100% - clamp(40px, var(--comp-80), 80px) - 1px) / 2);} .popupDeatil .popupOl{ list-style-type: decimal; list-style-position: outside; margin: 2em 0; font-size: var(--base-font-size);} .popupDeatil .popupOl li{ font-size: var(--base-font-size); font-family: var(--base-font); line-height: 1.6; position: relative; margin-left: 1.5em; padding-left: 0.4em; } .popupDeatil .popupOl li:not(:last-child){ margin-bottom: 2em;} .popupDeatil .popupOl li::marker{ position: absolute; left: 0; display: block; font-weight: 700;} .popupDeatil .popupOl li b{ font-weight: 700; font-family: var(--base-font);} .popupDeatil .popupOl:has( + .mfp-close){ margin-bottom: 0;} @media (any-hover: hover) { button.mfp-close:hover{ transform: translateY(-50%) rotate(180deg); } } @media screen and (width <= 800px){ .popupList .wrapPopupBox .popupLinkBox{ width: calc((100% - clamp(2rem, var(--comp-40), 40px) - 1px) / 2); } .popupDeatil .flexBox > ul{ width: 100%;} } /*-- faq --*/ .faqListBox .faqList{ border-bottom: 1px solid var(--pink); margin: 0; padding: clamp(2.5rem, var(--comp-50), 3rem) 0;} .faqListBox .faqList:first-child{ border-top: 1px solid var(--pink);} .faqListBox .faqList dt button{ border: none; background: none; margin: 0; display: flex; gap: clamp(15px, var(--comp-30), 25px); width: 100%; cursor: pointer; padding: 0 20px 0 0; align-items: flex-start; font-family: var(--base-font);} .faqListBox .faqList dt button::before{ content: ""; background-image: url(../img/professionals/icon-q.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 1 / 1; width: clamp(24px, var(--comp-48), 32px); margin-top: clamp(2px, var(--comp-5), 5px);} .faqListBox .faqList dt button .icon{ display: block; aspect-ratio: 1 / 1; position: relative; transform: translateY(5px); transition: transform 0.3s ease; width: clamp(18px, var(--comp-36), 25px);} .faqListBox .faqList dt button .icon::before{ content: ""; display: block; width: 100%; height: 2px; position: absolute; top: calc(50% - 1px); left: 0; background-color: var(--pink);} .faqListBox .faqList dt button .icon::after{ content: ""; display: block; width: 2px; height: 100%; position: absolute; top: 0; left: calc(50% - 1px); background-color: var(--pink);} .faqListBox .faqList dt button .text{ display: block; width: calc(100% - clamp(24px, var(--comp-48), 32px) - (clamp(15px, var(--comp-30), 25px) * 2)); text-align: left; font-size: clamp(1.6rem, var(--comp-33), 2.2rem); line-height: 1.75; font-weight: bold; font-family: var(--base-font);} .faqListBox .faqList dt.active button .icon{ transform: translateY(5px) rotate(180deg);} .faqListBox .faqList dt.active button .icon::after{ opacity: 0; transform: scaleX(0);} .faqListBox .faqList dd{ display: none; padding: 0; margin: 0;} .faqListBox .faqList dd p{ padding: clamp(2.5rem, var(--comp-55), 3rem) calc(20px + clamp(18px, var(--comp-36), 25px) + clamp(15px, var(--comp-30), 25px)) 0 0; position: relative; width: 100%; margin: 0; display: flex; gap: clamp(15px, var(--comp-30), 25px); flex-wrap: wrap; box-sizing: border-box; align-items: flex-start;} .faqList dd p::before{ content: ""; background-image: url(../img/professionals/icon-a.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; aspect-ratio: 1 / 1; width: clamp(24px, var(--comp-48), 32px); margin-top: clamp(2px, var(--comp-5), 5px)} .faqList dd .text{ width: calc(100% - clamp(24px, var(--comp-48), 32px) - clamp(15px, var(--comp-30), 25px)); line-height: 2;} @media screen and (width <= 800px){ .faqListBox .faqList dt button{ padding: 0;} .faqListBox .faqList dd p{ padding-right: calc(clamp(18px, var(--comp-36), 25px) + clamp(15px, var(--comp-30), 25px));} } /*-- chert --*/ #chert > .inner{ width: min(90%, 1280px);} #chert > .inner .pinkHeading03{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #chert > .inner .catch{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto; text-align: center; font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; } #chert .whiteBox{ background-color: #fff; margin-top: clamp(2.5rem, var(--comp-55), 5.5rem); border-radius: clamp(5px, var(--comp-10), 20px); padding: clamp(4rem, var(--comp-80), 8rem) 0;} #chert .whiteBox > *{ width: min(87.8787878787878787%, 1160px); margin-left: auto; margin-right: auto;} #chert .whiteBox > .dotTtl{ width: min(87.8787878787878787%, 640px); text-align: center;} #chert .whiteBox .js-scrollable{ overflow: auto; padding-bottom: 0.5rem; margin-bottom: clamp(3rem, var(--comp-60), 5.5rem);} .js-scrollable figure{ width: max(800px, 100%);} #chert .whiteBox .textPdfLinkBox .text{ margin-bottom: 0.5em; } #chert .whiteBox .textPdfLinkBox ul, #chert .whiteBox .textPdfLinkBox ul *{ font-family: var(--base-font); font-size: var(--base-font-size); line-height: 2;} #chert .whiteBox .textPdfLinkBox ul a{ color: var(--pink); text-decoration: underline;} #chert .whiteBox .textPdfLinkBox ul a.pdf::after{ content: ""; display: inline-block; width: clamp(30px, var(--comp-60), 40px); height: 2em; background-image: url(../img/professionals/icon-pdf.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-left: 10px; vertical-align: middle;} /*-- doc --*/ #doc > .inner{ width: min(90%, 1280px);} #doc > .inner .pinkHeading03{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #doc > .inner .catch{ width: min(87.8787878787878787%, 1040px); margin-right: auto; margin-left: auto; text-align: center; font-family: var(--zen-maru); font-size: clamp(1.8rem, var(--comp-36), 2.4rem); font-weight: 700; } #doc .pdfBtnList{ margin-top: clamp(3rem, var(--comp-60), 6rem) ;} .pdfBtnList{ width: 100%; display: flex; flex-wrap: wrap; row-gap: clamp(0.5rem, var(--comp-10), 1rem);} .pdfBtnList li{ width: 100%;} .pdfBtnList a{ background-color: #fff; display: flex; align-items: flex-start; position: relative; font-size: var(--base-font-size); font-family: var(--base-font); padding: clamp(2rem, var(--comp-40), 3rem) clamp(5rem, var(--comp-100), 7rem) clamp(2rem, var(--comp-40), 3rem) clamp(2.5rem, var(--comp-50), 2.8rem); border-radius: clamp(5px, var(--comp-10), 10px); line-height: 2; column-gap: clamp(15px, var(--comp-30), 20px);} .pdfBtnList a *{ font-family: var(--base-font); font-weight: 500; } .pdfBtnList a .text{ width: calc(100% - (clamp(15px, var(--comp-30), 20px) + clamp(45px, var(--comp-90), 60px))); transition: all 0.3s ease;} .pdfBtnList a::before{ content: ""; display: block; width: clamp(45px, var(--comp-90), 60px); height: 2em; background-image: url(../img/professionals/icon-pdf.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } .pdfBtnList a::after{ content: ""; display: block; position: absolute; top: 50%; right: clamp(2.5rem, var(--comp-50), 2.8rem); transform: translateY(calc(-50% + 0.5px)); mask-image: url(../img/common/arrow-p01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); background-color: var(--pink); transition: all ease 0.3s;} .pdfBtnList.pink a{ background-color: #fae9f1;} @media (any-hover: hover) { .pdfBtnList a:hover{ opacity: 1;} .pdfBtnList a:hover .text{ color: var(--pink);} } @media screen and (width <= 800px){ #doc > .inner .catch{ text-align: left; font-family: var(--base-font); font-size: var(--base-font-size); font-weight: 500;} } /*-- tool --*/ #tool > .inner{ width: min(90%, 1280px);} #tool > .inner .pinkHeading03{ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #tool .flexBox{ gap: clamp(25px, var(--comp-50), 40px);} #tool .flexBox .pinkBox{ position: relative; padding: clamp(2rem, var(--comp-40), 4rem) clamp(20px, var(--comp-40), 40px); background-color: var(--palePink); border-radius: clamp(10px, var(--comp-20), 20px); flex: 1} #tool .flexBox .pinkBox .dotTtl{ font-size: clamp(1.8rem, var(--comp-36), 2.4rem); color: var(--base-font-color); text-align: center; min-height: calc((clamp(1.8rem, var(--comp-36), 2.4rem) * 1.8 * 2) + clamp(0.5rem, var(--comp-10), 1rem)); display: flex; flex-direction: column; align-items: center; justify-content: center;} #tool .flexBox .pinkBox .dotTtl:has( + figure){ margin-bottom: 0;} #tool .flexBox .pinkBox .btntype01{ margin-top: clamp(2rem, var(--comp-40), 4rem); margin-right: auto; margin-left: auto;} @media screen and (width <= 1290px){ #tool .flexBox{ flex-wrap: wrap; justify-content: center;} #tool .flexBox .pinkBox{ width: calc((100% - clamp(25px, var(--comp-50), 40px) - 1px) / 2); flex: none; } } @media screen and (width <= 800px){ #tool .flexBox .pinkBox{ width: 100%; flex: none;} } /* GUIDE --------------------------------*/ /*-- to-use-services --*/ #to-use-services .flexBox{ justify-content: space-between; align-items: center;} #to-use-services figure{ width: 268px;} #to-use-services .textBox{ width: calc(100% - 80px - 268px);} #to-use-services .textBox p { font-family: var(--zen-maru); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 500;} @media screen and (width <= 1000px){ #to-use-services .flexBox{ flex-wrap: wrap; gap: clamp(1.5rem, var(--comp-30), 3rem);} #to-use-services figure{ width: min(70%, 402px); margin: 0 auto;} #to-use-services .textBox{ width: 100%; margin-left: auto; margin-right: auto;} } /*-- concerns --*/ #concerns .inner{ width: min(90%, 1280px);} #concerns .concernsBox{ border: 4px solid #F3A9CA; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(3rem, var(--comp-60), 6rem) clamp(20px, var(--comp-40), 40px); margin: 0 auto clamp(3rem, var(--comp-60), 6.5rem); width: min(100%, 1160px);} #concerns .concernsBox h3{ width: min(100%, 700px); margin: 0 auto clamp(3.25rem, var(--comp-65), 6rem);} #concerns .concernsBox .checkList{ width: min(100%, 800px); margin: 0 auto clamp(2rem, var(--comp-40), 4rem);} #concerns .concernsBox figure{ width: min(100%, 648px); margin: 0 auto;} #concerns .visualBox figure{ height: 493px; margin-bottom: clamp(2rem, var(--comp-40), 5rem); } #concerns .visualBox figure img{ height: 100%; width: auto !important; max-width: none; aspect-ratio: 1304 / 493; position: relative; left: 50%; transform: translateX(-50%);} #concerns .visualBox .whiteBox{ width: min(100%, 1160px); background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); text-align: center; box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 60px); margin-left: auto; margin-right: auto;} #concerns .visualBox .whiteBox p{ font-family: var(--zen-maru); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 500;} #concerns .visualBox .whiteBox p .pink{ font-weight: 700;} #concerns .arrow:not(:last-child){ margin-bottom: clamp(2rem, var(--comp-40), 4rem);} #concerns .arrow::after{ content: ""; display: block; aspect-ratio: 30 / 98; background-image: url(../img/guide/icon-scroll.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: min(var(--comp-30), 30px); margin: clamp(1.5rem, var(--comp-30), 3rem) auto 0;} #information-desk .whiteBox{ width: 100%; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 60px); margin-left: auto; margin-right: auto;} #information-desk .whiteBox > .circleList li{ font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2.4rem);} #information-desk .bdrText{ border: 1px solid var(--pink); border-radius: clamp(5px, var(--comp-10), 10px); font-weight: 500; font-size: clamp(1.5rem, var(--comp-30), 2.4rem); padding: clamp(1rem, var(--comp-20), 2rem) clamp(20px, var(--comp-40), 60px); margin-top: clamp(2.75rem, var(--comp-55), 5.5rem);} .pointBox{ border-radius: clamp(5px, var(--comp-10), 10px); box-sizing: border-box; padding: clamp(25px, var(--comp-50), 40px) clamp(20px, var(--comp-40), 40px) clamp(2.5rem, var(--comp-50), 4rem); position: relative; margin-top: clamp(5rem, var(--comp-100), 6rem);} .pointBox.white{ background-color: #fff;} .pointBox.yellow{ background-color: #FFFAE0;} .pointBox::before{ background-image: url(../img/recruit/flag-point.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; content: ""; display: block; aspect-ratio: 162 / 44; width: clamp(110px, var(--comp-220), 160px); position: absolute; left: clamp(20px, var(--comp-40), 40px); top: calc(clamp(20px, var(--comp-40), 25px) * (-1));} #until-use .whiteBox{ width: min(100%, 1160px); background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 60px); margin-left: auto; margin-right: auto;} .untilUseCaseText{ width: min(87.8787878787878787%, 1160px); margin: clamp(6rem, var(--comp-120), 12rem) auto 0; } .untilUseCaseText p{ font-weight: 500;} @media screen and (width <= 900px) { #concerns .visualBox figure{ height: auto; width: 100%; } #concerns .visualBox figure img.pc{ display: none !important; } #concerns .visualBox figure img.sp{ height: auto; width: 100% !important; aspect-ratio: 1320 / 994; left: auto; transform: translateX(0); display: block !important;} } /*-- guideFlow --*/ .arrowFlowList > div:not(:last-child){ margin-bottom: clamp(2.25rem, var(--comp-45), 4rem);} .arrowFlowList > div:not(:last-child)::after{ content: ""; display: block; aspect-ratio: 2 / 1; background-color: #B2B2B2; clip-path: polygon(0 0, 100% 0, 50% 100%); margin: clamp(2.25rem, var(--comp-45), 4rem) auto 0; width: clamp(32px, var(--comp-64), 64px);} .arrowFlowList p:not(:last-child){ margin-bottom: 2em;} .arrowFlowList dd p, .arrowFlowList dd ul li{ font-weight: 500;} /*-- everyday --*/ #everyday > .inner{ width: min(90%, 1280px);} #everyday > .inner > .pinkHeading03, #everyday > .inner > .lineTtl, #everyday > .inner > p:not([class]){ width: min(87.8787878787878787%, 1160px); margin-right: auto; margin-left: auto;} #everyday .whiteBox{ width: 100%; background-color: #fff; border-radius: clamp(10px, var(--comp-20), 20px); box-sizing: border-box; padding: clamp(4rem, var(--comp-80), 8rem) clamp(20px, var(--comp-40), 60px); margin-top: clamp(3rem, var(--comp-60), 6rem); } #everyday .whiteBox + .areaBox{ margin-top: clamp(4rem, var(--comp-80), 8rem); max-width: 100%;} @media screen and (width <= 1080px) { #everyday .whiteBox + .areaBox { width: 100%;} } /* NEWS --------------------------------*/ .newsBox .inner{ display: flex; width: min(80%, 1160px); margin-right: auto; margin-left: auto; gap: clamp(50px, var(--comp-100), 100px); justify-content: space-between;} .newsBox .inner aside{ width: 219px;} .newsBox aside .innerSide{ width: 100%; border-radius: clamp(5px, var(--comp-10), 10px); overflow: hidden; position: sticky; top: 100px; left: 0;} .newsBox aside .innerSide p{ background-color: var(--pink); color: #fff; font-family: var(--zen-maru); display: flex ; font-size: clamp(2rem, var(--comp-40), 2.4rem); font-weight: 700; gap: 10px; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-30), 2rem) clamp(15px, var(--comp-20), 20px); line-height: 1; margin-bottom: 1px;} .newsBox aside .innerSide p::before{ content: ""; display: block; width: 34px; aspect-ratio: 69 / 48; background-image: url(../img/common/icon-heart-double.webp); background-repeat: no-repeat; background-position: center center; background-size: contain;} .newsBox aside .categoryList li:not(:last-child){ margin-bottom: 1px;} .newsBox aside .categoryList a{ padding: clamp(1.5rem, var(--comp-30), 2rem) clamp(40px, var(--comp-60), 60px) clamp(1.5rem, var(--comp-30), 2rem) clamp(15px, var(--comp-20), 20px); display: block; background-color: var(--pink); color: #fff; font-size: clamp(1.5rem, var(--comp-30), 1.8rem); font-weight: 700; position: relative; line-height: 1.4;} .newsBox aside .categoryList a::after{ content: ""; display: block; width: 20px; aspect-ratio: 26 / 18; background-color: #fff; mask-image: url(../img/common/arrow-r.svg); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; position: absolute; top: 50%; right: clamp(15px, var(--comp-20), 20px); transform: translateY(-50%);} .newsBox .inner main{ width: calc(100% - 219px - clamp(50px, var(--comp-100), 100px) - 1px); } .newsBox .inner .newsTtl01{ font-size: clamp(2.2rem, var(--comp-50), 4rem); color: var(--pink); font-weight: 700; line-height: 1.8; margin-bottom: clamp(3rem, var(--comp-60), 6rem);} .newsList{ display: flex; flex-wrap: wrap; column-gap: clamp(40px, var(--comp-80), 80px); row-gap: clamp(5rem, var(--comp-100), 10rem); justify-content: space-between;} .newsList li{ width: calc((100% - clamp(40px, var(--comp-80), 80px) - 1px) / 2);} .newsList li a{ display: block;} .newsList li figure{ aspect-ratio: 1200 / 630; width: 100%; border-radius: clamp(10px, var(--comp-20), 20px); overflow: hidden; margin-bottom: clamp(1rem, var(--comp-20), 1.5rem);} .newsList li figure img{ object-fit: cover; width: 100%; height: 100%;} .newsList li .date{ text-align: right; font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); line-height: 1; margin-bottom: clamp(1.25rem, var(--comp-25), 1.5rem);} .newsList li .category{ display: inline-block; line-height: 1.4; font-size: clamp(1.5rem, var(--comp-30), 1.8rem); color: var(--pink); background-color: #fff; border: clamp(0.15rem, 0.4vw, 0.2rem) solid var(--pink); font-weight: 500; border-radius: 80px; padding: clamp(0.2rem, var(--comp-5), 0.4rem) clamp(1.2rem, var(--comp-25), 1.5rem); margin-bottom: 1.5rem;} .newsList li h3{ color: var(--pink); font-size: clamp(1.9rem, var(--comp-38), 2.4rem); font-family: var(--base-font); font-weight: 500; margin-bottom: 1rem; line-height: 1.75;} .newsList li p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--base-font-size);} .archivePager{ border-top: 4px dotted var(--pink); display: flex; justify-content: space-between; margin-top: clamp(4rem, var(--comp-80), 10rem); padding-top: clamp(4rem, var(--comp-80), 10rem); flex-wrap: wrap; column-gap: 50px; row-gap: clamp(1.5rem, var(--comp-30), 3rem); width: 100%;} .archivePager:has( > .new:empty){ justify-content: flex-end;} .archivePager:has( > .new:empty):has( > .old:empty){ display: none;} .archivePager > .new a, .archivePager > .old a{ display: flex; align-items: center; gap: 40px; color: var(--pink); font-family: var(--zen-maru); font-weight: 700;} .archivePager > .new a::before{ content: ""; display: block; aspect-ratio: 26 / 18; width: clamp(15px, var(--comp-30), 26px); background-image: url(../img/common/arrow-l.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .archivePager > .old a::after{ content: ""; display: block; aspect-ratio: 26 / 18; width: clamp(15px, var(--comp-30), 26px); background-image: url(../img/common/arrow-r.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;} .archivePager > .new:empty{ display: none;} .archivePager > .old:empty{ display: none;} @media screen and (width <= 1100px){ .newsList li{ width: 100%;} } @media screen and (width <= 950px){ .newsBox .inner{ flex-wrap: wrap;} .newsBox .inner aside{ width: 100%; order: 2;} .newsBox .inner main{ width: 100%; order: 1;} .newsList li{ width: 100%;} .archivePager{ gap: 20px; width: 100%; } .archivePager > .new, .archivePager > .old{ width: calc(50% - 10px - 1px);} .archivePager > .new a{ gap: 10px; justify-content: flex-start;} .archivePager > .old a{ gap: 10px; justify-content: flex-end;} } /* NEWS-SINGLE --------------------------------*/ .singleBox .singleDetailBox{ display: flex; align-items: center; gap: clamp(15px, var(--comp-30), 20px); margin-bottom: clamp(1.5rem, var(--comp-30), 3rem);} .singleBox .singleDetailBox .date{ text-align: right; font-size: clamp(1.4rem, var(--comp-28), 1.8rem); font-family: var(--zen-maru); line-height: 1; margin: 0 !important;} .singleBox .singleDetailBox .category{ display: inline-block; line-height: 1.4; font-size: clamp(1.5rem, var(--comp-30), 1.8rem); color: var(--pink); background-color: #fff; border: clamp(0.15rem, 0.4vw, 0.2rem) solid var(--pink); font-weight: 500; border-radius: 80px; padding: clamp(0.2rem, var(--comp-5), 0.4rem) clamp(1.2rem, var(--comp-25), 1.5rem); margin: 0; } .singleBox *:first-child{ margin-top: 0 !important;} .singleBox *:last-child{ margin-bottom: 0 !important;} .singleBox p{ margin: 2em 0; line-height: 2;} .singleBox p:not([class]){ font-weight: 500;} .singleBox strong{ font-weight: 800; font-family: var(--base-font);} .singleBox figure{ margin: clamp(2rem, var(--comp-40), 4rem) 0;} .singleBox .newsTtl01 + *{ margin-top: 0 !important;} .singleBox h4{ width: 100%; margin: clamp(4rem, var(--comp-80), 10rem) auto clamp(2.5rem, var(--comp-50), 6rem); border-bottom: 2px solid var(--pink); font-size: clamp(2rem, var(--comp-40), 3.2rem); font-weight: 700; line-height: 2;} .singleBox h5{ width: 100%; margin: clamp(3rem, var(--comp-60), 6rem) auto clamp(1.5rem, var(--comp-25), 2.5rem); font-size: clamp(1.8rem, var(--comp-36), 2.8rem); font-weight: 700; line-height: 2; color: var(--pink);} .singleBox h6{ width: 100%; margin: clamp(2.5rem, var(--comp-40), 4rem) auto clamp(1rem, var(--comp-20), 2rem); font-size: clamp(1.6rem, var(--comp-32), 2.2rem); font-weight: 700; line-height: 2;} .singleBox h4 + *, .singleBox h5 + *, .singleBox h6 + *{ margin-top: 0 !important;} .singleBox .has-background{ margin: clamp(3rem, var(--comp-60), 6rem) 0; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-40), 5rem) clamp(2rem, var(--comp-40), 6rem); border-radius: 10px;} .singleBox .has-pink-color{ color: var(--pink) !important;} .singleBox .has-green-color{ color: var(--green) !important;} .singleBox .has-blue-color{ color: var(--blue) !important;} .singleBox .has-orange-color{ color: var(--orange) !important;} .singleBox .has-gray-color{ color: #70706F !important;} .singleBox .has-bgPink-color{ color: #FFF5F5 !important;} .singleBox .has-bgGreen-color{ color: #EDF9EA !important;} .singleBox .has-bgBlue-color{ color: #DCEFFF !important;} .singleBox .has-bgOrange-color{ color: #FFF1EB !important;} .singleBox .has-bgGray-color{ color: #F7F7F5 !important;} .singleBox .has-pink-background-color{ background-color: var(--pink) !important;} .singleBox .has-green-background-color{ background-color: var(--green) !important;} .singleBox .has-blue-background-color{ background-color: var(--blue) !important;} .singleBox .has-orange-background-color{ background-color: var(--orange) !important;} .singleBox .has-bg-pink-background-color{ background-color: #FFF5F5 !important;} .singleBox .has-bg-green-background-color{ background-color: #EDF9EA !important;} .singleBox .has-bg-blue-background-color{ background-color: #DCEFFF !important;} .singleBox .has-bg-orange-background-color{ background-color: #FFF1EB !important;} .singleBox .has-bg-gray-background-color{ background-color: #F7F7F5 !important;} .singleBox a:not([class]){ text-decoration: underline; color: var(--pink); } ul.wp-block-list{ font-size: var(--base-font-size); margin: 2em 0; } ul.wp-block-list li{ padding-left: 1.5em; text-indent: -1.5em; font-size: var(--base-font-size); font-family: var(--base-font); line-height: 1.6; } ul.wp-block-list li:not(:last-child){ margin-bottom: 0.7em;} ul.wp-block-list li::before{ content: "● "; color: var(--pink);} ol.wp-block-list{ list-style-type: decimal; list-style-position: outside; margin: 2em 0;} ol.wp-block-list li{ font-size: var(--base-font-size); font-family: var(--base-font); line-height: 1.6; position: relative; margin-left: 1.5em; padding-left: 0.4em; } ol.wp-block-list li:not(:last-child){ margin-bottom: 0.7em;} ol.wp-block-list li::marker{ color: var(--pink) ; position: absolute; left: 0; display: block;} .wp-block-columns{ gap: clamp(30px, var(--comp-60), 60px); margin: clamp(2rem, var(--comp-40), 4rem) 0;} .wp-block-button{ width: min(100%, 390px); position: relative; margin-top: clamp(3.5rem, var(--comp-80), 6rem); line-height: 1.6; margin: clamp(2rem, var(--comp-40), 4rem) 0;} .wp-block-button a{ display: block; border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: relative; box-sizing: border-box; padding: clamp(1.5rem, var(--comp-25), 1.8rem) clamp(5rem, var(--comp-100), 7rem) clamp(1.2rem, var(--comp-25), 1.8rem) clamp(2.5rem, var(--comp-50), 2.8rem); z-index: 1; background-color: #fff; transition: all ease 0.3s; font-family: var(--zen-maru); font-weight: 700; font-size: clamp(1.6rem, var(--comp-32), 2rem); border: 2px solid var(--pink); color: var(--pink); text-align: left;} .wp-block-button:has(> a){ padding-bottom: clamp(0.6rem, var(--comp-12), 0.8rem);} .wp-block-button:has(> a)::after{ content: ""; display: block; width: 100%; height: calc(100% - clamp(0.6rem, var(--comp-12), 0.8rem)); border-radius: clamp(0.6rem, var(--comp-12), 0.8rem); position: absolute; bottom: 0; left: clamp(0.6rem, var(--comp-12), 0.8rem); background-color: var(--shadowPink); } .wp-block-button a::after{ content: ""; display: block; position: absolute; top: 50%; right: clamp(2.5rem, var(--comp-50), 2.8rem); transform: translateY(calc(-50% + 0.5px)); mask-image: url(../img/common/arrow-p01.svg); mask-size: 100% 100%; mask-position: 0 0; mask-repeat: no-repeat; aspect-ratio: 26 / 18; width: clamp(2.0rem, var(--comp-38), 2.4rem); background-color: var(--pink); transition: all ease 0.3s;} .wp-block-buttons{ width: 100%; display: flex; flex-wrap: wrap; row-gap: clamp(1.6rem, var(--comp-32), 2.4rem); column-gap: clamp(3rem, var(--comp-60), 60px); justify-content: flex-start; margin-top: clamp(3.5rem, var(--comp-80), 6rem);} .wp-block-buttons > .wp-block-button{ margin: 0;} @media (any-hover: hover) { .wp-block-button a:hover{ transform: translate(clamp(0.6rem, var(--comp-12), 0.8rem) , clamp(0.6rem, var(--comp-12), 0.8rem)); opacity: 1; background-color: var(--pink); color: #fff;} .wp-block-button a:hover::after{ background-color: #fff;} } @media screen and (width <= 1280px) { .wp-block-columns{ flex-wrap: wrap !important;} .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{ flex-basis: 100% !important; flex-grow: 1; width: 100%;} } @media screen and (width <= 800px){ .wp-block-button{ width: min(100%, 80vw); margin-left: auto; margin-right: auto;} .wp-block-button:has(> a)::after{ left: 0; } } @media screen and (width <= 800px) and (any-hover: hover) { .wp-block-button a:hover{ transform: translate(0 , clamp(0.6rem, var(--comp-12), 0.8rem));} }