@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); /* reset */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* common */ :root { --padding: 80px; --base-color: #EFEFEF; --red:#DE2352; --light-red:#FF557F; --yellow:#FFF388; --blue:#90E5FF; --navy:#273753; --text-color: #1a1c1c; --darkredgray:#2f3131; --mediumgray:#454747; --lightgray:#e2e3e3; } html{ scroll-behavior: smooth; overflow-x: hidden; } body { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; display: flex; flex-direction: column; background:var(--red); color: var(--navy); font-size:16px; overflow-x: hidden; position:relative; width:100%; } @media screen and (max-width: 768px) { body { font-size:14px; } } a { color: var(--red); text-decoration: none; } a:hover{ text-decoration: underline; } img { object-fit: cover; } main{ width:100%; } section{ width:100%; position:relative; } .inner{ width:1000px; max-width:90%; padding:60px 0 180px 0; margin:0 auto; } @media screen and (max-width: 768px) { .inner{ padding: 40px 0 80px 0; } } @media screen and (max-width: 528px) { .inner{ padding: 36px 0 60px 0; } } /* button */ .button { overflow:hidden; text-transform: none; padding: 8px 28px; max-width:290px; width:100%; color: var(--red); border-radius: 16px; background: white; cursor: pointer; font-size:1.2em; font-weight: bold; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; box-shadow:2px 2px 8px var(--darkpurple); margin-bottom:20px; } .yellow{ background:var(--yellow); } .button:hover{ background:var(--light-red); color:white; text-decoration:none; } /* header */ header{ width:100%; margin:0 auto; position:relative; height:740px; background:var(--blue); } img.top-image{ position:absolute; bottom:0; width: 100vw; } .top-image-sub{ position:absolute; left:10vw; width:50vw; bottom:0; padding-right:10vw; } .top-image-sub > img{ float:right; width:520px; } .top-image-sub p{ position:absolute; top:-100px; right:calc(365px + 10vw); width:200px; height:200px; border-radius:100px; background:var(--red); color:white; font-size:1.7em; font-weight:600; align-content: center; text-align:center; } .top-area{ float:right; padding-right:5vw; padding-top:120px; width:50vw; position:relative; } .top-area > img{ max-width:100%; filter: drop-shadow(0 0 50px white); backdrop-filter: blur(2px); } p.copy{ font-size:2.2em; font-weight:600; color:var(--red); backdrop-filter: blur(2px); text-shadow: 0 0 30px white; } @media screen and (min-width: 1800px) { .top-area > img, p.copy span{ background:white; padding:4px 8px; } } .button-area_v{ margin-top:40px; } .button-area_h{ width:100%; position:relative; margin-top:40px; } .button-area_h p{ float:left; margin-right:20px; } .button-area_h p:last-child{ margin-right:0; } .button-area_h p:last-child{ margin-right:0; } .button-area_h p img{ height:60px; } .wave{ position:absolute; bottom:-5px; left:0; width:100%; min-width: 100vw; height: auto; object-fit: cover; } @media screen and (max-width: 1200px) { header{ height:680px; } .top-area { padding-top: 100px; } .top-image-sub { padding-right: 7vw; width:555px; left:5vw; } .top-image-sub > img{ width:100%; } .top-image-sub p{ top: -80px; right: auto; left: -14px; font-size: 1.2em; width: 140px; height: 140px; } p.copy{ font-size:1.4em; } .button-area_h p img{ height:45px; } } .sp{ display:none; } @media screen and (max-width: 768px) { header{ height:460px; } .top-area { padding-top: 80px; } .top-area{ padding-right:5vw; } p.copy{ font-size:1.2em; } .button-area_h p{ margin-right:12px; } .button-area_h p img{ height:35px; } .top-image-sub { width: 350px; } } @media screen and (max-width: 520px) { .sp{ display:block; } .pc{ display:none; } header{ height:600px; } .top-image-sub { width: 100%; height:100%; position:relative; overflow:hidden; padding:0; left:0; } .top-image-sub img{ position: absolute; bottom: 0; width: 240px; right: 0; left: 0; margin: 0 auto; } .top-area p.sp{ margin-bottom:16px; } .top-area p.sp span{ width: auto; height: auto; padding: 4px 16px; background:var(--red); color:white; font-weight:500; font-size:1.2em; border-radius:16px; } .top-area{ width: 100%; padding: 32px 20px 80px 20px; position: absolute; top: 0; text-align: center; } .button-area_v{ margin-top:20px; } .button{ margin:0 auto 12px auto; } .button-area_h{ margin-top:20px; display:flex; justify-content: center; gap: 20px; } .button-area_h p{ margin:0; } .wave{ bottom:-11px; } } @media screen and (max-width: 400px) { .top-image-sub img{ width: 220px; } } .background { position: absolute; display: block; top: 0; left: 0; z-index: 0; width:100%; height:100%; } /* title */ h2{ font-size:2em; font-weight: 600; line-height:1.2; color:white; text-align:center; position:relative; } h2 img{ width:300px; } @media screen and (max-width: 768px) { h2 { font-size:1.6em; } } /* problem */ #problem{ background:var(--base-color); } #problem .inner { text-align: center; } .red-back{ background:var(--red); border-radius:16px; width:100%; padding:40px; margin-bottom:40px; margin-top:-20px; z-index:10; position:relative; } .problem-case{ display: grid; grid-template-columns: repeat(6, 2fr); grid-template-rows: auto auto; width: 100%; margin-top:20px; } .problem-case li { padding: 20px; text-align: center; } .problem-case li:nth-child(1), .problem-case li:nth-child(2), .problem-case li:nth-child(3) { grid-column: span 2; } .problem-case li:nth-child(4) { grid-column: 2 / span 2; /* 1列目から2列分 */ } .problem-case li:nth-child(5) { grid-column: 4 / span 2; /* 3列目から2列分 */ } .problem-case li img{ width:200px; margin-bottom:12px; } .problem-case li p{ color:white; } .arrow{ margin-bottom:40px; } .big-t{ font-size:1.6em; color:var(--navy); } .result{ width:300px; margin:20px auto; } .matome{ display: flex; justify-content: center; width: 100%; } .matome img{ float: left; width: 350px; object-fit: none; } .matome span{ display:block; font-size:1.6em; color:var(--navy); } @media screen and (max-width: 768px) { .result{ width:200px; } #problem .inner > img{ width:160px; } .red-back{ margin-top:-8px; } } @media screen and (max-width: 520px) { .red-back{ padding:20px 12px; margin-top:-8px; margin-bottom:20px; } .problem-case{ margin-top:8px; gap:4px; } .problem-case li{ padding:4px; } .problem-case li img{ margin-bottom:8px; } .problem-case li p{ font-size:0.75em; line-height:1.3; } .result{ width:160px; } .matome img{ width:220px; height:100%; object-fit: cover; } .matome span{ font-size:1em; line-height:1.2; } .arrow { margin-bottom: 20px; } } /* whatyoucando */ .point{ background:var(--light-red); position:relative; margin:80px 0; } .point:last-child{ margin:80px 0 0 0; } .num{ position:absolute; top:-80px; left:32px; font-family:roboto, sans-serif; font-size:1.6em; color:white; font-weight:700; } .num span{ font-size:3em; } .point .text{ padding:40px; width:100%; color:white; } .point .text ul{ margin:40px 0; } .point .text ul li{ margin-bottom:32px; } .point .text ul li span{ font-size:1.3em; padding:8px 20px; border:2px solid white; border-radius:8px; } .point .text .title{ font-size:2em; font-weight:700; line-height:1.5; margin-bottom:20px; } .point .text .detail{ margin-bottom:28px; width:40%; } .point > img{ position:absolute; bottom:0; right:0; width:60%; } @media screen and (max-width: 768px) { .num{ top:-47px; left:24px; } .num span { font-size: 2em; } .point { margin: 60px 0; } .point .text ul { margin: 20px 0; } } @media screen and (max-width: 520px) { .point .text { padding: 24px; } .point .text ul li { margin-bottom: 24px; } .point .text ul li span{ padding:4px 16px; } .point .text .detail { width: 50%; } .point .text .title{ font-size:1.8em; } } @media screen and (max-width: 400px) { .point .text .detail { width: 100%; margin-bottom:200px; } .point > img { width: 85%; } } /* function */ #function{ background:var(--yellow); } #function h2{ color:var(--navy); } #function ul{ display:grid; grid-template-columns: repeat(2, 4fr); grid-template-rows: auto auto; width: 100%; margin-top:80px; gap:40px; row-gap: 80px; } #function ul li{ grid-column: span 1; text-align:center; position:relative; } #function ul li .list-num{ position:absolute; top:-28px; left:0; right:0; margin:0 auto; background:var(--red); width:40px; height:40px; border-radius:20px; color:white; font-size:1.6em; text-align:center; font-weight:700; line-height:1.5; } #function ul li p{ margin-top:12px; font-weight:500; color:var(--navy); } @media screen and (max-width: 768px) { #function ul { gap: 24px; row-gap: 45px; margin-top: 60px; } #function ul li .list-num { top: -28px; width: 36px; height: 36px; } #function ul li p br{ display:none; } } @media screen and (max-width: 520px) { #function ul li p{ font-size:0.75em; line-height: 1.3; } } /* preparation */ .kakomi{ background:var(--light-red); border-radius:16px; border:2px solid white; padding:40px; width:100%; margin-top:40px; } .kakomi h3{ width:100%; text-align:center; font-size:1.6em; font-weight:700; color:white; } .kakomi ul.two{ width:100%; display:flex; gap:40px; justify-content: space-between; margin-top:40px; } .kakomi ul.two li{ width:100%; } .kakomi ul.two li p{ margin-top:12px; color:white; font-weight:500; text-align: center; } .kakomi ul.five{ width:100%; display:grid; grid-template-columns: repeat(2, 3fr); grid-template-rows: auto auto; width: 100%; margin-top:80px; gap:20px; margin-top:40px; } .kakomi ul.five li{ grid-column: span 1; background:white; border-radius:12px; display:flex; justify-content: space-around; gap:28px; padding:8px 20px; } .kakomi ul.five li:nth-child(5){ grid-column: span 2; } .kakomi ul.five li img{ width:calc(50% - 14px); } .kakomi ul.five li p{ width:calc(50% - 14px); align-content: center; color:var(--navy); font-weight:500; text-align: center; } @media screen and (max-width: 768px) { .kakomi{ padding:20px; } .kakomi ul.two{ margin-top:20px; gap:20px; } .kakomi ul.five{ margin-top:20px; display:block; } .kakomi ul.five li{ margin-bottom:12px; justify-content: space-between; gap:0; } .kakomi ul.five li img{ width: 50%; object-fit: contain; } .kakomi ul.five li:nth-child(5){ display:block; } .kakomi ul.five li:nth-child(5) img{ width:100%; margin-bottom:12px; } .kakomi ul.five li:nth-child(5) p{ width:100%; padding-bottom:8px; } .kakomi ul.five li p{ font-size:0.8em; line-height:1.3; } } @media screen and (max-width: 520px) { .kakomi h3{ font-size:1.3em; } .kakomi ul.two li p{ font-size:0.8em; line-height:1.2; margin-top:8px; } } /* merit */ #merit{ background:var(--base-color); color:var(--navy); } #merit h2{ color:var(--navy); } #merit .intro{ text-align:center; font-size:1.2em; margin:40px 0; } .note { width: 100%; text-align: center; color: var(--red); font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--red); margin-bottom: 20px; font-size: 1.2em; } @media screen and (max-width: 768px) { #merit .intro{ font-size:1em; margin:20px 0; text-align:left; } #merit .intro br{ display:none; } .note{ font-size:1em; } } /* conclusion */ #conclusion .intro{ text-align:center; font-size:1.2em; margin:40px 0; color:white; } #conclusion h3{ text-align:center; font-size:1.3em; font-weight:500; color:white; } #movie{ margin:0 0 100px 0; padding-top:100px; } div.video-box{ width:100%; margin:0 auto 100px auto; float:right; } @media screen and (max-width: 768px) { #movie{ margin:0; padding-top:40px; } div.video-box{ width:100%; margin: 40px 0 80px 0; } #conclusion .intro{ font-size:1em; margin:20px 0 40px 0; text-align:left; } #conclusion .intro br{ display:none; } } div.iframeWrap { position: relative; width: 100%; padding-top: 56.25%; margin: 0 auto; box-shadow: 2px 2px 15px var(--darkredgray); } div.iframeWrap iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } video{ max-width:100%; } /* operator */ #operator { overflow:hidden; background:white; } .company{ display:flex; justify-content: space-between; gap:40px; color:var(--navy); } .company img{ width:200px; object-fit: contain; } .company > div{ align-content: center; } .company h2{ color:var(--navy); text-align:left; margin-bottom:20px; } @media screen and (max-width: 768px) { .company{ display:block; text-align:center; } .company h2{ text-align: center; margin-top:12px; } .company img{ width:120px; margin:0 auto; } .company div p{ text-align:left; } } /* form */ #form{ background:var(--base-color); } #form h2{ color:var(--navy); } #form .form-content{ width:100%; display:grid; grid-template-columns: repeat(2, 4fr); grid-template-rows: auto auto; width: 100%; margin-top:80px; gap:40px; margin-top:40px; } #form .form-content div{ grid-column: span 1; } #form .form-content div:nth-child(7){ grid-column: span 2; } form{ width:800px; max-width:100%; margin:80px auto 0 auto; } label{ width:100%; font-weight:600; display:block; margin-bottom:8px; } .required{ font-size:0.7em; font-weight:400; color:white; padding:0 4px; background:var(--light-red); margin-left:8px; border-radius:4px; } textarea, input{ width:100%; background:white; padding:8px 12px; border:1px solid var(--lightgray); border-radius:4px; } textarea{ height:120px; } .send{ margin:80px auto 0 auto; } .send .button{ margin:0 auto; font-size:1.5em; background:var(--red); color:white; } .send button:hover{ cursor:pointer; background:var(--light-red); } #thankyouMessage{ margin-top:40px; } #thankyouMessage p{ text-align:center; font-size:1.2em; font-weight:600; color:var(--navy); } @media screen and (max-width: 768px) { #form .form-content{ display:block; } #form .form-content div{ margin-bottom:20px; } #form .form-content div:last-child{ margin-bottom:0; } form{ margin:40px auto 0 auto; } .send{ margin-top:40px; } } /* footer */ footer{ background:var(--navy); padding:40px 0 100px 0; } footer ul{ width:1000px; max-width:100%; text-align:center; margin:0 auto 40px auto; } footer ul li { margin-bottom:12px; } footer ul li a{ color:white; } footer p{ font-size:0.6em; color:white; text-align:center; }