/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*!///////////////////////////////////////////*/
/*!//////////// ↓↓↓reset↓↓↓ ////////////*/
/*!///////////////////////////////////////////*/
*, *::before, *::after { box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; color: #000;}
a { text-decoration: none;}
ul,ol { padding-left: 0; list-style-type: none;}
dd { margin-left: 0;}
p {font-size: 14px; line-height: 1.45;}
@media screen and (min-width: 768px) { p { font-size: 16px;}}
button {border: 0;}
/*!///////////////////////////////////////////*/
/*!//////////// ↑↑↑reset↑↑↑ ////////////*/
/*!///////////////////////////////////////////*/
/*!////////////////////////////////////////////*/
/*!//////////// ↓↓↓common↓↓↓ ////////////*/
/*!////////////////////////////////////////////*/
body { font-family: "Noto Sans JP", sans-serif;}
@media screen and (max-width: 767px) {
.sp-none { display: none !important;}}
@media screen and (min-width: 768px) {
.pc-none {display: none !important;}}
.hidden { display: none !important;}
.image { display: block; width: 100%;}
.wrapper {position: relative; overflow: hidden;}
.container {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 70px;
padding-right: 70px;
}
@media screen and (max-width: 767px) {
.container {
padding-left: 20px;
padding-right: 20px;
}}
/*!////////////////////////////////////////////*/
/*!//////////// ↑↑↑common↑↑↑ ////////////*/
/*!////////////////////////////////////////////*/
* { /* clamp用 */
min-height: 0vw;
}
section {
position: relative;
}
a {
transition: .3s;
}
a:hover {
opacity: .8;
}
a img {
pointer-events: none;
}
img {
display: block;
width: 100%;
padding: 0;
margin: 0;
object-fit: contain;
}
@media screen and (max-width: 767px) {
main {
padding-bottom: 50px;
}
}
.header {
z-index: 999;
position: fixed;
top: calc(30vw / 14);
right: 0;
max-width: 450px;
width: 100%;
height: clamp(50px,calc(70vw / 14),70px);
}
@media screen and (max-width: 767px) {
.header {
top: 0;
max-width: none;
width: 42px;
height: 42px;
}
.header-ac {
width: 100%;
height: 100%;
}
}
.header-container {
width: 100%;
height: 100%;
}
@media screen and (max-width: 767px) {
.header-container {
background-color: #fff;
border-radius: 0 0 0 20px;
padding: 8px 8px 12px 12px;
}
.header-ac .header-container {
position: relative;
max-width: 278px;
margin-left: auto;
height: 100%;
border-radius: 0;
}
.header-container-bg {
display: none;
}
.header-ac .header-container-bg {
z-index: -1;
position: absolute;
right: 0;
top: 0;
background-color: #000;
display: block;
width: 100vw;
height: 100vh;
mix-blend-mode: multiply;
opacity: .4;
}
}
.header-button {
position: relative;
width: min(100%,35px);
height: min(100%,35px);
margin-left: auto;
background-image: linear-gradient(#682485,#682485);
background-position: right center;
background-size: 50% 2px;
background-repeat: no-repeat;
transition: .3s;
}
.header-ac .header-button {
background-size: 0% 2px;
background-position: center;
width: 35px;
height: 35px;
}
.header-button::before ,.header-button::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate( -50% , 0) rotate(0);
width: 100%;
height: 2px;
background-color: #682485;
transition: .5s;
}
.header-button::after {
top: auto;
bottom: 0;
transform: translate(-50% , 0) rotate(0);
}
.header-ac .header-button::before ,.header-ac .header-button::after {
top: 50%;
left: 50%;
transform: translate(-50% , -50%) rotate(135deg);
}
.header-ac .header-button::after {
transform: translate(-50% , -50%) rotate(-135deg);
}
.header-links {
width: 100%;
height: 100%;
padding-left: 10px;
background-color: #fff;
border-radius: 35px 0 0 35px;
}
@media screen and (max-width: 767px) {
.header-links {
display: none;
}
.header-ac .header-links {
display: block;
padding-left: 0;
border-radius: 0;
border-radius: 0;
}
}
.header-links ul {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
place-items: center;
justify-content: center;
gap: 55px 25px;
}
@media screen and (max-width: 767px) {
.header-ac .header-links ul {
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, 30px);
align-content: center;
padding-bottom: 40px;
}
}
.header-links ul li {
margin: auto;
}
.header-links ul li a {
display: block;
width: 100%;
height: 100%;
color: #682485;
font-size: 15px;
line-height: 1;
font-weight: 500;
}
.header-links ul li a:hover {
color: #C243AC;
opacity: .9;
}
.header-insta {
width: 33px;
height: 33px;
}
.header-insta a {
margin-left: 15px;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-size: contain;
}
.header-insta a:hover {
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
@media screen and (max-width: 767px) {
.header-insta a {
margin-left: 0;
}
}
.common-link.follow-link {
z-index: 500;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 118px;
height: 152px;
}
@media screen and (max-width: 767px) {
.common-link.follow-link {
top: auto;
bottom: 5px;
width: 100%;
height: 70px;
transform: translate(0);
}
}
.common-link.follow-link a {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
align-items: center;
border-radius: 20px 0 0 20px;
text-align: center;
font-size: 15px;
line-height: calc(22 / 15);
color: #FFEDCC;
}
@media screen and (max-width: 767px) {
.common-link.follow-link a {
border-radius: 10px 10px 0 0;
flex-direction: row;
}
}
.follow-link a img {
width: 28px;
height: 28px;
margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.follow-link a img {
margin-bottom: 0;
transform: translateX(-20px);
}
}
.bg-1 {
position: relative;
background-image: linear-gradient(to bottom ,#6E2F87 ,#6E2F87 29% ,#BD86B5 100%);
background-size: 100%;
background-repeat: no-repeat;
background-position: top left ;
}
.bg-1::before ,.bg-1::after {
z-index: 0;
content: "";
position: absolute;
top: 100vw;
left: 0;
width: calc(585vw / 14);
height: calc(1124vw / 14);
background-image: url(../img/bg1_1.png);
background-size: 100%;
background-repeat: no-repeat;
mix-blend-mode: plus-lighter;
opacity: .4;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.bg-1::before {
top: calc(850vw / 3.75);
width: calc(242vw / 3.75);
height: calc(500vw / 3.75);
background-image: url(../img/bg1_1_sp.png);
}
}
.bg-1::after {
top: auto;
bottom: 0;
left: auto;
right: 0;
width: calc(829vw / 14);
height: calc(1044vw / 14);
background-image: url(../img/bg1_2.png);
background-position: bottom;
}
@media screen and (max-width: 767px) {
.bg-1::after {
width: 100%;
height: calc(400vw / 3.75);
background-image: url(../img/bg1_2_sp.png);
}
}
.bg-2 {
position: relative;
background-color: #592280;
}
.bg-2::before {
z-index: 0;
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(758vw / 14);
background-image: url(../img/bg-2_img.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
mix-blend-mode: lighten;
opacity: .4;
pointer-events: none;
}
@media screen and (max-width: 1400px) {
.bg-2::before {
height: calc(800vw / 3.75);
background-size: 150%;
}
}
.fv {
position: relative;
padding-bottom: 110px;
}
.fv::after {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: calc(1539vw / 14);
background-image: linear-gradient(to bottom , #A3A3A3 ,#fff);
mix-blend-mode: multiply;
opacity: .5;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.fv::after {
height: calc(670vw / 3.75);
}
}
.fv-img {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vw;
}
@media screen and (max-width: 767px) {
.fv-img {
height: calc(700vw / 3.75);
}
}
.fv-title-wrapper {
z-index: 2;
position: relative;
width: 100%;
height: calc(843vw / 14);
}
@media screen and (max-width: 767px) {
.fv-title-wrapper {
height: calc(415vw / 3.75);
}
}
.fv-title {
position: relative;
width: calc(780vw / 14);
height: calc(843vw / 14);
text-align: center;
padding-top: calc(140vw / 14);
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.fv-title {
width: 100%;
height: calc(843vw / 14);
padding-top: calc(40vw / 3.75);
}
}
.fv-title::before {
content: "";
position: absolute;
top: calc(140vw / 14);
left: 50%;
transform: translate(-50%,0);
width: 100%;
height: calc(535vw / 14);
background-image: url(../img/fv_title_bg.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media screen and (max-width: 767px) {
.fv-title::before {
top: calc(25vw / 3.75);
height: calc(278vw / 3.75);
}
}
.fv-title::after {
content: "";
position: absolute;
top: calc(336vw / 14);
left: calc(-95vw / 14);
display: block;
width: calc(790vw / 14);
height: calc(280vw / 14);
pointer-events: none;
background-image: url(../img/star.png);
background-repeat: no-repeat;
background-size: 100%;
}
@media screen and (max-width: 767px) {
.fv-title::after {
top: 0;
left: 0;
width: 100%;
height: calc(278vw / 3.75);
background-image: url(../img/star_sp.png);
}
}
.fv-title h1 {
z-index: 5;
position: relative;
display: block;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.fv-title h1 {
padding: 0 2vw;
}
}
.fv-note-wrapper {
margin: calc(30vw / 14) auto 0;
}
@media screen and (max-width: 767px) {
.fv-note-wrapper {
margin: calc(15vw / 3.75) auto 0;
}
}
.fv-note {
position: relative;
display: inline-block;
}
.fv-note::before {
content: "";
z-index: 1;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
background-color: #682485;
filter: blur(6px);
pointer-events: none;
}
.fv-note p {
position: relative;
z-index: 2;
font-size: min(calc(14vw / 14),14px);
font-weight: 500;
color: #fff;
}
@media screen and (max-width: 767px) {
.fv-note p {
font-size: calc(12vw / 3.75);
}
}
.fv-point {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: calc(140vw / 14);
left: calc(-20vw / 14);
background-color: #C243AC;
width: calc(204vw / 14);
height: calc(204vw / 14);
border-radius: 50%;
font-size: calc(18vw / 14);
font-weight: 700;
line-height: calc(24 / 18);
color: #fff;
text-align: center;
}
@media screen and (max-width: 767px) {
.fv-point {
top: calc(25vw / 3.75);
left: calc(2vw / 3.75);
width: calc(108.8572vw / 3.75);
height: calc(108.8572vw / 3.75);
font-size: calc(9.6vw / 3.75);
}
}
.fv-point span {
color: #FFEDCC;
font-size: calc(35.7vw / 14);
}
@media screen and (max-width: 767px) {
.fv-point span {
font-size: calc(18vw / 3.75);
}
}
.fv-hukidashi {
background-color: #fff;
font-size: calc(16.378vw / 14);
line-height: calc(24 / 16.378);
color: #C243AC;
left: auto;
right: 0;
top: calc(480vw / 14);
width: calc(171.012vw / 14);
height: calc(123.2126vw / 14);
}
@media screen and (max-width: 767px) {
.fv-hukidashi {
font-size: calc(9.123vw / 3.75);
top: calc(185vw / 3.75);
right: calc(5vw / 3.75);
width: calc(88.71vw / 3.75);
height: calc(65.1259vw / 3.75);
}
}
.fv-hukidashi::after {
content: "";
position: absolute;
top: calc(85vw / 14);
right: calc(135vw / 14);
display: block;
width: calc(27vw / 14);
height: calc(27vw / 14);
background-color: #fff;
clip-path: polygon(20% 35%, 65% 80%, 0% 100%);
}
@media screen and (max-width: 767px) {
.fv-hukidashi::after {
top: calc(48vw / 3.75);
right: calc(60vw / 3.75);
width: calc(15vw / 3.75);
height: calc(15vw / 3.75);
transform: rotate(-15deg);
}
}
.fv-text-wrapper {
position: relative;
max-width: 880px;
width: 100%;
margin: 0 auto;
padding-right: 20px;
padding-left: 20px;
}
@media screen and (max-width: 767px) {
.fv-text-wrapper {
width: min(calc(325vw / 3.75),600px);
}
}
.fv-text-wrapper::after {
content: "";
position: absolute;
right: 0;
top: 0;
transform: translate(25% , -5%);
width: min(calc(80vw / 8.4),80px);
height: min(calc(88.9vw / 8.4),88.9px);
pointer-events: none;
background-image: url(../img/hujinohana.svg);
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.fv-text-wrapper::after {
transform: translate(25% , -5%);
width: min(calc(61.346vw / 3.75),61.346px);
height: min(calc(68vw / 3.75),68.12px);
transform: translate(15% , -5%);
}
}
.fv-text {
width: 100%;
padding-right: 50px;
padding-left: clamp(50px,calc(65vw / 8.4),65px);
display: grid;
grid-template-columns: 1fr 180px;
grid-template-rows: auto;
place-items: center;
padding-top: 20px;
padding-bottom: 20px;
background-image: linear-gradient(#E1C1EB,#E1C1EB) ,linear-gradient(#E1C1EB,#E1C1EB) ,linear-gradient(#E1C1EB,#E1C1EB) ,linear-gradient(#E1C1EB,#E1C1EB);
background-repeat: no-repeat;
background-size: calc(800% / 8.4) 1px , calc(800% / 8.4) 1px ,1px calc(154% / 2.54) ,1px calc(154% / 2.54);
background-position: top left , bottom right , top left ,bottom right;
}
@media screen and (max-width: 767px) {
.fv-text {
grid-template-columns: auto;
padding-right: 0;
padding-left: 0;
background-size: calc(100% - 37px) 1px , calc(100% - 37px) 1px ,1px calc(100% - 68px) ,1px calc(100% - 68px);
}
}
.fv-text::before ,.fv-text::after {
content: "";
position: absolute;
display: block;
width: min(calc(102vw / 8.4),102.5305px);
height: 1px;
background-color: #E1C1EB;
top: 25px;
left: 20px;
transform: translate(-25%, -25%) rotate(-45deg);
pointer-events: none;
}
.fv-text::after {
top: auto;
left: auto;
bottom: 25px;
right: 20px;
transform: translate(25%, -25%) rotate(-45deg);
}
@media screen and (max-width: 767px) {
.fv-text::before {
width: min(calc(89.7142vw / 3.75),89.7142px);
top: min(calc(22.42855vw / 3.75),22.42855px);
}
.fv-text::after {
width: min(calc(89.7142vw / 3.75),89.7142px);
bottom: min(calc(22.42855vw / 3.75),22.42855px);
}
}
.fv-text p {
font-size: min(calc(20vw / 8.4),20px);
font-weight: 700;
color: #fff;
line-height: calc(45 / 20);
}
@media screen and (max-width: 767px) {
.fv-text p {
font-size: min(calc(16vw / 3.75),16px);
font-weight: 400;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.fv-text-img {
max-width: 200px;
padding: 10px;
margin: 0 auto;
}
}
.common-title {
padding-top: clamp(60px,calc(80vw / 14),80px);
text-align: center;
letter-spacing: .5rem;
margin: 0 auto;
}
.common-title h2 {
position: relative;
font-size: clamp(22px,calc(30vw / 14),30px);
font-weight: 500;
line-height: 1.45;
color: #fff;
margin-bottom: clamp(40px,calc(65vw / 14),65px);
}
.common-title h2::after {
content: "";
position: absolute;
display: block;
width: clamp(67px,calc(77vw / 14),77px);
height: 1px;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
}
.subject-text {
font-size: clamp(16px,calc(22vw / 10),22px);
color: #FFEDCC;
line-height: calc(39.375 / 16);
font-weight: 700;
text-align: center;
}
.agreement-containers {
z-index: 1;
position: relative;
background-color: #E5D1EB;
border-radius: clamp(26.25px,calc(30vw / 10),30px);
width: 100%;
padding: clamp(15px,calc(40vw / 10),40px);
}
.agreement-text {
font-size: clamp(14px,calc(16vw / 10),16px);
line-height: calc(24 / 16);
font-weight: 400;
}
.agreement-text a {
display: inline;
color: #682485;
}
.agreement-containers h3 {
position: relative;
margin: clamp(25px,calc(30vw / 10),30px) 0 clamp(15px,calc(20vw / 10),20px);
padding-left: clamp(20px,calc(25vw / 10),25px);
font-size: clamp(15px,calc(18vw / 10),18px);
font-weight: 700;
line-height: calc(21 / 15);
}
.agreement-containers h3::before {
content: "●";
position: absolute;
top: 0;
left: 0;
font-size: clamp(15px,calc(18vw / 10),18px);
font-weight: 700;
line-height: calc(21 / 15);
color: #682485;
}
.agreement-containers-list li {
position: relative;
padding-left: clamp(16px,calc(20vw / 10),20px);
}
.agreement-containers-list li::before {
content: "・";
font-size: clamp(14px,calc(16vw / 10),16px);
line-height: calc(24 / 16);
font-weight: 400;
position: absolute;
left: 0;
top: 0;
color: #682485;
}
.agreement-note {
font-size: clamp(12px,calc(14vw / 10),14px);
font-weight: 400;
line-height: calc(21 / 12);
margin: clamp(25px,calc(30vw / 10),30px) 0 clamp(15px,calc(20vw / 10),20px);
}
.method-list {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-template-rows: auto;
place-items: center;
gap: clamp(30px,calc(50vw / 10),50px);
}
@media screen and (max-width: 767px) {
.method-list {
max-width: 400px;
grid-template-columns: 1fr;
}
}
.method-list li {
position: relative;
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
place-items: center;
gap: 15px;
}
.method-list li:not(:last-of-type)::after {
content: "";
position: absolute;
bottom: 50%;
left: calc(100% + 25px);
width: clamp(17.5007px,calc(20vw / 10),20px);
height: clamp(30.6256px,calc(35vw / 10),35px);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
@media screen and (max-width: 767px) {
.method-list li:not(:last-of-type)::after {
content: none;
}
/* ファイアフォックスの挙動対策 */
.method-list li:not(:first-of-type)::after {
content: "";
position: absolute;
left: 50%;
top: -5px;
transform: translate(-50%, -100%) rotate(90deg);
width: clamp(17.5007px,calc(20vw / 10),20px);
height: clamp(30.6256px,calc(35vw / 10),35px);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
}
.method-list-num {
width: 107.8px;
margin-bottom: clamp(15px,calc(30vw / 10),30px);
}
.method-list-img {
width: 100%;
height: clamp(80px,calc(100vw / 10),100px);
max-width: 240px;
text-align: center;
}
.method-list-img p {
width: 100%;
font-size: clamp(12.45px,calc(14vw / 10),14px);
font-weight: 500;
margin-top: 10px;
}
.method-list p {
color: #fff;
}
.method-list h3 {
font-size: clamp(18px,calc(20vw / 10),20px);
color: #FFEDCC;
font-weight: 700;
line-height: calc(28 / 18);
text-decoration: underline;
text-decoration-color: white;
text-decoration-thickness: clamp(1.75px,calc(2vw / 10),2px);
text-decoration-skip-ink: none;
text-underline-offset: clamp(5px,calc(7vw / 10),7px);
text-align: center;
margin-top: clamp(10px,calc(20vw / 10),20px);
}
.method-list-text {
font-size: clamp(14px,calc(16vw / 10),16px);
font-weight: 400;
line-height: calc(24.5 / 14);
text-align: center;
margin-bottom: auto;
margin-top: clamp(10px,calc(20vw / 10),20px);
}
.method-list-text span {
color: #FFEDCC;
font-weight: 700;
}
.common-link {
margin: 0 auto;
width: 100%;
}
.common-link a {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background-color: #C243AC;
box-shadow: 0 5px 0 #8F227C;
color: #fff;
font-weight: 700;
line-height: calc(28 / 16);
text-align: center;
transition: .3s;
}
.common-link a:hover {
transform: translateY(5px);
box-shadow: 0 1px 0 #8F227C;
opacity: 1;
}
.line-link {
margin-top: clamp(50px,calc(65vw / 10),65px);
max-width: 650px;
height: clamp(92px,calc(104vw / 10),104px);
}
.line-link-note {
text-align: center;
color: #fff;
font-size: clamp(12px,calc(14vw / 10),14px);
line-height: calc(24.5 / 14);
font-weight: 400;
margin-top: 25px;
}
.prise-text {
color: #fff;
font-size: clamp(14px,calc(16vw / 10),16px);
font-weight: 400;
line-height: calc(33 / 16);
text-align: center;
}
.prise-list {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px,274px));
grid-template-rows: auto;
gap: clamp(50px,calc(58vw / 10),58px);
justify-content: center;
padding: clamp(40px,calc(58vw / 10),58px) 0 clamp(50px,calc(150vw / 10),150px);
}
.prise-list li {
position: relative;
background-color: #E5D1EB;
border-radius: clamp(9.7472px,calc(11.1397vw / 10), 11.1397px);
padding: clamp(30px,calc(35vw / 10),35px) 25px clamp(35px,calc(40vw / 10),40px);
text-align: center;
}
.prise-list li h3 {
color: #592280;
font-size: clamp(17.5px,calc(20vw / 10),20px);
font-weight: 700;
line-height: calc(35.64 / 20);
}
.prise-list-img {
width: 100%;
padding: clamp(20px,calc(25vw / 10),25px) 0;
}
.prise-list-text {
font-size: clamp(14px,calc(16vw / 10),16px);
font-weight: calc(33 / 16);
font-weight: 400;
color: #383838;
}
.prise-list-num {
position: absolute;
width: clamp(min(calc(71.2306vw / 3.75),71.2306px),calc(81.4064vw / 10),81.4064px);
height: auto;
right: 0;
top: 0;
transform: translate(35%,-35%);
}
footer {
text-align: center;
}
footer * {
color: #fff;
}
.info-shusai {
font-size: clamp(12px,calc(14vw / 10),14px);
font-weight: 400;
line-height: calc(21.888 / 12);
}
footer h2 {
font-size: clamp(13px,calc(15vw / 10),15px);
font-weight: 500;
line-height: calc(25 / 15);
}
.info-tel {
font-size: clamp(20px,calc(27vw / 10),27px);
font-weight: 500;
line-height: calc(41.485 / 27);
padding-top: 15px;
}
.info-note {
font-size: clamp(10px,calc(12vw / 10),12px);
font-weight: 400;
line-height: calc(21.888 / 10);
}
.info-links {
position: relative;
width: clamp(238.0418px,calc(272vw / 10),272px);
margin: 0 auto;
}
.contact-link {
width: 100%;
height: clamp(41px,calc(47.2vw / 10),47.2px);
margin-top: 15px;
}
.info-insta {
position: absolute;
left: calc(100% + 30px);
top: 50%;
transform: translate(0 , -50%);
display: block;
width: clamp(29px,calc(33vw / 10),33px);
}
@media screen and (max-width: 767px) {
.info-insta {
position: static;
transform: translate(0);
margin: 20px auto 0;
}
}
.copyright {
padding: 65px 0 35px;
font-size: clamp(10px,calc(12vw / 10),12px);
font-weight: 400;
}
@media screen and (max-width: 767px) {
.copyright {
padding: 65px 0 40px;
}
}
.info-comment {
position: relative;
display: block;
max-width: 470px;
margin: clamp(15px,calc(20vw / 10),20px) auto clamp(25px,calc(30vw / 10),30px);
}
.info-comment::after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -75%) rotate(45deg) skew(10deg,10deg);
width: 24px;
height: 24px;
border: 1px solid #fff;
clip-path: polygon(100% 30%, 30% 100%, 100% 100%);
pointer-events: none;
}
.info-comment-frame {
position: relative;
width: 100%;
clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, calc(50% + 9px) 100%, calc(50% + 9px) calc(100% - 3px), calc(50% - 9px) calc(100% - 3px), calc(50% - 9px) 100%);
padding: clamp(10px,calc(15vw / 10),15px);
}
.info-comment-frame::after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: 100%;
height: 100%;
border: 1px solid #fff;
border-radius: 10px;
pointer-events: none;
}
.info-comment p {
font-size: clamp(11px,calc(14vw / 10),14px);
font-weight: 700;
line-height: calc(18 / 11);
}
footer .info-comment p span {
color: #FFFF83;
}
.go-top {
position: fixed;
bottom: 30px;
right: 30px;
display: block;
width: 30px;
padding-left: 5px;
height: 50px;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .8));
}
.go-top:hover {
opacity: 1;
}
@media screen and (max-width: 767px) {
.go-top {
display: none;
}
}
.go-top span {
display: block;
width: 10px;
height: 100%;
border-top: 2px #fff solid;
border-left: 1px #fff solid;
transform: skew(0, 60deg);
transition: .3s;
margin: 0 auto;
}
.go-top:hover span {
transform: translate(0,-10px) skew(0, 60deg);
}
.example {
padding-top: clamp(40px,calc(60vw / 10),60px);
}
.example h4 {
text-align: center;
padding-bottom: 20px;
font-size: clamp(18px,calc(20vw / 10),20px);
font-weight: 700;
color: #fff;
}
.prise-list--award {
grid-template-columns: 1fr;
max-width: 650px;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.prise-list--award {
padding-left: min(calc(45vw / 3.75),45px);
padding-right: min(calc(45vw / 3.75),45px);
}
}
.selected-list,.selected-list * {
pointer-events: none;
}
.selected-list p.prise-list-text {
pointer-events: auto;
}
@media screen and (max-width: 767px) {
.prise-list .prise-list-img {
background-image: linear-gradient(#542278 ,#542278);
background-size: calc(65% / 1.88) 1px;
background-position: top center;
background-repeat: no-repeat;
padding-top: 35px;
}
.prise-list .prise-list-img.prise-list-img--noborder {
background-image: none;
padding-top: 20px;
}
}
.prise-list--award .prise-list-img img {
max-width: 450px;
max-height: 450px;
object-fit: contain;
margin-inline: auto;
}
.selected-list {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: clamp(30px,calc(55vw / 10),55px);
}