CSS 検証サービス検証結果 style.min.css (CSS レベル 3 + SVG)

おめでとうございます！ エラーはありません。

おめでとうございます！
この文書は正当な CSS レベル 3 + SVG として検証できました!

あなたがこのWebページを作るにあたって、
高度な相互運用性(Interoperability)に対する配慮を行った事を読者に示すため、このアイコンを張る事をお勧めします。
あなたのWebページにこのアイコンを張るためには、次のHTMLの断片を利用すると良いでしょう。

正当なCSSです! 
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="正当なCSSです!" />
</a>
</p>
正当なCSSです! 
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="正当なCSSです!" />
</a>
</p>

(HTML 4.01 以前を使用する場合は img タグを /> ではなく > で閉じてください。)

この画像はローカルコピーを使っても構いません。
つまり、あなたのWebサーバにこの画像のコピーをダウンロードしてディレクトリに保存し、
上記のHTMLの断片について、ダウンロードしたものを参照するように変更して使う事もできます。

この検証結果のページに対するリンクを作りたい場合、以下のURIを利用して下さい。
リンクを組み込んでおく事で、後からもう一度このページの検証を行ったり、他の人がこのページを検証する事が容易になります。 

http://jigsaw.w3.org/css-validator/validator$link
or
http://jigsaw.w3.org/css-validator/check/referer (HTML/XML 文書のみに有効)

(もちろん、このページをブックマークやホットリストに追加したのでもよいでしょう。)

↑ Top

警告 (207)

URI : style.min.css

1 ::-webkit-scrollbar is a vendor extended pseudo-element
1 ::-webkit-scrollbar-track is a vendor extended pseudo-element
1 -webkit-box-shadow is a vendor extension
1 -webkit-box-shadow is a vendor extension
1 ::-webkit-scrollbar-thumb is a vendor extended pseudo-element



・・・　All of other warnings are relating to "vendor extension".

↑ Top

検証したスタイルシートを以下に示します

