// Scss Document /*-------------------- 共通設定 ----------------------*/ $eng:adobe-garamond-pro, serif; $breakpoint-notepad: 1500px; $breakpoint-tablet: 800px; $breakpoint-mobile: 600px; @mixin max-screen($break-point) { @media screen and (max-width: $break-point) { @content; } } @mixin min-screen($break-point) { @media screen and (min-width: $break-point) { @content; } } @mixin screen($break-point-min, $break-point-max) { @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) { @content; } } * { margin: 0; padding: 0; letter-spacing: 0.1em; font-family:"mr-eaves-modern", sans-serif; color: #262525; font-size: 16px; font-weight: 400; z-index:3; } img { width: 100%; } a { text-decoration: none; &.disabled { pointer-events: none; text-decoration: none; } } ul,ol { list-style: none; } .pc { display: block; @include max-screen($breakpoint-tablet) { display: none; } } .sp { display: none; @include max-screen($breakpoint-tablet) { display: block; } } .fadein { opacity: 0; transform: translateY(0px); transition: all .8s; } body { overflow-x: hidden; background: #d8dce0; } .footer_copy { text-align: center; margin-bottom: 50px; & p { font-size: 0.7em; } @include max-screen($breakpoint-mobile) { margin-bottom: 20%; } } #home { position: fixed; right: 15px; bottom: 30px; background: #e6e9ec; & a { position: relative; display: block; width: 42px; height: 32px; text-decoration: none; text-align: center; &::before { padding: 5px; font-size: 12px; letter-spacing: 0; line-height: 1.0; text-align: center; content: 'Home'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } } /*----------------------------- 背景固定 -----------------------------*/ .img-sec { &::before { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background-repeat:no-repeat; background-position:center; background-image:url("../image/logo.svg"); background-size:cover; background-size: 400px; @include max-screen($breakpoint-mobile) { padding: 10% 0 0; background-size: 200px; } } } /*--------------------------------------------*/ .lp_wrapper { width: 100%; & .white { background: #ffffff; padding: 5% 0; &::after { content:""; display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background-repeat:no-repeat; background-position:center; // background-image:url("../image/logo.svg"); background-size:cover; background-size: 400px; @include max-screen($breakpoint-mobile) { padding: 10% 0 0; background-size: 200px; } } } } .mv { margin: 0 auto; position: relative; z-index: 3; } section { display: block; margin: 30% auto; width: 80%; max-width: 1000px; @include max-screen($breakpoint-notepad) { max-width: 850px; } @include max-screen($breakpoint-mobile) { width: 100%; } & .codeTxt { display: flex; align-items: center; justify-content: flex-start; margin: 0 auto; @include max-screen($breakpoint-mobile) { flex-wrap: wrap; width: 85%; } & div { width: 50%; padding: 1%; @include max-screen($breakpoint-mobile) { width: 100%; } &:first-child { @include max-screen($breakpoint-mobile) { order: 2; text-align: center; } } &:last-child { @include max-screen($breakpoint-mobile) { order: 1; } } & img { max-width: 600px; width: 70%; @include max-screen($breakpoint-mobile) { width: 85%; } } & p { font-size: 1.0em; line-height: 1.5; @include max-screen($breakpoint-mobile) { font-size: 0.7em; margin-bottom: 20%; } } } } & ul { display: flex; width: 100%; justify-content: flex-start; align-items: center; margin: 17% auto 0; @include max-screen($breakpoint-mobile) { flex-wrap: wrap; margin: 25% auto 0; } & li { width: 50%; padding: 0.5%; @include max-screen($breakpoint-mobile) { width: 100%; padding: 0; margin-bottom: 5%; } &.change:first-child { @include max-screen($breakpoint-mobile) { order: 2; } } &.change:last-child { @include max-screen($breakpoint-mobile) { order: 1; } } } } & .credit { text-align: center; position: relative; & a { font-size: 1.0em; @include max-screen($breakpoint-mobile) { font-size: 0.7em; } & span { font-size: 70%; } } } } .footer_img { text-align: center; max-width: 600px; margin: 0 auto; position: relative; z-index: 3; @include max-screen($breakpoint-mobile) { width: 80%; } & img { width: 100%; } & p { font-size: 1.0em; line-height: 1.5; width: 90%; text-align: left; margin: 2% auto; @include max-screen($breakpoint-mobile) { font-size: 0.7em; } } } /*-------------------------------------------------------*/ /*-----------1003 山下追記---------------------*/ #global-nav { width: 100%; margin-left: 10px; display: none; .m_fixed { position: fixed; top: 7px; z-index: 9999; display: block; } } .fadein_0 { opacity: 0; transform: translateY(0px); transition: all 0.8s; } #logo img { width: 90%; height: auto; max-width: 100px; }