@charset "UTF-8";
/* CSS Document */

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #000;
font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
background: #FFF;
margin: 0;
position: relative;
}
img{
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
video, iframe {
width: 100%;
vertical-align: bottom;
}
a, a:hover {
text-decoration: none;
color: #111;
}
i {
font-size: 0.8em;
}
p {
word-break: break-all;
}
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.box {
width: 90%;
max-width: 1280px;
margin: 0 auto;
}
.box_m {
width: 90%;
max-width: 960px;
margin: 0 auto;
}

#header{
width:100%;
background: #fff;
}
#header > div {
width:90%;
max-width: 1280px;
margin: 0 auto;
}

.drawer__button {
position: fixed;
right: 10px;
top: 10px;
background-color: #fff;
border-radius: 8px;
cursor: pointer;
z-index: 999;
}
.drawer__button > span {
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 4px;
background-color: #000;
transform: translateX(-50%);
}
.drawer__button > span:first-child {
transition: transform 0.3s ease;
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__button.active > span:first-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__button.active > span:nth-child(2) {
opacity: 0;
}
.drawer__button.active > span:last-child {
transform: translate(-50%, -50%) rotate(45deg);
}
/* メニューのデザイン */
.drawer__nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 50;
}
.drawer__nav.active {
opacity: 1;
visibility: visible;
}
.drawer__nav__inner {
position: relative;
height: 100%;
background: #9BB6A1;
overflow: scroll;
transform: translateX(100%);
transition: transform 0.3s ease;
display: grid;
place-items: center;
}
.drawer__nav__inner > div {
width: 90%;
}
.drawer__nav.active .drawer__nav__inner {
transform: translateX(0);
}
.drawer__nav__menu {
list-style: none;
padding-left: 0;
}
.drawer__nav__link {
display: block;
color: #fff;
}
.drawer__nav__link:hover {
color: #fff;
}
.drawer__nav__inner > div p {
color: #fff;
border-bottom: 1px solid #fff;
}

/* ハンバーガーメニュー展開時、背景を固定 */
body.active {
height: 100%;
overflow: hidden;
}

#hero {
position: relative;
}
#hero > div, img#ceo1 {
position: absolute;
z-index: 2;
}
#hero > div {
left: 5%;
top: 50%;
transform: translateY(-50%);
width: 90%;
height: 96%;
}
#hero h1, #hero h2 {
font-weight: 900;
color: #fff;
text-shadow: #333 1px 0 10px; /* 20250214影付きに修正 */
}
#hero a {
display: table;
font-weight: 500;
/* background: #9BB6A1; */
background: #ee7b1c;
border-radius: 10px;
color: #fff;
position: absolute;
bottom: 0;
}
img#ceo1 {
width: 55%;
max-width: 400px;
}
ul#heroBg {
display: block;
position: relative;
z-index: 1;
}

#lead h3 {
text-align: center;
font-weight: 700;
}
#lead h2 {
font-weight: 900;
}
#lead a {
margin-top: 30px;
}
img#ceo2 {
display: table;
width: 70%;
max-width: 480px;
margin-left: auto;
}

#cando h2, #cando h3, #works h2, #faq h2, #voice h2 {
font-weight: 900;
text-align: center;
}
#cando h3, #actually h4 {
font-family: "NotoSerifJP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
#cando a, #voice a, #actually a, #form a, #lead a, #works a {
display: block;
font-weight: 500;
background: #9BB6A1;
color: #fff;
text-align: center;
font-weight: 700;
}

/* 20250411ボタン色変更 */
#cando a, #voice a, #actually a {
    background: #ee7b1c; 
}

#works h3 {
font-weight: 700;
text-align: center;
}
#works a {
margin-top: 30px;
}

