@charset "utf-8";
/* CSS Document */
/*共通部分*/
html {
font-size: 62.5%; /* 16px * 62.5% = 10px 1em=10px*/
box-sizing: border-box;
}
body {
font-family: 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
font-size: 1.6rem;
line-height: 1.7;
color: #340C13;
}
img {
max-width: 100%;
}
h2 {
font-size: 4.2rem;
font-weight: 700;
}
h3 {
font-size: 3.0rem;
text-align: center;
font-weight: 600;
margin-top: 80px;
}
/*page-----top(index)-----*/
/*---header---*/
.page-header-bg {
height: 66px;
width: 100%;
background-color: #ffffff;
position: fixed; /*header背景の固定*/
top: 0;
left: 0;
z-index: 100;
}
.page-header-wrapper {
height: 66px;
width: 100%;
max-width: 1440px;
margin: 0 auto;
display: flex; /*ロゴ(h1)と右エリア（navと募集要項ボタン）を横並び*/
justify-content: space-between;
position: fixed; /*headerの中身の固定*/
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 200;
}
.page-header-wrapper h1 {
flex-basis: 15.6%;
min-width: 176px;
display: flex;
align-items: center; /* 縦方向の中央揃え */
height: 66px; /* h1の高さを必要に応じて調整 */
}
.logo {
padding: 3% 25px;
transition: opacity .3s ease-in .2s; /*ホバー時の変化対象のプロパティ、所要時間、変化の度合（６種類あり）、開始時間*/
}
.logo:hover {
opacity: 0.5; /*logoホバー時に半透明にする*/
}
.header-right {
flex-basis: 83%;
display: flex; /**/
justify-content: space-between;
}
.page-header-wrapper nav {
flex-basis: 86.7%;
}
.header-requirements-btn {
background-image: url("img/top-pc/requirements-btn.png");
background-size: contain;
background-repeat: no-repeat;
flex-basis: 29.7%;
min-width: 240px;
transition: background-image .2s ease-in .2s; /*対象のプロパティ、所要時間、変化の度合（６種類あり）、開始時間*/
}
.header-requirements-btn:hover {
background-image: url("img/top-pc/requirements-btn-w.png");
}
.page-header-wrapper ul {
display: flex; /**/
justify-content: flex-end;
margin-right: 4%;
margin-top: 3%;
}
.page-header-wrapper ul li {
margin-right: 3%;
font-family: "Noto Sans JP";
font-size: 1.4rem;
}
.page-header-wrapper ul li:last-child {
margin-right: 0;
}
.page-header-wrapper ul li a { /*headerメニューホバー時の設定*/
display: inline-block;
transition: all .2s ease-in .1s; /*対象のプロパティ、所要時間、変化の度合（６種類あり）、開始時間*/
}
.page-header-wrapper ul li a:hover { /*headerメニューホバー時の設定*/
color: #D86F80;
}
/*---hero---*/
.hero-bg {
background-image: url("img/top-pc/hero.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-top: 40px; /*headerの高さ分上を下げる*/
}
.hero-bg-text-wrapper {
max-width: 1000px;
margin-left: 2%;
}
.hero-bg p {
color: #ffffff;
text-shadow: 1px 1px 1px rgba(52, 12, 19, .4);
padding: 60px 0 80px;
}
.hero-bg h2 {
color: #ffffff;
text-shadow: 1px 1px 2px rgba(52, 12, 19, .4);
}
.hero-bg p {
font-size: 3.2rem;
}
.hero-bg h2 {
font-size:
2.4rem;
font-family: "NanumMyeongjo", "serif";
}
.hero-bg p.text-grow {
font-size: 12.0rem;
font-weight: 700;
line-height: 1.0;
text-shadow: 1px 1px 2px rgba(52, 12, 19, .4);
font-family: "NanumMyeongjo", "serif";
padding: 0;
margin-top: 5px;
}
.hero-bg > a > .btn-contact-form-vertical { /*TOPの「募集要項」ボタンの位置*/
position: fixed;
top: 150px;
right: 0px;
}
.btn-contact-form-vertical { /*TOP以外の「募集要項」ボタンの位置*/
position: fixed;
top: 350px;
right: 0px;
}
.btn-contact-form-vertical:hover {
opacity: 0.5;
}
/*---新着情報----*/
.news {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.news > h3 {
font-size: 4.2rem;
}
.news ol {
max-width: 880px;
text-align: center;
margin: 0 auto 75px;
}
.news ol li {
text-align: left;
}
.news-item {
display: flex;
align-items: center;
}
.news-item p {
margin: 0 10px 25px 0;
}
.news-cat {
background-color: #CFDFE8;
padding: 5px 15px;
}
/*ボタンの設定*/
.top-news-btn, .top-about-btn, .top-voice-btn, .top-education-btn, .voic-welfare-btn {
min-width: 290px;
display: flex;
justify-content: center;
align-items: center;
width: 68.2%; /*textエリアの中のサイズ*/
margin-top: 100px;
height: 50px;
background-color: #F4A1AE;
color: #fff;
box-shadow: 3px 3px 8px 0px rgba(244, 161, 174, 1);
transition: 0.5s;
background-image: url(img/top-pc/arrow.png);
background-repeat: no-repeat;
background-position: 80% 50%; /*矢印の位置調整 左右80％ 上下50％*/
}
.top-education-btn { /*教育体制・キャリアアップは文字数が多いので、センター合わせでなく左寄せに。*/
justify-content: flex-start;
background-position: 93% 50%; /*矢印の位置も調整 左右80％ 上下50％*/
}
.voic-welfare-btn { /*福利厚生こちらは文字数が多いので、センター合わせでなく左寄せに*/
justify-content: flex-start;
}
.top-education-btn > p { /*教育体制・キャリアアップは文字数が多いので、ボタン内の位置調整。*/
margin-left: 8%;
}
.voic-welfare-btn > p { /*福利厚生はこちらは文字数が多いので、ボタン内の位置調整*/
margin-left: 17%;
}
.top-news-btn, .voic-welfare-btn {
text-align: center;
margin: 0 auto;
width: 29%; /*新着情報width:1000pxの中のサイズなので変更*/
margin-top: 75px;
}
.top-news-btn > p, .top-about-btn > p, .top-voice-btn > p, .top-education-btn > p, .voic-welfare-btn > p {
margin-right: 10px;
}
.top-news-btn:hover, .top-about-btn:hover, .top-voice-btn:hover, .top-education-btn:hover, .voic-welfare-btn:hover {
border: solid 1px #F4A1AE;
color: #F4A1AE;
background: #fff;
box-shadow: none;
background-image: url(img/top-pc/arrow-pink.png);
background-repeat: no-repeat;
background-position: 80% 50%; /*矢印の位置調整 左右80％ 上下50％*/
}
.top-education-btn:hover { /*教育体制・キャリアアップは文字数が多いので、ボタン内の位置調整*/
justify-content: flex-start;
background-position: 93% 50%; /*矢印の位置調整 左右80％ 上下50％*/
}
/*---看護部について、ナースの声、教育制度・キャリアアップ---*/
.top-about-bg, .top-voice-bg, .top-education-bg {
padding: 100px 0;
}
.top-about-bg, .top-education-bg {
background-image: url("img/top-pc/top-about-bg.png"); /*看護部概要、教育制度に背景画像*/
background-size: contain;
background-repeat: repeat;
}
.top-about-bg {
margin-top: 80px;
}
.top-about-wrapper, .top-voice-wrapper, .top-education-wrapper {
max-width: 1000px;
margin: 0 auto;
display: flex; /*テキストと画像を横並び*/
justify-content: space-between;
align-items: flex-start; /*テキストと画像を上揃え*/
}
.top-about-textarea, .top-voice-textarea, .top-education-textarea {
flex-basis: 42.5%;
font-weight: 700;
}
.top-about-img, .top-voice-img, .top-education-img {
flex-basis: 51%;
box-shadow: 4px 4px 11px 0px rgba(52, 12, 19, .4);
}
.top-voice-textarea {
order: 2; /*ナースの声だけテキストと画像を左右入れ替え*/
}
.top-voice-img {
order: 1; /*ナースの声だけテキストと画像を左右入れ替え*/
}
.top-about h3, .top-voice h3, .top-education h3 {
font-size: 4.2rem;
margin: 0 0 30px 0;
text-align: left;
line-height: 1.2;
}
.top-pink-text {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: flex-start; /* 水平中心 */
font-size: 2.2rem;
color: #F4A1AE;
font-weight: 700;
margin-bottom: 50px;
}
.top-pink-text:before {
border-top: 1px solid;
content: "";
width: 6.25rem; /* 線の長さ */
margin-right: 1rem; /* 文字の右隣 */
}
/*---バナーエリア---*/
.top-banner-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.banner-welfare, .banner-question {
width: 55%;
margin-top: 100px;
box-shadow: 4px 4px 11px 0px rgba(52, 12, 19, .4);
}
.banner-welfare, .banner-question {
overflow: hidden;
}
.banner-welfare img:hover, .banner-question img:hover {
opacity: 0.5;
transform: scale(1.1);
transition: 0.5s;
}
.banner-question {
border: solid 1px #D9D9D9;
margin: 50px 0 0 auto; /*Q&Aのバナーを右寄せ*/
}
/*footer上のお問合せボタン*/
.top-contact-form-beside {
width: 40%;
max-width: 400px;
text-align: center;
margin: 100px auto 0;
}
.top-contact-form-beside img {
width: 100%;
box-shadow: 3px 3px 8px 0px rgba(244, 161, 174, .6); /*ピンクボタンのドロップシャドウ*/
}
.top-contact-form-beside img:hover { /*病院見学・お問合せボタンのホバー設定*/
opacity: 0.5;
}
/*---footer---*/
footer {
margin-top: 150px;
}
.footer-wrapper {
background-color: #F1F4F6;
padding-top: 70px;
width: 100%;
height: 424px;
font-family: "Noto Sans JP";
position: relative;
}
.footer-wrapper-contact { /*コンタクトフォームはfooterがsmallだけなので変更*/
width: 100%;
font-family: "Noto Sans JP";
position: relative;
}
.footer-outer {
display: flex; /*アドレスエリアとnavを横並び*/
justify-content: space-between;
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.footer-textarea {
flex-basis: 30%;
justify-content: center;
align-items: center;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo:hover {
opacity: 0.5;
}
.footer-address-map, .footer-address-tel {
display: flex; /*アイコンと住所、アイコンと電話番号を横並び*/
align-items: center;
justify-content: flex-start;
}
.footer-address-map p {
text-align: left;
}
.footer-address-map {
margin-bottom: 20px;
}
.address-icon, .tel-icon {
margin-right: 20px;
}
.footer-outer > nav {
flex-basis: 60%;
justify-content: space-around;
}
.footer-nav {
display: flex;
justify-content: space-around;
}
.footer-nav li {
text-align: left;
margin-bottom: 30px;
min-height: 52px;
}
.footer-nav li {
display: flex;
align-items: center; /* 垂直中心 */
justify-content: flex-start; /* 水平中心 */
}
.footer-nav li a:hover { /*footerメニューホバー時の設定*/
color: #D86F80;
}
.footer-nav li:before {
border-top: 2px solid;
color: #F4A1AE;
content: "";
width: 3.0rem; /* 線の長さ */
margin-right: 1rem; /* 文字の右隣 */
}
small {
display: block;
width: 100%;
height: 54px;
background-color: #CFDFE8;
text-align: center;
font-size: 1.4rem;
position: absolute;
bottom: 0px;
left: 0px;
}
small > p {
display: inline-block;
line-height: 54px;
}
/*-----------------------------------------------------------------------------*/
/*page-----看護部概要/about.-----*/
/*hero-bg下層ページ共通部*/
.hero-bg-about, .hero-bg-education, .hero-bg-voice, .hero-bg-welfare, .hero-bg-question {
width: 100%;
height: 353px;
background-size: cover;
background-position: 70% 50%;
background-repeat: no-repeat;
margin-top: 40px; /*headerの高さ分上を下げる*/
}
.hero-bg-about {
background-image: url("img/about-pc/about-hero.png"); /*看護部について、背景画像のみ変更*/
background-position: 100% 50%;
}
.hero-bg-voice {
background-image: url("img/voice-pc/nurse-voice-hero.png"); /*ナースの声、背景画像のみ変更*/
}
.hero-bg-about-flame, .hero-bg-education-flame, .hero-bg-voice-flame, .hero-bg-welfare-flame, .hero-bg-question-flame {
background-color: rgba(255, 255, 255, 0.5); /*ヒーロー画像の白いカバー*/
height: 353px;
}
.hero-bg-about-flame > h2, .hero-bg-education-flame > h2, .hero-bg-voice-flame > h2, .hero-bg-welfare-flame > h2, .hero-bg-question-flame > h2 {
text-align: center;
padding-top: 118px;
text-shadow: 0px 4px 4px #fff;
font-weight: 600;
}
.lead-pink {
position: relative; /*青のフレームと重ねるためにZ-index指定するためにstatic以外を指定*/
display: block;
font-size: 3.2rem;
color: #fff;
width: 50%;
height: 190px;
background: linear-gradient(45deg, #F794A4, #FDD6BD) /*(色が変わっていく方向や角度,(角度,開始色, 終了色))*/ ;
text-align: center;
margin-top: -50px;
padding-left: 220px;
z-index: 20;
}
.lead-pink-text-about, .lead-pink-text-voice, .lead-pink-text-education, .lead-pink-text-welfare {
padding-right: 257px;
}
.lead-pink-text-about > p, .lead-pink-text-voice > p, .lead-pink-text-education > p, .lead-pink-text-welfare > p {
color: #fff;
width: 100%;
height: 190px;
display: flex; /*高さを中央にする。（2つ以上pがあれば改行しないと横並びになる）*/
align-items: center; /*高さを中央にする。*/
text-align: left;
font-size: 3.8rem;
line-height: 1.5;
justify-content: flex-end;
min-width: 266px;
}
.lead-blue-wrapper {
width: 100%;
max-width: 1360px;
margin: -40px auto 0;
display: flex;
justify-content: center;
}
.lead-blue {
flex-basis: 64.7%;
height: 220px;
background-color: rgba(207, 223, 232, .55);
margin-top: 20px;
z-index: 5;
}
.lead-blue p {
color: #333;
display: flex; /*高さを中央にする。（2つ以上pがあれば改行しないと横並びになる）*/
align-items: center; /*高さを中央にする。*/
height: 220px; /*高さを中央にする。要素に高さの指定が必要*/
width: 43%; /*ブルー枠の内のwidth*/
margin-left: 16.9%;
}
.lead-img {
flex-basis: 29.4%;
margin-left: -280px;
z-index: 10;
}
/*---看護部長あいさつ---*/
.about-manager h3 {
margin-bottom: 50px;
}
.about-manager-bg {
width: 100%;
max-width: 1000px;
margin: 0 auto;
min-height: 800px;
background-image: url("img/about-pc/manager-bg.png");
background-size: cover;
background-repeat: no-repeat;
padding: 50px 30px;
}
.about-manager-title {
display: block;
font-size: 2.6rem;
width: 60%;
margin-bottom: 30px;
}
.about-manager-text {
width: 58%;
}
.about-manager-text > p {
margin-bottom: 1.6rem;
}
.about-manager-name {
text-align: right;
}
/*看護部理念・看護目標（.about-bluearea）*/
.about-bluearea {
background-color: rgba(207, 223, 232, .55);
padding: 80px 0;
margin-top: 80px;
}
.about-bluearea-bg {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.about-philo-policy-title {
margin-top: 0px;
font-weight: 700;
}
.philosophy, .policy {
background-color: #fff;
text-align: center;
padding: 40px 0px;
margin-top: 50px;
}
.about-philosophy-title, .about-policy-title { /*理念、看護部基本方針タイトル*/
color: #F4A1AE;
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 30px;
}
.about-philosophy-text {
font-size: 2.0rem;
font-weight: 700;
}
.policy-wrapper {
width: 64.2%;
text-align: center;
margin: 0 auto;
}
.policy-text-wrapper > p {
text-align: left;
height: 30px;
margin-bottom: 15px;
}
.policy-text-wrapper > p > span {
color: #F4A1AE;
font-size: 3.0rem;
font-weight: 800;
margin-right: 10px;
}
.policy-text-wrapper > p {
height: 30px;
line-height: 30px;
display: flex; /*高さを中央にする。（2つ以上pがあれば改行しないと横並びになる）*/
align-items: center; /*高さを中央にする。*/
margin-bottom: 20px;
}
.gole-wrapper {
margin-top: 50px;
}
.gole-text-wrapper > p {
background-color: #fff;
margin-bottom: 30px;
font-size: 2.0rem;
padding: 5px 25px;
}
.gole-text-wrapper > p > span {
color: #F4A1AE;
font-size: 6.0rem;
margin-right: 40px;
border-right: solid 3px #F4A1AE;
padding-right: 25px;
}
.gole-text-wrapper > p {
height: 100px;
line-height: 85px;
display: flex; /*高さを中央にする。（2つ以上pがあれば改行しないと横並びになる）*/
align-items: center; /*高さを中央にする。*/
}
/*---看護部について.department---*/
.department {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.department > h3 {
margin-bottom: 50px;
}
.department-wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
}
.system, .ward, .work, .others {
flex-basis: 48%;
margin-bottom: 50px;
}
.system-img, .work-img, .ward-img {
height: 200px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
margin-bottom: 20px;
}
.system-img {
background-image: url("img/about-pc/system.png");
}
.work-img {
background-image: url("img/about-pc/work.png");
}
.ward-img {
background-image: url("img/about-pc/ward.png");
}
.system-img > P, .work-img > P, .ward-img > p {
font-size: 2.6rem;
font-weight: 700;
background-color: #FFE1E6;
border: solid 3px #F4A1AE;
width: 41.6%;
padding-left: 20px;
position: absolute; /*ここから「看護体制」の文字と枠を写真の高さ中央、左寄せ*/
top: 50%;
left: 0;
transform: translate(0%, -50%); /*ここまで「看護体制」の文字と枠を写真の高さ中央、左寄せ*/
}
.ward-text {
display: flex;
justify-content: flex-start;
}
.ward-text p {
padding-right: 50px;
}
.ward-text p:last-child {
padding-right: 0px;
}
.others-title { /*外来診療、実習生受け入れのピンク枠*/
font-size: 2.6rem;
font-weight: 700;
background-color: #FFE1E6;
border: solid 3px #F4A1AE;
width: 54.2%;
padding-left: 20px;
}
.others-text {
margin: 10px 0 40px;
}
/*------------------------------------------------------------------------------------*/
/*page-----ナースの声/nurse-voice-----*/
.voice-newcomer, .voice-senior {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.voice-newcomer > h3 {
margin-bottom: 50px;
}
.voice-newcomer-wrapper {
width: 73%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-between
}
.voice-newcomer-name {
font-size: 2.6rem;
font-weight: 500;
margin: 20px auto 10px;
}
.voice-newcomer-experience {
margin-bottom: 20px;
}
.voice-newcomer-item {
box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, .25) /*個々の看護師枠のドロップシャドウ*/
}
.voice-senior > h3 {
margin: 100px auto 50px;
}
.voice-senior-wrapper {
display: flex;
justify-content: space-between;
width: 100%
}
/*---ナースの一日.one-day---*/
.one-day {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.one-day > h3 {
margin-bottom: 50px;
}
.one-day > p {
text-align: left;
font-size: 2.6rem;
margin-bottom: 20px;
}
.one-day > img {
margin-bottom: 80px;
}
/*---私たちが働きやすいと思える理由.nurse-voice-reason---*/
.nurse-voice-reason {
width: 100%;
background-image: url("img/voice-pc/reason-bg.png");
background-size: cover;
background-repeat: no-repeat;
padding: 80px 0 50px;
}
.nurse-voice-reason > h3 {
margin: 0 auto 50px;
}
.nurse-voice-reason-wrapper {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.nurse-voice-reason-outer {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.nurse-voice-reason-item {
position: relative;
width: 31.5%;
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .3);
}
.nurse-voice-reason-gr {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nurse-voice-reason-item > p {
background-color: #fff;
display: block;
height: 193px;
padding: 75px 18px 40px;
}
p > .other-welfare {
margin-bottom: 50px;
}
/*------------------------------------------------------------------------------------*/
/*page-----ナースの声/nurse-voice-individual-----*/
.introduction-fixed-background:before { /*鈴木さんの背景を、最初の画面とスクロールしてくる画面をdivで囲って背景指定する*/
content: "";
display: block;
position: sticky;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-image: url("https://wordpress-sitecreation.com/img/voice-individual-pc/ns-suzuki.png");
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
}
/* 背景画像を固定にする */
.introduction-fixed-background {
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;/* ←これで背景固定（パララックス風） */
color: #fff;
}
.introduction-fixed-background.suzuki {
background-image: url("img/voice-individual-pc/ns-suzuki.png");
}
.introduction-fixed-background.ito {
background-image: url("img/voice-individual-pc/ns-itou.png");
}
.introduction-fixed-background.yamada {
background-image: url("img/voice-individual-pc/ns-yamada.png");
}
.introduction-fixed-background.satou {
background-image: url("img/voice-individual-pc/ns-satou.png");
}
.introduction-fixed-background.watanabe {
background-image: url("img/voice-individual-pc/ns-watanabe.png");
}
/* フェードアニメーションの初期状態 */
.introduction-flame {
transform: translateY(100px);
opacity: 0;
transition: all 1s ease-in-out;
}
/* 表示時の状態（inviewが付与されたら） */
.introduction-flame.inview {
transform: translateY(0);
opacity: 1;
}
.introduction-name {
font-size: 1.5rem;
font-weight: bold;
}
.introduction-question {
font-weight: bold;
margin-top: 1em;
}
.introduction-answer {
line-height: 1.7;
margin-bottom: 2em;
}
/*ひとことの位置やスタイル*/
.introduction-fixed-background > p{
width: 39%;
max-width: 550px;
font-size: 3.0rem;
color: #F794A4;
text-shadow: 4px 4px 3px #fff;
position: absolute;
top: 17%;
right: 5%;
font-weight: 700;
}
/*佐藤さんはテキストを左に配置*/
.introduction-fixed-background.satou > p,.introduction-fixed-background.watanabe > p{
left: 5%;
}
.introduction-fixed-background{
background-image: url("img/voice-individual-pc/ns-suzuki-s.png");
background-repeat: no-repeat;
background-size: contain;
}
/*pink背景の自己紹介（スクロールで上がってくる）*/
.introduction-flame {
width: 100%;
background-color: rgba(244, 161, 174, 0.9);
}
.introduction-flame-wrapper { /*スクロールするピンク背景の中の文字の設定*/
text-align: center;
margin: 0 auto;
font-weight: 700;
padding: 80px 40px;
color: #fff;
}
.introduction-flame-wrapper > P { /*スクロールするピンク背景の中の文字の位置設定*/
text-align: left;
}
.introduction-name-flame { /*スクロールするピンク背景の中の文字（名前）の位置設定*/
text-align: left;
}
.introduction-name {
display: inline-block;
font-size: 8.0rem;
color: #fff;
position: relative;
}
.introduction-name::after {
content: '';
width: 600px;
height: 8px;
display: block;
background-color: #FDD6BD;
position: absolute;
bottom: 4px;
border-radius: 5px;
}
.introduction-experience {
font-size: 3.0rem;
}
.introduction-question {
font-size: 4.0rem;
margin-top: 50px;
}
.introduction-answer {
font-size: 1.8rem;
}
/*ナースの声/.individual-nurse-voice*/
.individual-nurse-voice {
background-color: rgba(244, 161, 174, 0.15);
padding: 80px 100px;
margin-top: 300px;
}
.individual-nurse-voice-wrapper {
width: 86%;
max-width: 1240px;
text-align: center;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
}
.individual-nurse-voice-item {
margin-right: 10px;
}
.individual-nurse-voice-item:last-child {
margin-right: 0px;
}
.individual-nurse-voice-item-text {
background-color: #fff;
padding: 20px 10px;
}
.individual-nurse-voice-item-experience {
min-height: 55px;
}
.individual-nurse-voice-item-name {
font-size: 2.2rem;
font-weight: 700;
}
/*ナースの声のaタグ*/
.individual-nurse-voice-item > a:hover {
opacity: 0.5;
}
/*------------------------------------------------------------------------------------*/
/*page-----キャリアアップ・教育制度/education-----*/
.hero-bg-education {
background-image: url("img/education-pc/education-hero-bg.png");
}
/*---教育制度---.education-system*/
.education-system {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.education-system > h3 {
margin-bottom: 50px;
}
.education-system-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.education-system-item {
flex-basis: 45%;
margin-bottom: 80px;
text-align: left; /*タイトルと文章をまとめて左寄せ*/
}
.education-system-item > img {
width: 100%;
height: 250px;
}
.education-system-item-title {
font-size: 2.4rem;
font-weight: 700;
color: #F4A1AE;
margin: 20px 0px 10px;
}
.education-system-item-othertitle {
font-size: 2.4rem;
font-weight: 700;
color: #F4A1AE;
margin: 0px 0px 20px; /*その他の教育支援だけmagin-top不要なので、HTMLでクラスを変更*/
}
.education-system-item-other-title {
font-size: 2.0rem;
font-weight: 700;
}
.education-system-item-other {
margin-bottom: 30px;
}
/*---キャリアアップ.education-career---*/
.education-career {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.education-career-wrapper > h3 {
margin-bottom: 50px;
}
.education-career-ladder-title {
font-size: 2.4rem;
font-weight: 700;
color: #F4A1AE;
margin-bottom: 20px;
}
.education-career-ladder-text {
text-align: left;
margin-bottom: 30px;
font-weight: 700;
}
.education-career-ladder {
margin-bottom: 80px;
}
.career-under-area {
display: flex;
}
.career-under-img {
flex-basis: 50%;
}
.career-under-number {
flex-basis: 50%;
}
.career-under-number {
background-color: #FFE1E6;
}
.career-under-number-title {
font-size: 2.0rem;
font-weight: 700;
text-align: center;
margin: 30px auto;
}
.career-under-number > table {
width: 71%;
height: 220px;
text-align: center;
margin: 0 auto;
font-weight: 500;
}
.career-under-number tr {
font-size: 2.0rem;
}
.career-under-number th, .career-under-number td {
font-weight: 400;
}
/*----------------------------------------------------------------------------------*/
/*page-----福利厚生/.welfare-----*/
.hero-bg-welfare {
background-image: url("img/welfare/welfare-hero-bg.png");
}
.our-welfare {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.welfare-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.welfare-item {
flex-basis: 48%;
margin-top: 50px;
box-shadow: 10px 10px 10px 0px rgba(244, 161, 174, 0.3);
border: solid 3px #F4A1AE;
padding: 50px 15px 60px 15px;
}
.welfare-item-text {
padding: 30px 25px 0;
}
.welfare-item-text-title {
font-size: 2.4rem;
font-weight: 700;
color: #F4A1AE;
}
.welfare-item-text-detail {
text-align: left;
}
/*----------------------------------------------------------------------------------*/
/*page-----Q&A/question.-----*/
.hero-bg-question {
background-image: url("img/question-pc/question-hero.png");
margin-bottom: 80px;
}
.question-wrapper {
font-family: "Noto Sans JP";
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
font-weight: 500;
}
.question-subheading { /*ピンク文字のタイトル*/
font-size: 2.6rem;
font-weight: 700;
color: #F4A1AE;
text-align: left;
margin-bottom: 20px;
margin-top: 80px;
}
details { /*質問の枠*/
border-bottom: 1px solid #545454;
text-align: left;
font-size: 2.0rem;
margin-bottom: 15px;
}
summary { /*質問の下にmargin*/
margin-bottom: 15px;
}
details > p { /*回答の上に線*/
border-top: 1px solid #B4B0B0;
padding: 15px 0;
display: flex;
align-items: center;
}
summary > .sy01 { /*質問のQと円の記載*/
display: inline-block;
background-color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
border: solid 3px #F4A1AE;
color: #F4A1AE;
font-size: 3.4rem;
line-height: 60px;
text-align: center;
margin-right: 3%;
}
.question-accordion-answr-a { /*Aと円の記載*/
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 3.4rem;
line-height: 60px;
text-align: center;
margin-right: 3%;
background-color: #CFDFE8;
border: solid 3px #CFDFE8;
color: #fff;
min-width: 60px;
flex-basis: 6%;
}
.question-accordion-answr { /*回答の設定*/
display: flex;
justify-content: flex-start;
align-items: center;
border-top: 1px solid #B4B0B0;
padding: 15px 0;
}
.question-accordion-answr > p { /*回答の文章の設定*/
flex-basis: 75%;
}
.arrow-flame {
position: absolute; /*矢印*/
right: 0px;
top: 50%;
display: inline-block;
padding: 30px;
transform: translate(0, -50%);
}
.arrow {
position: relative;
width: 60px;
height: 60px;
border: solid 3px #F4A1AE;
border-radius: 50%;
}
.arrow::before { /*矢印*/
content: '';
width: 30px;
height: 30px;
border-top: solid 2px #F4A1AE;
border-right: solid 2px #F4A1AE;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(20%) rotate(135deg) translateY(100%);
}
/*オープン時の記載*/
details[open] summary { /*オープン時のsummary(質問文の状態)*/
}
details[open] summary > span { /*オープン時のsummary(質問文の状態)Aの状態*/
background-color: #F4A1AE; /*Qの背景色変更*/
color: #fff; /*Qの文字色変更*/
}
details[open] .arrow {
position: relative;
width: 60px;
height: 60px;
border: solid 3px #CFDFE8;
background-color: #CFDFE8;
border-radius: 50%;
}
details[open] .arrow::before { /*オープン時の矢印の状態*/
content: '';
width: 30px;
height: 30px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-34%) rotate(-45deg) translateY(-27%);
}
summary {
position: relative;
display: block; /*左にある三角(open)を非表示に(list-style: none;でもOK)*/
max-width: 1000px;
}
summary::-webkit-details-marker { /* Safariで表示されるデフォルトの三角形アイコンを消す*/
display: none;
}
/*----------------------------------------------------------------------------------*/
/*page-----募集要項/requirements.-----*/
.requirements-bg {
font-family: "Noto Sans JP";
background: linear-gradient(180deg, rgba(207, 223, 232, .3), rgba(255, 225, 230, .3)); /*page背景のグラデーション*/
padding: 140px 0 80px;
}
.requirements-first-area {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.requirements-title > h2 {
margin: 0 auto 80px;
font-family: "YuMincho";
font-weight: 500;
}
.requirements-btn-wrapper {
width: 48%;
margin: 0 auto;
display: flex;
justify-content: space-between;
font-size: 2.0rem;
font-weight: 700;
}
.requirements-btn-pink, .requirements-btn-blue { /*新卒看護師のボタン*/
height: 98px;
width: 41.7%;
max-width: 200px;
background: linear-gradient(45deg, #FFE1E6, #F4A1AE);
border-radius: 20px;
display: flex; /*高さを中央にする。（2つ以上pがあれば改行しないと横並びになる）*/
align-items: center; /*高さを中央にする。*/
justify-content: center;
box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25);
transition: opacity .25s ease-in .2s; /*ホバー時の変化対象のプロパティ、所要時間、変化の度合（６種類あり）、開始時間*/
}
.requirements-btn-blue {
background: linear-gradient(45deg, #E3EFF5, #A9DEFC); /*ボタン背景のグラデーション*/
}
.requirements-btn-pink:hover, .requirements-btn-blue:hover { /*ボタンhover時*/
opacity: 0.5;
}
.requirements-newcomer, .requirements-graduated {
width: 100%;
max-width: 1000px;
margin: 150px auto 0;
}
.requirements-newcomer-title, .requirements-graduated-title {
text-align: center;
font-size: 3.2rem;
margin-bottom: 50px
}
.requirements-bg table {
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
}
.requirements-bg table, .requirements-bg th, .requirements-bg td {
border: 1px solid #333;
}
.requirements-bg th {
width: 25%;
padding-left: 5%;
vertical-align: middle;
background-color: #FFE1E6;
}
.requirements-graduated th {
background-color: #CFDFE8;
}
.requirements-bg td {
width: 75%;
vertical-align: middle;
padding: 20px 4%;
background-color: #fff;
}
/*page-----病院見学・採用お問合せ/.contact-form-----*/
.contact-form-explanation {
width: 100%;
max-width: 1000px;
margin: 0 auto;
font-family: "Noto Sans JP";
margin-top: 100px; /*headerとかぶるので、下げる*/
}
.contact-form-explanation-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-form-explanation-top > h2 {
display: inline-block;
font-size: 2.6rem;
font-weight: 500;
color: #F4A1AE;
text-align: center;
border: solid 1px #F4A1AE;
padding: 27px 42px;
flex-basis: 25%;
}
.current-situation {
flex-basis: 51.8%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
background-image: url("img/contact-form/situation-line.png");
background-size: cover;
height: 10px;
}
.current-situation-flame {
color: #fff;
background-color: #F4A1AE;
border-radius: 10px;
padding: 15px 20px;
display: inline-block;
width: 120px;
}
.current-situation-flame > p {
text-align: center;
vertical-align: middle;
position: relative;
}
.contact-form-explanation-text { /*こちらより、・・・の文章*/
font-size: 2.0rem;
margin: 50px 0;
}
.contact-form-content {
width: 100%;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
input { /*reset.cssで削除したスタイルを当てる*/
appearance: revert;
}
.contact-form-wrapper { /*フォームの設定*/
font-family: "Noto Sans JP";
font-size: 1.6rem;
background-color: rgba(244, 161, 174, 0.15);
text-align: left;
padding: 60px 38px;
border-radius: 30px;
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
}
.contact-form-item, .contact-form-item-textarea { /*labelと記入欄を横並び*/
display: flex;
justify-content: flex-start;
align-items: center;
}
form div {
margin-bottom: 40px;
}
label {
display: block;
margin-right: 3%; /*labelと記入欄の余白*/
min-width: 112px;
}
.contact-form-item > p {
margin-right: 3%; /*ラジオボタンのタイトルと記入欄の余白*/
min-width: 112px;
}
/**/
input[type=text], input[type=email], input[type=tel], textarea { /*記入欄の設定*/
background: rgba(255, 255, 255, .5);
border: 1px #fff solid;
border-radius: 10px;
font-size: 1.6rem;
padding: 5px 20px;
}
input[type=text], input[type=email], input[type=tel] { /*記入欄の設定*/
width: 100%;
max-width: 500px;
height: 50px;
}
textarea { /*テキストエリアの記入欄の設定*/
width: 100%;
max-width: 923px;
height: 150px;
}
.contact-form-item:nth-child(8) { /*「備考」を記入欄の上に合わせる*/
align-items: flex-start;
}
.contact-form-item:nth-child(3) label, .contact-form-item:nth-child(7) label { /*ラジオボタンの丸とテキスト（「男性」「女性」の余白設定）*/
margin-left: 20px;
}
input[type="submit"] { /*入力内容を確認するボタンの設定*/
text-align: center;
border: none;
cursor: pointer;
background-color: #F4A1AE;
color: #fff;
padding: 20px 100px;
border-radius: 20px;
font-family: "Noto Sans JP";
}
.contact-form-item-submit { /*入力内容を確認するボタンの位置調整*/
text-align: center;
max-width: 344px;
margin: 60px auto 150px;
}
.personal-information-consent { /*個人情報同意の文章*/
text-align: center;
margin-top: 50px;
}
/*jquery*/
.individual-nurse-voice-item {
background-color: #9f9f9f;
margin-bottom: 60px;
}
@media(max-width:1024px) {
.introduction-fixed-background:before {
background-position: 30% top;
}
.introduction-flame {
padding: 5%;
}
}
@media(max-width:760px) {
.introduction-fixed-background:before {
background-image: url(https://wordpress-sitecreation.com/img/voice-individual-mobile/ns-suzuki.png);
background-position: 50% top;
}
.introduction-fixed-background > p, .introdustion-fixed-background-itou > p, .introduction-fixed-background-yamada > p, .introduction-fixed-background-satou > p, .introduction-fixed-background-watanabe > p {
width: 87%;
max-width: 550px;
font-size: 2.0rem;
color: #F794A4;
text-shadow: 2px 1px 1px #fff;
position: absolute;
right: 0;
left: 0;
top: 15%;
margin: auto;
font-weight: 700;
}
.introduction-flame-wrapper {
max-width: 500px;
width: 82%;
}
.introduction-name {
font-size: 3.0rem;
}
.introduction-name::after {
width: 250px;
height: 5px;
}
.introduction-experience {
font-size: 2.0rem;
}
.introduction-question {
font-size: 2.4rem;
}
.introduction-answer {
font-size: 1.6rem;
}
.individual-nurse-voice {
padding: 80px 45px;
}
.individual-nurse-voice-wrapper {
flex-direction: column;
}
.individual-nurse-voice-item {
margin: 0px 0px 30px 0px;
box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, .5);
}
}