@charset "utf-8";
/* root コーディング前にここを入力してください
--------------------------------------------------------------------*/
:root {
--defaultFontSize:1.6rem; /*デフォルトで使うfontsize*/
--defaultFontColor:#231815; /*デフォルトで使うfontcolor*/
--innerSize:1300px; /*.innerのwidth(コンテンツの表示サイズ)*/
--MaxinnerSize:90%; /*.innerのmax-width(コンテンツの表示サイズ)*/
--MTS:.3s; /*メインで使うtransitionの時間*/
}
/* margin,padding
--------------------------------------------------------------------*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
div,
p,
pre,
address,
blockquote,
ul,
ol,
dl,
dt,
dd,
form,
fieldset,
header,
nav,
footer,
figure,
section,
article {
display: block;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* font
--------------------------------------------------------------------*/
html {
overflow-y : scroll;
height : 100%;
font-size : 62.5%;
}
body{
word-wrap : break-all;
overflow-wrap : break-word;
}
address,
em {
font-style: normal;
}
/* list
--------------------------------------------------------------------*/
ul,ol {
list-style-type: none;
}
/* img
--------------------------------------------------------------------*/
img {
border: none;
vertical-align: bottom;
max-width: 100%;
}
/* a
--------------------------------------------------------------------*/
a {
text-decoration: none;
color: var(--defaultFontColor);
}
a img{
transition: var(--MTS);
}
a:hover img{
opacity: .7;
}
/* form
--------------------------------------------------------------------*/
input,
select,
textarea,
button {
font-size: inherit;
line-height: inherit;
}
button {
cursor: pointer;
}
/* table
--------------------------------------------------------------------*/
table,
thead,
tbody,
tfoot,
tr,
th,
td,
caption,
col,
colgroup {
text-align: inherit;
line-height: inherit;
font-size: 100%;
}
table {
display: table;
border-collapse: collapse;
border-spacing: 0;
}
thead {
display: table-header-group;
}
tbody {
display: table-row-group;
}
tfoot {
display: table-footer-group;
}
tr {
display: table-row;
}
th,
td {
display: table-cell;
}
caption {
display: table-caption;
}
col {
display: table-column;
}
colgroup {
display: table-column-group;
}
/* clearfix
--------------------------------------------------------------------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}/*IE7用*/
/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix { display:block;}
/* End hide from IE-mac */
/* heading
--------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: var(--defaultFontSize);
font-weight:300;
}
h1 strong,
h1 em,
h2 strong,
h2 em,
h3 strong,
h3 em,
h4 strong,
h4 em,
h5 strong,
h5 em,
h6 strong,
h6 em {
font-weight: inherit;
_font-weight: expression(this.parentNode.currentStyle.fontWeight);
*font-weight: expression(this.parentNode.currentStyle.fontWeight);
}
/* margin
--------------------------------------------------------------------*/
/** margin-top **/
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}
.mt90{margin-top: 90px;}
.mt100{margin-top: 100px;}
/** margin-left **/
.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml60{margin-left: 60px;}
.ml70{margin-left: 70px;}
.ml80{margin-left: 80px;}
.ml90{margin-left: 90px;}
.ml100{margin-left: 100px;}
/** margin-bottom **/
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}
/** margin-right **/
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr60{margin-right: 60px;}
.mr70{margin-right: 70px;}
.mr80{margin-right: 80px;}
.mr90{margin-right: 90px;}
.mr100{margin-right: 100px;}
/* ポップアップ
--------------------------------------------------------------------*/
.popup000Bg{
content: "";
display: block;
min-width: 100vw;
min-height: 100vh;
background: #000000b2;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow-y: scroll;
z-index: -1;
}
.HydeContents{
width: 1300px;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%,-50%);
pointer-events: none;
transition: opacity var(--MTS);
}
.HydeContents.openPopup {
max-width: 90%;
opacity: 1;
pointer-events: all;
}
.popupContents{
position: relative;
z-index: 101;
}
.scrollOff{
overflow: hidden;
}
/* update
--------------------------------------------------------------------*/
#header .navlistItem.update .updateMark{
display: block;
width: 15px;
aspect-ratio: 1 / 1;
background: url(../image/common/header_update.png) no-repeat;
background-size: cover;
position: absolute;
top: -17px;
left: 50%;
transform: translateX(-50%);
}
#header .navlist .navlistrRecruit.update .updateMark{
display: block;
width: 30px;
aspect-ratio: 1 / 1;
background: url(../image/common/header_update.png) no-repeat;
position: absolute;
top: 50%;
right: -15px;
transform: translateY(-50%);
}
@media screen and (max-width: 768px){
#header .navlistItem.update .updateMark{
width: 20px;
position: static;
transform: translateX(0);
margin-left: 5px;
}
#header .navlist .navlistrRecruit.update .updateMark{
position: static;
transform: translateY(0);
margin-left: 10px;
}
}
/* メイン
--------------------------------------------------------------------*/
*{
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: var(--defaultFontSize);
line-height: 1.6;
color: var(--defaultFontColor);
}
/*-------------------------------------------------------------------
wrap
-------------------------------------------------------------------*/
#top #wrap{
margin-top: 0;
}
#wrap {
margin-top: 54px;
}
.relaWrap {
position: relative;
}
.absLink {
position: absolute;
top: -54px;
left: 0;
width: 0;
height: 0;
pointer-events: none;
}
/*-------------------------------------------------------------------
header
-------------------------------------------------------------------*/
#header {
height: 54px;
position: fixed;
width: 100% ;
top: 0;
background: #ffffffE4;
z-index: 99;
padding: 7px 0;
}
#header .headerContents{
display: flex;
justify-content: space-between;
align-items: end;
padding: 0 2.5%;
}
#header .headerContents h1 img{
max-height: 30px;
}
#header .navlist{
display: flex;
align-items: end;
margin-left: 30px;
}
#header .navlist .navlistItem:first-of-type{
margin-right: 75px;
}
#header .navlistItem .navlistAnchor{
padding: 0 0 11px 0;
position: relative;
line-height: 1;
white-space: nowrap;
vertical-align: baseline;
cursor: pointer;
}
#header .navlistItem .navlistAnchor::after{
content: "";
width: 7px;
height: 0px;
position: absolute;
background: #00c4ff;
left: 50%;
bottom: -7px;
transform: translateX(-50%);
transition: var(--MTS)
}
#header .navlistItem .navlistAnchor:hover:after,
#header .navlistItem.open .navlistAnchor::after{
height: 14px;
}
#header .navlistItem .navlistAccordion{
display: none;
min-width: 860px;
max-width: 100%;
position: absolute;
right: 50px;
transform: translateY(6.5px);
background: #fff;
line-height: 1;
padding: 25px 75px 45px 75px;
}
#header .navlistItem.open .navlistAccordion{
z-index: 101;
}
#header .navlistAccordion .titleText{
font-size: 2.2rem;
margin-bottom: 18px;
}
#header .navlistAccordion .navList a{
display: block;
color: #003399;
margin-bottom: 12px;
padding-left: 26px;
position: relative;
white-space: nowrap;
vertical-align: baseline;
}
#header .navlistAccordion .navList li:last-of-type a{
margin-bottom: 0;
}
#header .navlistAccordion .navList a::before{
content: "＞";
margin-right: 1rem;
margin-left: 0rem;
transition: var(--MTS);
position: absolute;
left: 0;
}
#header .navlistAccordion .navList a:hover:before{
left: 10px;
}
#header .navlistAccordion .flex .navList{
margin-right: 100px;
}
#header .navlistAccordion .flex .navList:last-of-type{
margin-right: 0;
}
#header .navlist .navlistrRecruit{
position: relative;
}
#header .navlistrRecruit .navlistrRecruitItem{
height: 40px;
display: flex;
align-items: center;
background: #00c4ff;
border-radius: 9999px;
overflow: hidden;
padding: 0 25px 0 0;
margin-left: 45px;
font-size: 2.6rem;
font-weight: 300;
letter-spacing: .2em;
line-height: 1;
color: #fff;
white-space: nowrap;
vertical-align: baseline;
}
#header .navlistrRecruitItem .enText{
height: 100%;
background: #003399;
padding: 0 25px;
border-radius: 9999px;
margin: 0 25px 0 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0em;
color: #8099cc;
}
#header .headerContents .hamburgerBtn{
width: 40px;
min-width: 40px;
aspect-ratio: 1 / 1;
position: relative;
margin-left: 50px;
}
#header .headerContents .hamburgerBtn span{
display: block;
width: 100%;
height: 3px;
background: #0b3190;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
transition: var(--MTS);
}
#header .headerContents .hamburgerBtn span:first-of-type{
top: calc(50% - 12px);
}
#header .headerContents .hamburgerBtn span:last-of-type{
top: calc(50% + 12px);
background: #00a7ea;
}
#header .headerContents.spopen .hamburgerBtn span:first-of-type{
top: 50%;
left: 0;
transform: rotate(45deg) translate(0% , -50%);
}
#header .headerContents.spopen .hamburgerBtn span:nth-of-type(2){
width: 0%;
}
#header .headerContents.spopen .hamburgerBtn span:last-of-type{
top: 50%;
left: 0;
transform: rotate(-45deg) translate(0%, -50%);
}
#header .navlist .topPageBtn a{
width: 100%;
display: block;
padding: 35px 5%;
background: #00c4ff;
font-size: 2.2rem;
line-height: 1;
color: #0b318f;
position: relative;
border: #000 1px solid;
}
#header .navlist .topPageBtn a::after{
content: "";
display: block;
width: 20px;
aspect-ratio: 2 / 3;
background: url(../image/common/header_arrow.png);
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
#header .recruitContents{
max-width: 100%;
padding: 60px 5% 100px;
}
#header .recruitContents .title{
font-size: 8.5rem;
line-height: 1;
color: #00c4ff;
margin-bottom: 20px;
}
#header .recruitContents .recruitContentsFlex{
display: flex;
align-items: flex-end;
}
#header .recruitContents .recruitContentsFlex.sp{
display: none;
}
#header .recruithamburgerBtn{
display: none;
background: #00c4ff;
border: 1px #fff solid;
position: fixed;
top: 53.5px;
right: 5%;
z-index: 100;
}
#recruit #header .recruithamburgerBtn{
display: block;
}
#header .recruithamburgerBtn a{
padding: 0 15px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
flex-flow: column;
}
#header .recruithamburgerBtn .recruithamburgerTitle{
font-size: 1.9rem;
line-height: 1.2;
color: #fff;
}
#header .recruithamburgerBtn .recruithamburger{
width: 45px;
min-width: 45px;
aspect-ratio: 1 / 1;
position: relative;
margin: 0 auto;
}
#header .recruithamburgerBtn .recruithamburger span{
display: block;
width: 100%;
height: 3px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
transition: var(--MTS);
}
#header .recruithamburgerBtn .recruithamburger span:first-of-type{
top: calc(50% - 10px);
}
#header .recruithamburgerBtn .recruithamburger span:last-of-type{
top: calc(50% + 10px);
}
#header .recruithamburgerBtn .onBtn span:first-of-type{
top: 50%;
left: 0;
transform: rotate(45deg) translate(0% , -50%);
}
#header .recruithamburgerBtn .onBtn span:nth-of-type(2){
width: 0%;
}
#header .recruithamburgerBtn .onBtn span:last-of-type{
top: 50%;
left: 0;
transform: rotate(-45deg) translate(0%, -50%);
}
@media screen and (max-width: 1440px){
#header .headerContents{
padding: 0;
}
}
@media screen and (max-width: 1024px){
#header .headerContents{
align-items: center;
}
#header .navlistItem .navlistAccordion{
min-width: auto;
width: 100%;
max-width: 100%;
right: 0;
padding: 25px 35px 45px 35px;
}
#header .navlistAccordion .flex .navList{
margin-right: 9%;
}
#header .navlist .navlistItem:first-of-type{
margin-right: 30px;
}
#header .navlistrRecruit .navlistrRecruitItem{
margin-left: 25px;
}
#header .recruitContents .title{
font-size: 6.5rem;
}
}
@media screen and (max-width: 768px){
.popup000Bg{
display: none;
}
#header .navlist{
display: none;
width: 100%;
margin-left: 0;
position: absolute;
top: 54px;
left: 0;
height: calc(100vh - 54px);
overflow: auto;
}
#header .headerContents h1 img{
max-height: unset;
}
#header .navlist .navlistItem:first-of-type{
margin-right: 0;
}
#header .navlistItem .navlistAnchor{
display: flex;
flex-flow: row-reverse;
justify-content: start;
padding: 20px 5%;
background: #0b318f;
font-size: 2rem;
color: #fff;
border: #fff 1px solid;
}
#header .navlistItem .navlistAnchor::after,
#header .navlistItem .navlistAnchor::before{
content: "";
width: 26px;
height: 4px;
position: absolute;
background: #fff;
top: 50%;
bottom: auto;
left: auto;
right: 5%;
transform: translateY(-50%);
transition: 0s;
}
#header .navlistItem .navlistAnchor:hover:after{
height: 4px;
}
#header .navlistItem.open .navlistAnchor::after {
height: 0px;
}
#header .navlistItem .navlistAnchor::after{
transform: translateY(-50%) rotate(90deg);
}
#header .navlistItem .navlistAccordion{
position: static;
transform: translateY(0px);
padding: 0;
}
#header .navlistItem .navlistAccordion .flex{
display: block;
}
#header .navlistAccordion .titleText{
display: none;
}
#header .navlistAccordion .flex .navList{
display: flex;
flex-wrap: wrap;
margin-right: 0;
}
#header .navlistAccordion .flex .navList.pc{
display: none
}
#header .navlistAccordion .navList li{
width: 50%;
padding: 25px 14px;
border: #0066c4 1px solid;
display: flex;
align-items: center;
}
#header .navlistAccordion .navList .bigBtn{
width: 100%;
font-size: 1.8rem
}
#header .navlistAccordion .navList li:nth-of-type(2n){
border-left: 0.5px;
}
#header .navlistAccordion .navList a{
margin-bottom: 0;
white-space: normal;
vertical-align: baseline;
}
#header .navlist .navlistrRecruit{
display: flex;
flex-flow: row-reverse;
justify-content: start;
background: linear-gradient(90deg, #00c4ff, #0066c4);
border: #000 solid 1px;
padding: 25px 5%;
}
#header .navlistrRecruit .navlistrRecruitItem{
height: auto;
flex-flow: column-reverse;
align-items: start;
border-radius: 0;
margin-left: 0;
padding: 0;
font-size: 2.8rem;
letter-spacing: normal;
background: none;
}
#header .navlistrRecruitItem .enText {
height: auto;
background: none;
padding: 0;
border-radius: 0;
margin: 10px 0 0 0;
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 0em;
color: #fff;
}
#recruit #header .recruithamburgerBtn{
display: none;
}
#header #recruitContents{
opacity: 1;
position: static;
width: auto;
transform: none;
pointer-events: all;
}
#header .recruitContents{
width: 100%;
max-width: 100%;
padding: 30px 5% 100px;
background: #333333e4;
}
#header .recruitContents .recruitContentsFlex{
flex-wrap: wrap
}
#header .recruitContents .recruitContentsFlex figure{
width: 100%;
}
#header .recruitContents .recruitContentsFlex figure img{
width: 100%;
}
#header .recruitContents .recruitContentsFlex .wsSize{
width: 25%;
}
#header .recruitContents .recruitContentsFlex .wmSize{
width: 50%;
}
#header .recruitContents .recruitContentsFlex .wlSize{
width: 75%;
}
#header .recruitContents .recruitContentsFlex.sp{
display: flex;
}
#header .recruitContents .recruitContentsFlex.pc{
display: none;
}
#header .recruitContents .title{
font-size: 3.2rem;
text-align: center;
}
}
/*-------------------------------------------------------------------
footer
--------------------------------------------------------------------*/
#footer {
background-color: #F2F2F2;
padding-top: 50px;
}
#footer .inside {
width: 90%;
margin: 0 auto;
}
#footer span.blue {
color: #002163;
}
#footer h2 {
font-weight: 500;
margin-top: 20px;
margin-bottom: 30px;
}
#footer h3 {
font-size: 2.0rem;
font-weight: 500;
margin-right: 50px;
}
#footer .links {
margin-bottom: 100px;
}
#footer .links .left {
width: 75%;
}
#footer .links .left .linksList .toplink {
font-size: 1.8rem;
margin-bottom: 20px;
}
#footer .links .left .linksList .toplink a {
position: relative;
}
#footer .links .left .linksList .toplink a::after {
position: absolute;
content: '';
background-color: #000;
width: 0;
height: 2px;
bottom: 0;
left: 0;
transition: all .3s;
}
#footer .links .left .linksList .toplink a:hover::after {
width: 100%;
transition: all .3s;
}
#footer .links .left .linksList .underLinks:first-of-type {
margin-right: 50px;
}
#footer .links .left .linksList .underLinks .parent.top {
margin-bottom: 20px;
}
#footer .links .left .linksList .underLinks .parent a {
position: relative;
}
#footer .links .left .linksList .underLinks .parent a::after {
position: absolute;
content: '＞';
right: -2.0em;
transition: all .3s;
}
#footer .links .left .linksList .underLinks .parent a:hover::after {
right: -2.5em;
transition: all .3s;
}
#footer .links .left .linksList .underLinks .sub {
margin-top: 5px;
padding-left: 1em;
}
#footer .links .left .linksList .underLinks .sub li {
padding-left: 1.1em;
text-indent: -1.1em;
}
#footer .links .left .linksList .underLinks .sub li.bottom20 {
margin-bottom: 20px;
}
#footer .links .left .linksList .underLinks .sub li a {
position: relative;
}
#footer .links .left .linksList .underLinks .sub li a::after {
position: absolute;
content: '';
background-color: #000;
width: 0;
height: 2px;
bottom: 0;
left: 1em;
transition: all .3s;
}
#footer .links .left .linksList .underLinks .sub li a:hover::after {
width: calc(100% - 1.0em);
transition: all .3s;
}
#footer .links .right ul li {
margin-bottom: 10px;
}
#footer .links .right ul li:last-of-type {
margin-bottom: 0;
}
#footer .links .right ul li a {
font-size: 2.0rem;
position: relative;
}
#footer .links .right ul li a::before {
position: absolute;
content: '';
background-color: #000;
width: 0;
height: 2px;
bottom: 0;
left: 0;
transition: all .3s;
}
#footer .links .right ul li a:hover::before {
width: 100%;
transition: all .3s;
}
#footer .links .right ul li a::after {
position: absolute;
content: '';
width: 21px;
height: 21px;
background-image: url(../image/common/window_icon.png);
top: 50%;
right: -1.5em;
transform: translateY(-50%);
}
#footer .policy {
font-size: 1.8rem;
text-align: center;
}
#footer .policy a {
position: relative;
}
#footer .policy a::after {
position: absolute;
content: '';
background-color: #000;
width: 0;
height: 2px;
bottom: 0;
left: 0;
transition: all .3s;
}
#footer .policy a:hover::after {
width: 100%;
}
#footer .footborder {
width: 100%;
height: 16px;
background-image: url(../image/common/footer_border.png);
background-repeat: repeat-x;
margin-top: 10px;
}
#footer .copy {
font-size: 1.3rem;
text-align: center;
padding: 10px 0;
}
@media screen and (max-width: 1300px) {
#footer .links .linksItem {
display: block;
}
#footer .links .left {
display: block;
width: 60%;
}
#footer h3 {
margin-right: 0;
margin-bottom: 30px;
}
#footer .links .left .linksList {
padding-left: 20px;
}
#footer .links .left .linksList .underLinks:first-of-type {
margin-right: 0;
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
#footer .inside {
width: 100%;
}
#footer .footerLogo {
text-align: center;
}
#footer h2 {
text-align: center;
}
#footer .links {
display: block;
margin-bottom: 50px;
}
#footer .links .left {
display: none;
}
#footer .links .right ul {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
#footer .links .right ul li {
width: 40%;
}
#footer .links .right ul li:nth-of-type(n + 3) {
margin-bottom: 0;
}
#footer .links .right ul li a {
font-size: 1.6rem;
}
#footer .links .right ul li a::after {
right: -2.0em;
}
}
@media screen and (max-width: 450px) {
#footer .links .right ul li {
width: 100%;
text-align: center;
}
#footer .links .right ul li:nth-of-type(3) {
margin-bottom: 10px;
}
}
/*-------------------------------------------------------------------
inner
-------------------------------------------------------------------*/
.inner{
width: var(--innerSize);
max-width: var(--MaxinnerSize);
margin: 0 auto;
}
.inside {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
/*-------------------------------------------------------------------
text-align
-------------------------------------------------------------------*/
.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.alignRight {
text-align: right;
}
/*-------------------------------------------------------------------
format
--------------------------------------------------------------------*/
.pc {
display:block;
}
.pcIn {
display:inline;
}
.sp {
display:none;
}
.spIn {
display:none;
}
.indText {
text-indent: -1.1em;
padding-left: 1.1em;
}
.noWrap{
white-space: nowrap;
vertical-align: baseline;
}
.flex{
display: flex;
}
.ccllist {
padding-left: 1.1em;
text-indent: -1.1em;
}
.noteflex {
font-size: 1.2rem;
letter-spacing: normal;
line-height: 1.2;
display: flex;
}
.noteflex .kome {
flex-shrink: 0;
}
@media screen and (max-width: 768px){
.pc {
display:none;
}
.pcIn {
display:none;
}
.sp {
display:block;
}
.spIn {
display:inline;
}
.noWrapSP{
white-space: nowrap;
vertical-align: baseline;
}
}
/*-------------------------------------------------------------------
iOSでのデフォルトスタイルをリセット
--------------------------------------------------------------------*/
input[type="submit"],
input[type="reset"],
input[type="button"] {
border-radius: 0;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="reset"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="reset"]::-focus,
input[type="button"]::focus {
outline-offset: -2px;
}
*:focus {
outline: none;
}
html {
-webkit-text-size-adjust: 100%;
}
/*-------------------------------------------------------------------
共通パーツ
--------------------------------------------------------------------*/
.recruitBtn{
width: 440px;
max-width: 100%;
display: block;
background-color: #003399;
color: #fff;
border-radius: 9999px;
font-size: 2rem;
line-height: 1;
text-align: center;
position: relative;
padding: 25px 30px;
/*
に"recruitBtn"のclassを振ってください
色やフォントサイズなどを変更したい場合はさらに
classを振って上書きしてください。
*/
}
.detailBtn{
width: 315px;
max-width: 100%;
display: block;
border: 2px solid #fff;
color: #fff;
font-size: 2rem;
line-height: 1;
text-align: center;
position: relative;
padding: 20px 0;
/*
に"detailBtn"のclassを振ってください
色やフォントサイズなどを変更したい場合はさらに
classを振って上書きしてください。
*/
}
.recruitBtn::after,
.detailBtn::after{
content: "→";
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 15px;
font-size: 3.6rem;
font-weight: 300;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
transition: var(--MTS);
}
.recruitBtn:hover:after,
.detailBtn:hover:after{
right: 20px;
}
@media screen and (max-width: 768px) {
.detailBtn {
font-size: 1.8rem;
padding: 15px 0;
width: 250px;
}
.recruitBtn::after,
.detailBtn::after {
right: 20px;
}
}
@media screen and (max-width: 425px) {
#mainVisual .leftContainer .recruitBtn, #mainVisual .leftContainer .careerBtn{
font-size: 1.8rem;
}
.recruitBtn::after, .detailBtn::after{
font-size: 2.4rem;
}
}
@media screen and (max-width: 375px) {
#mainVisual .leftContainer .recruitBtn, #mainVisual .leftContainer .careerBtn{
font-size: 1.6rem;
padding: 25px 15px;
}
.recruitBtn::after, .detailBtn::after{
font-size: 2rem;
right: 10px;
}
}