#faq {
background: #e1e8e3;
}
#faq h2 {
background: #fff;
border-radius: 10px;
line-height: 100%;
}
#faq label h4, .accshow p {
display: flex;
}
#faq label h4 span .accshow p span {
display: table;
}
#faq label h4, .accbox span {
font-weight: 700;
}
.accbox label {
display: block;
position: relative;
cursor :pointer;
transition: all 0.5s;
min-height:4.6em;
}
.accbox label:after {
font-family: 'Font Awesome 5 Pro';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
content: '\f067';
}
.accbox .cssacc:checked + label:after {
content: '\f068';
}
.accbox input {
display: none;
}
.accbox .accshow {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.cssacc:checked + label + .accshow {
height: auto;
opacity: 1;
}
.accbox .accshow p {
line-height:1.8 !important;
}

#voice h2 span {
display: block;
font-weight: 500;
font-size: 1.4rem;
}
#customer {
margin: 0 auto;
}
#customer .slick-track {
display: flex;
}
#customer .slick-slide {
height: auto !important;
}
#voice ul li {
border: 1px solid #ddd;
border-radius: 10px;
}
#voice ul li:last-child {
padding-bottom: 0;
}
#voice ul li h3 {
display: flex;
align-items: center;
font-weight: 800;
}
#voice ul li h3 img {
display: block;
border-radius: 50%;
}
#voice ul li p {
font-weight: 500;
}
#voice ul li h3 span, #voice ul li h3 strong{
line-height: 100%;
}
img#ceo3 {
display: table;
width: 72%;
max-width: 550px;
margin-left: auto;
}

#actually {
background: #9FA0A0;
}
#actually h2, #actually h3, #actually h4, #actually dt, #intro h4, #company h2 {
font-weight: 900;
}
#actually > div {
background: #fff;
max-width: 960px;
width: 96%;
margin: 0 auto;
}
#actually > div > div {
width: 90%;
margin: 0 auto;
}
#actually dt {
text-align: center;
background: #000;
color: #fff;
}
#actually dd p, #actually h5, #actually dd ul li {
font-weight: 700;
}
#actually dd img {
display: block;
margin: 0 auto;
}
#actually h4 {
text-align: center;
}
#actually h5 {
text-align: center;
}
#actually h5 span {
display: block;
font-weight: 500;
}

#intro > h2 rt {
line-height: 1em;
}
img#oshiro {
display: block;
margin: 0 auto;
}
#intro p {
line-height: 180%;
}
p#name {
text-align: right;
}
#intro h4 {
text-align: center;
}
#intro dt {
color: #9BB6A1;
font-weight: 700;
}
.info h2 {
text-align: center;
border: 3px solid #000;
}

#company h4 {
width: 60%;
max-width: 400px;
margin: 0 auto;
}
#company h6 {
font-weight: 500;
}
#company address {
font-style: normal;
}

#form h2 {
display: block;
font-weight: 500;
background: #9BB6A1;
color: #fff;
text-align: center;
font-weight: 700;
border-radius: 6px;
}
#form > div {
width: 96%;
max-width: 640px;
margin: 0 auto;
}
#form form > ul > li:nth-child(odd) {
background: #EEEEEE;
}
#form ul li h6 span {
display: inline-block;
background: #ff0000;
color: #fff;
}
#form ul li div {
display: flex;
justify-content: space-between;
}
#form input[type="text"], #form input[type="email"], #form textarea, #form select {
display: block;
width: 100%;
background: #fff;
border: 1px solid #4C4948;
border-radius: 0;
}
#form select {
background-image: url(../images/arrow.svg);
background-repeat: no-repeat;
background-position: center right 8px;
background-size: auto 60%;
}
#form ul li div input[type="text"], #form ul li div select {
width: 48%;
}
input#reason {
margin-bottom: 16px;
}
#form p {
border: 1px solid #000;
}
#check {
text-align: center;
}
.submit-btn {
margin: 0 auto;
display: block;
background: #9BB6A1;
color: #fff;
cursor: pointer;
}
.submit-btn[disabled] {
background-color: #ccc;
cursor: not-allowed;
}

#footer {
background: #e1e8e3;
}
#footer h6 {
width: 40%;
max-width: 500px;
margin: 0 auto;
}
#footer h2, #footer p, #footer ul {
width: 90%;
max-width: 640px;
margin: 0 auto;
}
#footer > img {
display: block;
width: 90%;
max-width: 400px;
margin: 0 auto;
}
#footer small {
display: block;
text-align: center;
font-size: 1.4rem;
background: #000;
color: #fff;
padding: 8px 0;
}

