/*------------------------------------------------- Recruit site ---------------------------------------------------*/ html{ font-size: 62.5%; box-sizing: border-box;} body{ height: 100%; margin: 0; padding: 0; font-size:1.6rem;/* 16px*/ line-height: 1.8; font-family: sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-animation: fadeIn 1.5s ease 0s 1 normal; animation: fadeIn 1.5s ease 0s 1 normal; } @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;}} @-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;}} /*------------------------------------------------- logo color blue - #0096df dark blue - #0068b6 ---------------------------------------------------*/ /*------------------------------------------------- fonts ---------------------------------------------------*/ /*@font-face { font-family: 'topSectionFont'; src: url(../fonts/Oswald-Regular.ttf);}*/ /*------------------------------------------------- elements ---------------------------------------------------*/ h2 { width: 100%; display: block; margin: 0 0 1em; font-size: 1em; line-height: 100%; vertical-align: bottom; box-sizing: border-box;} h2 a { padding: .8em 0 0 12px; border-left: 10px solid #ff8e54; display: block; transition: .3s;} h2 a:hover { color: #000; background: #f0f0f0; transition: .3s;} b, strong, .bold{ font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;} br.pc { display: inline;} @media only screen and (max-width: 769px) { br.pc { display: none;}} .pc-br-sp-space {} .pc-br-sp-space:after { content: '\a'; white-space: pre;} @media only screen and (max-width: 769px) { .pc-br-sp-space:after { content: "　";}} sup { font-size: 1.5em;}/* maru R */ /*------------------------------------------------- Link ---------------------------------------------------*/ a { transition: color .3s; color: #333; text-decoration: none;} a:visited { color: #333;} a:hover, a:active { color: #2097d3; outline: 0;} a:focus { outline: /*thin dotted #999*/ none;} /*------------------------------------------------- line ---------------------------------------------------*/ hr.gline, hr.wline { margin: 5px 0; height: 1px; border-width: 1px 0px 0px 0px; border-style: solid; clear: both;} hr.gline { border-color: #ccc;} hr.wline { border-color: #fff;} /*------------------------------------------------- btn ---------------------------------------------------*/ /*p.btn-link { margin: 1em auto; text-align: center; display: block;} p.btn-link a { width: auto; margin: 0 auto; padding: .4em 4em .3em; color: #ff8e54; font-size: .9em; font-weight: bold; border: 2px solid #ff8e54; border-radius: 1.8em; display: inline-block; box-sizing: border-box; transition: .3s;} p.btn-link a:hover { color: #fff; background: #ff8e54; transition: .3s;}*/ p.simple-center-link { margin: 30px auto 0; text-align: center; display: block;} p.simple-center-link a { width: auto; margin: 0 auto; padding: 10px 20px 10px 30px; color: #545454; font-size: 95%; font-weight: bold; display: inline-block; box-sizing: border-box; transition: .3s;} p.simple-center-link a:after { content: '>'; padding-left: 15px;} p.simple-center-link a:hover { color: #000; background: #ececec; transition: .3s;} /*------------------------------------------------- arrow ---------------------------------------------------*/ .arr-up { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 18px solid #ccc; } .arr-right { width: 0; height: 0; border-left: 18px solid #ccc; border-top: 15px solid transparent; border-bottom: 15px solid transparent;} .arr-left { width: 0; height: 0; border-top: 15px solid transparent; border-right: 18px solid #ccc; border-bottom: 15px solid transparent;} .arr-down { width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 18px solid #ccc;} /*------------------------------------------------- Header ---------------------------------------------------*/ #header { width: 100%; height: 120px; margin: 0; padding: 0; background-color: #fff; position: fixed; z-index: 11; transition: .3s;} #headerInner { width: 100%; /*max-width: 1100px;*/ height: 120px; margin: 0 auto; padding: 5px 1% 0; text-align: left; position: relative; box-sizing: border-box; /*transition: .3s;*/} #headerInner:after { content:''; display: block; clear: both; } /* logo */ #header p#headerLogo { width: /*310px*/ /*240px*/ 446px; height: auto; margin: 0 0 0; padding: 0; position: absolute; bottom: 6px; left: min(2%, 30px); display: inline-block; transition: 0.3s; } #header p#headerLogo img { width: 100%; height: auto; padding: 0;} #header p#headerLogo a { } #header p#headerLogo a.logomarkLink { width: 100px; display: block;} #header p#headerLogo a.logotypeLink { width: 320px; height: auto; padding-left: 25px; position: absolute; left: 100px; bottom: 5px; display: block;} /*#header p#headerLogo a:hover { filter:alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; opacity:0.70; transition: .3s;}*/ /* logo recruit */ #header p#headerLogo span { white-space: nowrap; line-height: 1; display: block; } /* logotext recruit (seo) */ #header p#headerLogo span.logoText { clip-path: inset(100%); width: auto; font-size: 24px; font-family: "M PLUS 1", sans-serif; font-weight: 800; color: #000; position: absolute; bottom: 10px;} /* logotype ver recruit */ #header p#headerLogo span.logotype { width: 100%; } #header p#headerLogo span.logotype img { width: 100%;} @media only screen and (max-width: 960px) { #header, #headerInner { height: 80px;} #header p#headerLogo { height: 90px; transform: scale(0.6); transform-origin: left top; bottom: 0; top: 15px; left: 15px;} /* リクルートサイズ */ #header p#headerLogo span.logoText, #header p#headerLogo span.logotype { bottom: -20px;} } @media only screen and (max-width: 769px) {} /*------------------------------------------------- nav ---------------------------------------------------*/ nav#gnav { width: auto; margin-left: auto; font-size: 18px; font-family: "Zen Kaku Gothic New", serif; font-weight: 600; position: absolute; bottom: 20px; right: 5%; transition: .3s; display: flex;} nav#gnav ul { margin: 0 0 0 auto; list-style: none; line-height: 1; display: flex; gap: 30px; box-sizing: border-box;} nav#gnav ul li { margin: 0 0; position: relative;} nav#gnav ul li a { padding: 6px; } nav#gnav ul li.gEntry > a { padding: 2px 12px 6px ; color: #fff; border-radius: 999px; background-color: #0096df; } nav#gnav ul > li:hover .drop { display: block; } nav#gnav ul > li ul.drop {display: /*inline-block*/none;} nav#gnav ul > li ul.drop { margin: 0 0 0 -5px; padding: 0; font-size: 92%; line-height: 1; position: absolute; top: 28px; left: 0;} nav#gnav ul > li ul.drop > li { width: 100%; margin: 0; padding: 0; white-space: nowrap; display: block; background-color: #0096df;} nav#gnav ul > li ul.drop > li a { padding: 15px 25px; color: #fff; display: block; transition: .3s;} nav#gnav ul > li ul.drop > li a:hover { background-color: #0068b6;} @media only screen and (max-width: 1400px) { nav#gnav { font-size: 16px; bottom: 18px;} nav#gnav ul { gap: 10px; } nav#gnav ul > li ul.drop { top: 25px;} } @media only screen and (max-width: 1200px) { nav#gnav { display: none;} } /*------------------------------------------------- nav - sp ---------------------------------------------------*/ #sp-menu-set {} /* include trigger */ @media only screen and (min-width: 1201px) { #nav-toggle{ display: none;}} #nav-toggle { position: fixed; top: 20px; right: 25px; height: 32px; cursor: pointer; transition: .3s;} #nav-toggle > div { position: relative; width: 36px;} #nav-toggle span { width: 100%; height: 3px; left: 0; display: block; background: #000; position: absolute; transition: top .5s ease, -webkit-transform .6s ease-in-out; transition: transform .6s ease-in-out, top .5s ease; transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0;} #nav-toggle span:nth-child(2) { top: 10px;} #nav-toggle span:nth-child(3) { top: 20px;} .open #nav-toggle span { background: #fff;} .open #nav-toggle span:nth-child(1) { top: 15px; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .open #nav-toggle span:nth-child(2) { top: 15px; width: 0; left: 50%;} .open #nav-toggle span:nth-child(3) { top: 15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);} /* z-index */ #nav-toggle { z-index: 1000;} #container { z-index: 900;} /* open */ .open { overflow: hidden;} .open #sp-nav { visibility: visible; opacity: 1;} .open #sp-nav li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition: opacity .9s ease, -webkit-transform 1s ease; transition: transform 1s ease, opacity .9s ease; transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease; } /* sp-nav */ #sp-nav { background: #0096df; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility .6s ease; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; display: flex; flex-direction: column; /*justify-content: center;*/ align-items: flex-start; overflow: auto; padding: 10%;} /* sp - logo */ #sp-nav .spHeaderLogoWrap { width: 100%; height: auto; margin: 50px 0 10px; position: relative; border-bottom: 1px solid #fff;} #sp-nav p#spHeaderLogo { width: 275px; height: 55px; margin: 0 0 0; padding: 0; position: absolute; bottom: 6px; left: 0; display: inline-block; transition: 0.3s; } #sp-nav p#spHeaderLogo img { width: 100%; height: auto; padding: 0;} #sp-nav p#spHeaderLogo a {} #sp-nav p#spHeaderLogo a.logomarkLink { width: 60px; display: block; vertical-align: bottom;} #sp-nav p#spHeaderLogo a.logotypeLink { width: 203px; height: auto; padding-left: 12px; position: absolute; left: 60px; bottom: 0; display: block;} /* sp - logo recruit */ #sp-nav p#spHeaderLogo span { white-space: nowrap; line-height: 1; display: block; } /* logotext recruit (seo) */ #sp-nav p#spHeaderLogo span.logoText { clip-path: inset(100%); width: auto; font-size: 14px; font-family: "M PLUS 1", sans-serif; font-weight: 800; color: #fff; bottom: 10px;} /* logotype ver recruit */ #sp-nav p#spHeaderLogo span.logotype { width: 100%; } #sp-nav p#spHeaderLogo span.logotype img { width: 100%;} /* sp nav memu */ #sp-nav nav { padding-left: 1em; font-size: 14px; line-height: 1.5; font-family: "Zen Kaku Gothic New", serif; font-weight: 600; } #sp-nav nav ul { margin: 0; padding: 10px 0 0; list-style: none; text-align: left;} #sp-nav nav > ul > li { margin: 0 0 10px; padding: 0;} #sp-nav nav ul li > a { font-size: 110%;} #sp-nav nav ul li ul.drop { margin-left: 2em; padding-top: 0;} #sp-nav nav ul li ul.drop li > a { font-size: 13px; padding: 3px 0;} #sp-nav nav a { margin: 0; display: block; color: #fff; text-decoration: none; padding: 5px 0;} #sp-nav nav li.gEntry > a { margin: 3px 0 6px; padding-left: 1em;} /*------------------------------------------------- base setting ---------------------------------------------------*/ #mainContener { padding: 0 0 10px; background: url(../images/common/foot_ill_u.svg) 0 bottom repeat-x;} @media only screen and (max-width: 769px) { #mainContener { background-size: 150%; background-position: center 100.1%;} } /*------------------------------------------------- index - home ---------------------------------------------------*/ .mainMov { margin: 0; padding: 100px 0 0; position: relative;} .mainMov video.mv { width: 100%; margin: 0; height: auto; background-color: #000;} .mainMov img.spImage { width: 100%; display: none;} @media only screen and (min-width: 1800px) { .mainMov video.mv { height: 1000px;}} @media only screen and (max-width: 960px) { .mainMov { padding: 62px 0 0;}} /*.movieOnArea { position: relative; width:1130px; margin: 0 auto; clear: both; z-index: 1;} .movieOnArea p.message { position: absolute; top: 280px; left: 15%; z-index: 2;} .movieOnArea .message_sp { display: none;} */ @media only screen and (max-width: 769px) { /* sp - トップ */ /*.movieOnArea .message_sp { display: block; width: 100%;}*/ /*.movieOnArea { display: none;}*/ /*.mainMov video.mv { display: none;}*/ .mainMov img.spImage { display: block;} .mainMov video.mv { display: none;} } .mainMov .homeTitle { width: 100％; max-width: 1640px; height: fit-content; margin: auto; padding-left: 140px; position: absolute; bottom: 15%; left: 0; right: 0; container-type: inline-size;} .mainMov .homeTitle span { visibility: hidden; font-size: clamp(18px, 4cqw, 68px); font-family: "M PLUS 1", sans-serif; font-weight: 600; color: #fff; text-shadow: #666 1px 0 5px;} .mainMov .homeTitle img { width: 55%; margin: auto; position: absolute; top: 20%; left: 8%; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6)); } @media only screen and (max-width: 960px) { .mainMov .homeTitle { padding-left: 100px; }} @media only screen and (max-width: 769px) { .mainMov .homeTitle { top: 80%; height: 20px;} .mainMov .homeTitle img { width: 65%;} } /* title */ h2 { margin: 0 0 .5em; font-size: 32px; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal; text-align: center; } @media only screen and (max-width: 960px) { h2 { font-size: 24px;}} /* message */ section.message { margin-top: -40px; padding: 80px 0; text-align: center; font-family: "Zen Old Mincho", serif; color: #fff; background: url(../images/home/message_image.jpg) 0 0 no-repeat; background-size: cover;} section.message h3 { margin: 0; font-size: 32px; font-weight: 900; } section.message h3 br { display: none;} section.message p { font-size: 20px; font-weight: 600;} @media only screen and (max-width: 960px) { section.message { padding-bottom: 40px; } section.message h3 { font-size: 22px; line-height: 1.3} section.message p { font-size: 16px; line-height: 1.5} section.message .messageBody { text-align: left; padding: 5px 12%;} section.message h3 br { display: inline; } } /* about us */ section.aboutus { padding: 80px 0; background: url(../images/home/aboutus_image.jpg) 100% 50% no-repeat; background-size: cover;} section.aboutus h2 { margin: 0;} section.aboutus h3 { margin: 0; font-size: 34px; font-family: "Zen Kaku Gothic New", serif; font-weight: 400; text-align: center;} section.aboutus .aboutusList { width: calc(100% - 40px * 2); max-width: 1200px; margin: 8% auto 5%; } section.aboutus .aboutusList ul { width: 40%; padding: 60px 0 30px 60px; list-style: none; font-size: 24px; font-family: "Zen Kaku Gothic New", serif; font-weight: 600;background-color: #00b5ee;} section.aboutus .aboutusList li { margin-bottom: 20px; display: block;} section.aboutus .aboutusList li a:hover { color: #fff !important;} /*@media only screen and (max-width: 1200px) { section.aboutus .aboutusList { max-width: none;}}*/ @media only screen and (max-width: 960px) { section.aboutus { padding: 40px 0 10px; background-position: 85% 0} section.aboutus h3 { font-size: 24px;} section.aboutus .aboutusList { width: 100%; margin-top: 55%; margin-bottom: 0;} section.aboutus .aboutusList ul { width: 90%; margin: auto; padding: 20px 0 20px 30px; font-size: 18px; } section.aboutus .aboutusList li { margin-bottom: 5px;} } /* ps */ section.projectstory { padding: 80px 0 30px; background: url(../images/home/ps_image.jpg) -70% 10% no-repeat; background-size: 80%; } section.projectstory h2 { margin: 0;} section.projectstory h3 { margin: 0; font-size: 34px; font-family: "Zen Kaku Gothic New", serif; font-weight: 400; text-align: center;} section.projectstory article { width: calc(100% - 40px * 2); max-width: /*1200px*/ 1400px; margin: 3% auto 2%;} section.projectstory article ul { width: 40%; margin: 0 0 0 auto; padding: 60px 0 30px 60px; list-style: none; font-size: 24px; font-family: "Zen Kaku Gothic New", serif; font-weight: 600;background-color: #00b5ee;} section.projectstory article li { margin-bottom: 40px; display: block;} section.projectstory article li a:hover { color: #fff !important;} section.projectstory article li p.psShoulder { margin: 0; font-size: 18px; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;} section.projectstory article li p.psShoulder span { margin-left: 1em; font-family: "Zen Kaku Gothic New", serif; font-weight: 900;} section.projectstory article li p.psTitle { margin: 0; font-size: 24px; line-height: 1.2;} @media only screen and (max-width: 960px) { section.projectstory { padding: 40px 0 10px; background-position: 120% 0; background-size: cover;} section.projectstory h3 { font-size: 24px;} section.projectstory article { width: 100%; margin-top: 30%; margin-bottom: 0;} section.projectstory article ul { width: 90%; margin: auto; padding: 20px 0 20px 30px; font-size: 18px; } section.projectstory article li { margin-bottom: 20px;} section.projectstory article li p.psShoulder { font-size: 16px;} section.projectstory article li p.psTitle { font-size: 18px; line-height: 1.3;} } /* iv */ section.interviewHomeBlock { padding: 60px 0; max-width: 1600px; margin: 50px auto 0} section.interviewHomeBlock h3 { margin: 0; font-size: 34px; font-family: "Zen Kaku Gothic New", serif; font-weight: 400; text-align: center;} section.interviewHomeBlock .homeInterview {} .homeInterviewSliderWapper { width: 90%; max-width: 1600px; margin: 40px auto; position: relative;} .homeInterviewSlider {} .homeInterviewList {} .homeInterviewListItem {} .homeInterviewListItem a { width: 100%; display: block; outline: none; text-decoration: none; transition: .3s;} .homeInterviewListItem .listImage { aspect-ratio: 1 / 1; overflow: hidden; /*border: 1px solid #fcc;*/} .homeInterviewListItem a:hover { opacity: .8; transition: .3s;} .homeInterviewListItem .listImage img { width: 100%; height: 100%; object-fit: cover; /*object-position: 100% center; 効かない */ } .homeInterviewListItem h5.headline { font-size: 14px; line-height: 1.5; margin-top: 15px; color: #000;} .homeInterviewListItem h5.headline span { font-size: 13px; font-weight: normal; margin-top: 5px; display: block;} .homeInterviewSliderWapper .swiper-button-next, .homeInterviewSliderWapper .swiper-button-prev { color: #000; font-size: 60px !important; top: 42% !important;} .homeInterviewSliderWapper .swiper-button-next { right: -5% !important;} .homeInterviewSliderWapper .swiper-button-prev { left: -5% !important;} @media only screen and (max-width: 960px) { .homeInterviewSliderWapper { width: 85%;} .homeInterviewSliderWapper .swiper-button-next { right: -6% !important;} .homeInterviewSliderWapper .swiper-button-prev { left: -6% !important;} } @media only screen and (max-width: 769px) { section.interviewHomeBlock { padding: 0; } .homeInterviewSliderWapper { width: 80%;} .homeInterviewSliderWapper .swiper-button-next, .homeInterviewSliderWapper .swiper-button-prev { top: 35% !important;} .homeInterviewSliderWapper .swiper-button-next { right: -12% !important;} .homeInterviewSliderWapper .swiper-button-prev { left: -12% !important;} .homeInterviewSliderWapper .swiper-button-next .swiper-navigation-icon, .homeInterviewSliderWapper .swiper-button-prev .swiper-navigation-icon { width: 15px} } /* recruit */ section.recruitBlock { padding: 80px 0 60px; text-align: center; font-family: "Zen Kaku Gothic New", serif; color: #000; background-color: #b0dff8; } section.recruitBlock h3 { margin: 0; font-size: 34px; font-family: "Zen Kaku Gothic New", serif; font-weight: 400; text-align: center;} section.recruitBlock article { width: auto; max-width: /*1200px*/ 1000px; margin: 70px auto 2%; padding-right: 70px; } section.recruitBlock article ul { width: 100%; margin: auto; list-style: none; font-size: 20px;font-family: "Zen Kaku Gothic New", serif; font-weight: 600; /*display: flex; justify-content: center; align-items: flex-end;*/ display: block;} section.recruitBlock article li { margin: 0 2%; padding: 0 ; display: inline-block; vertical-align: bottom;} section.recruitBlock article li a { width: 250px; display: block;} section.recruitBlock article li a:hover { color: #fff;} section.recruitBlock article li a br { display: none;} section.recruitBlock article li a .recImage { max-width: 150px; margin: 0 auto 20px; } section.recruitBlock article li a .recImage img { width: 100%; height: 100%; object-fit: cover;} section.recruitBlock article li.rec01 a .recImage { max-width: 100px;} @media only screen and (max-width: 960px) { section.recruitBlock { padding: 40px 0 30px; } section.recruitBlock article ul { font-size: 17px; width: 80%;} section.recruitBlock article li { margin: 0 2% 40px; padding: 0 ; display: flex; justify-content: center;} section.recruitBlock article li a { width: 100%; max-width: 380px; display: flex; align-items: center; justify-content: center; text-align: left;} section.recruitBlock article li a:hover { color: #fff;} section.recruitBlock article li a span { width: 100%;} section.recruitBlock article li a .recImage { max-width: 90px; margin: 0 10% 0 0; display: inline-block;} section.recruitBlock article li.rec01 a .recImage { max-width: 90px; } section.recruitBlock article li.rec01 a .recImage img { width: 80%; } } @media only screen and (max-width: 769px) { section.recruitBlock article { padding: 0;} section.recruitBlock article li a br { display: inline;} section.recruitBlock article li a { width: 100%; max-width: none;}} /* entry */ section.entryBlock { padding: 80px 0 100px; text-align: center; font-family: "Zen Kaku Gothic New", serif; color: #000; } section.entryBlock h3 { margin: 0; font-size: 34px; font-family: "Zen Kaku Gothic New", serif; font-weight: 400; text-align: center;} section.entryBlock article { width: 100%; max-width: /*1200px*/ 1400px; margin: 70px auto 2%;} section.entryBlock article ul { width: 100%; margin: 0; padding: 0 5%; list-style: none; font-size: 24px;font-family: "Zen Kaku Gothic New", serif; font-weight: 600; display: flex; justify-content: center; gap: 0 2%; box-sizing: border-box; } section.entryBlock article li { width: 100%; max-width: 500px; margin: 0; gap: 1%; display: inline-block;} section.entryBlock article li a { width: 100%; padding: 30px 0; color: #fff; display: block; transition: .3s;} section.entryBlock article li.entry01 a { background-color: #00b5ee; } section.entryBlock article li.entry01 a:hover { background-color: #029ac9} section.entryBlock article li.entry02 a { background-color: #0068b6;} section.entryBlock article li.entry02 a:hover { background-color: #00519b} @media only screen and (max-width: 769px) { section.entryBlock article { margin-top: 30px;} section.entryBlock article li a { padding: 50px 0;} } /*------------------------------------------------- interview detail head ---------------------------------------------------*/ .interviewHead { width: 100%; margin-bottom: 80px; position: relative; } .interviewHeadInner { width: 100%; padding-top: 120px; height: 100%; display: flex; /*min-height: 500px;*/ aspect-ratio: 16 / 6; /*position: relative;*/ transition: .3s;} .interviewHeadInBlock { /*width: 100%;*/ height: 65%; margin: 0; position: absolute; left: 5%; top: 220px; z-index: 2; box-sizing: border-box; display: block;} .interviewHead .interviewShoulder { font-size: 40px; color: #0068b6; font-family: "M PLUS 1", sans-serif; font-weight: 800; line-height: 1; opacity: .6; position: relative; top: 20px; left: 1%; z-index: 2;} .interviewHead .interviewTitle, .interviewHead .interviewStit, .interviewTitle-sp, .interviewStit-sp { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; line-height: 1.5; } .interviewHead .interviewTitle h1 { font-size: inherit;} .interviewHead .interviewTitle { font-size: /*30px*/ clamp( 34px, 2.8vw, 70px); color: #fff; display: inline-block; /*position: absolute; left: 43%;*/ text-shadow: 1px 1px 0 #000; /*mix-blend-mode: difference;*//* 確認中 */ /*border: 1px solid #fcc;*/} .interviewHead .interviewTitle span { margin-top: 5%; font-size: 1vw; color: #fff; display: block;} /* コメアウト予定 */ .interviewHead .interviewStit { font-size: /*16px*/ /*1vw*/ ; color: #fff; text-shadow: 1px 1px 0 #000; position: absolute; bottom: 0; text-align: left;} .interviewHead .interviewStit .year { font-size: clamp( 14px, 0.8vw, 20px); display: block;} .interviewHead .interviewStit .dp { font-size: clamp( 21px, 1.2vw, 30px);} .interviewThumColor { width: /*calc((100vw - 1200px) / 2 + 150px)*/ /*150px*/ calc(1% + 420px); /*max-width: 420px;*/ height: 100%; position: absolute; top: 0; left: 0; z-index: 1; /*background-color: #0096df;*/ background: url(../images/interview/interview_head_color_tr.svg) no-repeat -100px 0; background-size: cover;} .interviewHead .interviewThum { width: /*calc(100% - ((100vw - 1100px) / 2 + 50px))*/ 100%; /*width: 80%;*/ height: 100%; /*min-height: 500px;*/ margin-left: auto; margin-right: 0; background-size: /*calc(1400px + 10%)*/ cover; background-position: /*calc(60% + 100px)*/ 0 0; background-repeat: no-repeat; position: absolute; top: 0; right: 0; z-index: 0;/*clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 11% 100%);*/ overflow: hidden;} /* 個別 */ /* 01 - na */ .interviewHead.i01 .interviewThum { background-position: calc(1% + 100px) 5%;} .interviewHead.i01 .interviewHeadInBlock { left: 40%;} .interviewHead.i01 .interviewStit { /*bottom: 25%; left: 1%;*/ position: static; padding-top: 3%; padding-left: 1%;} @media only screen and (max-width: 1200px) { .interviewHead.i01 .interviewThum { background-position: 0 0;}} @media only screen and (max-width: 769px) { /* 下にあり */} /* 02 - in */ .interviewHead.i02 .interviewHeadInBlock { left: 48%;} .interviewHead.i02 .interviewStit { color: #000; text-shadow: 1px 1px 0 #fff;} .interviewHead.i02 .interviewTitle { color: #000; text-shadow: 1px 1px 0 #fff;} .interviewHead.i02 .interviewStit { position: static; padding-top: 3%; padding-left: 1%;} /* 03 - ur */ /*.interviewHead.i03 .interviewTitle { left: 6%;}*/ .interviewHead.i03 .interviewThumColor { /*width: 100%;*/ width: calc( 15% + 350px); background-color: #0096df; background: url(../images/interview/interview_head_color_tr.svg) no-repeat -100px 0; background-size: cover; } /*@media only screen and (max-width: 769px) { .interviewHead.i03 .interviewThumColor { background-size: 180px auto;}}*/ /* 04 - is */ /*.interviewHead.i04 .interviewTitle { left: 55%;}*/ .interviewHead.i04 .interviewThum { background-position: 50% 5%;} /*.interviewHead.i04 .interviewThum { background-position: calc(1% + 100px) 0;}*/ .interviewHead.i04 .interviewHeadInBlock { left: 45%;} /*.interviewHead.i04 .interviewStit { color: #000; text-shadow: 1px 1px 0 #fff;} .interviewHead.i04 .interviewTitle { color: #000; text-shadow: 1px 1px 0 #fff;} 黒テキスト */ .interviewHead.i04 .interviewStit { position: static; padding-top: 3%; padding-left: 1%;} @media only screen and (max-width: 1200px) { .interviewHead.i04 .interviewThum { background-position: 0 -10%;}} @media only screen and (max-width: 769px) { .interviewHead.i04 .interviewThum { background-position: 10% 50px;}} /* 05 - ha */ .interviewHead.i05 .interviewThum { background-position: 50% 50%;} /*.interviewHead.i05 .interviewThumColor { width: calc( 15% + 350px);}*/ .interviewHead.i05 .interviewTitle { left: 0;} @media only screen and (max-width: 1200px) { .interviewHead.i05 .interviewThumColor { background-size: cover;}} @media only screen and (max-width: 769px) { .interviewHead.i05 .interviewThum { background-position: 50% 50%;}} .interviewHeadSpTxt { display: none;} /**/ @media only screen and (min-width: 1800px) { .interviewHeadInner { aspect-ratio: 16 / 5; transition: .3s;}} @media only screen and (max-width: 1600px) { .interviewHeadInBlock { height: 60%;} /*.interviewHead, .interviewHeadInBlock, .interviewHeadInner, .interviewThumColor, .interviewThumColor:after, .interviewHead.i01 .interviewThum { min-height: 400px;} .interviewHead .interviewShoulder { font-size: 2.5vw;} .interviewHead .interviewTitle { font-size: 1.7vw;} .interviewHead .interviewStit { font-size: 0.9vw;}*/ /* .interviewHead.i01 .interviewThum { background-size: 130%; background-position: 0 -40px;}*/ /*.interviewHead, .interviewHeadInBlock, .interviewHeadInner, .interviewThumColor, .interviewHead.i01 .interviewThum { min-height: clamp(10px, 1vw, 500px); aspect-ratio: 10 / 3.1; border: 1px solid #ccc;} 比率可変タイプ */ } @media only screen and (max-width: 1300px) { .interviewHeadInBlock { top: 35%; }} @media only screen and (max-width: 1200px) { .interviewThumColor { background-size: 180px auto;} /*.interviewHead .interviewTitle { font-size: 2.1vw;} .interviewHead .interviewTitle span { font-size: 1.3vw; }*/ } @media only screen and (max-width: 960px) { .interviewHead, .interviewHeadInBlock, .interviewHeadInner, .interviewHead .interviewThum { min-height: 250px;} .interviewHeadInner { padding-top: 80px;} /*.interviewThumColor:after { width: 100px; right: -100px;}*/ .interviewHead.i01 .interviewThum { background-size: 130%; background-position: 0 -30px;} .interviewHeadInBlock { height: 50%; padding-bottom: 30%;} .interviewHead .interviewShoulder { font-size: 3.2vw; left: 15px; } .interviewHead .interviewTitle { /*font-size: 2.5vw;*/ /*position: absolute; left: 48%;*/} .interviewHead .interviewTitle { font-size: 3vw; } .interviewHead .interviewStit { /*font-size: 1.5vw;*/ /*left: 48%;*/ bottom: 10%;} .interviewHead .interviewStit .year { font-size: 1.2vw;} .interviewHead .interviewStit .dp { font-size: 2vw;} } @media only screen and ( max-width: 769px) { .interviewHead { margin-bottom: 0; } .interviewHeadSpTxt { /*width: 70%; clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%); padding: 5px 8% 10px 15%; margin: -20px auto 60px; *//* 菱形タイプ */ width: 72%; clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0% 100%); margin: -20px 0 60px auto; padding: 5px 8% 10px 15%; display: block; background-color: #0096df; } .interviewTitle-sp { font-size: clamp( 19px, 4vw, 29px); color: #fff; text-shadow: 1px 1px 0 #000; } .interviewStit-sp { color: #fff; text-shadow: 1px 1px 0 #000; } .interviewStit-sp .year { font-size: clamp( 10px, 4vw, 12px); display: block;} .interviewStit-sp .dp { font-size: clamp( 14px, 6vw, 18px);} .interviewThumColor { width: 100%;} .interviewHead.i01 .interviewThumColor, .interviewHead.i02 .interviewThumColor, .interviewHead.i03 .interviewThumColor, .interviewHead.i04 .interviewThumColor, .interviewHead.i05 .interviewThumColor { background-size: 180px auto;} .interviewHeadInBlock { /*padding-left: 30px;*/ display: none;} /*.interviewHead .interviewTitle, .interviewHead .interviewStit { display: none;}*/ .interviewHead .interviewShoulder { font-size: 24px; opacity: .8; top: 10px} .interviewHead, .interviewThumColor, .interviewHead.i01 .interviewThum { min-height: 450px;} .interviewHead.i01 .interviewThum { width: 100%; background-size: cover; background-position: 5% 80px;} .interviewHead.i03 .interviewThum { background-position: 100% 80px;} .interviewHead.i02 + .interviewHeadSpTxt { width: 80%; padding-right: 0%; /*padding: 5px 8% 10px 15%;*/} } /*@media only screen and (max-width: 1200px) {.interviewHeadInner:before { content: ''; width: 30%;}} @media only screen and (max-width: 1600px) {.interviewHead.i01 .interviewThum { background-position-x: 200px;}} @media only screen and (max-width: 1500px) {.interviewHead.i01 .interviewThum { background-position-x: 300px; margin-left: 0; margin-right: auto; }} @media only screen and (min-width: 1800px) {.interviewHead.i01 .interviewThum { width: 63%; background-size: 110%; background-position:*/ /*-40%*//*calc(85% + 250px)*//*50px 0;}}*/ /*@media only screen and (max-width: 1700px) {.interviewHead.i01 .interviewThum { width:1200px; }}*/ /*------------------------------------------------- interview detail section ---------------------------------------------------*/ .mainContener { width: calc(100% - 40px * 2); max-width: 1200px; margin: auto; font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.7;} section.interviewBlock { display: flex; /*align-items: center;*/ gap: 20px; margin-bottom: 60px;} .interviewBody { flex: 1; padding-right: 60px;} section.interviewBlock .interviewBody { padding-left: 40px;} section.interviewBlock.sec02 .interviewBody { order: 2; padding-left: 100px; padding-right: 0;} /* 2ブロック目 */ section.interviewBlock.sec02 .interviewImageBox { padding-left: 0; } .interviewBody .interviewStit h3 { font-size: inherit;} .interviewBody .interviewStit { font-size: 24px; font-weight: 700; position: relative; color: #0068b6} .interviewBody .interviewStit:before { content: ''; height: 34px; border: 24px solid #0068b6; display: block; position: absolute; left: -60px; clip-path: polygon(45% 0%, 100% 0%, 55% 100%, 0% 100%)} .interviewBody .interviewTxt { font-size: 18px; font-weight: 400; } .interviewImage { flex: 1; order: unset; max-width: /*450px*/ 350px; margin-top: 20px;} .interviewImage .interviewImageBox { aspect-ratio: 1 / 1; overflow: hidden;/*border: 1px solid #fcc;*/} .interviewImage .interviewImageBox img { width: 100%; height: 100%; object-fit: cover;} /* i01 */ .mainContener.i01 section.interviewBlock.sec03 .interviewImageBox img { object-position: 62%;} .mainContener.i01 section.interviewBlock.end .interviewImageBox { background-size: 120%; background-position: 50%; } /* i02 */ /*.mainContener.i02 .interviewBody { flex: 7; padding-right: ;} .mainContener.i02 :not(.interviewBlock.end) .interviewImage .interviewImageBox img { display: none;}*/ /*.mainContener.i02 section.interviewBlock.sec01 .interviewImageBox img { object-fit: cover; object-position: 90% 50%; height: 78%; margin-top: 10%;}*/ .mainContener.i02 section.interviewBlock .interviewImageBox { background-color: #ececec;} .mainContener.i02 section.interviewBlock.end .interviewImageBox { background-size: cover; background-position: 50%; } /* i03 */ .mainContener.i03 section.interviewBlock.end .interviewImageBox { background-size: cover; background-position: 50% 100%; } /* i04 */ .mainContener.i04 section.interviewBlock.end .interviewImageBox { background-size: cover; background-position: 30% 80%;} /* i05 */ .mainContener.i05 section.interviewBlock.sec01 .interviewImageBox img { object-position: 90%;} .mainContener.i05 section.interviewBlock.sec02 .interviewImageBox img { object-position: 60%;} .mainContener.i05 section.interviewBlock.sec03 .interviewImageBox img { object-position: 45%;} .mainContener.i05 section.interviewBlock.end .interviewImageBox { background-size: cover;} .mainContener.i05 section.interviewBlock.end .interviewImageBox { background-size: cover; background-position: 50% 90%;} .mainContener.i05 .interviewHolidaySliderBlock .interviewImageBox { background-position: 50% 50%;} /* 休日ブロック */ .interviewBlock.end { gap: 0; background-color: #2182bd; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);} /*.interviewBlock.end .interviewBody { padding: 80px 100px 100px;}*/ .interviewBlock.end .interviewBody { order: 1; height: auto; padding: 35px 9% 60px 5%; max-width: 480px; } /* 2ブロック目 */ .interviewBlock.end .interviewStit { color: #fff;} .interviewBlock.end .interviewStit:before { display: none;} .interviewBlock.end .interviewTxt { color: #fff; font-size: 15px;} .interviewBlock.end .interviewImage { max-width: 700px; margin-top: 0; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);} .interviewBlock.end .interviewImageBox { height: 100%; aspect-ratio: auto; background-repeat: no-repeat;} /* 休日ブロック - 写真ナシタイプ */ .interviewBlock.end.imgNone { width: 80%; margin: auto;} .interviewBlock.end.imgNone .interviewBody { height: auto; padding: 20px 10% 40px 10%; max-width: none;} /* 2ブロック目のみに */ .interviewBlock.end.imgNone .interviewImage { display: none;} /* 休日ブロック - スライダー 再構築 */ .interviewHolidaySliderBlock { display: flex; gap: 0; margin-bottom: 60px; background-color: #2182bd; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);} .interviewHolidaySliderBlock .interviewBody { order: 1; height: auto; padding: 35px 9% 70px 5%; width: 55%; max-width: 480px;} /* 2ブロック目 */ .interviewHolidaySliderBlock .interviewStit { color: #fff;} .interviewHolidaySliderBlock .interviewStit:before { display: none;} .interviewHolidaySliderBlock .interviewTxt { color: #fff; font-size: 15px;} .interviewHolidaySliderBlock .interviewImage { max-width: 700px; margin-top: 0;} .interviewHolidaySliderBlock .interviewImageBox { height: 100%; aspect-ratio: auto; background-size: cover; background-repeat: no-repeat;} .interviewHolidaySliderBlock .swiper.holidaySlider { width: 45%; margin: 0; padding: 0; box-sizing: border-box; clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); position: relative;} .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-next, .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-prev { color: #2182bd; font-size: 36px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6);} .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-next { right: 10%} .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-prev { left: 10%;} .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-prev .swiper-navigation-icon, .interviewHolidaySliderBlock .swiper.holidaySlider .swiper-button-next .swiper-navigation-icon { display: none;} /*.interviewBlock.end .interviewImageBox { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; position: relative;}*/ /*.interviewBlock.end .interviewImageBox:after { content: ''; width: 100%; height: 100%; background-color: #fff; opacity: .8; position: absolute; top: 0; left: 0; right: 0; bottom: 0;} .interviewBlock.end .interviewImage .interviewImageBox img { opacity: .5; }*/ /*.interviewBlock.end.hn .interviewBody { padding-top: 60px; padding-bottom: 60px;} .interviewBlock.end.hn .interviewImageBox { background-color: #ccc;}*/ @media only screen and (max-width: 1200px) { /*.interviewBody { padding-right: 4%;} section.interviewBlock.sec02 .interviewBody { padding-left: 4%;} */ .mainContener.i01 section.interviewBlock.end .interviewImageBox { background-size: cover;} } @media only screen and (max-width: 960px) { /*.mainContener { padding-top: 10vw}*/ .interviewBody .interviewStit:before { border-width: 18px; left: -45px; } .interviewBody .interviewStit { font-size: 20px;} .interviewBody .interviewTxt { font-size: 16px;} .interviewImage { margin-top: 30px; } .interviewBlock.end .interviewBody { padding: 40px 80px 50px;} .interviewBlock.end .interviewImage { margin-top: 0;} } @media only screen and ( max-width: 769px) { section.interviewBlock { flex-flow: column;} .interviewBody .interviewStit { font-size: 18px;} .interviewBody .interviewTxt { font-size: 14px;} .interviewBody .interviewStit:before { height: 28px; border-width: 15px; left: -40px; } section.interviewBlock .interviewBody, section.interviewBlock.sec02 .interviewBody { padding-left: 4%; padding-right: 0%;} .interviewImage { order: -1; max-width: 330px; margin: auto; display: block; } .interviewImage .interviewImageBox { /*aspect-ratio: 9 / 10;*/ } .interviewBlock.end { width: /*98%*/ 100%; margin: auto; margin-bottom: 10px; padding-bottom: 0; clip-path: /*polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)*/ none;} .interviewBlock.end .interviewImage { order: 2; width: 100%; clip-path: none;} .interviewBlock.end .interviewImageBox { width: 100%; min-height: 300px; aspect-ratio: auto;} .interviewBlock.end .interviewBody { padding: 15px 30px 20px 50px;} .interviewBlock.end.imgNone .interviewBody { padding: 15px 40px 20px 50px;} .interviewBlock.end.imgNone { width: 100%;} .interviewHolidaySliderBlock { width: 100%; margin-bottom: 10px; clip-path: none; display: block;} .interviewHolidaySliderBlock .interviewBody { padding: 20px 0 20px 8%; width: 100%; max-width: none;} .interviewHolidaySliderBlock .interviewTxt { width: 85%; } .interviewHolidaySliderBlock .swiper.holidaySlider { width: 100%; height: 300px; display: block; clip-path: none;} /*.mainContener.i02 :not(section.interviewBlock.end) .interviewImage { display: none;} .mainContener.i02 section.interviewBlock.sec02 .interviewBody { padding-left: 0;} .mainContener.i02 :not(section.interviewBlock.end) .interviewBody { padding-right: 0;}*/ } @media only screen and ( max-width: 400px) { .interviewBlock.end { padding-bottom: 0;}}/* 調整 */ /*------------------------------------------------- interview list block ---------------------------------------------------*/ .listContener { width: calc(100% - 40px * 2); max-width: 1200px; margin: 150px auto 100px} section.interviewList { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; gap: 24px;} .interviewListItem { width: 85%; height: 85%; margin: 0 auto;} .interviewListItem a { width: 100%; display: block; outline: none; text-decoration: none; transition: .3s;} .interviewListItem .listImage { aspect-ratio: 1 / 1; overflow: hidden; /*border: 1px solid #fcc;*/} .interviewListItem a:hover { opacity: .8; transition: .3s;} .interviewListItem .listImage img { width: 100%; height: 100%; object-fit: cover; /*object-position: 100% center; 効かない */ } .interviewListItem h5.headline { font-size: 14px; line-height: 1.5; margin-top: 15px; color: #000;} .interviewListItem h5.headline span { font-size: 13px; font-weight: normal; margin-top: 5px; display: block;} /* 01 */ .interviewListItem.i01 .listImage img { margin: -5% -1%; width: 108%; height: 108%;} /* 02 */ .interviewListItem.i02 .listImage img { margin: -5% -8%; width: 125%; height: 125%; } /* 03 */ .interviewListItem.i03 .listImage img { margin: -3% -10%; width: 120%; height: 120%; } /* 04 */ .interviewListItem.i04 .listImage img { margin: -8% -8%; width: 120%; height: 120%; } /* 05 */ .interviewListItem.i05 .listImage img { margin: -3% -15%; width: 115%; height: 115%;} @media only screen and ( max-width: 769px) { section.interviewList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;} .interviewListItem h5.headline { font-size: 13px; } } /*------------------------------------------------- interview index ---------------------------------------------------*/ /*.mainContener.list { margin-bottom: 100px} section.interviewList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; gap: 12px;} .interviewListItem {} .interviewListItem a { width: 100%; display: block; outline: none; text-decoration: none; transition: .3s;} .interviewListItem .listImage { aspect-ratio: 1 / 1; overflow: hidden;} .interviewListItem a:hover { opacity: .8; transition: .3s;} .interviewListItem .listImage img { width: 100%; height: 100%; object-fit: cover} .interviewListItem h3.headline { font-size: 20px; margin-top: 10px; color: #000;} @media only screen and ( max-width: 769px) { section.interviewList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;} .interviewListItem h3.headline { font-size: 14px; } }*/ /*------------------------------------------------- project story index ---------------------------------------------------*/ .psHead.index { background-color: /*#0096df*/ #0068b6; width: 100%; margin-bottom: 40px; /*position: relative;*/} .psHeadInner { width: calc(100% - 40px * 2); max-width: 1200px; margin: auto; padding-top: 120px; line-height: 1.7;transition: .3s; display: flex; align-items: center; } .psHeadInner .psTitleBlock { padding: 20px 0; /*border: 1px solid #fcc*/} .psHead.index h1.psTitle { font-size: 38px; color: #fff; font-family: "Hind Vadodara", sans-serif; font-weight: 700; line-height: 1.5;} .psHead.index h1.psTitle span { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 16px; font-weight: 500; display: block; margin: 0;} .psHeadExp p, .psHeadExp h2 { font-size: 18px;font-weight: normal; line-height: 1.6; text-align: left;} section.psIndex { margin: 100px 0;} .psIndexItem { font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.3; margin-bottom: 60px; text-align: center; } .psIndexItem a { transition: .3s;} .psIndexItem a:hover { opacity: .85; transition: .3s;} .psIndexItem h3.headline { color: #0068b6; font-size: 26px; font-family: "Hind Vadodara", sans-serif; font-weight: 400; margin: 0 0 10px;} .psIndexItem h3.headline span { font-weight: 700; margin-left: 12px;} .psIndexItem h4.title { color: #000; font-size: 36px; font-weight: 900; margin: 0 0 30px;} .psIndexItem h4.title:hover { color: #000;} .psIndexItem .listImage { /*flex: 1; order: unset; max-width: 450px;*/ } .psIndexItem .listImage .listImageBox { aspect-ratio: 5 / 2; overflow: hidden;/*border: 1px solid #fcc;*/} .psIndexItem .listImage .listImageBox img { width: 100%; height: 100%; object-fit: cover;} /* index p3 */ .psIndexItem.p1 .listImageBox img { width: 110%; height: 110%; margin: 0 -5%;} .psIndexItem.p2 .listImageBox img { width: 110%; height: 110%; margin: 0 -5%;} .psIndexItem.p3 .listImageBox img { width: 110%; height: 110%;/*object-position: 50% 50%;*/ margin: 0 -5%;} @media only screen and (max-width: 960px) { section.psIndex { margin: 50px 0;} .psHeadInner { padding-top: 80px; } .psHeadInner .psTitleBlock { padding: 12px 0;} .psHead.index h1.psTitle { font-size: 30px; } .psHead.index h1.psTitle span { font-size: 14px; } .psIndexItem h3.headline { font-size: 20px; margin-bottom: 8px;} .psIndexItem h4.title { font-size: 30px; margin-bottom: 20px;} } @media only screen and (max-width: 769px) { .psHeadExp { font-size: 16px;} .psHeadExp br { display: none;} .psIndexItem h3.headline { font-size: 18px; margin-bottom: 8px;} .psIndexItem h4.title { font-size: 24px; margin-bottom: 20px;} .psIndexItem h4.title br { display: none;} } /*------------------------------------------------- project story detail ---------------------------------------------------*/ /* detail head */ .psHead.detail { width: 100%; height: 100%; margin-bottom: 40px; display: flex; position: relative; aspect-ratio: 16 / 6;} .psHead.detail .psHeadInner { /*width: calc(100% - 40px * 2);*/ max-width: 1200px; margin: auto; padding-top: 120px; line-height: 1.7;transition: .3s; display: flex; align-items: center; position: relative; z-index: 2; } .psHead.detail .psHeadThum { width: 100%; height: 100%; margin-left: auto; margin-right: 0; background-size: cover; background-position: 0 0; background-repeat: no-repeat; position: absolute; top: 0; right: 0; z-index: 0; overflow: hidden; } .psHead.detail .psHeadInner .psTitleBlock {} .psHead.detail .psHeadInner .psTitleBlock p.psShoulder { font-size: 1.5vw; color: #0068b6; margin: 0; padding: 30px 80px 5px; background-color: rgba(255,255,255,0.8); display: inline-block;} .psHead.detail .psHeadInner .psTitleBlock p.psShoulder span { font-family: "Hind Vadodara", sans-serif; font-weight: 700; } .psHead.detail .psHeadInner .psTitleBlock h1.psTitle { font-size: 1.8vw; color: #000; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; line-height: 1.5; padding: 20px 80px 40px; margin: 0; background-color: rgba(255,255,255,0.8);} /* 個別 */ .psHead.detail.ps02 .psHeadThum { background-position: 0 90%; } @media only screen and (max-width: 960px) { .psHead.detail { width: 100%; height: 100%; aspect-ratio: auto;} .psHead.detail .psHeadInner { padding-top: 80px;} .psHead.detail .psHeadInner .psTitleBlock p.psShoulder { font-size: max(2.2vw, 13px); padding: 3% 10% 1%; } .psHead.detail .psHeadInner .psTitleBlock h1.psTitle { width: 100%; font-size: max(3.6vw, 18px); padding: 2% 10% 4% 10%; } } /* detail stf */ .psStf { display: flex; gap: 50px; justify-content: flex-start;} .psStfItem { width: 200px; display: flex; flex-direction: column; } .psStfItem .psStfNameBox { order: 2; margin: 5px 0;} .psStfItem p.psStfName { margin: 5px 0; font-size: /*18px*/ 16px} .psStfItem p.psStfDp { margin: 0; font-size: 14px; line-height: 1.5;} .psStfItem .psStfItemImage { } .psStfItem .psStfItemImageBox { order: 1; aspect-ratio: 1 / 1; overflow: hidden;} .psStfItem .psStfItemImageBox img { width: 100%; height: 100%; object-fit: cover;} .interviewListItem .listImage { aspect-ratio: 1 / 1; overflow: hidden; /*border: 1px solid #fcc;*/} @media only screen and (max-width: 960px) { .psStfItem p.psStfName { font-size: 16px} .psStfItem p.psStfDp { font-size: 12px;} } /* detail body */ .psHeadExp h2 { margin-bottom: 60px; font-size: 22px} .psDetail { margin: 60px 0; font-size: 18px; line-height: 1.6;} .psDetail .cTitle { margin-bottom: 20px;} .psDetail .cTitle p { font-family: "Hind Vadodara", sans-serif; font-size: 28px; font-weight: 700; color: #0068b6; margin: 0 0 10px; line-height: 1;} .psDetail .cTitle h3 { font-size: 40px; font-weight: normal; margin: 0; line-height: 1.3;} .psDetail .psDetailBody { display: flex; gap: 20px; /*border: 1px solid #fcc;*/} .psDetail .psDetailTxt { flex: 3; padding-right: 50px;} .psDetail .psDetailTxt:not(:has( + .psDetailImage)) { padding-right:0;} /* psDetailImage ナシver */ .psDetail .psDetailTxt span { color: #0068b6; font-weight: 700; } .psDetail .caption { font-size: 16px;} .psDetail section + section { margin-top: 100px} .psDetail .psDetailBody.sec02 .psDetailTxt { order: 2; padding-left: /*100px*/ 60px; padding-right: 0;} /* 2ブロック目 */ .psDetail .psDetailBody.sec02 .psDetailImage { padding-left: 0; } /*.psDetail .psDetailImageArea { }*/ .psDetail .psDetailImage { flex: 1; order: unset; /*max-width: min(35%, 300px);*/ min-width: 250px; margin-top: 20px;} .psDetail .psDetailImage .psDetailImageBox { aspect-ratio: 3 / 4; overflow: hidden; /*border: 1px solid #fcc;*/} .psDetail .psDetailImage .psDetailImageBox img { width: 100%; height: 100%; object-fit: cover;} .psDetail .psDetailImage-one { display: block; margin: 50px auto 0;} .psDetail .psDetailImage-one .psDetailImageBox { aspect-ratio: auto;} .psDetail .psDetailImage-one .psDetailImageBox img { width: 100%; height: 100%; object-fit: cover;} .psDetail .psDetailImage-one.size100 { width: 100%;} .psDetail .psDetailImage-one.size90 { width: 80%;} .psDetail .psDetailImage-one.size80 { width: 80%;} .psDetail .psDetailImage-one.size70 { width: 70%;} .psDetail .psDetailImage-one.size60 { width: 60%;} .psDetail .psDetailImage-one.size50 { width: 50%;} .psDetail .psDetailMv { width: 80%; margin: 50px auto 0;} .psDetail .psDetailMv .psDetailMvBox { position: relative; height: 100%; display: block; transition: .3s;} .psDetail .psDetailMv .psDetailMvBox:hover { opacity: .85; transition: .3s;} .psDetail .psDetailMv .psDetailMvBox:after { content: ''; width: clamp(50px, 12%, 90px); height: auto; aspect-ratio: 1 / 1; margin: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; background: url(../images/common/icon_mov.svg) 0 0 no-repeat;} .psDetail .psDetailMv .psDetailMvBox img { width: 100%;} /* 仮 modaal image ver setting */ .modaal-container { width: 70% !important;} /*.modaal-video-container { height: 731 > 675px !important;}*/ .modaal-video-container { background: #fff !important;} @media only screen and (max-width: 960px) { .psHeadExp h2 { margin-bottom: 40px; font-size: 18px} .psDetail .cTitle p { font-size: 20px;margin-bottom: 5px;} .psDetail .cTitle h3 { font-size: 30px;} .psDetail .psDetailTxt {font-size: 16px;} .psDetail .psDetailBody { gap: 5px;} .psDetail .psDetailMv { width: 100%; margin-top: 30px;} } @media only screen and (max-width: 769px) { .psStf { width: 100%; margin: auto; flex-wrap: wrap; gap: 30px 4%;} .psStfItem { width: 48%; margin: 0; } .psDetail .psDetailBody {flex-flow: column;} .psDetail .psDetailBody .psDetailTxt { padding: 0;} .psDetail .psDetailBody.sec02 .psDetailTxt { order: unset; padding: 0;} .psDetail .psDetailImage { width: 60%; min-width:auto; margin: 20px auto;} .psDetail .psDetailImage-one.size70, .psDetail .psDetailImage-one.size60, .psDetail .psDetailImage-one.size50 { width: 80%;} .psDetail .caption { font-size: 14px;} } /* 個別 p1 */ .psDetail.p01 .psDetailImage.ph-is .psDetailImageBox img { object-position: 45% 0;} .psDetail.p01 .psDetailImage.ph-nk .psDetailImageBox img { object-position: 35% 0;} /* 個別 p2 */ .psDetail.p02 .psDetailImage.ph-nk .psDetailImageBox img { object-position: 65% 0;} .psDetail.p02 .psDetailImage.ph-ig .psDetailImageBox img { object-position: 62% 0; transform: scale(1.2); } /* 個別 p3 */ .psDetail.p03 .psDetailImage.ph-st .psDetailImageBox img { object-position: 30% 0; transform: scale(1.1);} .psDetail.p03 .psDetailImage.ph-two .psDetailImageBox:first-child { margin-bottom: 20px;} .psDetail.p03 .psDetailImage.ph-two .psDetailImageBox:first-child img { object-position: 25% 0;} /* nt */ .psDetail.p03 .psDetailImage.ph-two .psDetailImageBox:nth-child(2) img { object-position: 60% 0;} /* ss */ .psDetail.p03 .psDetailImage-one.sec02 .psDetailImageBox { aspect-ratio: 1.8 / 1 ; overflow: hidden;} .psDetail.p03 .psDetailImage-one.sec03 .psDetailImageBox { aspect-ratio: 2.2 / 1 ; overflow: hidden;} .psDetail.p03 .psDetailImage-one.sec03 .psDetailImageBox img { object-position: 60% 100％; transform: scale(1.1); } @media only screen and (max-width: 769px) { .psDetail.p03 .psDetailImage.ph-two { width: 100%; display: flex; gap: 5%;} .psDetail.p03 .psDetailImage.ph-two .psDetailImageBox { width: 48%;} .psDetail.p03 .psDetailImage.ph-two .psDetailImageBox:first-child { margin-bottom: 0;} } /*------------------------------------------------- overview index ---------------------------------------------------*/ /* index - top interview */ .topInterviewHead { width: 100%; margin-bottom: 80px; position: relative; } .topInterviewHeadInner { width: 100%; padding-top: 130px; height: 100%; display: flex; /*min-height: 500px;*/ aspect-ratio: 16 / 6; /*position: relative;*/ transition: .3s;} .topInterviewHeadInBlock { /*width: 100%;*/ height: 65%; margin: 0; position: absolute; left: 5%; top: 220px; z-index: 2; box-sizing: border-box; display: block;} .topInterviewHead .topInterviewShoulder { font-size: clamp( 18px, 1.4vw, 28px); color: #fff; font-family: "M PLUS 1", sans-serif; font-weight: 800; line-height: 1; position: relative; top: 40px; left: 5%; z-index: 2;} .topInterviewHead .topInterviewShoulder span { margin-left: .5em; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 600;} .topInterviewHead .topInterviewTitle, .topInterviewHead .topInterviewStit, .topInterviewTitle-sp, .topInterviewStit-sp { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; line-height: 1.5; } .topInterviewHead .topInterviewTitle h1 { font-size: inherit;} .topInterviewHead .topInterviewTitle { font-size: /*30px*/ clamp( 34px, 2.9vw, 70px); color: #fff; display: inline-block; /*position: absolute; left: 43%;*/ /*text-shadow: 1px 1px 0 #000;*/ /*mix-blend-mode: difference;*//* 確認中 */ /*border: 1px solid #fcc;*/} .topInterviewHead .topInterviewTitle span { margin-top: 5%; font-size: 1vw; color: #fff; display: block;} /* コメアウト予定 */ .topInterviewHead .topInterviewStit { font-size: /*16px*/ /*1vw*/ ; text-align: left; color: #fff; /*text-shadow: 1px 1px 0 #000;*/ position: absolute; bottom: 0;} .topInterviewHead .topInterviewStit .pd { font-size: clamp( 14px, 1.2vw, 20px); display: block;} .topInterviewHead .topInterviewStit .name { font-size: clamp( 23px, 2vw, 32px); font-family: "Zen Old Mincho", serif; font-weight: 900;} .topInterviewThumColor { /*width: calc(1% + 420px);*/ width: calc( 32% + 420px); height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: /*#0096df*/ #0068b6; /*background: url(../images/interview/interview_head_color_tr.svg) no-repeat -100px 0;*/ background: url(../images/overview/head/head_darkblue_tr.svg) no-repeat -100px 0; background-size: cover;} .topInterviewHead .topInterviewThum { width: /*calc(100% - ((100vw - 1100px) / 2 + 50px))*/ 80%; /*width: 80%;*/ height: 100%; /*min-height: 500px;*/ margin-left: auto; margin-right: 0; background-size: /*calc(1400px + 10%)*/ cover; background-position: /*calc(60% + 100px)*/ 0 100px; background-repeat: no-repeat; position: absolute; top: 0; right: 0; z-index: 0; overflow: hidden;} .topInterviewHeadSpTxt { display: none;} .mainContener.iTop {} .mainContener.iTop section.interviewBlock { width: 90%; margin: auto;} .mainContener.iTop .interviewBody { padding-left: 60px; padding-right: 60px;} .mainContener.iTop .interviewBody p { font-size: 18px;} .mainContener.iTop .topName { display: flex; margin: 30px 0 0;} .mainContener.iTop .topName p { display: inline-block; margin: 0 0 0 auto; line-height: 1.5;} .mainContener.iTop .topName .pd { font-size: 16px; } .mainContener.iTop .topName .name { font-family: "Zen Old Mincho", serif; font-weight: 900; font-size: 26px; display: block;} @media only screen and (min-width: 1800px) { .topInterviewHeadInner { aspect-ratio: 16 / 5; transition: .3s;} .topInterviewHead .topInterviewThum {width: 70%;}} @media only screen and (max-width: 1600px) {.topInterviewHeadInBlock { height: 60%;} .} @media only screen and (max-width: 1300px) { .topInterviewHeadInBlock { top: 35%;} .topInterviewHead .topInterviewShoulder { top: 5%}} @media only screen and (max-width: 1200px) { .topInterviewThumColor { width: 60%; /*background-size: 180px auto;*/}} @media only screen and (max-width: 960px) { .topInterviewHead, .topInterviewInBlock, .topInterviewInner, .topInterviewHead .topInterviewThum { min-height: 250px; background-position: 0 60px;} .topInterviewHeadInner { padding-top: 80px;} .topInterviewHeadInBlock { height: 50%; padding-bottom: 30%;} .topInterviewHead .topInterviewShoulder { font-size: 1.8vw; } .topInterviewHead .topInterviewTitle { font-size: 3vw; } .topInterviewHead .topInterviewStit { /*font-size: 1.5vw;*/ /*left: 48%;*/ bottom: 10%;} .topInterviewHead .topInterviewStit .pd { font-size: 1.4vw;} .topInterviewHead .topInterviewStit .name { font-size: 2.4vw;} .mainContener.iTop .interviewBody { padding-left: 40px; padding-right: 40px;} .mainContener.iTop .interviewBody p { font-size: 16px;} .mainContener.iTop .topName .pd { font-size: 13.5px; } .mainContener.iTop .topName .name { font-size: 22px;} } @media only screen and ( max-width: 769px) { .topInterviewHead { margin-bottom: 0; } /*.topInterviewHead .topInterviewShoulder { color: #0068b6;}*/ .topInterviewHeadSpTxt { width: 72%; clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0% 100%); margin: -20px 0 60px auto; padding: 5px 8% 10px 15%; display: block; background-color: /*#0096df*/ #0068b6; } .topInterviewTitle-sp { font-size: clamp( 19px, 4vw, 29px); color: #fff; /*text-shadow: 1px 1px 0 #000;*/ } .topInterviewStit-sp { color: #fff; /*text-shadow: 1px 1px 0 #000;*/ } .topInterviewStit-sp .pd { font-size: clamp( 10px, 4vw, 12px); display: block;} .topInterviewStit-sp .name { font-size: clamp( 14px, 6vw, 20px); font-family: "Zen Old Mincho", serif; font-weight: 900;} .topInterviewThumColor { width: 100%; background-size: 180px auto; display: none;} .topInterviewHeadInBlock { display: none;} .topInterviewHead .topInterviewShoulder { font-size: 14px; top: 10px} .topInterviewHead, .topInterviewThumColor, .topInterviewHead .topInterviewThum { width: 100%; min-height: 450px; background-position: 80% 72px;} .mainContener.iTop .interviewBody { padding-left: 20px; padding-right: 20px;} } /*------------------------------------------------- overview head ---------------------------------------------------*/ .overviewHead { width: 100%; margin-bottom: 80px; position: relative; } .overviewHeadInner { width: 100%; padding-top: 100px; height: 100%; display: flex; align-items: center;/*min-height: 500px;*/ aspect-ratio: 16 / 2.5; /*position: relative;*/ transition: .3s;} /*.overviewHeadInBlock { height: 65%; margin: 0; position: absolute; left: 10%; top: 50%; z-index: 2; box-sizing: border-box; display: block;}*/ .overviewHead h1.overviewTitle { font-size: clamp( 24px, 2vw, 45px); font-family: "M PLUS 1", sans-serif; font-weight: 800; line-height: 1; color: #fff; margin-left: 10%; /*position: absolute; left: 10%; top: 45%;*/ z-index: 2; } .overviewHead h1.overviewTitle span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; line-height: 1.5; margin-left: .3em; } /*.overviewHead .overviewTitle { font-size: clamp( 34px, 2.9vw, 70px); color: #fff; display: inline-block;}*/ .overviewThumColor { width: calc( 32% + 500px); height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: /*#0096df*/ #0068b6; /*background: url(../images/interview/interview_head_color_tr.svg) no-repeat -100px 0;*/ background: url(../images/overview/head/head_darkblue_tr.svg) no-repeat -100px 0; background-size: cover;} .overviewHead .overviewThum { width: calc( 80vw - 400px); height: 100%; margin-left: auto; margin-right: 0; background-size: cover; background-position: 50%; background-repeat: no-repeat; position: absolute; top: 0; right: 0; z-index: 0; overflow: hidden;} .overviewHead.company .overviewThum { background-position: 20% 50%;} .overviewHeadSpTxt { display: none;} @media only screen and (max-width: 960px) { .overviewHeadInner { padding-top: 80px;}} @media only screen and ( max-width: 769px) { .overviewHead { margin-bottom: 0; } .overviewHeadSpTxt { width: 72%; clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0% 100%); margin: -20px 0 60px auto; padding: 5px 8% 10px 15%; display: block; background-color: /*#0096df*/ #0068b6; } .overviewTitle-sp { font-size: clamp( 22px, 4vw, 29px); color: #fff; font-family: "M PLUS 1", sans-serif; font-weight: 800; line-height: 1; } .overviewTitle-sp span { margin-top: 10px; font-size: 105%; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; line-height: 1.5; /*margin-left: .3em;*/ display: block;} .overviewThumColor { width: 100%; background-size: 180px auto; display: none;} .overviewHead h1.overviewTitle { display: none;} .overviewHead, .overviewThumColor, .overviewHead .overviewThum { width: 100%; min-height: 300px; background-position: 80% 72px;} } /*------------------------------------------------- overview company ---------------------------------------------------*/ .mainContener.company{} .mainContener.company .companyInfoBox { margin-top: 50px;} .mainContener.company .companyInfoBox table { width: 100%; font-size: 18px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 1.5; border-collapse: collapse; border-spacing: 0; box-sizing: border-box;} .mainContener.company .companyInfoBox table tr { border-bottom: 1px solid #ccc;} .mainContener.company .companyInfoBox table th { width: 30%; text-align: left; padding: 15px 0 15px 15px; box-sizing: inherit;} .mainContener.company .companyInfoBox table td { width: ; text-align: left; padding: 15px 0; box-sizing: inherit;} .mainContener.company .companyInfoBox table td.td_half { width: 25%;} .mainContener.company .companyInfoBox a[target="_blank"] { color: #038dd2;} .mainContener.company .companyInfoBox a[target="_blank"]:hover, .mainContener.company .companyInfoBox a[target="_blank"]:active { color: #0261ab;} @media only screen and (max-width: 769px) { .mainContener.company .companyInfoBox { margin-top: 20px;} .mainContener.company .companyInfoBox table th { display: block;} .mainContener.company .companyInfoBox table td { padding: 15px; display: block;} .mainContener.company .companyInfoBox table td.td_half, .mainContener.company .companyInfoBox table td.td_half + td { display: inline-block; vertical-align: top;} .mainContener.company .companyInfoBox table td.td_half { width: 40%;} .mainContener.company .companyInfoBox table td.td_half + td { width: auto; } .mainContener.company .companyInfoBox table tr.twoBlock , .mainContener.company .companyInfoBox table tr.twoBlock ~ tr { border-bottom: 1px dotted #ccc;} .mainContener.company .companyInfoBox table tr.twoBlock ~ tr:last-child { border-bottom: 1px solid #ccc;} } .companyImage-one { display: block; margin: 50px auto 0;} .companyImage-one .companyImageBox { aspect-ratio: auto; } .companyImage-one .companyImageBox img { width: 100%; height: 100%; object-fit: cover;} .companyImage-one.size100 { width: 100%;} .companyImage-one.size90 { width: 80%;} .companyImage-one.size80 { width: 80%;} .companyImage-one.size70 { width: 70%;} .companyImage-one.size60 { width: 60%;} .companyImage-onesize50 { width: 50%;} @media only screen and (max-width: 769px) { .companyImage-one.size90, .companyImage-one.size80, .companyImage-one.size70, .companyImage-one.size60, .companyImage-onesize50 { width: 100%;} } /*------------------------------------------------- overview history ---------------------------------------------------*/ .mainContener.historypage{} .hostoryBox { display: flex; /*border: 1px solid #fcc;*/} .hostoryBox h2 { width: 30%; margin: 0; font-size: /*7vw*/ 130px; color: #0096df; opacity: .6; font-family: "Roboto Condensed", sans-serif; font-weight: 500; /*font-style: italic;*//*transform: scaleX(0.85) skewX(-5deg);*/ } .hostoryBoxInner { width: 70%;} .hostoryBoxInner h3 { margin: 0 0 1em; font-size: 24px; font-family: "Zen Old Mincho", serif; font-weight: 900; line-height: 1.3;} .hostory {margin: .5em auto 2em; border-bottom: 1px solid #ededed;} .hostoryInner { width: auto; display: inline-block; } .hostoryInner.halfsize { max-width: 300px;} .hostory h4 { margin: 0; font-size: 18px; font-weight: bold;} .hostory p { margin: 0; font-size: 16px; } .hostory p.hostoryNote { margin: 2em 0;} .hostoryImage { max-width: 400px; margin: 2em 0 2em 4em; display: inline-block; vertical-align: middle; } .hostoryImage img { width: 100%; height: auto:} .hostoryImage p.cap { font-size: 15px;} /* 個別 */ .hostoryImage.size90 img, .hostoryImage.size90 p.cap { width: 90%; } .hostoryImage.size80 img .hostoryImage.size80 p.cap { width: 80%; } .hostoryImage.size70 img .hostoryImage.size70 p.cap { width: 70%; } /* large */ .hostoryBox.largesize {} .hostoryBox.largesize .hostoryInner { width: auto; display: block; } .hostoryBox.largesize .hostoryImage { max-width: 500px; margin-left: 0;} @media only screen and (max-width: 1100px) { .hostoryBox { display: block; margin: auto; text-align: center;} .hostoryBox h2 { font-size: 90px; width: auto; margin: 0 0 20px; text-align: center;} .hostoryBoxInner h3 { width: 50%; margin: auto; text-align: left;} .hostoryBoxInner { width: 100%; display: block;} .hostory { width: 50%; text-align: center;} .hostoryInner { width: 100%; text-align: left; display: block;} .hostoryInner.halfsize { max-width: none;} .hostoryImage { margin-left: auto; margin-right: auto; display: inline-block;} .hostoryImage p.cap { text-align: left; margin-left: auto; margin-right: auto; } } @media only screen and ( max-width: 769px) { .hostoryBox h2 { font-size: 70px;} .hostoryBoxInner h3 { width: 100%; font-size: 18px; } .hostory { width: 100%;} .hostory h4 { font-size: 16px;} .hostory p { font-size: 15px; } .hostory p.cap { text-align: left;} } /*------------------------------------------------- requirements ---------------------------------------------------*/ .mainContener.requirements {} .mainContener.requirements h3 { margin: 20px 0 40px; font-size: 22px; font-weight: 700; line-height: 1.5;} .mainContener.requirements h4 { margin: 20px 0; font-size: 20px; font-weight: 700; line-height: 1.5;} .mainContener.requirements .reqBlock { margin-bottom: 40px; font-size: 18px; /*border: 1px solid #fcc;*/} .mainContener.requirements .reqBlock ol { font-size: 18px; margin-bottom: 1em;} .mainContener.requirements .reqBlock ol li { margin-bottom: 1em;} .mainContener.requirements .reqBlock ul { font-size: 18px; margin-bottom: 1em;} .mainContener.requirements .reqBlock ul li { margin-bottom: 1em;} .mainContener.requirements p.simple-center-link { font-size: 130%;} .mainContener.requirements .entryBlock { padding: 20px 0 0;} .mainContener.requirements .entryBlock.reqTop article li.entry01 a { color: #00b5ee; border: 3px solid #00b5ee; background-color: #fff; } .mainContener.requirements .entryBlock.reqTop article li.entry01 a:hover { color: #029ac9; border-color: #029ac9} .mainContener.requirements .entryBlock.reqTop article li.entry02 a { color: #0068b6; border: 3px solid #0068b6; background-color: #fff;} .mainContener.requirements .entryBlock.reqTop article li.entry02 a:hover { color: #00519b; border-color: #00519b} .mainContener.requirements .entryBlock.reqTop article li br { display: none;} @media only screen and (max-width: 769px) { .mainContener.requirements article { margin-top: 30px;} .mainContener.requirements.reqTop ul { gap: 20px;} .mainContener.requirements.reqTop article li a { padding: 50px 0;} .mainContener.requirements.reqTop .entryBlock article li br { display: inline;} } /* recruit box */ #recruit-contents .recruitBox { margin-top: /*5em*/;} #recruit-contents .recruitBox table { width: 100%; font-size: 18px; border-collapse: collapse; border-spacing: 0; border-top: 1px solid #ccc;} #recruit-contents .recruitBox table tr { border-bottom: 1px solid #ccc;} #recruit-contents .recruitBox table th { width: 30%; text-align: left; padding: 15px 0 15px 15px; font-weight: normal;} #recruit-contents .recruitBox table td { width: ; text-align: left; padding: 15px 0; font-weight: normal;} #recruit-contents .recruitBox table .notes { margin: 1em 0 0; font-size: 90%; display: inline-block;} /* recruit box link color */ #recruit-contents .recruitBox table a[target="_blank"] { color: #038dd2;} #recruit-contents .recruitBox table a[target="_blank"]:hover, #recruit-contents .recruitBox table a[target="_blank"]:active { color: #0261ab;} @media only screen and (max-width: 769px) { #recruit-contents .recruitBox table th { width: 100%; display: block;} #recruit-contents .recruitBox table td { width: 100%; padding-left: 15px; display: block;} } /* recruit flow */ #recruit-contents .recruitFlow { width: 100%; margin-bottom: 30px; display: block;} #recruit-contents .recruitFlow p { margin: 0 0 5px; font-size: 95%; color: #666;} #recruit-contents .recruitFlow img { width: 100%; } #recruit-contents .recruitFlow .flow_pc { display: block;} #recruit-contents .recruitFlow .flow_sp { display: none;} @media only screen and (max-width: 769px) { #recruit-contents .recruitFlow .flow_pc { display: none;} #recruit-contents .recruitFlow .flow_sp { display: block;} } /*------------------------------------------------- recruit footer ---------------------------------------------------*/ footer { padding: 3em 0 0; text-align: left; clear: both;} .footerInner { width: 100%; box-sizing: border-box;} .footerInner p { color: #fff;} /* foot list */ .footerInner .foot-list { width: 100%; /*max-width: 1100px;*/ margin: 0 auto 2.5em; padding: 0 2%; box-sizing: border-box;} .footerInner .foot-list .foot-logo { width: 240px; margin-bottom: 1.5em; height: auto; display: block; box-sizing: inherit;} .footerInner .foot-list .foot-logo img { width: 100%;} .footerInner .foot-list .foot-logo a { transition: .3s;} .footerInner .foot-list .foot-logo a:hover { filter:alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; opacity:0.70; transition: .3s;} .footerInner .foot-list dl { display: table; width: 100%; margin: 0 auto; box-sizing: inherit;} /*.footerInner .foot-list dt { width: 145px; padding-right: 20px; display: table-cell; vertical-align: top; box-sizing: inherit;} .footerInner .foot-list dt img { width: 100%;} .footerInner .foot-list dt a img:hover { filter:alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; opacity:0.70; transition: .3s;}*/ .footerInner .foot-list dd { padding-left: 5%; display: table-cell; vertical-align: top; box-sizing: inherit;} .footerInner .foot-list dd > ul { margin: 0; padding: 0; list-style: none; font-size: .9em;} .footerInner .foot-list dd > ul > li { width: 21%; margin: 0; padding: 0; display: inline-block; vertical-align: top; font-weight: bold; list-style: none; } .footerInner .foot-list dd > ul > li:last-child { width: auto;} .footerInner .foot-list dd > ul > li > ul { margin: 5px 0 0; padding: 0; font-size: 85%; font-weight: normal; list-style: none; } .footerInner .foot-list dd > ul > li > ul > li { line-height: 160%;} .footerInner .foot-list dd > ul a:hover { cursor: pointer;} @media only screen and (max-width: 960px) { .footerInner .foot-list .foot-logo { width: 200px; text-align: center; margin-right: auto; margin-left: auto;} .footerInner .foot-list .foot-logo img { width: 100%;} .footerInner .foot-list dl { text-align: left; } .footerInner .foot-list dt { width: 15%; } .footerInner .foot-list dd { width: 85%; margin-bottom: 2em; padding-left: 0; } .footerInner .foot-list dd > ul > li { width: 48%; display: inline-block;} .footerInner .foot-list dd > ul > li > ul > li:last-child { margin-bottom: 2em; } } @media only screen and (max-width: 769px) { .footerInner .foot-list dl { display: block; text-align: center;} .footerInner .foot-list dt { width: 110px; display: block; margin: 0 auto 2em; padding: 0;} .footerInner .foot-list dd { padding: 0; display: block;} .footerInner .foot-list dd > ul > li { width: 100%; display: inline-block;} } /* foot bottom */ .footerInner .foot-bottom { margin: 0 0 2em; padding: 0; background-color: #fff; color: #000; font-size: .8em; box-sizing: border-box;} .footerInner .foot-bottomInner { width: 100%; /*max-width: 1100px;*/ margin: 0 auto; padding: 0 2%; box-sizing: inherit; } .footerInner .foot-bottomInner ul { margin: 0; padding: 0; display: inline-block; list-style: none; box-sizing: inherit; } .footerInner .foot-bottomInner ul li { display: inline-block; margin: 0 1em 0 0; box-sizing: inherit;} .footerInner .foot-bottomInner ul li:after { margin-left: 1em; content:'|'} .footerInner .foot-bottomInner ul li:last-child:after { content:''} .footerInner .foot-bottomInner ul li a { color: #000;} .footerInner .foot-bottomInner ul li a:hover { color: #2097d3;} .footerInner .foot-bottomInner p { margin: 0; padding: 0; font-size: 85%; color: #000; box-sizing: inherit; float: right;} @media only screen and (max-width: 960px) { .footerInner .foot-bottomInner ul { margin-bottom: 1em;} .footerInner .foot-bottomInner p { padding: 0; text-align: center; float: none;} } @media only screen and (max-width: 769px) { .footerInner .foot-bottomInner ul li { display: block; margin: 0;} .footerInner .foot-bottomInner ul li:after { display: none;} .footerInner .foot-bottomInner p { margin: 0; padding: 0; display: block;} } /*p.footerLogo { width: 100%; max-width: 290px; margin: 20px 0 0; padding: 0; } p.footerLogo img { width: 100%;} p.footerInfo { font-size: 0.8em; line-height: 130%;} p.footerInfo a { color: #fff;} p.footerInfo a:hover, a:active { color: #ff8e54; outline: 0;} p.copyright { margin: 3em 0 0; font-size: 0.7em; }*/ /*@media screen and (max-width: 769px) { footer { padding: 1em;} }*/ @media only screen and (max-width: 960px) { footer { text-align: center;} /*p.footerLogo { margin: 0 auto;}*/ } /*------------------------------------------------- contact form ---------------------------------------------------*/ .contact-area table.formBlock { width: 100%; margin: 0 0 20px; border-top: 1px solid #ccc; border-collapse: collapse; box-sizing: border-box;} .contact-area table.formBlock th { width: 30%; padding: 1.5em 4%;} .contact-area table.formBlock td { padding: 1em 0; } .contact-area table.formBlock th, .contact-area table.formBlock td { text-align: left; text-align: left; font-weight: normal; vertical-align: middle; border-bottom: 1px solid #ccc; box-sizing: inherit;} .contact-area table.formBlock td input, .contact-area table.formBlock td textarea { width: 100%; padding: .8em 1.6em; font-size: 1em; font-family: sans-serif; line-height: 180%; border: 1px solid #ececec; background-color: #ececec; box-sizing: border-box; transition: .3s;} .contact-area table.formBlock td input:focus, .contact-area table.formBlock td textarea:focus { background-color: #fff; border: 1px solid #ccc; outline: none; transition: .3s;} .contact-area table.formBlock td.half input { width: 60%; } .contact-area table.formBlock td.selectbox { position:relative;} .contact-area table.formBlock td.selectbox select{ -webkit-appearance:none; appearance:none; width:60%; margin-bottom: 1em; padding:.8em; box-sizing:border-box; font-size:1em; border:#ccc 1px solid; border-radius:0; background:#fff;} .contact-area table.formBlock td.selectbox::after { content:''; display:block; width:10px; height:10px; position:absolute; right:43%; top:22%; border-bottom:#666 2px solid; border-right:#666 2px solid; transform:rotate(45deg)translateY(-30%);} .contact-area p.red-note { color: #f00;} .contact-area table.formBlock th span { color: #f00;} .contact-area .formbtn { width: 560px; margin: 0 auto; text-align: center;} .contact-area .formbtn:after { content: ''; clear: both; display: block;} .contact-area .formbtn button.formBtnConfirm, .contact-area .formbtn button.formBtnSend, .contact-area .formbtn button.formBtnReturn { padding: 2.5em 1em; font-weight: bold; border-style: none; cursor: pointer;} /* 確認ボタン */ .contact-area .formbtn button.formBtnConfirm { width: 400px; background: #117eea; color: #fff; float: right; transition: .3s;} .contact-area .formbtn button.formBtnConfirm:hover { background: #086fd5; transition: .3s;} /* 送信ボタン */ .contact-area .formbtn button.formBtnSend { width: 400px; background: #086fd5; color: #fff; float: right; transition: .3s;} .contact-area .formbtn button.formBtnSend:hover { background: #0259af; transition: .3s;} /* 戻るボタン */ .contact-area .formbtn button.formBtnReturn { width: 150px; float: left; transition: .3s;} .contact-area .formbtn button.formBtnReturn:hover { background: #cfcfcf; transition: .3s;} .mail-thanks .contact-area { text-align: center ;} .mail-thanks h3.mailform { text-align: center ;} /* error mess */ p.error_messe { color: #f00;} .contact-area.confi {} .contact-area .formbtn.error { width: 100%; } .contact-area .formbtn.error button.formBtnReturn { width: 400px; float: none; transition: .3s;} /* confirm mess */ .contact-area.confi table.confirm { margin: 0 0 40px; width: 100%; /*border-top: 1px solid #ccc; border-left: 1px solid #ccc;*/} .contact-area.confi table.confirm th { width: 25%; padding: 10px 10px 10px 15px; text-align: left; vertical-align: middle; font-weight: normal; background: #ececec;} .contact-area.confi table.confirm td { padding: 10px 20px 10px 15px; text-align: left; /*border-left: 1px solid #ccc;*/} .contact-area.confi table.confirm th, .contact-area.confi table.confirm td { /*border-right: 1px solid #ccc;*/ border-bottom: 3px solid #fff;} @media only screen and (max-width: 769px) { .contact-area table.formBlock th, .contact-area table.formBlock td { display: block;} .contact-area table.formBlock th { border-bottom: none;} .contact-area table.formBlock td.half input { width: 100%; } h3.mailform, #etc-contents p.red-note { text-align: center;} .contact-area table.formBlock td.selectbox select{ width:80%;} .contact-area table.formBlock td.selectbox::after { right: 25%;} .contact-area .formbtn { width: 100%; } .contact-area .formbtn button.formBtnConfirm, .contact-area .formbtn button.formBtnSend { width: 100%; margin-bottom: 5%; float: none;} .contact-area .formbtn button.formBtnReturn { width: 60%; min-width: 200px; padding: 1.5em 1em; float: none;} .contact-area.confi { text-align: center;} .contact-area.confi table.formBlock td { padding-left: 10%;} } /* エラーメッセージ */ p.errorMsg { color: #f00; margin-bottom: 20px;} .contactArea input.txtField { width:90%; padding: 3px 8px; font-size: 15px; line-height: 150%; border: 1px solid #ccc;} .contactArea textarea.txtArea { width: 100%; padding: 3px 8px; font-size: 15px; border: 1px solid #ccc;} .contactArea label.txt { margin-left: 5px;} .contactArea ul.radioBlock li { margin: 0 0 5px;} /* サンクスページ */ .contactArea .thanksBlock { padding: 20px 0 40px; text-align: center;} .contactArea .thanksBlock p.reTop { margin: 30px 0 0;} .contactArea .thanksBlock p.reTop a { padding: 10px 40px; color: #333; font-size: 13px; background-color: #f4f4f4; border: 1px solid #ccc; } .contactArea .thanksBlock p.reTop a:hover { background-color: #ececec;} /* homeリンク */ p.homeBtnArea { margin: 10px 0; text-align: right;} p.homeBtnArea a { margin: 0; padding: 2px 5px 0; font-size: 80%; color: #333; line-height: 100%; background-color: #fff; /* border: 1px solid #ddd;*/ } p.homeBtnArea a:hover { background-color: #efefef;} p.homeBtnArea a span { margin-right: 0.5em; padding: 0 0 1px; color: #aaa; font-size: 70%; line-height: 100%; vertical-align: middle; display: inline-block;} /* カタログフォーム */ #etc-contents.catalog-form .contact-area table.formBlock td { position:relative;} #etc-contents.catalog-form .contact-area table.formBlock td select { margin-bottom: 0;} #etc-contents.catalog-form .contact-area table.formBlock td.selectbox::after { top:40%; } /* プラポリチェック */ dl.privacy-block { display: table; margin-bottom: 50px; box-sizing: border-box;} dl.privacy-block dt { width: 30%; padding: 1.5em 0 1.5em 4%; white-space: nowrap; display: table-cell; box-sizing: inherit; vertical-align: middle;} dl.privacy-block dd { padding: 1em 0; display: table-cell; vertical-align: middle;} dl.privacy-block dd a { width: auto; margin: 0 0 0 2em; padding: 1.5em; display: inline-block; box-sizing: inherit; transition: .3s;} dl.privacy-block dd a:hover { background-color: #efefef; transition: .3s;} dl.privacy-block br { display: none;} @media only screen and (max-width: 960px) { dl.privacy-block dt { width: 37%; white-space: normal;} dl.privacy-block br { display: inline; } } @media screen and (max-width: 769px) { dl.privacy-block { display: block; text-align: center; } dl.privacy-block dt { width: 100%; padding: 1.5em 0; display: block;} dl.privacy-block dd { width: 100%; margin: 0; padding: 0; display: block;} dl.privacy-block dd a { width: auto; margin: 0 } dl.privacy-block dt br { display: none;} } /* re Captcha */ p.tsk_recaptcha_policy { margin: 40px 0 0; padding: 0; text-align: center; font-size: 13px; color: #666; display: block;} p.tsk_recaptcha_policy a { padding: 3px 5px; font-size: 11px; color: #444; transition: .3s;} p.tsk_recaptcha_policy a:hover { /*background: #eee;*/ color: #0090d9; transition: .3s;} .grecaptcha-badge { visibility: hidden;} /* modaal setting （ムービー）*/ .modaal-video .modaal-inner-wrapper { padding:0;} /* モーダル余白 */ .modaal-close:after, .modaal-close:before{ background:#ccc;} /* モーダルボタン */ .modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before{ background:#666;} /* モーダルボタン hover */ .modaal-video-container { max-width: 1200px !important;max-height: 900px !important;}