html {
scroll-behavior : smooth;
}
html::-webkit-scrollbar {
width : 10px;
height : 10px;
}
html::-webkit-scrollbar-track {
border-radius : 5px;
box-shadow : 0 0 4px #aaa inset;
box-shadow : 0 0 4px #756a30 inset;
}
html::-webkit-scrollbar-thumb {
border-radius : 5px;
background : rgb(117, 106, 48, 0.7);
}
body {
overflow-x : hidden;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.bodyLock {
overflow : hidden;
}
.loading {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100vh;
background-image : url("../../Images/loadBGImage.webp");
background-size : cover;
background-position : center;
overflow : hidden;
scrollbar-width : none;
opacity : 0;
visibility : hidden;
transition : 0.3s;
}
.loading .gradient .-gradient {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
will-change : transform;
}
.loading .gradient .gra-out {
background : linear-gradient(180deg, #030303 0%, rgb(112, 23, 64, 0.3) 50%, rgb(112, 23, 64, 0) 100%);
opacity : 0.5;
}
.loading .gradient .gra-inner {
background : linear-gradient(180deg, #000 0%, rgb(0, 0, 0, 0.1) 60%, #000 100%);
transform : translateY(0);
opacity : 0;
}
.loading h1 {
position : absolute;
display : flex;
z-index : 9;
top : 50%;
right : 50%;
transform : translateX(50%);
}
.loading h1 img {
opacity : 0;
width : 130px;
}
.loading h1 span {
color : #fff;
font-size : 56px;
font-family : 'Work Sans';
font-weight : 300;
opacity : 0;
transform : translate(0,-100%) rotateY(-100deg);
}
.loading.active {
opacity : 1;
visibility : visible;
}
.bg {
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0;
background-color : rgb(244, 173, 199, 0.1);
background-color : rgb(3, 3, 3, 0.1);
z-index : -1;
transform : scaleY(0);
transform-origin : center;
will-change : transform;
}
p {
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.mainContents {
position : relative;
top : 0;
left : 0;
width : 100%;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #333;
background-color : #fff;
opacity : 0;
visibility : hidden;
transition : 0.3s;
}
.mainContents.active {
opacity : 1;
visibility : visible;
}
@media screen and (min-width: 769px) {
.sideScrollArea {
overflow : hidden;
}
.sideScrollArea .allPanelWrapper {
display : flex;
}
.sideScrollArea .allPanelWrapper .panel {
height : 100vh;
display : flex;
justify-content : center;
align-items : center;
box-shadow : 0 0 12px gray;
border-radius : 3px;
}
}
.container {
width : 100%;
max-width : 1170px;
margin : 0 auto;
}
.scrollGuideArea {
display : flex;
writing-mode : vertical-rl;
position : sticky;
top : 500px;
opacity : 0;
transform : translate(0,0);
z-index : 1;
}
@media screen and (max-width: 768px) {
.scrollGuideArea {
left : 10px;
}
}
@media screen and (min-width: 769px) {
.scrollGuideArea {
left : 30px;
}
}
.scrollGuideArea p {
font-size : 10px;
line-height : 16px;
letter-spacing : 2px;
font-family : "Crimson Text", "Yu Mincho Medium", 游明朝体, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.downArrow {
position : relative;
left : -7px;
top : 20px;
}
.downArrow::after {
content : "";
position : absolute;
top : 10px;
width : 1px;
height : 0;
background : gray;
animation : pathmove 2s ease-in-out infinite;
opacity : 0;
}
@keyframes pathmove {
0% {
height : 0;
top : 0;
opacity : 0;
}
30% {
height : 70px;
opacity : 0.8;
}
100% {
height : 0;
top : 100px;
opacity : 0;
}
}
#navigation a {
display : inline-block;
line-height : 1.5em;
position : relative;
overflow : hidden;
text-decoration : none;
}
#navigation a:after {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 1px;
background-color : #333;
transform : translate(-100%,0);
transition : transform 500ms;
transition : transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
content : "";
}
#navigation a:hover:after {
transform : translate(0,0);
}
.btn {
display : inline-block;
text-align : center;
font-size : 12px;
font-family : "Crimson Text", "Yu Mincho Medium", 游明朝体, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #333;
background-color : #fff;
padding : 8px 24px;
line-height : 35px;
letter-spacing : 1px;
opacity : 0.6;
border : #333 solid 1px;
border-radius : 4px;
transform : scale(0.8);
transition-duration : 0.5s;
}
.btn:hover {
color : white;
background-color : rgb(102, 90, 26, 0.5);
opacity : 1.0;
}
@media screen and (min-width: 769px) {
.btn:hover {
font-size : 14px;
}
}
.doubleLine {
width : 95%;
display : inline-block;
padding : 3px;
border-bottom : 5px double #b4c2dc;
margin-bottom : 5px;
}
.siteHeader {
display : flex;
align-items : center;
opacity : 0;
transform : translateY(-100%);
background-color : #f6f6f6;
color : #333;
position : sticky;
top : 0;
left : 0;
z-index : 2;
}
.siteHeader .waPlusLogo {
width : 250px;
transition : transform 500ms;
}
@media screen and (max-width: 768px) {
.siteHeader .waPlusLogo {
margin : 0 30px;
}
}
@media screen and (min-width: 769px) {
.siteHeader .waPlusLogo {
margin : 0 150px;
}
}
.siteHeader .waPlusLogo:hover {
transform : scale(1.05);
}
.siteHeader nav {
width : 40%;
height : 80px;
display : flex;
justify-content : center;
padding-top : 20px;
}
.siteHeader nav .mainNav {
display : flex;
align-items : center;
justify-content : center;
}
.siteHeader nav .mainNav .navInter {
content : "---";
width : 30px;
height : 100%;
}
.siteHeader nav .mainNav .navInter:nth-of-type(1) {
width : 100px;
}
@media screen and (max-width: 768px) {
.siteHeader nav .mainNav {
display : none;
}
}
.siteHeader #subMnuErase {
position : fixed;
top : 0;
height : 48px;
}
@media screen and (max-width: 768px) {
.siteHeader .hamburgerMenu-Wrapper {
display : block;
}
}
@media screen and (min-width: 769px) {
.siteHeader .hamburgerMenu-Wrapper {
display : none;
}
}
.siteHeader .philoSubMenu {
opacity : 0;
position : absolute;
top : 80px;
padding : 10px 20px;
box-shadow : 6px 6px 12px #c6c6c6;
border-radius : 3px;
z-index : 0;
background-color : #f6f6f6;
transition-duration : 0.8s;
font-size : 0.8em;
font-weight : bold;
line-height : 2em;
}
.siteHeader .philoSubMenu ul {
flex-direction : column;
text-align : left;
}
.siteHeader .bizSubMenu {
opacity : 0;
position : absolute;
top : 80px;
padding : 10px 20px;
box-shadow : 6px 6px 12px #c6c6c6;
border-radius : 3px;
z-index : 0;
background-color : #f6f6f6;
transition-duration : 0.8s;
font-size : 0.8em;
font-weight : bold;
line-height : 2em;
}
.siteHeader .bizSubMenu ul {
flex-direction : column;
text-align : left;
}
.siteHeader .activitySubMenu {
opacity : 0;
position : absolute;
top : 80px;
padding : 10px 20px;
box-shadow : 6px 6px 12px #c6c6c6;
border-radius : 3px;
z-index : 0;
background-color : #f6f6f6;
transition-duration : 0.8s;
font-size : 0.8em;
font-weight : bold;
line-height : 2em;
}
.siteHeader .activitySubMenu ul {
flex-direction : column;
text-align : left;
}
.siteHeader .aboutUSSubMenu {
opacity : 0;
position : absolute;
top : 80px;
padding : 10px 20px;
box-shadow : 6px 6px 12px #c6c6c6;
border-radius : 3px;
z-index : 0;
background-color : #f6f6f6;
transition-duration : 0.8s;
font-size : 0.8em;
font-weight : bold;
line-height : 2em;
}
.siteHeader .aboutUSSubMenu ul {
flex-direction : column;
text-align : left;
}
.siteHeader .newsSubMenu {
opacity : 0;
position : absolute;
top : 80px;
padding : 10px 20px;
box-shadow : 6px 6px 12px #c6c6c6;
border-radius : 3px;
z-index : 0;
background-color : #f6f6f6;
transition-duration : 0.8s;
font-size : 0.8em;
font-weight : bold;
line-height : 2em;
}
.siteHeader .newsSubMenu ul {
flex-direction : column;
text-align : left;
}
.main {
background-color : #fff;
}
.main #OurPhilosophy {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
align-items : normal;
height : calc(100vh - 100px);
}
.main #OurPhilosophy .ourMessage {
position : absolute;
z-index : 1;
width : 100%;
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle {
position : absolute;
top : 5%;
left : 5%;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .line-1 {
display : none;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .line-2 {
display : none;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-1 span {
color : #fff;
display : inline-block;
transform : translate(-100%,0) rotateY(-100deg);
opacity : 0;
}
}
@media screen and (max-width: 768px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-1 span {
font-size : 98px;
letter-spacing : -0.1em;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-1 span {
font-size : 42px;
letter-spacing : -0.1em;
}
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-2 span {
color : #fff;
display : inline-block;
transform : translate(-100%,0) rotateY(-100deg);
opacity : 0;
}
}
@media screen and (max-width: 768px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-2 span {
font-size : 98px;
letter-spacing : -0.1em;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-2 span {
font-size : 42px;
letter-spacing : -0.1em;
}
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-3 span {
color : #fff;
display : inline-block;
transform : translate(-100%,0) rotateY(-100deg);
opacity : 0;
}
}
@media screen and (max-width: 768px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-3 span {
font-size : 98px;
letter-spacing : -0.1em;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-3 span {
font-size : 42px;
letter-spacing : -0.1em;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle {
margin-top : 60px;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-1 {
display : none;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-2 {
display : none;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .mbLine-3 {
display : none;
}
.main #OurPhilosophy .ourMessage .msgMainTitle .line-1 span {
color : #fff;
display : inline-block;
transform : translate(-100%,0) rotateY(-100deg);
opacity : 0;
}
}
@media screen and (min-width: 769px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .line-1 span {
font-size : 98px;
letter-spacing : -0.1em;
}
}
@media screen and (min-width: 769px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .line-1 span {
font-size : 42px;
letter-spacing : -0.1em;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .line-2 span {
color : #fff;
display : inline-block;
transform : translate(-100%,0) rotateY(-100deg);
opacity : 0;
}
}
@media screen and (min-width: 769px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .line-2 span {
font-size : 98px;
letter-spacing : -0.1em;
}
}
@media screen and (min-width: 769px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgMainTitle .line-2 span {
font-size : 42px;
letter-spacing : -0.1em;
}
}
.main #OurPhilosophy .ourMessage .cthCopy {
display : flex;
align-items : center;
line-height : 2em;
margin-bottom : 20px;
color : #665A1A;
opacity : 0;
transform : translateX(-20%);
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .cthCopy {
font-size : 24px;
margin-top : 180px;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .cthCopy {
font-size : 36px;
margin-top : 30px;
}
}
.main #OurPhilosophy .ourMessage .cthCopy .hrzLine {
height : 1px;
background-color : #333;
position : relative;
left : 10px;
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .cthCopy .hrzLine {
width : 20px;
margin : 0 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .cthCopy .hrzLine {
width : 30px;
margin : 0 30px;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgDetailMB {
display : none;
}
.main #OurPhilosophy .ourMessage .msgDetailPC {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(-20%);
}
}
@media screen and (min-width: 769px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgDetailPC {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgDetailPC {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgDetailPC {
display : none;
}
.main #OurPhilosophy .ourMessage .msgDetailMB {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(-20%);
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.main #OurPhilosophy .ourMessage .msgDetailMB {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (max-width: 768px) and (min-width: 769px) {
.main #OurPhilosophy .ourMessage .msgDetailMB {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
.main #OurPhilosophy .ourImage {
content : "";
height : 65%;
border-radius : 5px;
background-size : cover;
background-position : center;
transform : translateX(30%);
opacity : 0;
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourImage {
width : 90%;
margin-left : 5%;
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourImage {
width : 48%;
}
}
@media screen and (max-width: 768px) {
.main #OurPhilosophy .ourImage {
bottom : 10%;
left : 0%;
background-image : linear-gradient(90deg, #fff 0%, rgb(255, 255, 255, 0.5) 25%, rgb(255, 255, 255, 0) 70%, rgb(255, 255, 255, 0) 100%), linear-gradient(180deg, #fff 0%, rgb(255, 255, 255, 0.7) 25%, rgb(255, 255, 255, 0) 80%, rgb(255, 255, 255, 0) 100%), url("../../Images/bgImage_SakuraS.webp");
}
}
@media screen and (min-width: 769px) {
.main #OurPhilosophy .ourImage {
top : 10%;
left : 38%;
background-image : linear-gradient(90deg, #fff 0%, rgb(255, 255, 255, 0.5) 40%, rgb(255, 255, 255, 0) 70%, rgb(255, 255, 255, 0) 100%), linear-gradient(180deg, #fff 0%, rgb(255, 255, 255, 0) 20%, rgb(255, 255, 255, 0) 80%, rgb(255, 255, 255, 0) 100%), url("../../Images/bgImage_SakuraS.webp");
}
}
.main #OurPhilosophy .andMoreBtn {
position : absolute;
bottom : 5%;
right : 5%;
}
.main #OurServices {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : rgb(246, 246, 246, 0.5);
}
@media screen and (max-width: 768px) {
.main #OurServices {
height : 1300px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices {
height : 100vh;
}
}
.main #OurServices .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
width : 38%;
}
.main #OurServices .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
@media screen and (max-width: 768px) {
.main #OurServices .expImage {
height : 1100px;
top : 130px;
left : 62%;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .expImage {
height : 100vh;
}
}
.main #OurServices .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer {
margin-left : 8%;
}
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer {
width : 100%;
height : 1300px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer {
width : 50%;
height : 100vh;
}
}
.main #OurServices .sectionContainer .serviceTitle {
display : flex;
align-items : center;
margin-bottom : 29px;
border-bottom : 2px solid rgb(180, 194, 220, 0.3);
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .serviceTitle {
margin-top : 50px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .serviceTitle {
margin-top : 150px;
line-height : 2em;
padding-bottom : 5px;
}
}
.main #OurServices .sectionContainer .serviceTitle .secHrzLineL {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .serviceTitle .secHrzLineL {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .serviceTitle .secHrzLineL {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurServices .sectionContainer .serviceTitle .secHrzLineR {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
margin-bottom : 10px;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .serviceTitle .secHrzLineR {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .serviceTitle .secHrzLineR {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurServices .sectionContainer .serviceTitle .line span {
color : #fff;
font-weight : bold;
display : inline-block;
transform : translate(100%,0);
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .serviceTitle .line span {
font-size : 24px;
letter-spacing : -0.2em;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .serviceTitle .line span {
font-size : 58px;
letter-spacing : -0.1em;
}
}
.main #OurServices .sectionContainer .msgDetailService {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
width : 100%;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService {
display : flex;
align-items : center;
justify-content : space-around;
margin-left : 0;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind {
position : relative;
top : 0;
left : 0;
border : lime solid 1px;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind {
width : 58%;
height : 330px;
margin-bottom : 40px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind {
width : 33%;
height : 500px;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind .barSet {
position : absolute;
height : 100%;
width : 10px;
overflow : hidden;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind .barSet {
top : 7px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind .barSet {
top : 25px;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind .vtclBar {
height : 1px;
width : 380px;
background-color : #665A1A;
position : absolute;
top : 0;
left : 5px;
transform-origin : top left;
transform : rotateZ(90deg);
}
.main #OurServices .sectionContainer .msgDetailService .svcKind .vtclBarSdw {
height : 1px;
width : 380px;
background-color : rgb(102, 90, 26, 0.1);
position : absolute;
top : 0;
left : 4px;
transform-origin : bottom left;
transform : rotateZ(90deg);
}
.main #OurServices .sectionContainer .msgDetailService .svcKind h3 {
font-weight : 700;
margin-left : 10px;
color : #030303;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind h3 {
font-size : 16px;
margin-top : 30px;
line-height : 1em;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind h3 {
font-size : 20px;
margin-top : 50px;
line-height : 1.5em;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind ul {
margin-top : 30px;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind ul .pcLabel {
display : none;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind ul .mbLabel {
display : none;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind ul li {
font-weight : bold;
line-height : 2em;
border-bottom : 1px solid #030303;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind ul li {
font-size : 14px;
margin : 0 10px;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind ul li {
font-size : 16px;
margin : 0 10px;
}
}
.main #OurServices .sectionContainer .msgDetailService .svcKind .andMoreBtn {
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind .andMoreBtn {
margin-top : 50px;
left : 20%;
}
}
@media screen and (min-width: 769px) {
.main #OurServices .sectionContainer .msgDetailService .svcKind .andMoreBtn {
top : 330px;
left : 40%;
}
}
.main #OurPerformance {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : rgb(254, 244, 246, 0.5);
}
.main #OurPerformance .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
top : 25vh;
}
.main #OurPerformance .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .expImage {
top : 30vh;
left : 8%;
width : 35%;
height : 43vh;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .expImage {
left : 9%;
width : 35%;
height : 500px;
}
}
.main #OurPerformance .expImage .andMoreBtn {
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .expImage .andMoreBtn {
right : 1%;
bottom : 1%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .expImage .andMoreBtn {
right : 5%;
bottom : 5%;
}
}
.main #OurPerformance .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer {
margin-left : 8%;
}
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer {
left : 5%;
width : 90%;
top : 6%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer {
left : 39%;
height : 100vh;
}
}
.main #OurPerformance .sectionContainer .performTitle {
display : flex;
align-items : center;
margin-bottom : 29px;
border-bottom : 2px solid rgb(180, 194, 220, 0.3);
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .performTitle {
margin-top : 50px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .performTitle {
margin-top : 150px;
line-height : 2em;
padding-bottom : 5px;
}
}
.main #OurPerformance .sectionContainer .performTitle .secHrzLineL {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .performTitle .secHrzLineL {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .performTitle .secHrzLineL {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurPerformance .sectionContainer .performTitle .secHrzLineR {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
margin-bottom : 10px;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .performTitle .secHrzLineR {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .performTitle .secHrzLineR {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurPerformance .sectionContainer .performTitle .line span {
color : #fff;
font-weight : bold;
display : inline-block;
transform : translate(100%,0);
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .performTitle .line span {
font-size : 24px;
letter-spacing : -0.2em;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .performTitle .line span {
font-size : 58px;
letter-spacing : -0.1em;
}
}
.main #OurPerformance .sectionContainer .bizKind {
margin : 0 20px 35px 20px;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #393327;
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .bizKind {
font-size : 14px;
text-align : left;
padding-left : 20px;
width : 80%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .bizKind {
font-size : 42px;
text-align : center;
}
}
.main #OurPerformance .sectionContainer .msgDetailPerform {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .msgDetailPerform {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .msgDetailPerform {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
@media screen and (max-width: 768px) {
.main #OurPerformance .sectionContainer .msgDetailPerform {
margin-left : 130px;
}
.main #OurPerformance .sectionContainer .msgDetailPerform .msgDetailPC {
display : none;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .sectionContainer .msgDetailPerform .msgDetailMB {
display : none;
}
}
.main #OurPerformance .addImagePkg {
display : flex;
position : absolute;
justify-content : space-around;
}
@media screen and (max-width: 768px) {
.main #OurPerformance .addImagePkg {
top : 78%;
left : 6%;
width : 90%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .addImagePkg {
top : 72%;
left : 48%;
width : 45%;
}
}
.main #OurPerformance .addImagePkg .rectL {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ichoFestivalS.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformance .addImagePkg .rectL {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .addImagePkg .rectL {
width : 230px;
height : 150px;
}
}
.main #OurPerformance .addImagePkg .rectC {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/kitchenCar.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformance .addImagePkg .rectC {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .addImagePkg .rectC {
width : 230px;
height : 150px;
}
}
.main #OurPerformance .addImagePkg .rectR {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/management/tsubakCake.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformance .addImagePkg .rectR {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformance .addImagePkg .rectR {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceITWEBSol {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : rgb(254, 244, 246, 0.5);
}
.main #OurPerformanceITWEBSol .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
}
.main #OurPerformanceITWEBSol .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .expImage {
top : 30vh;
right : 10px;
width : 35%;
height : 43vh;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .expImage {
left : 60%;
width : 35%;
height : 500px;
}
.main #OurPerformanceITWEBSol .expImage img {
top : -22%;
}
}
.main #OurPerformanceITWEBSol .expImage .andMoreBtn {
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .expImage .andMoreBtn {
right : 1%;
bottom : 1%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .expImage .andMoreBtn {
left : 5%;
bottom : 5%;
}
}
.main #OurPerformanceITWEBSol .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
height : 100vh;
position : absolute;
left : 0%;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .sectionContainer {
margin-left : 8%;
}
}
.main #OurPerformanceITWEBSol .sectionContainer .bizKind {
margin : 0 20px 20px 20px;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #393327;
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .sectionContainer .bizKind {
font-size : 14px;
text-align : left;
padding-left : 20px;
margin-top : 100px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .sectionContainer .bizKind {
margin : 50px 20px;
margin-top : 140px;
font-size : 42px;
text-align : center;
}
}
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform {
margin-left : 0;
}
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform .msgDetailPC {
display : none;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .sectionContainer .msgDetailPerform .msgDetailMB {
display : none;
}
}
.main #OurPerformanceITWEBSol .addImagePkg {
position : absolute;
display : flex;
justify-content : space-around;
border : red solid 1px;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .addImagePkg {
top : 78%;
margin : 0 auto;
width : 90%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .addImagePkg {
top : 72%;
left : 9%;
width : 45%;
}
}
.main #OurPerformanceITWEBSol .addImagePkg .rectL {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ITWebSol/sourceCode.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectL {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectL {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceITWEBSol .addImagePkg .rectC {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ITWebSol/nodeProject.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectC {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectC {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceITWEBSol .addImagePkg .rectR {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ITWebSol/programmingLogo.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectR {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceITWEBSol .addImagePkg .rectR {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceInekka {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : rgb(254, 244, 246, 0.5);
}
.main #OurPerformanceInekka .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
}
.main #OurPerformanceInekka .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .expImage {
top : 30vh;
right : 10px;
width : 35%;
height : 43vh;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .expImage {
left : 60%;
width : 35%;
height : 500px;
}
.main #OurPerformanceInekka .expImage img {
top : -35%;
}
}
.main #OurPerformanceInekka .expImage .andMoreBtn {
position : absolute;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .expImage .andMoreBtn {
right : 1%;
bottom : 1%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .expImage .andMoreBtn {
left : 5%;
bottom : 5%;
}
}
.main #OurPerformanceInekka .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
height : 100vh;
position : absolute;
left : 0%;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .sectionContainer {
margin-left : 8%;
}
}
.main #OurPerformanceInekka .sectionContainer .bizKind {
margin : 0 20px 20px 20px;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #393327;
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .sectionContainer .bizKind {
font-size : 14px;
text-align : left;
padding-left : 20px;
margin-top : 100px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .sectionContainer .bizKind {
margin : 50px 20px;
margin-top : 140px;
font-size : 42px;
text-align : center;
}
}
.main #OurPerformanceInekka .sectionContainer .circleO {
width : 250px;
height : 250px;
border-radius : 50%;
background-size : cover;
background-position : center;
display : flex;
position : absolute;
top : 55%;
right : 0;
width : 200px;
height : 200px;
background-image : url("../../Images/i-nekka/i-nekka_Edwardian_1024.webp");
}
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform {
margin-left : 0;
}
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform .msgDetailPC {
display : none;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .sectionContainer .msgDetailPerform .msgDetailMB {
display : none;
}
}
.main #OurPerformanceInekka .addImagePkg {
position : absolute;
display : flex;
justify-content : space-around;
border : red solid 1px;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .addImagePkg {
top : 78%;
margin : 0 auto;
width : 90%;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .addImagePkg {
top : 72%;
left : 9%;
width : 45%;
}
}
.main #OurPerformanceInekka .addImagePkg .rectL {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/i-nekka/inekka-nit.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .addImagePkg .rectL {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .addImagePkg .rectL {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceInekka .addImagePkg .rectC {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/i-nekka/inekka-ssk.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .addImagePkg .rectC {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .addImagePkg .rectC {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceInekka .addImagePkg .rectR {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/i-nekka/inekka-lace.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceInekka .addImagePkg .rectR {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceInekka .addImagePkg .rectR {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceACestus {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : rgb(254, 244, 246, 0.5);
}
.main #OurPerformanceACestus .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
left : 60%;
width : 35%;
height : 500px;
}
.main #OurPerformanceACestus .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
.main #OurPerformanceACestus .expImage img {
top : -45%;
}
.main #OurPerformanceACestus .expImage .andMoreBtn {
position : absolute;
bottom : 5%;
left : 5%;
}
.main #OurPerformanceACestus .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
height : 100vh;
position : absolute;
left : 0%;
}
@media screen and (max-width: 768px) {
.main #OurPerformanceACestus .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceACestus .sectionContainer {
margin-left : 8%;
}
}
.main #OurPerformanceACestus .sectionContainer .addImagePkg {
position : absolute;
top : 72%;
left : 0;
width : 90%;
display : flex;
justify-content : space-around;
}
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectL {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ACestus/ACestus1-500x350.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectL {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectL {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectC {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ACestus-Bankok.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectC {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectC {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectR {
border-radius : 5px;
background-size : cover;
background-position : center;
background-image : url("../../Images/ACestus-CrocoShineBlackSkn.webp");
}
@media screen and (max-width: 768px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectR {
width : 150px;
width : 30%;
height : 98px;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceACestus .sectionContainer .addImagePkg .rectR {
width : 230px;
height : 150px;
}
}
.main #OurPerformanceACestus .sectionContainer .circleO {
width : 250px;
height : 250px;
border-radius : 50%;
background-size : cover;
background-position : center;
display : flex;
position : absolute;
top : 62%;
right : 1%;
width : 150px;
height : 150px;
background-image : url("../../Images/ACestus/AC_LOGO.webp");
border : lime solid 1px;
}
.main #OurPerformanceACestus .sectionContainer .bizKind {
margin : 50px 20px;
margin-top : 140px;
font-size : 42px;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
text-align : center;
color : #393327;
opacity : 0;
border-bottom : 1px solid rgb(3, 3, 3, 0.5);
}
.main #OurPerformanceACestus .sectionContainer .msgDetailPerform {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurPerformanceACestus .sectionContainer .msgDetailPerform {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurPerformanceACestus .sectionContainer .msgDetailPerform {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
.main #OurInterval {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : #fff;
}
.main #OurInterval .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
left : 5%;
width : 90%;
height : 90vh;
opacity : 0.7;
}
.main #OurInterval .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
.main #OurInterval .expImage img {
position : absolute;
top : -220px;
}
.main #OurInformation {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : #fff;
}
.main #OurInformation .expImage {
position : absolute;
overflow : hidden;
border-radius : 5px;
box-shadow : 0 5px 30px 0 rgb(0, 0, 0, 0.5);
top : 23%;
right : 80px;
width : 35%;
height : 500px;
}
.main #OurInformation .expImage img {
position : absolute;
top : -10%;
left : -10%;
width : 120%;
height : 120%;
object-fit : cover;
}
@media screen and (min-width: 769px) {
.main #OurInformation .expImage img {
position : absolute;
top : -180px;
}
}
.main #OurInformation .sectionContainer {
width : 50%;
overflow : hidden;
border : red dashed 2px;
height : 100vh;
width : 50%;
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer {
margin-left : 2%;
width : 100vw;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer {
margin-left : 8%;
}
}
.main #OurInformation .sectionContainer .informTitle {
display : flex;
align-items : center;
margin-bottom : 29px;
border-bottom : 2px solid rgb(180, 194, 220, 0.3);
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .informTitle {
margin-top : 50px;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .informTitle {
margin-top : 150px;
line-height : 2em;
padding-bottom : 5px;
}
}
.main #OurInformation .sectionContainer .informTitle .secHrzLineL {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .informTitle .secHrzLineL {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .informTitle .secHrzLineL {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurInformation .sectionContainer .informTitle .secHrzLineR {
height : 2px;
background-color : #665A1A;
opacity : 0;
transform : translateX(100%);
margin-bottom : 10px;
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .informTitle .secHrzLineR {
width : 20px;
margin : 0 15px;
margin-left : 20px;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .informTitle .secHrzLineR {
width : 35px;
margin : 0 15px;
margin-left : 20px;
}
}
.main #OurInformation .sectionContainer .informTitle .line span {
color : #fff;
font-weight : bold;
display : inline-block;
transform : translate(100%,0);
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .informTitle .line span {
font-size : 24px;
letter-spacing : -0.2em;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .informTitle .line span {
font-size : 58px;
letter-spacing : -0.1em;
}
}
.main #OurInformation .sectionContainer .bizKind {
margin : 0 20px 35px 20px;
font-family : 游明朝体, "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color : #393327;
opacity : 0;
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .bizKind {
font-size : 14px;
text-align : left;
padding-left : 20px;
width : 80%;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .bizKind {
font-size : 42px;
text-align : center;
}
}
.main #OurInformation .sectionContainer .msgDetailInform {
border : lime solid 1px;
margin-left : 20px;
font-weight : bold;
color : #393327;
opacity : 0;
transform : translateX(20%);
}
@media screen and (max-width: 768px) {
.main #OurInformation .sectionContainer .msgDetailInform {
font-size : 12px;
line-height : 28px;
letter-spacing : 0;
}
}
@media screen and (min-width: 769px) {
.main #OurInformation .sectionContainer .msgDetailInform {
font-size : 17px;
line-height : 35px;
letter-spacing : 1px;
}
}
.main #footerSection {
position : relative;
top : 0;
left : 0;
height : 100vh;
display : flex;
align-items : center;
z-index : 0;
background-color : #031939;
opacity : 0.5;
}
.main section:nth-of-type(2) .expImage {
right : 0;
}

↑ Top