#fixed {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
width: 100%;
box-sizing: border-box;
background: #87b994;
padding: 1vw;
}
#fixed li {
width: 50%;
}
#fixed li a {
display: block;
text-align: center;
padding: 20px 0;
font-weight: 900;
line-height: 1;
font-size: 4.5vw;
color: #fff;
}
#fixed li:last-child a {
background: #fff;
color: #87b994;
}
#fixed li a i {
font-size: 0.8em;
padding-right: 8px;
}

.campaign{
position: fixed;
z-index: 18;
}
.campaign.close{
display: none;
}
.campaign__btn{
color: #070707;
display: table;
cursor: pinter;
}
.campaign__btn:hover {
cursor: pinter;
}

#thanks p span {
display: block;
}

@media (max-width: 560px){
#logo {
padding: 10px 0;
width: 60px;
}
.drawer__button {
right: 5%px;
top: 10px;
width: 50px;
height: 50px;
}
.drawer__button > span {
width: 30px;
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 10px));
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transform: translate(-50%, calc(-50% + 10px));
}
.drawer__nav__inner {
width: 100%;
}
.drawer__nav__inner > div p {
font-size: 2.6rem;
padding: 0 0 3px 5px;
margin-bottom: 10px;
}
.drawer__nav__item {
padding-bottom: 16px;
}
.drawer__nav__link {
font-size: 1.8rem;
padding-left: 10px;
}

#hero {
margin-bottom: 130px;
}
#hero h1 {
font-size: 12vw;
padding-bottom: 20px;
}
#hero h2 {
font-size: 4.6vw;
}
#hero a {
padding: 6px 8px;
font-size: 4vw;
}
img#ceo1 {
right: 5%;
bottom: -80px;
}

#lead {
padding-bottom: 40px;
}
#lead ul {
width: 100%;
max-width: 320px;
background: url(../images/arrow.gif) no-repeat center bottom;
background-size: auto 80px;
padding-bottom: 80px;
}

#cando, #works, #voice, #intro, #history, #company, #form {
padding: 20px 0 40px;
}

#faq {
padding: 60px 0;
margin-bottom: 40px;
}

#actually {
margin-bottom: 40px;
}

#footer {
padding-top: 40px;
}
#footer > img {
padding-bottom: 40px;
}

.campaign {
top: 0;
left: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.70);
padding: 0;
display: grid;
place-items: center;
}
.campaign__btn {
font-size: 2.6rem;
display: block;
color: #fff;
padding-bottom: 20px;
}
.campaign > div {
display: block;
width: 80%;
}

#thanks {
padding-bottom: 50px;
}
#thanks img {
padding-bottom: 20px;
}
#thanks p {
font-size: 2rem;
}
#thanks p br {
display: none;
}
#thanks p span {
padding-top: 20px;
font-size: 1.4rem;
}
}

@media (min-width: 561px){
a[href^="tel:"] {
pointer-events: none;
}
br.nobr {
display: none;
}

#logo {
padding: 20px 0;
width: 360px;
}
.drawer__nav__inner {
width: 450px;
margin-left: auto;
}
.drawer__nav__inner > div p {
font-size: 3rem;
padding: 0 0 5px 10px;
margin-bottom: 20px;
}
.drawer__nav__item {
padding-bottom: 20px;
}
.drawer__nav__link {
font-size: 2rem;
padding-left: 10px;
}

#hero h1 {
padding-bottom: 10px;
}
#hero a {
padding: 10px 14px;
}
#hero a br {
display: none;
}
img#ceo1 {
right: 10px;
}

#lead {
padding-bottom: 60px;
}

#cando, #works, #voice, #intro, #history, #company, #form {
padding: 40px 0 60px;
}

#faq {
padding: 80px 0;
margin-bottom: 60px;
}

#actually {
margin-bottom: 60px;
}

#footer {
padding-top: 60px;
}
#footer > img {
padding-bottom: 60px;
}

.campaign{
width: 300px;
bottom: 120px;
right: 5%;
}
.campaign.close{
display: none;
}
.campaign__btn{
font-size: 3rem;
}

#thanks {
padding-bottom: 80px;
}
#thanks img {
padding-bottom: 30px;
}
#thanks p {
text-align: center;
font-size: 3rem;
}
#thanks p span {
padding-top: 40px;
font-size: 1.6rem;
}
}

