@charset "UTF-8";
/*ヘッダー設定*/
/*pc基本設定*/
/*sp基本設定*/
/*背景*/
/*ボーダー*/
/*ボタン*/
/*svg(#なしで記述)*/
/*aigis--*/
/*
---
name: アイコンフォント一覧
category:
- iconfont
---
cssで直接追加する場合は
```
content: $icon_アイコン名;
@include iconFont();
```
```html
-
arrow
EA01
-
ex
EA02
-
beginner
EA03
-
voice
EA04
```
```html
```
*/
/*--aigis*/
@font-face {
font-family: "icons";
src: url("fonts/icons.eot");
src: url("fonts/icons.eot?#iefix") format("eot"), url("fonts/icons.woff") format("woff"), url("fonts/icons.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.f-icon:before {
display: inline-block;
font-family: "icons";
font-style: inherit;
font-weight: inherit;
font-variant: inherit;
text-transform: none;
vertical-align: middle;
height: 1em;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.f-icon._arrow:before {
content: "\EA01";
}
.f-icon._ex:before {
content: "\EA02";
}
.f-icon._beginner:before {
content: "\EA03";
}
.f-icon._voice:before {
content: "\EA04";
}
body {
-webkit-text-size-adjust: 100%;
font-size: 16px;
background: #ffffff;
color: #222222;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
letter-spacing: 0;
box-sizing: border-box;
position: relative;
}
a {
color: #222222;
}
a:not(.hvn) {
transition: 0.5s;
}
a:not(.hvn):hover {
opacity: 0.6;
}
#border_display {
width: 100%;
min-width: 1000px;
height: auto;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
#border_display {
min-width: 768px;
}
}
body.body .header * {
transition: none !important;
}
@media only screen and (min-width: 769px) {
.u_pc {
display: block;
}
}
@media only screen and (max-width: 768px) {
.u_pc {
display: none !important;
}
}
@media only screen and (min-width: 769px) {
.u_sp {
display: none;
}
}
@media only screen and (max-width: 768px) {
.u_sp {
display: block;
}
}
/*===========
inview
===========*/
.fadeIn {
opacity: 0;
transition: 2s;
}
.fadeIn.is-show {
opacity: 1;
}
.fadeIn_delay01 {
opacity: 0;
transition: 2s;
transition-delay: 0.8s;
}
.fadeIn_delay01.is-show {
opacity: 1;
}
.fadeIn_delay02 {
opacity: 0;
transition: 2s ease-in-out;
transition-delay: 1s ease-in-out;
}
.fadeIn_delay02.is-show {
opacity: 1;
}
.fadeIn_up {
opacity: 0;
transform: translate(0, 60px);
transition: 0.8s ease-in-out;
}
@media only screen and (max-width: 768px) {
.fadeIn_up {
transform: translate(0, 0);
opacity: 0;
transition: 0.8s ease-in-out;
}
}
.fadeIn_up.is-show {
transform: translate(0, 0);
opacity: 1;
}
.fadeIn_left {
transform: translate(-50%, 0);
transition: 1s;
}
.fadeIn_left.is-show {
transform: translate(0, 0);
opacity: 1;
}
.fadeIn_right {
transform: translate(50%, 0);
transition: 1s;
}
.fadeIn_right.is-show {
transform: translate(0, 0);
opacity: 1;
}
/*コンポーネント*/
button,
input[type="button"] {
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.button01,
.button02,
.button04 {
display: block;
width: 100%;
max-width: 250px;
height: 60px;
line-height: 56px;
font-size: 16px;
color: #ffffff;
background: #006276;
font-weight: normal;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
letter-spacing: 0.1em;
text-align: center;
transition: 0.5s;
position: relative;
/* ボーダー，角丸 */
border-radius: 30px;
border: 1px solid #006276;
/* ボタン右矢印 */
}
.button01:hover,
.button02:hover,
.button04:hover {
cursor: pointer;
color: #222222;
background-color: #ffffff;
opacity: 1 !important;
}
.button01._center,
.button02._center,
.button04._center {
display: block;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.button01._center,
.button02._center,
.button04._center {
display: flex;
align-items: center;
justify-content: center;
}
}
.button01._wide,
.button02._wide,
.button04._wide {
max-width: none;
}
.button01._small,
.button02._small,
.button04._small {
height: 40px;
font-size: 12px;
line-height: 40px;
max-width: 160px;
}
.button01._arr:before,
.button02._arr:before,
.button04._arr:before {
width: 30px;
transition: 0.5s;
}
.button01._arr:after,
.button02._arr:after,
.button04._arr:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 9px;
height: 9px;
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
transition: 0.5s;
}
.button01._arr:hover:before, .button01._arr:hover:after,
.button02._arr:hover:before,
.button02._arr:hover:after,
.button04._arr:hover:before,
.button04._arr:hover:after {
right: 20px;
border-top: 2px solid #222222;
border-right: 2px solid #222222;
}
@media only screen and (max-width: 768px) {
.button01,
.button02,
.button04 {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 100%;
max-width: 400px;
height: 60px;
line-height: 60px;
font-size: 16px;
font-weight: 500;
border-radius: 80px;
}
}
.news_arr {
position: absolute;
display: block;
width: 38px;
height: 38px;
border-radius: 60px;
background-color: #FAC62C;
border: 2px solid #FAC62C;
z-index: 9990;
right: 0;
top: 0;
bottom: 0;
margin: auto 20px;
transition: 0.5s;
}
.news_arr:before {
width: 30px;
}
.news_arr:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 14px;
width: 9px;
height: 9px;
margin: auto;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(45deg);
box-sizing: border-box;
border-radius: 1px;
}
@media only screen and (max-width: 768px) {
.news_arr {
width: 30px;
height: 30px;
margin: auto 15px;
}
.news_arr:after {
right: 10px;
}
}
.button02 {
color: #006276;
background-color: #ffffff;
border: 1px solid #ffffff;
}
.button02:hover {
cursor: pointer;
color: #ffffff;
background-color: #006276;
border: 1px solid #ffffff;
}
.button02:hover span {
color: #006276;
}
.button02:hover:hover:before, .button02:hover:hover:after {
right: 20px;
transition: 0.5s;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.button02._arr::before, .button02._arr::after {
border-top: 2px solid #006276;
border-right: 2px solid #006276;
}
.button03 {
display: block;
width: 100%;
max-width: 342px;
height: 60px;
line-height: 60px;
text-align: center;
position: relative;
transition: 0.5s;
}
.button03:hover {
cursor: pointer;
background-color: #006276;
color: #ffffff;
}
.button03 {
color: #ffffff;
border: 1px solid #006276;
background-color: #006276;
}
.button03:hover {
border: 1px solid #69B0BC;
background-color: #69B0BC;
}
.button03._arr:before, .button03._arr:after {
content: "";
display: block;
position: absolute;
height: 1px;
right: 15px;
top: 50%;
transition: 0.3s;
}
.button03._arr:before {
width: 20px;
}
.button03._arr:after {
width: 9px;
transform-origin: right bottom;
transform: rotate(33deg);
}
.button03._arr:hover:before, .button03._arr:hover:after {
right: 8px;
}
.button03._arr:before, .button03._arr:after {
background-color: #ffffff;
}
.button04 {
max-width: 280px;
border: 1px solid #ffffff;
}
a.link {
text-decoration: underline;
color: #006276;
}
.c_table01 {
width: 100%;
}
.c_table01 th, .c_table01 td {
font-size: 16px;
line-height: 1.5;
padding: 10px 10px;
border: 1px solid #69B0BC;
vertical-align: middle;
text-align: center;
}
.c_table01 th {
background-color: #006276;
color: #ffffff;
}
.c_table01 td {
background-color: #ffffff;
color: #006276;
}
@media only screen and (max-width: 768px) {
.c_table01 th, .c_table01 td {
display: block;
width: 100%;
}
.c_table01 th {
border-color: #006276;
}
.c_table01 td {
border-top: none;
}
}
.list_title01 {
display: inline-block;
width: 100%;
font-size: 18px;
line-height: 1.8;
letter-spacing: 0.2em;
position: relative;
padding-bottom: 15px;
margin-bottom: 8px;
margin-top: -8px;
}
.list_title01:before, .list_title01:after {
content: "";
display: inline-block;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
}
.list_title01:before {
width: 80px;
background: #006276;
z-index: 2;
}
.list_title01:after {
width: 100%;
background: #69B0BC;
z-index: 1;
}
ul.list_ul {
margin-bottom: 20px;
}
ul.list_ul:last-child {
margin-bottom: 0;
}
ul.list_ul p {
margin-bottom: 0px;
}
ul.list_ul li {
font-size: 16px;
line-height: 2;
}
ul.list_ul li:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 6px;
background-color: #006276;
vertical-align: middle;
margin-right: 10px;
}
ol.list_ol {
counter-reset: item;
list-style-type: none;
}
ol.list_ol li {
font-size: 16px;
line-height: 2;
position: relative;
padding-left: 20px;
}
ol.list_ol li:before {
content: counter(item);
counter-increment: item;
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
background-color: #69B0BC;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
font-size: 12px;
font-weight: bold;
color: #006276;
}
/*h2~h4*/
.h2_title01 {
width: 100%;
margin-bottom: 20px;
}
.h2_title01._center {
text-align: center;
}
.h2_title01._padding {
padding-top: 70px;
}
.h2_title01._margin {
margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
.h2_title01._margin {
margin-bottom: 20px;
}
}
.h2_title01._position {
margin-top: -25px;
}
@media only screen and (max-width: 768px) {
.h2_title01._position {
margin-top: 0px;
}
}
.h2_title01 span {
display: inline-block;
}
.h2_title01 .main {
font-size: 40px;
line-height: 1.2;
color: #006276;
font-weight: medium;
}
.h2_title01 .main._main02 {
color: #222222;
}
.h2_title01 .main._font {
font-size: 20px;
}
@media only screen and (max-width: 768px) {
.h2_title01 .main._font {
font-size: 14px;
}
}
.h2_title01 .sub {
font-size: 16px;
line-height: 1.5;
color: #006276;
letter-spacing: 0.1em;
}
.h2_title01 .sub._sub02 {
color: #222222;
}
.h2_title01 .sub._font {
font-size: 32px;
}
@media only screen and (max-width: 768px) {
.h2_title01 .sub._font {
font-size: 20px;
}
}
.h2_title01 ._en {
font-family: "Roboto", sans-serif;
font-size: 58px;
font-weight: 900;
font-style: italic;
letter-spacing: 2px;
}
.h2_title01 ._ja {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-size: 16px;
line-height: 1.8;
font-weight: 600;
}
.h2_title01._center {
text-align: center;
}
.h2_title01.tx_w .main,
.h2_title01.tx_w .sub {
color: #ffffff;
}
.h2_title01._clw {
color: #ffffff;
}
.h2_title01._clw .main {
color: #ffffff;
}
.h2_title01._clw .sub {
color: #ffffff;
}
@media only screen and (max-width: 768px) {
.h2_title01 {
text-align: left;
margin-bottom: 15px;
}
.h2_title01._padding {
padding-top: 100px;
}
.h2_title01 .main {
font-size: 40px;
}
.h2_title01 .sub {
font-size: 20px;
}
}
.h2_title02 {
width: 100%;
margin-top: -15px;
margin-bottom: 20px;
}
.h2_title02 span {
display: block;
white-space: nowrap;
}
.h2_title02 .main {
font-size: 36px;
line-height: 1.5;
color: #006276;
font-weight: medium;
letter-spacing: 0.05em;
margin-bottom: 13px;
}
.h2_title02 .sub {
margin-top: -13px;
font-size: 20px;
line-height: 1.2;
}
.h2_title02._center {
text-align: center;
}
/*リクルート用*/
.h2_title03 {
margin-bottom: 30px;
}
.h2_title03 .main {
display: inline-block;
background-color: #006276;
color: #ffffff;
font-size: 32px;
letter-spacing: 0.05em;
padding: 5px 10px;
margin-top: -10px;
}
.h2_title03 h2 {
font-size: 20px;
padding: 5px 10px;
}
@media only screen and (max-width: 768px) {
.h2_title03 {
margin-bottom: 15px;
}
}
.h2_banner {
width: 100%;
height: 280px;
position: relative;
margin-bottom: 40px;
}
.h2_banner img,
.h2_banner h2 {
width: 100%;
height: 280px;
position: absolute;
top: 0;
left: 0;
}
.h2_banner img {
z-index: 1;
object-fit: cover;
}
.h2_banner h2 {
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(0, 40, 60, 0.6);
background-blend-mode: darken;
}
.h2_banner h2 span {
display: inline-block;
width: 100%;
text-align: center;
color: #ffffff;
}
.h2_banner h2 span.main {
font-size: 32px;
margin-bottom: 15px;
}
.h2_banner h2 span.sub {
font-size: 14px;
}
.h2_banner h2 span._en {
font-family: "Roboto", sans-serif;
letter-spacing: 0.16em;
}
.h2_banner h2 span._ja {
font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
.h3_title01 {
width: 100%;
margin-bottom: 20px;
}
.h3_title01 span {
display: block;
}
.h3_title01 .main {
font-size: 32px;
line-height: 1.5;
color: #006276;
margin-bottom: 30px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: 700;
}
.h3_title01 .main._collar {
color: #006276;
}
@media only screen and (max-width: 768px) {
.h3_title01 .main._collar {
color: #006276;
}
}
.h3_title01 .main._font {
font-size: 20px;
font-weight: 700;
font-style: italic;
letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
.h3_title01 .main._font {
font-size: 14px;
}
}
.h3_title01 .main._margin {
margin-bottom: -20px;
}
.h3_title01 .sub {
font-size: 16px;
line-height: 1.5;
}
.h3_title01 .sub._font {
font-size: 32px;
font-weight: 700;
}
@media only screen and (max-width: 768px) {
.h3_title01 .sub._font {
font-size: 20px;
}
}
.h3_title01 .sub._collar {
color: #222222;
}
@media only screen and (max-width: 768px) {
.h3_title01 .sub {
color: #ffffff;
}
}
.h3_title01 ._en {
font-family: "Roboto", sans-serif;
letter-spacing: 0.096em;
}
@media only screen and (max-width: 768px) {
.h3_title01 {
margin-bottom: 10px;
}
.h3_title01 .main {
font-size: 18px;
margin-bottom: 10px;
}
.h3_title01 .sub {
font-size: 12px;
}
}
.h3_title02 {
font-size: 26px;
font-weight: bold;
position: relative;
padding-left: 40px;
letter-spacing: 0.05em;
top: 12px;
margin-left: 50px;
}
.h3_title02::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 12px solid transparent;
/* 左辺の透明部分 */
border-right: 12px solid transparent;
/* 右辺の透明部分 */
border-top: 20.8px solid #ECBA43;
/* 正三角形の高さ */
}
@media only screen and (max-width: 768px) {
.h3_title02 {
font-size: 20px;
padding-left: 30px;
margin-left: 20px;
}
.h3_title02::before {
border-left: 10px solid transparent;
/* 左辺の透明部分 */
border-right: 10px solid transparent;
/* 右辺の透明部分 */
border-top: 17.3px solid #ECBA43;
/* 正三角形の高さ */
}
}
.h3_title03 {
display: inline-block;
width: 100%;
margin-bottom: 10px;
font-size: 18px;
line-height: 1.8;
background: linear-gradient(90deg, #006276 0%, #69b0bc 100%);
color: #ffffff;
text-align: center;
font-style: italic;
}
/*基本設定*/
.img_wrapper {
position: relative;
}
.img_wrapper:before {
content: "";
display: block;
padding-top: 71.4%;
}
.img_wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: auto;
object-fit: cover;
}
.img_wrapper img._notimg {
display: none;
}
/*ヘッダー*/
/*pc*/
.header {
width: 100%;
min-width: 1000px;
background: #ffffff;
position: fixed;
z-index: 9998;
top: 0;
height: 90px;
transition: .3s;
overflow: hidden;
box-sizing: border-box;
position: fixed;
}
.header.hide {
transform: translateY(-90px);
}
@media only screen and (max-width: 768px) {
.header.hide {
transform: none;
}
}
.h_inner {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
justify-content: space-between;
}
.h_inner .bg {
position: absolute;
background: linear-gradient(192deg, #006276 0%, rgba(105, 176, 188, 0.5) 100%);
width: 530px;
height: 100%;
z-index: -1;
transform: skewX(-60deg);
right: 130px;
}
@media only screen and (max-width: 768px) {
.h_inner .bg {
width: 300px;
right: -100px;
}
}
.header_logo {
height: 90px;
width: auto;
padding-left: 40px;
display: flex;
align-items: center;
}
.header_logo img {
width: 100%;
}
.header_logo h1, .header_logo p {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: 700;
font-size: 36px;
color: #222222;
}
.global_wrap {
width: auto;
height: 100%;
}
.global_wrap .global_tel {
height: calc(100% - 64px);
padding: 28px 50px 20px 0;
}
.global_wrap .global_tel p, .global_wrap .global_tel a {
text-align: right;
letter-spacing: 0.096em;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
color: #FAC62C;
}
.global_wrap .global_tel .number {
font-size: 24px;
margin-bottom: 8px;
line-height: 1;
}
.global_wrap .global_tel .number span {
font-size: 16px;
}
.global_wrap .global_tel .hours {
font-size: 12px;
}
.global_wrap .global_navi {
display: flex;
width: auto;
height: 100%;
z-index: 9999;
}
.global_wrap .global_navi li a {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
padding: 0 20px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
letter-spacing: 0.096em;
color: #222222;
text-align: center;
position: relative;
transition: 0.5s;
font-weight: 600;
align-items: flex-start;
font-size: 18px;
text-shadow: -0.5px -0.5px 0 white, 0.5px -0.5px 0 white, -0.5px 0.5px 0 white, 0.5px 0.5px 0 white;
}
@media only screen and (max-width: 768px) {
.global_wrap .global_navi li a {
text-shadow: none;
}
}
.global_wrap .global_navi li a:hover {
opacity: 1;
}
.global_wrap .global_navi li a span {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: italic;
font-size: 16px;
letter-spacing: 0px;
}
.global_wrap .global_navi li a:after {
content: "";
display: block;
position: absolute;
height: 3px;
width: calc(100% - 30px);
border-radius: 55px;
transition: 0.3s;
left: 15px;
bottom: 10px;
}
.global_wrap .global_navi li a:hover:after {
background-color: #006276;
box-shadow: #fff;
bottom: 20px;
}
.global_wrap .global_navi li.contact a {
background-color: #006276;
color: #ffffff;
padding: 0 20px;
}
.global_wrap .global_navi li.contact a:hover {
opacity: 0.6;
}
/*SP*/
@media only screen and (max-width: 768px) {
.header,
.header.is-animation {
height: 60px;
min-width: 320px;
padding-top: 10px;
padding-bottom: 10px;
position: sticky;
}
.h_inner {
width: 100%;
height: 100%;
/*spメニューの見た目*/
/*spメニューの中身*/
}
.h_inner .header_logo {
height: 100%;
width: auto;
padding-left: 20px;
}
.h_inner .header_logo img {
width: 300px;
padding-right: 100px;
}
.h_inner .header_logo h1, .h_inner .header_logo p {
font-size: 24px;
}
.h_inner .menu_button .menu_text {
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
font-size: 14px;
transition: 0.4s;
color: #006276;
}
.h_inner .menu_button {
display: block;
padding: 20px 10px 15px;
position: fixed;
z-index: 100;
right: 10px;
top: 0px;
text-align: center;
cursor: pointer;
}
.h_inner .menu_trigger,
.h_inner .menu_trigger span {
display: inline-block;
transition: 0.4s;
box-sizing: border-box;
}
.h_inner .menu_trigger {
position: relative;
width: 30px;
height: 20px;
}
.h_inner .menu_trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #222222;
border-radius: 4px;
}
.h_inner .menu_trigger span:nth-of-type(1) {
top: 0;
}
.h_inner .menu_trigger span:nth-of-type(2) {
top: 44%;
}
.h_inner .menu_trigger span:nth-of-type(3) {
bottom: 0;
}
.h_inner .global_wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: fixed;
top: 60px;
left: 100%;
width: 100%;
height: calc(100% - 60px);
z-index: 1;
overflow: hidden;
background: #636363;
transition: 0.4s;
}
.h_inner .global_wrap .global_navi {
order: 1;
height: auto;
flex-direction: column;
justify-content: flex-start;
padding: 0 20px;
}
.h_inner .global_wrap .global_navi li {
display: block;
text-align: center;
height: 70px;
line-height: 60px;
width: 100%;
border-bottom: 1px solid #ffffff;
}
.h_inner .global_wrap .global_navi li a {
font-size: 16px;
display: block;
height: 100%;
width: 100%;
color: #fff;
text-align: left;
position: relative;
padding: 0;
}
.h_inner .global_wrap .global_navi li a .h_en {
display: block;
margin-top: -40px;
font-size: 12px;
}
.h_inner .global_wrap .global_navi li a .h_spbtn {
position: absolute;
display: block;
width: 25px;
height: 25px;
border-radius: 60px;
background-color: #ECBA43;
z-index: 9990;
right: 0;
top: 40%;
}
.h_inner .global_wrap .global_navi li a .h_spbtn:before {
width: 30px;
}
.h_inner .global_wrap .global_navi li a .h_spbtn:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 9px;
height: 9px;
margin: auto;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(45deg);
box-sizing: border-box;
border-radius: 1px;
}
.h_inner .global_wrap .global_navi li a:after {
display: none;
}
.h_inner .global_wrap .global_navi li a:hover {
transition: all 0.5s ease 0s;
color: #ECBA43;
}
.h_inner .global_wrap .global_navi li a:hover .h_spbtn {
background-color: #222222;
border: solid 1px #ffffff;
right: -5px;
transition: all 0.5s ease 0s;
}
.h_inner .global_wrap .global_navi li a:hover .h_spbtn:before {
width: 30px;
}
.h_inner .global_wrap .global_navi li a:hover .h_spbtn:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 8px;
width: 9px;
height: 9px;
margin: auto;
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(45deg);
box-sizing: border-box;
border-radius: 1px;
transition: all 0.5s ease 0s;
}
.h_inner .global_wrap .global_navi li .sub {
display: none;
}
.h_inner .global_wrap .global_navi li.contact {
margin-left: 0;
}
.h_inner .global_wrap .global_tel {
order: 2;
height: 60px;
padding: 20px 0;
}
.h_inner .global_wrap .global_tel p, .h_inner .global_wrap .global_tel a {
text-align: center;
}
/*spメニューの動き*/
.header.active .global_wrap {
left: 0px;
}
.header.active .menu_button .menu_trigger span:nth-of-type(1) {
transform: translateY(10px) rotate(-45deg);
}
.header.active .menu_button .menu_trigger span:nth-of-type(2) {
opacity: 0;
}
.header.active .menu_button .menu_trigger span:nth-of-type(3) {
transform: translateY(-8px) rotate(45deg);
}
}
/*下層ヘッダー（pagetitlte）*/
.pagetitle {
width: 100%;
min-width: 1000px;
height: calc(430px + 100px);
}
@media only screen and (max-width: 768px) {
.pagetitle {
min-width: 320px;
height: 300px;
}
}
.pagetitle .pt_bg {
width: 100%;
min-width: 1000px;
height: calc(430px + 100px);
margin: 0 auto;
overflow: hidden;
background-size: cover;
background-position: center left;
}
.pagetitle .pt_bg._00 {
background-image: url(../images/cmn/header_bg00.webp);
}
.pagetitle .pt_bg._01 {
background-image: url(../images/cmn/header_bg01.webp);
}
.pagetitle .pt_bg._02 {
background-image: url(../images/cmn/header_bg02.webp);
}
.pagetitle .pt_bg._03 {
background-image: url(../images/cmn/header_bg03.webp);
}
.pagetitle .pt_bg._04 {
background-image: url(../images/cmn/header_bg04.webp);
}
.pagetitle .pt_bg._05 {
background-image: url(../images/cmn/header_bg05.webp);
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_bg {
width: 100%;
min-width: 320px;
height: 300px;
}
}
@media only screen and (max-width: 768px) {
.pagetitle {
min-width: 320px;
}
}
.pagetitle .pt_inner {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
.pagetitle .pt_inner .title_container {
width: 50%;
height: 100%;
padding-top: 100px;
position: relative;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .title_container {
width: 70%;
}
}
.pagetitle .pt_inner .title_container h1 {
display: block;
position: absolute;
width: 100%;
top: 65%;
transform: translateY(-50%);
left: 20%;
z-index: 10;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .title_container h1 {
top: 50%;
}
}
.pagetitle .pt_inner .title_container span .main, .pagetitle .pt_inner .title_container h1 .main {
font-size: 80px;
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: italic;
line-height: 1.5;
letter-spacing: 0.05em;
color: #ffffff;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .title_container span .main, .pagetitle .pt_inner .title_container h1 .main {
font-size: 40px;
}
}
.pagetitle .pt_inner .title_container span .sub, .pagetitle .pt_inner .title_container h1 .sub {
font-size: 20px;
line-height: 1.5;
letter-spacing: 0.1em;
color: #ffffff;
font-weight: 600;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .title_container span .sub, .pagetitle .pt_inner .title_container h1 .sub {
font-size: 16px;
}
}
.pagetitle .pt_inner ._bg01,
.pagetitle .pt_inner ._bg02,
.pagetitle .pt_inner ._bg03 {
width: 60%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(172deg, #006276 0%, #69b0bc 100%);
opacity: 1;
transition: all .3s;
transform: skewX(-10deg);
left: -80px;
top: 0;
}
.pagetitle .pt_inner ._bg01 {
opacity: 1;
background: #006276;
z-index: 2;
}
.pagetitle .pt_inner ._bg02 {
width: 80%;
opacity: 0.8;
z-index: 1;
}
.pagetitle .pt_inner ._bg03 {
width: 100%;
opacity: 0.5;
background: linear-gradient(172deg, #006276 0%, #69b0bc 100%);
z-index: 0;
}
.pagetitle .pt_inner .c_bread {
width: 100%;
height: 40px;
padding-left: 20px;
position: absolute;
bottom: 0;
left: 8%;
transition: all 0.3s;
z-index: 5;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .c_bread {
padding-left: 40px;
left: 0;
}
}
.pagetitle .pt_inner .c_bread li {
display: inline;
font-size: 11px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: 700;
line-height: 40px;
word-break: break-all;
}
@media only screen and (max-width: 768px) {
.pagetitle .pt_inner .c_bread li {
line-height: 40px;
}
}
.pagetitle .pt_inner .c_bread li a {
color: #ffffff;
}
.pagetitle .pt_inner .c_bread li a:hover {
opacity: 0.5 !important;
}
.pagetitle .pt_inner .c_bread li:after {
content: ">";
display: inline-block;
color: #ffffff;
margin: 0 5px;
margin-bottom: 2px;
}
.pagetitle .pt_inner .c_bread li:last-child {
color: #ffffff;
}
.pagetitle .pt_inner .c_bread li:last-child:after {
display: none;
}
/*共通ACCESS*/
.access {
width: 100%;
min-width: 1000px;
height: auto;
padding-top: 60px;
padding-bottom: 60px;
position: relative;
z-index: 0;
background-color: #006276;
background-image: url(../images/cmn/bg_access.jpg);
background-size: cover;
}
.access:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
opacity: 0.8;
z-index: 1;
}
.access_inner {
width: calc(100% - 40px);
max-width: calc(1000px - 40px);
height: auto;
background-color: #ffffff;
margin: 0 auto;
padding: 60px 50px;
position: relative;
z-index: 2;
}
.access_info {
display: flex;
justify-content: space-between;
margin-bottom: 42px;
}
.access_info .img_wrapper {
width: 440px;
}
.access_info .img_wrapper:before {
padding-top: 61.8%;
}
.access_info .text_container {
width: 420px;
}
.access_info .text_container p {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
line-height: 1.8;
color: #636363;
}
.access_info .name {
font-size: 18px;
margin-bottom: 20px;
}
.access_info .address {
margin-bottom: 10px;
}
.access_info dl {
color: #636363;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
display: flex;
width: 100%;
line-height: 1.8;
}
.access_info dl dt {
width: 70px;
}
.access_info dl dd {
width: calc(100% - 70px);
}
.access_info .sns {
margin-top: 30px;
}
.access_info .sns a {
margin-right: 20px;
}
.access_info .sns a:last-child {
margin-right: 0;
}
.access .map_wrapper {
height: 0;
width: 100%;
margin: 0 auto;
overflow: hidden;
padding-bottom: 33.33%;
position: relative;
}
@media only screen and (max-width: 768px) {
.access .map_wrapper {
width: 100%;
padding-bottom: 100%;
}
}
.access .map_wrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
@media only screen and (max-width: 768px) {
.access {
min-width: 0;
}
.access_inner {
padding: 30px 20px;
}
.access_info {
flex-direction: column;
}
.access_info .img_wrapper,
.access_info .text_container {
width: 100%;
}
}
/*フッター*/
/*pc*/
.footer {
width: 100%;
min-width: 1000px;
padding-top: 100px;
padding-bottom: 100px;
background-color: #69B0BC;
position: relative;
}
.footer.top {
margin-top: -100px;
padding-top: 215px;
}
.footer #pagetop:hover {
opacity: 1 !important;
}
.footer .pagetop a {
display: flex;
}
.footer .pagetop .f_btn {
display: block;
width: 25px;
height: 25px;
border-radius: 60px;
background-color: #006276;
position: absolute;
z-index: 9990;
right: 0;
bottom: 0;
margin-right: 190px;
margin-bottom: 48px;
}
.footer .pagetop .f_btn:before, .footer .pagetop .f_btn:after {
content: "";
display: block;
height: 2px;
width: 8px;
background-color: #ffffff;
position: absolute;
top: calc(50% - 5px);
}
.footer .pagetop .f_btn:before {
transform-origin: right bottom;
transform: rotate(-55deg);
right: calc(50% - 1px);
}
.footer .pagetop .f_btn:after {
transform-origin: left bottom;
transform: rotate(55deg);
left: calc(50% - 1px);
}
.footer .pagetop .f_btntext {
font-size: 16px;
font-family: "Roboto", sans-serif;
font-weight: 700;
color: #ffffff;
border-bottom: 2px solid #ffffff;
position: absolute;
z-index: 9990;
right: 0;
bottom: 0;
height: 24px;
letter-spacing: 0.1em;
margin-right: 100px;
margin-bottom: 47px;
}
.footer .f_inner {
width: 100%;
max-width: 1000px;
height: auto;
min-height: 130px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 20px;
overflow-x: hidden;
display: flex;
color: #ffffff;
}
.footer_upper {
display: flex;
align-items: center;
width: 100%;
padding-top: 49px;
padding-bottom: 42.5px;
position: relative;
}
.footer_upper:after {
content: "";
display: block;
width: 100vw;
height: 1px;
background-color: #ffffff;
opacity: 0.2;
position: absolute;
bottom: 0;
left: calc(50% - 50vw);
}
.footer_upper .footer_logo {
height: 120px;
width: auto;
margin-right: 30px;
}
.footer_upper .footer_logo img {
height: 100%;
}
.footer_upper .footer_info {
color: #ffffff;
line-height: 1.8;
}
.footer_upper .footer_info .address,
.footer_upper .footer_info .info {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-size: 14px;
color: #ffffff;
}
.footer_lower {
width: 100%;
padding-top: 30px;
}
.footer_lower .footer_navi {
display: flex;
height: auto;
justify-content: space-between;
font-size: 14px;
margin-bottom: 26px;
}
.footer_lower .footer_navi a {
text-align: left;
color: #ffffff;
font-family: "Oswald", sans-serif;
letter-spacing: 0.1em;
}
.footer_lower .footer_navi a:hover {
text-decoration: underline;
}
.footer_lower .footer_navi .parent {
display: block;
position: relative;
}
.footer_lower .footer_navi .parent ul {
margin-top: 25px;
}
.footer_lower .footer_navi .child {
display: block;
position: relative;
margin-bottom: 12px;
}
.footer_lower .footer_navi .child a {
padding-left: 10px;
font-size: 12px;
}
.footer_lower .footer_navi .child a:before {
content: "";
display: inline-block;
width: 5px;
height: 1px;
background-color: #ffffff;
position: absolute;
left: 0;
top: 7px;
}
.footer_lower .footer_copy {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.footer_lower .footer_copy p {
width: 100%;
text-align: center;
color: #ffffff;
font-size: 10px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}
.footer_left, .footer_right {
width: 50%;
}
.footer_left {
box-sizing: border-box;
}
.footer_left .footer_logo {
width: auto;
max-width: 300px;
margin-bottom: 40px;
}
.footer_left .footer_logo img {
height: 100%;
width: auto;
border-radius: 5px;
}
.footer_left .footer_logo a {
font-size: 32px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: 900;
color: #ffffff;
}
.footer_left .footer_info {
margin-bottom: 30px;
}
.footer_left .footer_info p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: 500;
}
.footer_left .footer_info .info {
font-family: "Roboto", sans-serif;
font-weight: 500;
margin-bottom: 35px;
}
.footer_left .footer_sns {
display: flex;
gap: 15px;
}
.footer_left .footer_sns .icon {
width: 30px;
height: 30px;
}
.footer_right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer_right .footer_navi {
height: auto;
max-height: 250px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 320px;
justify-content: flex-end;
}
.footer_right .footer_navi .parent {
display: inline-block;
margin-bottom: 50px;
margin-right: 120px;
}
.footer_right .footer_navi .parent a {
color: #ffffff;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
letter-spacing: 0.1em;
display: block;
font-size: 18px;
}
.footer_right .footer_navi .parent a:hover {
color: #FAC62C;
}
.footer_right .footer_navi .parent .parent_en {
display: block;
font-family: "Roboto", sans-serif;
letter-spacing: 0px;
font-weight: 700;
font-style: italic;
font-size: 16px;
margin-top: 5px;
}
.footer_right .footer_navi .parent .child {
font-size: 12px;
margin-top: 17px;
padding-left: 20px;
position: relative;
}
.footer_right .footer_navi .parent .child:before {
content: "";
display: block;
width: 12px;
height: 1px;
background-color: #006276;
position: absolute;
left: 0;
bottom: 0;
}
.footer .footer_copy {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}
.footer .footer_copy p {
font-family: "Oswald", sans-serif;
letter-spacing: 0.1em;
font-size: 16px;
}
/*sp*/
@media only screen and (max-width: 768px) {
.footer {
width: 100%;
min-width: 320px;
padding-top: 50px;
padding-bottom: 150px;
}
.footer.top {
padding-bottom: 75px;
}
.footer .f_inner {
display: flex;
flex-direction: column;
padding: 0 30px;
}
.footer_upper {
width: 100%;
flex-direction: column;
}
.footer_upper .footer_logo {
margin-right: 0;
margin-bottom: 20px;
}
.footer_lower {
padding-top: 0;
}
.footer_lower .footer_navi {
display: none;
}
.footer_left {
width: 100%;
padding: 0;
}
.footer_left .footer_logo {
margin-right: 0;
margin-bottom: 20px;
max-width: 240px;
}
.footer_left .footer_logo a {
font-size: 28px;
}
.footer_left .footer_info p {
font-size: 14px;
}
.footer_left .footer_info .info {
margin-bottom: 50px;
}
.footer_right {
width: 100%;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
padding: 50px 0;
justify-content: flex-start;
}
.footer_right .footer_navi {
height: auto;
max-height: 625px;
display: flex;
flex-direction: column;
width: 320px;
gap: 50px;
}
.footer_right .footer_navi .parent {
margin-bottom: 0;
margin-right: 0;
}
.footer_right .footer_navi .parent a {
font-size: 14px;
}
.footer_right .footer_navi .parent .parent_en {
font-size: 12px;
}
.footer .pagetop a {
display: flex;
}
.footer .pagetop .f_btn {
margin-right: 125px;
margin-bottom: 95px;
}
.footer .pagetop .f_btntext {
margin-right: 20px;
margin-bottom: 95px;
}
.footer .footer_sns {
display: flex;
gap: 10px;
margin-top: 30px;
}
.footer .footer_sns .icon {
width: 25px;
height: 25px;
}
.footer .footer_copy {
left: 0;
transform: none;
padding-left: 30px;
}
.footer .footer_copy p {
font-size: 14px;
}
}
/*コンテンツ*/
.main_contents {
position: relative;
overflow: hidden;
}
.main_contents::before {
content: "";
position: absolute;
width: 100%;
aspect-ratio: 1;
clip-path: polygon(-200% 100%, 100% -100%, 100% 100%);
background-color: #F2F2F2;
z-index: -5;
height: 100%;
transform: rotate(110deg);
bottom: -30%;
left: -100px;
}
.main_contents::after {
content: "";
position: absolute;
width: 100%;
aspect-ratio: 1;
clip-path: polygon(100% 60%, 0% 0%, 0% 100%);
background-color: #F8F8F8;
z-index: -6;
transform: rotate(180deg);
bottom: 8%;
right: 0;
}
@media only screen and (max-width: 768px) {
.main_contents::before {
clip-path: polygon(100% 100%, 100% 0%, -150% 90%);
height: 100%;
transform: rotate(180deg);
bottom: -5%;
height: 65%;
left: 0;
}
.main_contents::after {
height: 55%;
clip-path: polygon(100% 90%, 100% 0%, -200% 110%);
bottom: 8%;
}
}
/*section基本設定*/
.c_content {
width: 100%;
min-width: 1000px;
height: auto;
margin-top: 100px;
margin-bottom: 100px;
overflow: hidden;
position: relative;
}
.c_content .c_inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 20px;
}
.c_content .c_inner._kewY {
transform: skewY(-2deg);
}
@media only screen and (max-width: 768px) {
.c_content .c_inner._kewY {
transform: skewY(0deg);
}
}
.c_content .c_inner._height {
height: 100%;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner.inner_sp {
height: 100%;
display: flex;
align-items: center;
}
}
.c_content .c_inner._padding {
padding: 0 50px;
padding-bottom: 100px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner._padding {
padding: 0 20px;
}
}
.c_content .c_inner._padding02 {
padding-top: 100px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner._padding02 {
padding-top: 50px;
}
}
.c_content .c_inner._padding03 {
margin: 0;
padding: 100px 0;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner {
padding: 0 20px;
}
}
.c_content .c_inner._position {
position: relative;
}
.c_content .c_inner .data {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.c_content .c_inner .data .card {
width: 300px;
height: 200px;
padding: 25px 40px;
background-color: #ffffff;
box-shadow: 6px 6px 10px -4px rgba(0, 0, 0, 0.4);
border-radius: 10px;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card {
width: calc(50% - 10px);
height: auto;
justify-content: space-between;
padding: 20px 10px;
}
}
.c_content .c_inner .data .card._welfare {
width: 460px;
height: auto;
padding: 27px 40px;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card._welfare {
width: 100%;
padding: 20px;
}
}
.c_content .c_inner .data .card .card_text {
font-size: 20px;
color: #ffffff;
font-weight: 600;
background-color: #ECBA43;
width: 100%;
height: 35px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_text {
width: 100%;
font-size: 18px;
padding: 0 5px;
}
}
.c_content .c_inner .data .card .card_mars {
font-size: 76px;
font-weight: 800;
font-style: italic;
font-family: "Roboto", sans-serif;
padding-left: 10px;
text-align: center;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_mars {
font-size: 40px;
}
}
.c_content .c_inner .data .card .card_mars._flex {
display: flex;
gap: 20px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_mars._flex {
gap: 10px;
justify-content: space-around;
}
}
.c_content .c_inner .data .card .card_mars._margin {
margin-bottom: -10px;
}
.c_content .c_inner .data .card .card_mars._font {
font-size: 60px;
}
.c_content .c_inner .data .card .card_mars span {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-size: 30px;
font-style: normal;
padding-left: 10px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_mars span {
padding-left: 0;
font-size: 20px;
padding-left: 3px;
}
}
.c_content .c_inner .data .card .card_mars .gender {
display: block;
font-size: 24px;
margin-bottom: -10px;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_mars .gender {
text-align: center;
font-size: 16px;
margin-bottom: 5px;
}
}
.c_content .c_inner .data .card .card_mars .number {
font-size: 60px;
font-weight: 800;
font-style: italic;
font-family: "Roboto", sans-serif;
padding-left: 0;
}
@media only screen and (max-width: 768px) {
.c_content .c_inner .data .card .card_mars .number {
font-size: 36px;
}
}
.c_content .c_inner .data .card .card_title {
font-size: 20px;
font-weight: 800;
color: #222222;
position: relative;
padding-left: 20px;
margin-bottom: 0;
}
.c_content .c_inner .data .card .card_title::before {
content: "";
position: absolute;
display: block;
width: 10px;
height: 10px;
background: #ECBA43;
border-radius: 50px;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.c_content .c_inner .data .card .card_article {
font-size: 16px;
font-weight: 500;
color: #222222;
}
.c_content._bg01 {
position: relative;
background-color: #006276;
padding-bottom: 100px;
}
.c_content._bg01:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(180deg, white 0%, white 15%, #f8f8f8 100%);
max-width: 1000px;
position: absolute;
z-index: -1;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.c_content._bg01 span {
color: #ffffff;
}
.c_content._bg02 {
background: linear-gradient(90deg, #006276 0%, #69b0bc 100%);
padding-bottom: 100px;
}
.c_content._bg02._layout {
padding-top: 100px;
margin: 0;
}
.c_content._bg03 {
background: #006276;
transform: skewY(-2deg);
margin-top: -120px;
margin-bottom: 0;
height: 800px;
z-index: 3;
margin-bottom: -30px;
}
.c_content._bg03._margin {
margin: 0;
}
.c_content._bg03._height {
height: auto;
}
.c_content._bg03 .c_box {
gap: 0;
}
.c_content._bg03 .c_box .text_container {
padding: 0 !important;
}
.c_content._bg03 .c_box .text_container p {
width: 352px;
color: #ffffff;
}
@media only screen and (max-width: 768px) {
.c_content._bg03 .c_box .text_container p {
width: 100%;
}
}
.c_content._bg04 {
height: auto;
padding: 100px 0;
display: flex;
align-items: center;
margin: 0;
}
.c_content.last {
padding-bottom: 0px;
margin-top: -15px;
}
@media only screen and (max-width: 768px) {
.c_content.last {
margin-top: auto;
}
}
.c_content._height {
height: auto;
}
@media only screen and (max-width: 768px) {
.c_content._height {
padding: 0;
}
}
.c_content._height._margin {
margin: 0;
}
.c_content._height._padding {
margin: 0;
padding: 100px 0;
}
@media only screen and (max-width: 768px) {
.c_content._height._padding {
padding: 50px 0;
}
}
.c_content._height._padding02 {
padding-bottom: 100px;
}
@media only screen and (max-width: 768px) {
.c_content._height._padding02 {
padding-bottom: 50px;
}
}
.c_content._layout {
display: flex;
align-items: center;
margin: 0;
height: 650px;
}
@media only screen and (max-width: 768px) {
.c_content._layout {
height: 1000px;
padding: 50px 0;
margin: 0;
}
}
.c_content._layout .c_box p {
width: 352px;
}
@media only screen and (max-width: 768px) {
.c_content._layout .c_box p {
width: 100%;
}
}
.c_content._layout02 {
background: url(../images/top/service_bg.webp) no-repeat center/auto rgba(0, 40, 60, 0.6);
background-size: cover;
background-blend-mode: darken;
height: 550px;
transform: skewY(2deg);
display: flex;
align-items: center;
margin-top: 100px;
margin-bottom: 0;
z-index: 2;
}
@media only screen and (max-width: 768px) {
.c_content._layout02 {
transform: skewY(0deg);
margin: 0;
height: auto;
}
}
.c_content._layout02 .c_box p {
width: 352px;
color: #ffffff;
}
@media only screen and (max-width: 768px) {
.c_content._layout02 .c_box p {
width: 100%;
}
}
.c_content._service {
height: 100%;
margin: 0;
padding: 100px 0;
background-color: #ffffff;
}
@media only screen and (max-width: 768px) {
.c_content._service {
padding: 50px 0;
}
}
.c_content .bg_img {
position: absolute;
top: 0;
width: 100%;
height: 360px;
background-image: url(../images/recruit/data.webp);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.c_content .bg_img:after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.c_content._padding {
margin: 0;
padding: 100px 0;
}
.c_bg {
background: linear-gradient(172deg, #006276 0%, #69b0bc 100%);
height: 450px;
width: 100%;
}
.c_bg._layout {
position: absolute;
height: 500px;
z-index: -1;
}
@media only screen and (max-width: 768px) {
.c_bg {
height: 1000px;
}
}
.c_bg.bg_none {
background: none;
}
.c_bg .p_base {
color: #222222;
}
.c_bggray {
position: absolute;
width: 100%;
aspect-ratio: 1;
clip-path: polygon(0 0, 100% 0, 150% 100%);
background-color: #E5E5E5;
z-index: -5;
}
@media only screen and (max-width: 768px) {
.c_bggray {
width: 150%;
clip-path: polygon(0 0, 100% 0, 200% 100%);
top: 0;
left: -50%;
}
}
.c_bggray02 {
position: absolute;
width: 100%;
aspect-ratio: 1;
clip-path: polygon(0 0, 200% 0, 0% 80%);
background-color: #F2F2F2;
z-index: -5;
height: 100%;
transform: rotate(180deg);
}
.c_bggray02._version {
top: 0;
left: 0;
background-color: #E5E5E5;
}
.c_bggray02._version02 {
position: absolute;
width: 100%;
aspect-ratio: 1;
z-index: -5;
background-color: #F8F8F8;
}
.c_bggray02._version03 {
width: 100vw;
height: 210%;
aspect-ratio: 1;
clip-path: polygon(0% 100%, 0% 0, 153% 100%);
background-color: #F2F2F2;
margin: 0 calc(50% - 50vw);
z-index: -5;
left: 0;
top: -40%;
}
@media screen and (max-width: 1000px) {
.c_bggray02._version03 {
margin: auto;
}
}
.c_bggray02._version04 {
width: 100%;
aspect-ratio: 1;
clip-path: polygon(100% 160%, -50% 95%, 173% -53%);
background-color: #F2F2F2;
z-index: 0;
left: 0;
bottom: 0;
}
@media only screen and (max-width: 768px) {
.c_content {
min-width: 320px;
padding-top: 60px;
padding-bottom: 60px;
}
.c_content._bg01 {
padding-bottom: 60px;
}
.c_content._bg02 {
padding-bottom: 60px;
}
.c_content.last {
padding-bottom: 100px;
margin-top: -100px;
}
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
.c_content.last {
margin-top: 0;
}
}
@media only screen and (max-width: 768px) {
.c_content._bg03 {
transform: none;
margin-top: -120px;
margin-bottom: 0;
height: auto;
z-index: 3;
}
.c_content._bg04 {
padding-top: 60px;
margin: 0;
height: 100%;
}
}
.c_content.top_news .c_bggray02._version03 {
z-index: 0;
}
.c_content.top_news .h2_title01 {
position: relative;
z-index: 1;
}
/*レイアウト*/
.c_box {
width: 100%;
height: auto;
margin-bottom: 60px;
}
.c_box:last-child {
margin-bottom: 0;
}
.c_box._height {
height: 100%;
}
.c_box._diagonal {
transform: skewY(2deg);
}
@media only screen and (max-width: 768px) {
.c_box._diagonal {
transform: none;
}
}
.c_box._padding {
padding: 100px 0;
}
@media only screen and (max-width: 768px) {
.c_box._padding {
padding: 50px 0;
}
}
.c_box._outline {
background-color: #ffffff;
width: 100%;
padding: 50px;
border-radius: 15px;
}
@media only screen and (max-width: 768px) {
.c_box._outline {
padding: 40px 20px;
height: auto;
}
}
.c_box._position {
position: relative;
}
@media only screen and (max-width: 768px) {
.c_box._position._height {
display: flex;
flex-direction: column-reverse;
}
}
.c_box .text_container._bg_sv {
background: linear-gradient(90deg, #006276 0%, #69b0bc 100%);
width: 52%;
height: auto;
padding: 24px;
}
@media only screen and (max-width: 768px) {
.c_box .text_container._bg_sv {
width: 100%;
padding: 20px;
}
}
.c_box .text_container._bg_sv .h2_title01 .main,
.c_box .text_container._bg_sv .h2_title01 .sub {
color: #ffffff;
}
.c_box .text_container._bg_sv p {
color: #ffffff;
}
.c_box .text_container._bg_sv._rc {
width: 50%;
padding: 30px;
}
@media only screen and (max-width: 768px) {
.c_box .text_container._bg_sv._rc {
width: 100%;
padding: 20px;
}
}
.c_box .text_container._position {
position: absolute;
bottom: 0;
left: 0;
}
@media only screen and (max-width: 768px) {
.c_box .text_container._position {
position: static;
}
}
.c_box .text_container._position._right {
position: absolute;
bottom: 0;
right: 0;
left: auto;
}
@media only screen and (max-width: 768px) {
.c_box .text_container._position._right {
position: static;
}
}
.c_box .text_container._bg {
background: none;
}
.c_box .sv_img, .c_box .rc_img {
display: flex;
justify-content: flex-end;
min-height: 450px;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
.c_box .sv_img, .c_box .rc_img {
justify-content: center;
width: 100%;
min-height: auto;
}
}
.c_box .sv_img img, .c_box .rc_img img {
width: 60%;
object-fit: cover;
}
@media only screen and (max-width: 768px) {
.c_box .sv_img img, .c_box .rc_img img {
width: 100%;
min-height: auto;
}
}
.c_box .sv_img._left, .c_box .rc_img._left {
justify-content: flex-start;
}
@media only screen and (max-width: 768px) {
.c_box .sv_img._left, .c_box .rc_img._left {
justify-content: center;
}
}
.c_box .sv_img._rc img, .c_box .rc_img._rc img {
width: 70%;
min-height: 500px;
}
@media only screen and (max-width: 768px) {
.c_box .sv_img._rc img, .c_box .rc_img._rc img {
width: 100%;
min-height: auto;
}
}
.c_box .rc_img {
min-height: auto;
width: 60%;
height: 400px;
position: relative;
}
.c_box .rc_img img {
width: 100%;
}
.c_box .rc_img._radius {
border-radius: 10px;
}
@media only screen and (max-width: 768px) {
.c_box .rc_img {
margin-bottom: 20px;
width: 100%;
height: auto;
}
}
.c_box .rc_img._decoration::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #69B0BC;
top: 40px;
left: -40px;
z-index: -1;
}
@media only screen and (max-width: 768px) {
.c_box .rc_img._decoration::after {
width: 100%;
height: 100%;
top: 40px;
left: -40px;
bottom: auto;
}
}
.c_box p {
font-size: 16px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
line-height: 1.8;
margin-bottom: 30px;
letter-spacing: 0.1em;
}
.c_box p:last-child {
margin-bottom: 0;
width: 100%;
}
.c_box p._collar {
color: #222222;
}
.c_box p._width {
width: 335px;
}
@media only screen and (max-width: 768px) {
.c_box p._width {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.c_box p {
margin-bottom: 40px;
width: 100%;
font-size: 14px;
}
}
.c_box p svg {
fill: #006276;
}
.c_box p._textcenter {
text-align: center;
}
@media only screen and (max-width: 768px) {
.c_box p._textcenter {
text-align: left;
}
}
.c_box p.price {
font-size: 16px;
}
.c_box dl {
display: flex;
width: 100%;
min-height: 46px;
line-height: 1.8;
letter-spacing: 0.1em;
margin-top: -8px;
border-bottom: 1px solid #222222;
margin-bottom: 40px;
align-items: center;
}
.c_box dl._layout {
margin-bottom: 30px;
min-height: 50px;
padding-bottom: 20px;
}
@media only screen and (max-width: 768px) {
.c_box dl._layout {
height: auto;
padding-bottom: 10px;
}
}
.c_box dl._margin {
margin-bottom: 15px;
border: none;
}
.c_box dl dt {
width: 157px;
color: #222222;
font-size: 22px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}
.c_box dl dt._font {
color: #006276;
font-size: 40px;
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: italic;
width: 160px;
display: flex;
align-items: center;
justify-content: space-around;
margin-right: 60px;
}
@media only screen and (max-width: 768px) {
.c_box dl dt._font {
justify-content: flex-start;
}
}
.c_box dl dt .style {
width: 20px;
height: 20px;
background-color: #006276;
border-radius: 50%;
position: relative;
}
@media only screen and (max-width: 768px) {
.c_box dl dt .style {
display: none;
}
}
.c_box dl dt .style::before {
content: "";
display: inline-block;
width: 3px;
height: 70px;
background-color: #006276;
position: absolute;
top: 20px;
right: 0;
left: 0;
margin: 0 auto;
}
@media only screen and (max-width: 768px) {
.c_box dl dt .style::before {
display: none;
}
}
.c_box dl dt .none {
width: 20px;
height: 20px;
background-color: #006276;
border-radius: 50%;
position: relative;
}
.c_box dl dt .none span::before {
display: none;
}
@media only screen and (max-width: 768px) {
.c_box dl dt .none {
display: none;
}
}
.c_box dl dd {
width: calc(100% - 157px);
font-size: 16px;
}
@media only screen and (max-width: 768px) {
.c_box dl {
display: block;
}
.c_box dl dt, .c_box dl dd {
width: 100%;
}
}
.c_box dl dd dl {
display: flex;
min-height: 0;
margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
.c_box dl dd dl {
display: block;
}
}
.c_box dl dd dl dt,
.c_box dl dd dl dd {
color: #222222;
background-color: transparent;
padding: 0;
margin-right: 20px;
}
.c_box dl dd dl dt:last-child,
.c_box dl dd dl dd:last-child {
margin-right: 0;
}
@media only screen and (max-width: 768px) {
.c_box dl dd dl dt,
.c_box dl dd dl dd {
margin-right: 5px;
}
}
.c_box dl dd dl dt {
width: 80px;
}
.c_box dl dd dl dd {
width: auto;
}
.c_box .text_container._bg01 {
box-sizing: border-box;
padding: 30px;
background: #006276;
}
.c_box ._card {
width: 48%;
height: 500px;
background-image: url(../images/about/img01.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 768px) {
.c_box ._card {
width: 100%;
height: 360px;
background-position: center -50px;
}
}
.c_box ._card._svimg {
width: 100%;
height: 100%;
background-image: none;
}
.c_box ._card .card_img_wrapper {
overflow: hidden;
margin-bottom: 10px;
position: relative;
margin-top: 40px;
}
@media only screen and (max-width: 768px) {
.c_box ._card .card_img_wrapper {
margin-top: 20px;
}
}
.c_box ._card .card_img_wrapper:before {
content: "";
display: block;
padding-top: 360px;
}
.c_box ._card .card_img_wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 360px;
object-fit: cover;
}
.c_box ._card .card_title {
color: #006276;
margin-bottom: 0;
}
.c_box ._card .card_date {
color: #006276;
letter-spacing: 0.16em;
margin-bottom: 0;
}
.c_box ._list {
width: 100%;
padding-bottom: 20px;
border-bottom: 1px solid #AAAAAA;
margin-bottom: 20px;
}
.c_box ._list:last-child {
border-bottom: none;
margin-bottom: 0;
}
.c_box ._list .list_wrap {
display: flex;
}
.c_box ._list p {
margin-bottom: 0;
width: auto;
}
.c_box ._list .list_date {
font-size: 16px;
letter-spacing: 0.16em;
width: 105px;
margin-right: 40px;
}
@media only screen and (max-width: 768px) {
.c_box ._list .list_date {
margin-right: 20px;
}
}
.c_box ._list .list_text {
font-size: 16px;
line-height: 1.8;
margin-right: 40px;
flex-grow: 2;
}
@media only screen and (max-width: 768px) {
.c_box ._list .list_text {
margin-right: 20px;
}
}
.c_box ._list svg {
fill: #006276;
padding-top: 8px;
}
.c_box .adress {
font-size: 16px;
margin-bottom: 15px;
}
.c_box .tel {
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.2em;
}
.c_box .tel svg {
fill: #006276;
vertical-align: middle;
padding-bottom: 5px;
}
.c_box .tel span {
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 768px) {
.c_box {
margin-bottom: 40px;
}
.c_box:last-child {
margin-bottom: 0;
}
}
.c_box.w50-w50 {
display: flex;
justify-content: space-between;
align-items: center;
}
.c_box.w50-w50 .text_container {
width: 440px;
order: 1;
}
.c_box.w50-w50 .text_container._width {
width: 474px;
}
.c_box.w50-w50 .text_container._width._padding {
padding: 0 0 0 40px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50 .text_container._width._padding {
padding: 0 0 0 20px;
}
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50 .text_container._width {
width: 100%;
}
}
.c_box.w50-w50 .text_container._width02 {
width: auto;
}
.c_box.w50-w50 .img_wrapper {
width: 480px;
order: 2;
}
.c_box.w50-w50 ._left {
width: 450px;
height: 100%;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50 ._left {
width: 100%;
margin-bottom: 30px;
}
}
.c_box.w50-w50 ._left .h2_title01 .main, .c_box.w50-w50 ._left .h2_title01 .sub {
color: #222222;
}
.c_box.w50-w50 ._left p {
color: #222222;
width: 100%;
margin-bottom: 40px;
text-align: justify;
}
.c_box.w50-w50 ._left .reader {
font-family: "游明朝体", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "HGS明朝E", "メイリオ", "Meiryo";
text-align: right;
margin-bottom: 0;
}
.c_box.w50-w50 ._left .reader span {
font-size: 32px;
font-weight: 600;
padding-left: 28px;
}
.c_box.w50-w50._reverse .child.text_container {
order: 2;
}
.c_box.w50-w50._reverse .child.text_container.c-h2box {
padding-bottom: 50px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50._reverse .child.text_container.c-h2box {
padding: 30px;
}
}
.c_box.w50-w50._reverse .child.img_wrapper {
order: 1;
}
.c_box.w50-w50._reverse._padding {
padding: 0 30px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50._reverse._padding {
padding: 0;
}
}
.c_box.w50-w50._padding {
padding: 0;
gap: 20px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50._padding {
padding: 0;
}
}
.c_box.w50-w50_vertical {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.c_box.w50-w50_vertical dl {
width: 100%;
background-image: linear-gradient(90deg, #ECBA43 0 15%, #E5E5E5 15%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: bottom;
border-bottom: 0;
}
.c_box.w50-w50_vertical dl._line50 {
background-size: 100% 2px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50_vertical dl {
background-image: none;
border-bottom: 2px solid #ECBA43;
}
}
.c_box.w50-w50_vertical dl dt {
color: #222222;
font-size: 16px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
font-weight: bold;
width: 180px;
}
.c_box.w50-w50_vertical dl dd {
width: 100%;
color: #222222;
font-size: 16px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50_vertical dl {
display: block;
width: 100%;
margin-bottom: 30px;
}
.c_box.w50-w50_vertical dl dt, .c_box.w50-w50_vertical dl dd {
width: 100%;
}
}
.c_box.w50-w50_noflex {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.c_box.w50-w50_noflex dl {
display: block;
width: 440px;
min-height: 46px;
line-height: 1.8;
letter-spacing: 0.1em;
margin-top: -8px;
padding-bottom: 10px;
border-bottom: 1px solid #ffffff;
margin-bottom: 40px;
}
.c_box.w50-w50_noflex dl dt {
width: 100%;
color: #ffffff;
font-size: 16px;
font-family: "Oswald", sans-serif;
}
.c_box.w50-w50_noflex dl dd {
width: 100%;
color: #ffffff;
font-size: 14px;
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50_noflex dl {
display: block;
width: 100%;
margin-bottom: 30px;
}
.c_box.w50-w50_noflex dl dt, .c_box.w50-w50_noflex dl dd {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.c_box.w50-w50,
.c_box.w50-w50._reverse,
.c_box.w50-w50_noflex {
flex-direction: column;
}
.c_box.w50-w50 .child.text_container,
.c_box.w50-w50._reverse .child.text_container,
.c_box.w50-w50_noflex .child.text_container {
order: 2;
width: 100%;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 0px;
margin-left: 0;
}
.c_box.w50-w50 .child.img_wrapper,
.c_box.w50-w50._reverse .child.img_wrapper,
.c_box.w50-w50_noflex .child.img_wrapper {
order: 1;
width: 100%;
height: auto;
margin-left: 0;
margin-right: 0;
margin-bottom: 20px;
position: relative;
}
.c_box.w50-w50 .child.img_wrapper img,
.c_box.w50-w50._reverse .child.img_wrapper img,
.c_box.w50-w50_noflex .child.img_wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.c_box._about .h2_title01 .main, .c_box._about .h2_title01 .sub {
color: #222222;
}
.c_box._about p {
color: #222222;
width: 100%;
margin-bottom: 40px;
}
.c_box._about .reader {
text-align: right;
margin-bottom: 0;
}
.c_box._about .reader span {
font-size: 32px;
font-weight: 600;
padding-left: 28px;
}
@media only screen and (max-width: 768px) {
.c_box._about .reader span {
font-size: 28px;
}
}
.c_box.w48-w48 {
display: flex;
justify-content: space-between;
}
.c_box.w48-w48 .child {
width: 48%;
}
.c_box.w48-w48 .child._card .card_img_wrapper {
height: 345px;
}
@media only screen and (max-width: 768px) {
.c_box.w48-w48 {
flex-direction: column;
}
.c_box.w48-w48 .child {
width: 100%;
margin-bottom: 40px;
}
.c_box.w48-w48 .child:last-child {
margin-bottom: 0;
}
}
.c_box.w25x4 {
display: flex;
justify-content: space-between;
}
.c_box.w25x4 .child._card {
width: 225px;
}
.c_box.w25x4 .child._card .card_img_wrapper {
height: 169px;
}
.c_box.w25x4 .button {
width: 225px;
}
.c_box.w25x4.images .child._card {
margin-bottom: 30px;
}
.c_box.w25x4.images .child._card .card_img_wrapper {
margin-bottom: 0;
}
.c_box.w33x3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
align-items: stretch;
margin-bottom: 100px;
}
.c_box.w33x3._vertical {
flex-direction: column;
}
.c_box.w33x3._margin {
margin-bottom: 10px;
}
.c_box.w33x3 .child {
width: 308px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #ffffff;
}
.c_box.w33x3 .child p {
margin-bottom: 20px;
}
.c_box.w33x3 .child.newstop_bg {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 16px 40px;
margin-bottom: 12px;
position: relative;
}
.c_box.w33x3 .child a:hover {
transition: all 0.5s ease 0s;
color: #E5E5E5;
}
.c_box.w33x3 .child a:hover .news_arr {
right: -5px;
transition: all 0.5s ease 0s;
}
.c_box.w33x3:before, .c_box.w33x3:after {
content: "";
display: block;
width: 308px;
}
.c_box.w33x3:before {
order: 1;
}
.c_box.w33x3 ._position {
position: relative;
}
.c_box.w33x3 .text_container {
flex-grow: 1;
}
.c_box.w33x3 .text_container .date {
font-family: "Roboto", sans-serif;
font-weight: 800;
font-style: italic;
font-size: 18px;
line-height: 30px;
color: #222222;
margin-bottom: 0;
}
.c_box.w33x3 .text_container .title {
font-size: 16px;
color: #222222;
width: 90%;
}
@media only screen and (max-width: 768px) {
.c_box.w33x3 .text_container .title {
font-size: 14px;
}
}
.c_box.w33x3 .card_img_wrapper {
margin-top: auto;
text-align: center;
}
.c_box.w33x3 .card_img_wrapper img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 768px) {
.c_box.w25x4,
.c_box.w33x3,
.c_box.w48-w48 {
display: flex;
flex-direction: column;
}
.c_box.w25x4._margin,
.c_box.w33x3._margin,
.c_box.w48-w48._margin {
margin-bottom: 30px;
}
.c_box.w25x4 .child,
.c_box.w25x4 .child._card,
.c_box.w33x3 .child,
.c_box.w33x3 .child._card,
.c_box.w48-w48 .child,
.c_box.w48-w48 .child._card {
width: 100%;
margin-bottom: 20px;
}
.c_box.w25x4 .child.newstop_bg,
.c_box.w25x4 .child._card.newstop_bg,
.c_box.w33x3 .child.newstop_bg,
.c_box.w33x3 .child._card.newstop_bg,
.c_box.w48-w48 .child.newstop_bg,
.c_box.w48-w48 .child._card.newstop_bg {
padding: 15px 40px 15px 15px;
margin-bottom: 12px;
}
.c_box.w25x4 .child:last-child,
.c_box.w25x4 .child._card:last-child,
.c_box.w33x3 .child:last-child,
.c_box.w33x3 .child._card:last-child,
.c_box.w48-w48 .child:last-child,
.c_box.w48-w48 .child._card:last-child {
margin-bottom: 0;
}
.c_box.w25x4 .child p,
.c_box.w25x4 .child._card p,
.c_box.w33x3 .child p,
.c_box.w33x3 .child._card p,
.c_box.w48-w48 .child p,
.c_box.w48-w48 .child._card p {
margin-bottom: 20px;
}
.c_box.w25x4 .child .card_img_wrapper,
.c_box.w25x4 .child._card .card_img_wrapper,
.c_box.w33x3 .child .card_img_wrapper,
.c_box.w33x3 .child._card .card_img_wrapper,
.c_box.w48-w48 .child .card_img_wrapper,
.c_box.w48-w48 .child._card .card_img_wrapper {
width: 100%;
height: auto;
position: relative;
border-radius: 20px;
}
.c_box.w25x4 .child .card_img_wrapper:before,
.c_box.w25x4 .child._card .card_img_wrapper:before,
.c_box.w33x3 .child .card_img_wrapper:before,
.c_box.w33x3 .child._card .card_img_wrapper:before,
.c_box.w48-w48 .child .card_img_wrapper:before,
.c_box.w48-w48 .child._card .card_img_wrapper:before {
content: "";
display: block;
padding-top: 75%;
}
.c_box.w25x4 .child .card_img_wrapper img,
.c_box.w25x4 .child._card .card_img_wrapper img,
.c_box.w33x3 .child .card_img_wrapper img,
.c_box.w33x3 .child._card .card_img_wrapper img,
.c_box.w48-w48 .child .card_img_wrapper img,
.c_box.w48-w48 .child._card .card_img_wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.c_box_wrapper.w25-w75 {
display: grid;
grid-auto-rows: 1fr 60px;
grid-auto-columns: 240px 1fr;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(1) {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(2) {
grid-row: 1 / 3;
grid-column: 2 / 3;
margin-bottom: 0;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(3) {
padding-right: 40px;
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(3) .button {
max-width: 200px;
}
@media only screen and (max-width: 768px) {
.c_box_wrapper.w25-w75 {
display: block;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(2) {
margin-bottom: 60px;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(3) {
padding-right: 0;
}
.c_box_wrapper.w25-w75 .c_box:nth-child(3) .button {
max-width: 240px;
}
}
.c_box.list_box {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 40px;
}
.c_box.list_box .h3_title01 {
width: 100%;
margin-bottom: 10px;
line-height: 36px;
}
.c_box.list_box .h3_title01 .main {
line-height: 1;
margin: 5px 0 20px 0;
font-size: 20px;
}
.c_box.list_box .child {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: start;
width: 100%;
margin-bottom: 20px;
padding: 0 10px 10px 10px;
border-bottom: 1px solid #707070;
gap: 0 10px;
}
.c_box.list_box .child dt, .c_box.list_box .child dd {
background-color: unset;
color: #222222;
padding: 0;
}
.c_box.list_box .child dt {
font-size: 16px;
font-weight: 600;
}
.c_box.list_box .child dd {
line-height: 29px;
}
.c_box.list_box .child .list_item {
width: 30%;
display: flex;
flex-wrap: wrap;
}
.c_box.list_box .child .list_item dt, .c_box.list_box .child .list_item dd {
line-height: 40px;
}
.c_box.list_box .child .list_item dt {
width: 48%;
max-width: 90px;
}
.c_box.list_box .child .list_item dd {
width: auto;
text-align: left;
}
@media only screen and (max-width: 768px) {
.c_box.list_box .h3_title01 {
text-align: left;
}
.c_box.list_box .child {
width: 100%;
justify-content: start;
gap: 10px;
margin-bottom: 30px;
padding-bottom: 20px;
}
.c_box.list_box .child .list_item {
width: 48%;
}
.c_box.list_box .child .list_item dt, .c_box.list_box .child .list_item dd {
line-height: 1.5;
}
.c_box.list_box .child .list_item dd {
width: 100%;
}
.c_box.list_box .child .list_item:last-child {
width: 100%;
}
}
.c_box.w33-w67 {
display: flex;
}
.c_box.w33-w67 h2 {
width: 320px;
}
.c_box.w33-w67 .child {
width: 640px;
}
.c_box.w33-w67 .child p {
margin-top: -5px;
}
.c_box.w33-w67 .img_wrapper:before {
padding-top: 56.25%;
}
@media only screen and (max-width: 768px) {
.c_box.w33-w67 {
flex-direction: column;
}
.c_box.w33-w67 h2 {
width: 100%;
margin-bottom: 30px;
}
.c_box.w33-w67 .child {
width: 100%;
}
}
.menu_list dl {
display: flex;
justify-content: space-between;
width: 100%;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
line-height: 1.8;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid #69B0BC;
}
.menu_list dl:last-child {
margin-bottom: 0;
}
.c_box.staff {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.c_box.staff:last-child {
margin-bottom: 0;
}
.c_box.staff .img_wrapper {
width: 480px;
}
.c_box.staff .text_container {
width: 440px;
}
.c_box.staff .text_container p {
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
}
.c_box.staff .text_container .name {
display: block;
width: 100%;
font-size: 24px;
line-height: 1.5;
letter-spacing: 0.096em;
margin-bottom: 23px;
}
.c_box.staff .text_container .name .furigana {
display: block;
color: #006276;
font-size: 16px;
margin-bottom: 10px;
}
@media only screen and (max-width: 768px) {
.c_box.staff {
flex-direction: column;
}
.c_box.staff .img_wrapper {
width: 100%;
margin-bottom: 10px;
}
.c_box.staff .text_container {
width: 100%;
}
.c_box.staff .text_container .name {
text-align: center;
margin-bottom: 10px;
}
.c_box.staff .text_container .name .furigana {
margin-bottom: 5px;
}
}
/*新着情報ページ(news)*/
.c_content.news {
height: auto;
}
.c_content.news ul li {
background: #ffffff;
margin: 10px auto;
}
.c_content.news ul li a {
display: block;
width: 100%;
position: relative;
padding: 20px 30px;
}
.c_content.news ul li a .text_container .date {
color: #222222;
font-weight: bold;
font-style: italic;
margin-bottom: 5px;
}
.c_content.news ul li a::before, .c_content.news ul li a::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.c_content.news ul li a::before {
right: 30px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ECBA43;
background-color: #ffffff;
}
.c_content.news ul li a::after {
content: "";
height: 1em;
line-height: 1;
font-family: 'FontAwesome';
vertical-align: middle;
right: 47px;
color: #ECBA43;
font-size: 10px;
}
@media only screen and (max-width: 768px) {
.c_content.news ul li a {
padding-right: 70px;
}
.c_content.news ul li a::before {
right: 20px;
}
.c_content.news ul li a::after {
right: 37px;
}
}
.c_content.news__detail {
padding-top: 60px;
}
.c_box.button_container {
display: flex;
justify-content: center;
}
.c_box.button_container .button {
width: 225px;
margin-right: 20px;
}
.c_box.button_container .button:last-child {
margin-right: 0;
}
@media only screen and (max-width: 768px) {
.c_box.button_container {
flex-direction: column;
align-items: center;
}
.c_box.button_container .button {
margin-left: 0;
margin-right: 0;
margin-bottom: 20px;
}
.c_box.button_container .button:last-child {
margin-bottom: 0;
}
}
.c_box.border {
width: 100%;
background-color: #ffffff;
border-radius: 20px;
border: 1px solid #707070;
box-sizing: border-box;
padding: 50px 20px;
}
.c_box.border p {
text-align: center;
}
.c_box.border .caption {
font-size: 12px;
}
/* news */
.article_single {
border-bottom: 1px solid #cccccc;
margin-bottom: 40px;
}
.article_single .title {
margin-bottom: 20px;
font-weight: bold;
font-size: 20px;
line-height: 1.6;
word-break: break-all;
}
.article_single .day {
font-size: 14px;
margin-bottom: 60px;
letter-spacing: 0.16em;
}
.article_single .day span {
font-size: 20px;
}
/* post_single */
.post {
overflow: hidden;
}
.post p {
word-break: break-all;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 2.2;
}
.post strong,
.post b {
font-weight: bold;
}
.post img {
max-width: 100%;
height: auto;
}
.post img.alignright {
float: right;
margin: 0 0 15px 15px;
display: block;
}
.post img.alignleft {
float: left;
margin: 0 15px 15px 0;
display: block;
}
.post img.aligncenter {
display: block;
margin: 0 auto 15px;
}
.post h1 {
font-size: 30px;
margin: 0 0 35px;
font-weight: bold;
background: #333;
}
.post h2 {
font-size: 24px;
margin: 0 0 20px;
font-weight: bold;
}
.post h3 {
font-size: 22px;
margin: 0 0 35px;
padding: 5px 17px;
font-weight: bold;
border-left: 4px solid;
}
.post h4 {
font-size: 22px;
border-bottom: 1px solid;
margin: 0 0 35px;
padding-bottom: 6px;
font-weight: bold;
}
.post h5 {
font-size: 20px;
margin: 0 0 25px;
font-weight: bold;
}
.post h6 {
font-size: 16px;
margin: 0 0 20px;
font-weight: bold;
}
.post table {
margin-bottom: 25px;
}
.post table td {
padding: 10px;
border: 1px solid;
}
.post ul,
.post ol {
padding-left: 2.0em;
margin-bottom: 25px;
}
.post ul li {
list-style: outside;
margin-bottom: 10px;
line-height: 1.4;
}
.post ol li {
list-style: outside decimal;
margin-bottom: 10px;
line-height: 1.4;
}
.post blockquote {
background: #f5f5f5;
padding: 35px 25px 1px;
margin-bottom: 30px;
position: relative;
}
.post blockquote::before {
content: "“";
left: 10px;
top: 10px;
position: absolute;
font-size: 60px;
color: #aaa;
}
.post a {
text-decoration: underline;
color: #222;
}
.post a:hover {
text-decoration: none;
}
.post_head {
margin-bottom: 20px;
}
.post_title {
font-size: 22px;
letter-spacing: 0.18em;
color: #006276;
line-height: 1.5;
font-weight: bold;
}
.post_date {
text-align: left;
line-height: 2;
font-weight: bold;
}
.post_item:nth-child(n+2) {
margin-top: 60px;
padding-top: 60px;
border-top: 2px solid #E5E5E5;
}
[data-js-tel] a {
color: inherit;
text-decoration: underline;
}
/*詳細ページページャー*/
.c_pager_single {
display: flex;
justify-content: center;
}
.c_pager_single .back a {
display: block;
height: 40px;
font-size: 16px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
color: #FAC62C;
line-height: 40px;
border: 1px solid #FAC62C;
padding: 0 20px;
}
.c_pager_single .back a:hover {
opacity: 1 !important;
background-color: #FAC62C;
color: #ffffff;
}
.c_pager_single .prev a,
.c_pager_single .next a {
display: block;
height: 40px;
font-size: 16px;
font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
color: #FAC62C;
padding: 0;
position: relative;
}
.c_pager_single .prev a span,
.c_pager_single .next a span {
display: block;
height: 40px;
line-height: 40px;
color: #FAC62C;
}
.c_pager_single .prev a:hover,
.c_pager_single .next a:hover {
opacity: 1 !important;
}
.c_pager_single .prev a:hover span,
.c_pager_single .next a:hover span {
text-decoration: underline;
}
.c_pager_single .prev a:before,
.c_pager_single .prev a:after,
.c_pager_single .next a:before,
.c_pager_single .next a:after {
content: "";
display: block;
background-color: #006276;
position: absolute;
bottom: 17px;
transition: 0.5s;
height: 1px;
}
.c_pager_single .prev a {
margin-right: 76.5px;
}
.c_pager_single .prev a:before, .c_pager_single .prev a:after {
left: -40px;
}
.c_pager_single .prev a:before {
width: 30px;
}
.c_pager_single .prev a:after {
width: 9px;
transform-origin: left bottom;
transform: rotate(-45deg);
}
.c_pager_single .next a {
margin-left: 76.5px;
}
.c_pager_single .next a:before, .c_pager_single .next a:after {
right: -40px;
}
.c_pager_single .next a:before {
width: 30px;
}
.c_pager_single .next a:after {
width: 9px;
transform-origin: right bottom;
transform: rotate(45deg);
}
.c_pager_single .prev a:hover:before,
.c_pager_single .prev a:hover:after {
left: -45px;
}
.c_pager_single .next a:hover:before,
.c_pager_single .next a:hover:after {
right: -45px;
}
@media only screen and (max-width: 768px) {
.c_pager_single {
display: grid;
grid-template: "prev next" auto "back back" auto / 1fr 1fr;
grid-gap: 10px;
}
.c_pager_single .back {
grid-area: back;
}
.c_pager_single .back a {
height: 35px;
line-height: 35px;
text-align: center;
}
.c_pager_single .prev {
grid-area: prev;
padding-left: 40px;
}
.c_pager_single .prev a {
margin-right: 0;
}
.c_pager_single .next {
grid-area: next;
text-align: right;
padding-right: 40px;
}
.c_pager_single .next a {
margin-left: 0;
}
.c_pager_single .prev a,
.c_pager_single .next a {
display: inline-block;
height: 35px;
}
.c_pager_single .prev a span,
.c_pager_single .next a span {
line-height: 35px;
}
}
/* archive_pager */
.wp-pagenavi {
text-align: center;
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.wp-pagenavi a,
.wp-pagenavi span {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
width: 40px;
height: 40px;
margin: 0 10px;
border: 1px solid #ECBA43;
color: #ECBA43;
border-radius: 50%;
transition: 0.5s all;
font-style: italic;
font-family: "Roboto", sans-serif;
}
@media only screen and (max-width: 768px) {
.wp-pagenavi a,
.wp-pagenavi span {
width: 35px;
height: 35px;
}
}
.wp-pagenavi a:hover a,
.wp-pagenavi a:hover span,
.wp-pagenavi span:hover a,
.wp-pagenavi span:hover span {
background-color: #ECBA43;
color: #ffffff;
opacity: 1 !important;
}
.wp-pagenavi a:hover {
background-color: #ECBA43;
color: #ffffff;
opacity: 1 !important;
}
.wp-pagenavi .current {
background-color: #ECBA43;
color: #ffffff;
border: 1px solid #ECBA43;
border-radius: 50%;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
position: relative;
font-size: 16px;
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover {
background-color: #ECBA43;
color: #ffffff;
opacity: 1 !important;
}
/* バナーリンク */
.banner_wrap {
width: 100%;
height: 300px;
margin: 0 auto;
position: relative;
transition: 0.5s;
margin-top: 100px;
}
@media only screen and (max-width: 768px) {
.banner_wrap {
width: 100%;
height: auto;
}
}
.banner_wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.banner_wrap .banner_link {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
padding-top: 95px;
padding-bottom: 100px;
padding-left: 74px;
z-index: 1;
}
.banner_wrap .banner_link span {
color: #ffffff;
letter-spacing: 0.05em;
}
.banner_wrap .banner_link .main {
width: 100%;
font-size: 58px;
font-weight: 900;
font-style: italic;
letter-spacing: 2px;
}
.banner_wrap .banner_link .sub {
font-size: 16px;
}
.banner_wrap .banner_link .button_arr {
display: block;
position: relative;
position: absolute;
width: 77px;
height: 77px;
border-radius: 50%;
background: linear-gradient(180deg, #006276 0%, #69B0BC 100%);
top: 50%;
transform: translateY(-50%);
right: 64px;
transition: .5s;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.banner_wrap .banner_link .button_arr::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
/* 白いオーバーレイ */
opacity: 0;
/* 初期状態では透明 */
transition: opacity 0.5s;
/* ゆるやかに透明度を変更 */
z-index: 0;
/* オーバーレイを背景に配置 */
}
.banner_wrap .banner_link .button_arr .icon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #ffffff;
font-size: 37px;
margin-left: 5px;
transition: 0.5s;
z-index: 2;
}
.banner_wrap .banner_link:hover .button_arr::before {
opacity: 1;
}
.banner_wrap .banner_link:hover .button_arr .icon {
color: #69B0BC;
}
.banner_wrap._contact .main {
z-index: 1;
}
.banner_wrap._contact .sub {
z-index: 1;
}
.banner_wrap._contact::before {
background-image: url(../images/recruit/entry.webp);
background-position: center center;
transition: filter 0.5s ease;
z-index: 0;
transition: 0.5s;
}
.banner_wrap._contact::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 0;
transition: 0.5s;
}
.banner_wrap._contact:hover::before, .banner_wrap._contact:hover::after {
opacity: 0.8;
}
.banner_wrap._contact:hover a {
opacity: 1;
}
@media only screen and (max-width: 768px) {
.banner_wrap .banner_link {
padding: 50px 20px;
}
.banner_wrap .banner_link .button_arr {
width: 60px;
height: 60px;
right: 15px;
}
.banner_wrap .banner_link .button_arr .icon {
font-size: 30px;
}
}
/*バリデート追加エラーメッセージ*/
.checkbox .error {
margin-top: 5px;
}
/*文字詰め*/
span.tume {
font-feature-settings: "palt";
}
@media only screen and (max-width: 768px) {
span.tume {
font-feature-settings: normal;
}
}
/* プライバシーポリシー */
#privacy .button01 span::after {
display: none;
}
#privacy .h3_title01 .main {
font-size: 24px;
margin-bottom: 20px;
}
#privacy .h3_title01::after {
display: none;
}
#privacy .child._text {
margin-bottom: 60px;
}
#privacy .child._text:last-child {
margin-bottom: 0px;
}
@media only screen and (max-width: 768px) {
#privacy .h3_title01 .main {
font-size: 16px;
text-align: center;
}
#privacy .child._text {
margin-bottom: 30px;
}
}
#notfound .h2_title02 .main {
color: #222222;
}
/*# sourceMappingURL=_maps/style.css.map */