@media (min-width: 561px) and (max-width: 960px){
.drawer__button {
right: 20px;
top: 18px;
width: 60px;
height: 60px;
}
.drawer__button > span {
width: 40px;
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 12px));
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transform: translate(-50%, calc(-50% + 12px));
}

#hero {
margin-bottom: 190px;
}
#hero h1 {
font-size: 8vw;
}
#hero h2 {
font-size: 4.5vw;
}
#hero a {
font-size: 3vw;
}
img#ceo1 {
bottom: -140px;
}

#lead ul {
width: 480px;
background: url(../images/arrow.gif) no-repeat center bottom;
background-size: auto 120px;
padding-bottom: 120px;
}
}

@media (max-width: 960px){
#lead h3 {
font-size: 5vw;
padding-bottom: 30px;
}
#lead h2 {
font-size: 11vw;
padding-bottom: 20px;
}
#lead ul {
margin: 0 auto 40px;
}
#lead ul li {
padding-bottom: 20px;
}

#cando h2, #voice h2, #actually h2 {
font-size: 7vw;
padding-bottom: 20px;
}
#cando h3 {
font-size: 5.5vw;
padding-bottom: 30px;
}
#cando ul li {
padding-bottom: 40px;
}
#cando ul li img {
padding-bottom: 10px;
}
#cando a, #voice a, #actually a, #form a, #lead a, #works a {
font-size: 5vw;
padding: 10px 0;
}

#works h2 {
font-size: 8vw;
padding-bottom: 20px;
}
#works h3 {
font-size: 5vw;
}
#works img {
padding-bottom: 24px;
}

#faq h2 {
font-size: 6vw;
padding: 16px 0;
margin-bottom: 20px;
}
#faq label h4, .accbox span {
font-size: 5vw;
}
#faq label h4 {
padding-bottom: 10px;
}
.accshow p {
font-size: 16px;
padding-bottom: 30px;
}
.accbox span {
padding-right: 4px;
}

#customer {
width: 98%;
}
#customer .slick-list {
padding: 0 15% 0 0 !important;
}
#voice ul {
padding-bottom: 40px;
}
#voice ul li {
margin-right: 20px;
padding-bottom: 20px;
}
#voice ul li h3 {
padding: 16px 16px 10px 16px;
padding-bottom: 10px;
}
#voice ul li h3 span{
font-size: 5vw;
padding-right: 10px;
}
#voice ul li h3 strong{
font-size: 4vw;
}
#voice ul li h3 img {
width: 60px;
margin-right: 10px;
}
#voice ul li p {
font-size: 1.6rem;
padding: 0 16px 16px 16px;
}
img#ceo3 {
padding-bottom: 40px;
}

#actually {
padding: 2vw 0;
}
#actually > div {
padding: 40px 0;
}
#actually h3 {
font-size: 4vw;
padding-bottom: 30px;
}
#actually dt {
font-size: 6vw;
padding: 4px 0;
margin-bottom: 16px;
}
#actually dd {
padding-bottom: 30px;
}
#actually dd ul {
padding-bottom: 10px;
}
#actually dd ul li {
font-size: 1.6rem;
padding-bottom: 6px;
}
#actually dd img {
width: 60%;
}
#actually dd p {
padding-top: 20px;
}
#actually dd p img {
padding-top: 10px;
}
#actually h4 {
font-size: 6.5vw;
padding-bottom: 20px;
}
#actually h5 {
font-size: 7.5vw;
padding: 10px 0 20px;
}
#actually h5 span{
font-size: 5vw;
}

#intro > h2 {
font-size: 11vw;
padding-bottom: 30px;
}
#intro h2 span {
font-size: 7vw;
}
#intro h2 rt {
font-size: 4vw;
}
img#oshiro {
width: 90%;
padding-bottom: 30px;
}
#intro h3 {
padding-bottom: 20px;
}
p#name {
padding: 10px 0 40px;
}
p#name img {
padding-top: 4px;
width: 80px;
}
#intro h4 {
font-size: 8vw;
padding-bottom: 20px;
}
#intro dt {
font-size: 1.8rem;
padding-bottom: 10px;
}
#intro dd {
padding-bottom: 30px;
}
.info h2 {
font-size: 7vw;
padding: 8px 0;
margin-bottom: 20px;
}

#history ul {
padding-bottom: 20px;
}
#history ul li {
padding-bottom: 10px;
}
#history ul li span{
padding-right: 10px;
}
#history img {
padding-bottom: 30px;
}

#company h4 {
padding-bottom: 40px;
}
#company h2, #footer h2 {
font-size: 6.5vw;
padding-bottom: 20px;
}
#company h6 {
font-size: 1.3rem;
padding-bottom: 20px;
}
#company address, #footer p {
font-size: 4vw;
padding-bottom: 10px;
}
#company > img, #company iframe {
padding-bottom: 30px;
}
#company iframe {
height: 40vh;
}

#form h2 {
padding: 10px 0;
margin-bottom: 20px;
}
#form form > ul > li {
padding: 20px 5%;
}
#form ul li h6 {
font-size: 4vw;
padding-bottom: 10px;
}
#form ul li h6 span {
font-size: 3vw;
padding: 4px 8px;
margin-right: 5px;
}
#form input[type="text"], #form input[type="email"], #form textarea, #form select {
padding: 6px;
font-size: 16px;
margin-bottom: 20px;
}
#form ul li ul {
padding-bottom: 10px;
}
#form ul li ul li {
padding-bottom: 10px;
}
#form label {
padding-left: 5px;
}
#form textarea {
height: 30vh;
}
#form p {
font-size: 14px;
padding: 10px;
margin-bottom: 20px;
}
#check {
padding-bottom: 50px;
}
.submit-btn {
display: block;
padding: 10px 30px;
font-size: 6vw;
}

#footer h6 {
padding-bottom: 30px;
}
#footer ul {
padding: 20px 0;
}
#footer ul li {
font-size: 4vw;
padding-bottom: 16px;
}
}

@media (min-width: 961px){
#hero {
margin-bottom: 140px;
}
#hero h1 {
font-size: 7rem;
}
#hero h2 {
font-size: 3.6rem;
}
#hero a {
font-size: 3rem;
}
img#ceo1 {
bottom: -100px;
}

#lead h3 {
font-size: 4rem;
padding-bottom: 40px;
}
#lead h2 {
text-align: center;
font-size: 4.5rem;
padding-bottom: 30px;
}
#lead h2 br {
display: none;
}
#lead ul {
display: flex;
justify-content: space-between;
margin: 0 auto 60px;
background: url(../images/arrow.gif) no-repeat center bottom;
background-size: auto 70px;
padding-bottom: 120px;
}
#lead ul li {
width: 32%;
}

#cando h2, #voice h2, #actually h2 {
font-size: 5rem;
padding-bottom: 30px;
}
#cando h3 {
font-size: 4rem;
padding-bottom: 40px;
}
#cando ul li {
padding-bottom: 50px;
}
#cando a, #voice a, #actually a, #form a, #lead a, #works a {
font-size: 3rem;
padding: 16px 0;
}

#works h2 {
font-size: 5rem;
padding-bottom: 30px;
}
#works h3 {
font-size: 4rem;
}
#works img {
padding-bottom: 40px;
}

#faq h2 {
font-size: 5rem;
padding: 20px 0;
margin-bottom: 30px;
}
#faq label h4, .accbox span {
font-size: 3rem;
}
#faq label h4 {
padding-bottom: 16px;
}
.accshow p {
font-size: 2rem;
padding-bottom: 40px;
}
.accbox span {
padding-right: 8px;
}

#customer {
width: 90%;
}
#customer .slick-list {
padding: 0 30% 0 0 !important;
}
#voice ul {
padding-bottom: 60px;
}
#voice ul li {
margin-right: 30px;
padding-bottom: 40px;
}
#voice ul li h3 {
padding: 20px 20px 16px 20px;
}
#voice ul li h3 span{
font-size: 3rem;
padding-right: 10px;
}
#voice ul li h3 strong{
font-size: 2.5rem;
}
#voice ul li h3 img {
width: 80px;
margin-right: 20px;
}
#voice ul li p {
padding: 0 20px 20px 20px;
font-size: 2rem;
}
img#ceo3 {
padding-bottom: 50px;
}

#actually {
padding: 60px 0;
}
#actually > div {
padding: 60px 0;
}
#actually h2 {
text-align: center;
}
#actually h2 br {
display: none;
}
#actually h3 {
text-align: center;
font-size: 3.5rem;
padding-bottom: 40px;
}
#actually dt {
font-size: 3rem;
padding: 10px 0;
margin-bottom: 20px;
}
#actually dd {
padding-bottom: 50px;
}
#actually dd ul {
display: table;
margin: 0 auto;
padding-bottom: 20px;
}
#actually dd ul li {
font-size: 2rem;
padding-bottom: 10px;
}
#actually dd img {
width: 300px;
}
#actually dd p {
text-align: center;
padding-top: 30px;
}
#actually dd p img {
padding-top: 20px;
}
#actually h4 {
font-size: 5rem;
padding-bottom: 30px;
}
#actually h5 {
font-size: 5rem;
padding: 20px 0 30px;
}
#actually h5 span{
font-size: 3rem;
}

#intro > h2 {
font-size: 10rem;
padding-bottom: 60px;
text-align: center;
}
#intro h2 span {
font-size: 6rem;
}
#intro h2 rt {
font-size: 3rem;
}
img#oshiro {
width: 600px;
padding-bottom: 50px;
}
#intro h3 {
font-size: 3rem;
padding-bottom: 30px;
}
#intro p {
font-size: 2.2rem;
}
p#name {
padding: 20px 0 60px;
}
p#name img {
padding-top: 10px;
width: 200px;
}
#intro h4 {
font-size: 6rem;
padding-bottom: 30px;
}
#intro dt {
font-size: 2.2rem;
padding-bottom: 16px;
}
#intro dd {
font-size: 2rem;
padding-bottom: 40px;
}
.info h2 {
font-size: 4rem;
padding: 12px 0;
margin-bottom: 30px;
}

#company h4 {
padding-bottom: 60px;
}
#company h2, #footer h2 {
font-size: 5rem;
padding-bottom: 30px;
}
#company h6 {
font-size: 2.2rem;
padding-bottom: 30px;
}
#company address, #footer p {
font-size: 3rem;
padding-bottom: 20px;
}
#company > img, #company iframe {
padding-bottom: 40px;
}
#company iframe {
height: 600px;
}

#form h2 {
padding: 20px 0;
margin-bottom: 30px;
}
#form form > ul > li {
padding: 20px;
}
#form ul li h6 {
font-size: 2.4rem;
padding-bottom: 20px;
}
#form ul li h6 span {
font-size: 1.8rem;
padding: 6px 12px;
margin-right: 10px;
}
#form input[type="text"], #form input[type="email"], #form textarea, #form select {
padding: 10px;
font-size: 2rem;
}
#form ul li ul {
padding-bottom: 20px;
}
#form ul li ul li {
font-size: 2rem;
padding-bottom: 16px;
}
#form label {
padding-left: 8px;
}
#form textarea {
height: 200px;
}
#form p {
font-size: 1.6rem;
padding: 16px;
margin-bottom: 30px;
}
#check {
padding-bottom: 60px;
}
.submit-btn {
display: block;
padding: 16px 40px;
font-size: 2.6rem;
}

#footer h6 {
padding-bottom: 40px;
}
#footer ul {
padding: 30px 0;
}
#footer ul li {
font-size: 2.4rem;
padding-bottom: 20px;
}
}

@media (min-width: 961px) and (max-width: 1280px){
.drawer__button {
width: 80px;
height: 80px;
}
.drawer__button > span {
width: 50px;
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 16px));
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transform: translate(-50%, calc(-50% + 16px));
}
}

@media (min-width: 1281px){
#logo {
width: 520px;
}
.drawer__button {
width: 100px;
height: 100px;
}
.drawer__button > span {
width: 60px;
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 16px));
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer__button > span:last-child {
transform: translate(-50%, calc(-50% + 16px));
}

#hero h1 {
font-size: 11rem;
}
#hero h2 {
font-size: 5.5rem;
}
#hero a {
font-size: 4.5rem;
}
img#ceo1 {
max-width: 500px;
}
}