body#top{
overflow:hidden;
}
body#top hr{
border: none;
}
#visual{
position: relative;
}
#visual .banner,
#visual h1{
position: absolute;
z-index: 1;
}
#visual .banner{
left: 8%;
top: 8%;
width:35%;
}
#visual .banner a:hover{
opacity: .85;
transform: translateY(-10px);
}
#visual .banner a#ani_100th{
display: flex;
flex-direction: column;
border-radius: 16px;
overflow: hidden;
box-shadow:0 5px 15px rgba(0, 96, 140,0.1);
text-decoration: none !important;
}
#ani_100th .fl_box{
width:100%;
flex-grow: 1;
}
#ani_100th .fl_box > figure{
width:40%;
background:#fff;
padding:30px;
display: flex;
align-items: center;
}
#ani_100th .fl_box .txt{
width:60%;
background: url(../../images/bg_ani_100th.gif) repeat;
font-weight:bold;
padding:15px;
text-align: center;
color:#fff;
display: flex;
flex-direction: column;
justify-content: center;
font-size:1.2em;
line-height:1.2;
}
#ani_100th .fl_box .txt p{
margin-bottom:1em;
}
#ani_100th .fl_box .txt p strong{
font-size:1.5em;
color:#ffea20;
}
#visual .banner.after_100th{
width:auto;
max-width:260px;
}
.after_100th #ani_100th .fl_box > figure{
width:100%;
}
@media screen and (max-width:1210px){
#ani_100th .fl_box .txt p{
font-size:0.9rem;
}
}
#ani_100th .fl_box .count_down{
display:flex;
justify-content: center;
align-items: flex-end;
font-size:2em;
}
#ani_100th .fl_box .count_down span{
padding:10px 20px;
background: #fff;
min-width:2em;
min-height:1em;
border-radius: 10px;
margin-right: 10px;
border:1px solid #ffea20;
text-align: center;
font-size:1.3em;
line-height:1;
color:#00A7EA;
}
#ani_100th > em{
display: block;
background:#1256a0;
color:#fff;
font-weight: bold;
text-align: center;
padding:10px;
font-size:0.8em;
}
#ani_100th > em::after{
content:"";
display: inline-block;
vertical-align: middle;
width:14px;
height:14px;
margin-left: 10px;
border-radius:50%;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_layer_2%22%20data-name%3D%22layer_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206.06%2010.71%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%231256a0%3B%20stroke-width%3A%200px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22_layer_1-2%22%20data-name%3D%22layer_1%22%3E%20%3Cpolygon%20class%3D%22cls-1%22%20points%3D%22.71%2010.71%200%2010%204.65%205.35%200%20.71%20.71%200%206.06%205.35%20.71%2010.71%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
}
#visual h1{
right: 10%;
bottom: 10%;
color: #fff;
font-size: 4rem;
line-height: 1.2;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.5));
}
#visual .splide__arrows button{
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
}
#visual .splide__arrows button:hover{
opacity: .5;
}
#visual .splide__arrows .splide__arrow--prev{
transform: rotate(180deg) translateY(50%);
}
#visual .splide__arrows button svg{
fill: #fff;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.7));
}
#visual .splide__arrows .splide__arrow--next{
left: auto;
right: 0;
}
#visual .splide em{
position:absolute;
z-idnex:1;
right: 10%;
bottom: 10%;
color: #fff;
font-size: 4rem;
line-height: 1.2;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.5));
}
#top_bn_side{
position: fixed;
right: 0;
bottom: 7%;
z-index: 2;
opacity: 0;
pointer-events: none;
}
#top_bn_side.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
pointer-events: none;
}
to {
pointer-events: all;
opacity: 1;
transform: translateY(0);
}
}
#top_bn_side.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(100px);
}
}
#top_bn_side input,
#top_bn_side label{
display: none;
}
#top_bn_side a:hover{
opacity: .7;
}
#news_important{
margin: 60px auto 80px auto;
display: flex;
justify-content: space-between;
border: 1px solid #A9272D;
}
#news_important dl{
display: flex;
}
#news_important dt{
display: flex;
align-items: center;
background: #A9272D;
color: #fff;
text-align: center;
padding: 10px 20px;
white-space:nowrap;
}
#news_important dt::before{
content: "";
width: 26px;
height: 26px;
background: url(../../images/icon_important.svg) no-repeat;
background-size: contain;
margin-right: 10px;
}
#news_important dd{
display: flex;
padding: 0 15px;
}
#news_important a{
text-decoration: none !important;
color: #A9272D !important;
}
#news_important dd li,
#news_important dd li a{
display: flex;
}
#news_important dd li a{
align-items: center;
}
#news_important dd li a small{
margin-right: 15px;
}
#news_important dd li a:hover{
opacity: .5;
}
#news_important .btn_link{
display: flex;
}
#news_important .btn_link a{
display: flex;
align-items: center;
justify-content: center;
background: rgba(170, 39, 45,0.1);
padding: 10px;
position: relative;
font-size: 0.9rem;
font-weight: bold;
min-width:160px;
}
#news_important .btn_link a:hover{
background: rgba(170, 39, 45,0.15);
}
#news_important .btn_link a::after{
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #A9272D;
background-image: url(../../images/icon_arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
transition: all ease .3s;
}
#news_important .btn_link a:hover::after{
right: 5px;
}
body#top main h2{
font-size:2rem;
margin-bottom:50px;
text-align: center;
line-height: 1.2;
font-weight: normal;
}
body#top main h2 small{
display: block;
color: #00A7EA;
font-size: 1rem;
}
#online{
width: 90%;
margin: 0 auto;
}
#online .fl_box{
justify-content: space-between;
aspect-ratio: 5 / 3;
}
#online .fl_box div a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-direction: column;
background-color: #00739E;
overflow: hidden;
color: #fff !important;
text-decoration: none !important;
position: relative;
}
#online .fl_box a::before{
content: "";
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
height: 80%;
aspect-ratio: 1 / 1;
background: url(../../images/icon_arrow.svg) no-repeat;
background-position: center;
background-size: 30%;
border-radius: 50%;
border: 1px solid #fff;
pointer-events: none;
opacity: 0;
transition: all ease .3s;
}
#online .fl_box .gd_img_link a::before{
height: 30%;
top: auto;
transform: translateY(0);
bottom: 5%;
z-index: 2;
}
#online .fl_box a:hover::before{
right: -2%;
opacity: 0.5;
}
#online .fl_box .bl02 a{
background-color:#1256A0;
}
#online .fl_box .bl03 a{
background-color:#00608D;
}
#online .fl_box > div{
display: flex;
flex-direction: column;
justify-content: space-between;
}
#online .fl_box span{
line-height: 1.2;
font-size: 1.6vw;
padding: 0 0.5em;
transition: all ease .3s;
}
@media screen and (min-width:1280px){
#online .fl_box span{
font-size: 1.2em;
}
}
#online .fl_box .bl01 a:hover span,
#online .fl_box .bl02 a:hover span,
#online .fl_box .bl03 a:hover span{
transform: scale(1.1);
}
#online .fl_box small{
font-size: 0.8em;
display: block;
line-height: 1.7;
}
#online .fl_box > div figure{
width: 100%;
height: 100%;
position: relative;
}
#online .fl_box > div figure::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
pointer-events: none;
background: rgb(0,96,141);
background: linear-gradient(0deg, rgba(0,96,141,1) 0%, rgba(0,96,141,0) 100%);
transition: all ease .3s;
}
#online .fl_box > div a:hover figure::before{
height: 60%;
}
#online .fl_box > div figure img{
transition: all ease .3s;
}
#online .fl_box > div a:hover figure img{
transform: scale(1.1);
transition: all ease .5s;
}
#online .fl_box .gd_img_link{
position: relative;
}
#online .fl_box .gd_img_link span{
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
padding: 5%;
z-index: 2;
}
#online .fl_box .gd_img_link a:hover span{
transform: translateY(-5px);
}
#online .fl_box .gd_img_link em{
font-size: 1.4rem;
font-weight: bold;
line-height: 1.2;
}
#online .box1{
width: 40%;
}
#online .box1 .gd_img_link{
height: 80%;
}
#online .box1 .gd_img_link em{
font-size: 2rem;
}
#online .box1 .bl02{
height: 17%;
}
#online .box2{
width: 33%;
}
#online .box2 .gd_img_link{
height: 48%;
}
#online .box3{
width: 24%;
}
#online .box3 div:not(.gd_img_link){
height: 14%;
}
#online .box3 .gd_img_link{
height: 40%;
}
.btn_products{
display: flex;
flex-wrap: wrap;
}
.btn_products li{
width: 20%;
}
.btn_products a{
display: flex;
flex-direction: column;
align-items: center;
font-weight: bold;
color: #00608D !important;
text-decoration: none !important;
padding: 25px 15px;
}
.btn_products a:hover{
background:rgba(0, 96, 140,0.05);
}
.btn_products a figure{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.btn_products a figure svg{
display: block;
margin: 0 auto;
transition: all ease .3s;
height: 60px;
width: 65px;
}
.btn_products a:hover figure svg{
transform: scale(1.2);
}
.btn_products figure svg .cls-2{
transition: all ease .3s;
}
.btn_products a:hover figure svg .cls-2{
fill:#00A7EA;
}
#cocoshin a{
display: block;
background: #fff;
border:10px solid #0292cc;
border-radius: 30px;
padding: 40px 5%;
position: relative;
text-decoration: none;
color:#192C55;
}
#cocoshin a::before{
content:"";
position: absolute;
right:40px;
top:40px;
width:50px;
height: 50px;
border-radius: 50%;
background-color: #0292cc;
background-image: url(../../images/icon_ex-arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
z-index:1;
}
#cocoshin a:hover{
transform: translateY(-10px);
filter: drop-shadow(0 5px 20px rgba(198, 230, 241,0.75));
}
#cocoshin .txt_box p{
margin-top: 40px;
margin-bottom: 40px;
padding-top: 40px;
background-image : linear-gradient(to right, #0292cc 2px, transparent 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left top;
font-size: 110%;
}
#cocoshin .txt_box figure img{
display: block;
margin:0 auto;
width:100%;
max-width:350px;
}
#cocoshin .img_box{
width:55%;
margin-right: 8%;
flex-direction: column;
}
#cocoshin .img_box .splide{
margin-bottom: 20px;
display: flex;
position: relative;
}
#cocoshin .splide__track{
overflow: visible;
}
#cocoshin .fukidashi{
font-size:90%;
font-weight:bold;
display: inline-block;
padding:15px;
position:relative;
background: #00A7EA;
color:#fff;
border-radius: 6px;
text-align: center;
font-size:140%;
}
#cocoshin .fukidashi::after{
content:"";
position:absolute;
left:20%;
bottom:-10px;
width:0;
height:0;
border-style:solid;
border-width: 10px 10px 0 10px;
border-color: #00A7EA transparent transparent transparent;
}
#cocoshin li:nth-of-type(2n){
text-align: right;
padding-top: 100px;
}
#cocoshin li:nth-of-type(2n) .fukidashi::after{
left: auto;
right:20%;
}
#life_plan .fl_box{
justify-content: space-between;
align-items: center;
background: #fff;
filter: drop-shadow(0 5px 20px rgba(0, 96, 140,0.25));
}
#life_plan .fl_box section{
width: 35%;
text-align: center;
padding:20px;
}
#life_plan section figure{
height: 100px;
}
#life_plan section figure img{
height: 100%;
width: auto;
display: block;
margin: 0 auto;
}
#life_plan h2{
font-weight: bold !important;
}
#life_plan h2 span.color{
color: #00A7EA;
letter-spacing: 0em;
}
#life_plan h2 span.small{
font-size: 1.2rem;
letter-spacing: 0em;
}
#life_plan section p a:hover{
opacity: 0.5;
}
#life_plan .fl_box .splide{
width: 63%;
position: relative;
}
#life_plan .splide figure{
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
#life_plan .splide figure::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
pointer-events: none;
background: rgb(0,96,141);
background: linear-gradient(0deg, rgba(0,96,141,1) 0%, rgba(0,96,141,0) 100%);
opacity: 0.5;
}
#life_plan .splide figure img{
transition: all ease .5s;
}
#life_plan .splide a:hover figure img{
transform: scale(1.1);
}
#life_plan .splide em{
position: absolute;
z-index: 2;
color: #fff;
font-weight: bold;
font-size: 1.8vw;
left: 0;
bottom: 0;
padding: 5%;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.5));
}
#life_plan .splide a::before{
content: "\8A73\3057\304F\307F\308B";
position: absolute;
z-index: 2;
right: 13%;
bottom: 10%;
color: #fff;
opacity: 0;
transition: all ease .3s;
}
#life_plan .splide a::after{
content: "";
position: absolute;
z-index: 2;
right: 8%;
bottom: 8%;
height: 40px;
aspect-ratio: 1 / 1;
background: url(../../images/icon_arrow.svg) no-repeat;
background-position: center;
background-size: 20%;
border-radius: 50%;
border: 1px solid #fff;
pointer-events: none;
opacity: 0;
transition: all ease .3s;
}
#life_plan .splide a:hover::before{
opacity:1;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,1));
}
#life_plan .splide a:hover::after{
opacity: 1;
right: 5%;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,1));
}
#life_plan .thumb-wrapper{
margin-top: 40px;
display: flex;
justify-content: space-between;
}
#life_plan .thumb-media{
width: 24%;
}
#life_plan .thumb-media em{
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 25px 10px;
border-radius: 5px;
border: 1px solid #00608D;
color: #00608D;
font-weight: bold;
text-align: center;
transition: all ease .3s;
}
#life_plan .thumb-media em:hover{
background: rgba(0, 96, 140,0.1);
}
#life_plan .thumb-media.is-active em{
color: #fff;
background: #00608D;
filter: drop-shadow(0 5px 20px rgba(0, 96, 140,0.25));
}
#life_plan .thumb-media em::before{
content: "";
position: absolute;
left: 50%;
top:-10px;
transform: translateX(-50%);
width:0;
height:0;
border-style:solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent #00608D transparent;
opacity: 0;
transition: all ease 0s 0s;
}
#life_plan .thumb-media.is-active em::before{
opacity: 1;
transition: all ease .3s .2s;
}
#pickup .splide{
position: relative;
}
#pickup .splide a{
text-decoration: none !important;
color:#192C55 !important;
}
#pickup .splide a figure{
width: 100%;
aspect-ratio: 3 / 1.8;
overflow: hidden;
margin-bottom: 1em;
}
#pickup .splide a figure img{
transition: all ease .3s;
}
#pickup .splide a:hover figure img{
transform: scale(1.1);
}
#pickup .splide a em{
display: block;
font-weight: bold;
transition: all ease .3s;
}
#pickup .splide a:hover em{
transform: translateY(-5px);
}
#pickup .splide__arrows{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 75%;
}
#pickup .splide__arrows button{
position: absolute;
top:0;
background: #fff;
border-radius: 50%;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.15));
border: none;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#pickup .splide__arrows button svg{
fill:#00A7EA;
width: 16px;
height: 16px;
}
#pickup .splide__arrow--prev{
left: 0;
}
#pickup .splide__arrow--prev:hover{
left: -10px;
}
#pickup .splide__arrow--next{
left: auto;
right: 0;
}
#pickup .splide__arrow--next:hover{
right: -10px;
}
#pickup .splide__progress {
background: #B6CCE3;
margin: 60px auto 0 auto;
width: 60%;
}
#pickup .splide__progress__slide {
background: #00A7EA;
height: 3px;
transition: width 400ms ease;
width: 0;
}
#news .panel{
padding: 40px 0;
}
.tablabel{
display: flex;
justify-content: space-around;
border-bottom: 2px solid #00608D;
}
.tablabel li{
flex: 1;
}
.tablabel a{
text-decoration: none !important;
color: #00608D !important;
display: block;
text-align: center;
font-weight: bold;
padding:20px 10px;
}
.tablabel a br{
display: none;
}
.tablabel a:hover{
background: rgba(0, 96, 140,0.05);
}
.tablabel li.active a{
background: #00608D;
color: #fff !important;
}
.tablabel li:nth-of-type(2).active a{
background: #C55280;
}
.tablabel li:nth-of-type(3).active a{
background: #D78025;
}
#news .fl_box{
background: rgba(0, 96, 140,0.05);
padding: 30px;
justify-content: space-between;
align-items: center;
}
#news .fl_box dl,
#news .fl_box dd,
#news .fl_box dd ul{
display: flex;
align-items: center;
}
#news .fl_box dt{
font-weight: bold;
margin-right: 10px;
}
#news .fl_box dd ul img{
width: 43px;
}
#news .fl_box dd li{
margin: 0 5px;
}
#news .fl_box dd small{
background: #fff;
position: relative;
border: 1px solid #00608D;
color: #00608D;
padding: 10px 20px;
text-align: center;
margin-left: 15px;
}
#news .fl_box dd small::before,
#news .fl_box dd small::after{
content:"";
position: absolute;
top:50%;
transform: translateY(-50%);
width:0;
height:0;
border-style:solid;
border-width: 10px 10px 10px 0;
}
#news .fl_box dd small::before{
border-color: transparent #00608D transparent transparent;
left: -10px;
}
#news .fl_box dd small::after{
border-color: transparent #fff transparent transparent;
left: -9px;
}
#news .btn a{
border: none;
}
#news .btn a:hover{
background-color: rgba(0, 96, 140,0.1);
}
#bn_recruit{
margin-top: 60px;
justify-content: space-between;
}
#bn_recruit .gd_img_link{
width: 50%;
overflow: hidden;
}
#bn_recruit a{
display: flex;
width: 100%;
background-color: #1886C5;
overflow: hidden;
color: #fff !important;
text-decoration: none !important;
position: relative;
aspect-ratio: 4 / 1;
}
#bn_recruit div.txt{
width:50%;
height: 100%;
padding: 30px 20px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
#bn_recruit div.txt::after{
content:"";
position: absolute;
right: 20px;
bottom: 20px;
width:26px;
height: 26px;
border-radius: 50%;
background-color: #00608D;
background-image: url(../../images/icon_ex-arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
}
#bn_recruit small{
font-size: 1.4rem;
}
#bn_recruit em{
font-size: 2rem;
font-weight: bold;
letter-spacing: 0.1em;
}
#bn_recruit figure{
width: 100%;
height: 100%;
position: relative;
}
#bn_recruit figure::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: 1;
pointer-events: none;
background: rgb(0,96,141);
background: linear-gradient(0deg, rgba(0,96,141,1) 0%, rgba(0,96,141,0) 100%);
transition: all ease .3s;
}
#bn_recruit a:hover figure::before{
height: 60%;
}
#bn_recruit figure img{
transition: all ease .3s;
}
#bn_recruit a:hover figure img{
transform: scale(1.1);
transition: all ease .5s;
}
#banners.w_wrap{
max-width: 1440px;
}
#banners .splide:not(.is-active) {
padding: 0;
visibility: visible;
}
#banners .splide:not(.is-active) .splide__arrow--prev,
#banners .splide:not(.is-active) .splide__arrow--next {
display: none;
}
#banners .splide:not(.is-active) .splide__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
}
#banners .splide__track{
overflow: hidden;
}
#banners li{
display: flex;
align-items: center;
justify-content: center;
background: #fff;
padding: 15px 10px;
border: none;
}
#banners li a{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding:10px;
border: 1px solid rgba(0, 96, 140,0.2);
}
#banners li a::before{
content:"";
position: absolute;
right: -15px;
top: -15px;
width:26px;
height: 26px;
border-radius: 50%;
background-color: #00608D;
background-image: url(../../images/icon_ex-arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
}
#banners li a:hover{
opacity: 0.5;
}
#banners li a img{
max-height: 70px;
width: auto;
}
.splide__arrow--prev{
transform: rotate(180deg);
}
#banners .splide__arrows{
position: absolute;
left: 50%;
top:40%;
transform: translateX(-50%) translateY(-50%);
width: 110%;
z-index:2;
}
#banners .splide__arrows button{
position: absolute;
top:0;
background: #fff;
border-radius: 50%;
filter: drop-shadow(0 0 10px rgba(0, 96, 140,0.15));
border: none;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#banners .splide__arrows button svg{
fill:#00A7EA;
width: 16px;
height: 16px;
}
#banners .splide__arrow--prev{
left: 20px;
}
#banners .splide__arrow--prev:hover{
left: 10px;
}
#banners .splide__arrow--next{
left: auto;
right: 20px;
}
#banners .splide__arrow--next:hover{
right: 10px;
}
/* modal */
#modal-video .modal-inner{
padding: 30px 20px 20px 20px;
background: #f6f1ea;
border: 5px solid #FF9C34;
}
#modal-video .modal-inner::after{
content: "";
position: absolute;
width: calc(100% + 2px);
height: 20px;
left: -1px;
top: -1px;
background: #FF9C34;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
z-index: 1;
pointer-events: none;
}
#modal-video dt{
color: #20b253;
font-size: 300%;
border-left: 0;
margin-top: 0;
margin-bottom: 20px;
text-align: center;
}
#modal-video dt small{
display: inline-block;
margin-left: 10px;
color: #333;
font-size: 40%;
}
#modal-video dt small img{
vertical-align: middle;
display: inline-block;
margin-right: 5px;
}
#modal-video dd ul{
display: flex;
flex-wrap: wrap;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
#modal-video ul > li{
width: 50%;
position: relative;
padding: 60px 5% 30px 5%;
overflow: hidden;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
#modal-video ul > li figure{
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#modal-video ul > li figure img{
object-fit: cover;
object-position: top right;
width: 100%;
height: 100%;
}
#modal-video ul > li em{
display: block;
text-align: left;
font-weight: bold;
font-size: 140%;
text-shadow :
2px 2px 1px #ffffff,
-2px 2px 1px #ffffff,
2px -2px 1px #ffffff,
-2px -2px 1px #ffffff,
2px 0px 1px #ffffff,
0px 2px 1px #ffffff,
-2px 0px 1px #ffffff,
0px -2px 1px #ffffff;
}
#modal-video ul > li em img{
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
#modal-video ul > li:nth-of-type(1) em span{
color: #e67492;
}
#modal-video ul > li:nth-of-type(2) em span{
color: #41ad99;
}
#modal-video ul > li:nth-of-type(3) em span{
color: #ea8c41;
}
#modal-video ul > li:nth-of-type(4) em span{
color: #4fa0e0;
}
#modal-video ul > li.sub{
padding: 25px 5% 25px 5%;
}
#modal-video ul > li.sub em{
font-size: 110%;
}
#modal-video ul > li.sub em img{
width: 20px;
height: auto;
}
#modal-video ul > li a{
display: block;
position: relative;
padding: 15px;
text-align: center;
max-width: 200px;
margin-top: 15px ;
border-radius: 5px;
font-size: 110%;
color: #fff;
text-decoration: none;
background: #e67492;
box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}
#modal-video .modal-inner a{
transition: all ease .3s;
}
#modal-video .modal-inner a:hover{
transform: translateY(3px);
box-shadow: none;
opacity: .7;
}
#modal-video ul > li a::before,#modal-video ul > li a::after{
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#modal-video ul > li a::before{
right: 14px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
}
#modal-video ul > li a::after{
right: 20px;
width: 5px;
height: 5px;
transform: translateY(-50%) rotate(45deg);
border-top: 2px solid #e67492;
border-right: 2px solid #e67492;
}
#modal-video ul > li:nth-of-type(1) a{
background-color: #e67492;
}
#modal-video ul > li:nth-of-type(2) a{
background-color: #41ad99;
}
#modal-video ul > li:nth-of-type(3) a{
background-color: #ea8c41;
}
#modal-video ul > li:nth-of-type(4) a{
background-color: #4fa0e0;
}
#modal-video ul > li:nth-of-type(1) a::after{
border-color: #e67492;
}
#modal-video ul > li:nth-of-type(2) a::after{
border-color: #41ad99;
}
#modal-video ul > li:nth-of-type(3) a::after{
border-color: #ea8c41;
}
#modal-video ul > li:nth-of-type(4) a::after{
border-color: #4fa0e0;
}
@media screen and (max-width:999px) {
#visual{
height:35vh;
min-height:370px;
}
#visual .banner{
width: 40%;
left:8%;
top: 5%;
}
#visual .banner::before{
aspect-ratio: 3 / 2;
}
#visual .splide,#visual .splide__track{
height: 100%;
}
#visual h1{
font-size:3rem
}
#news_important{
flex-direction: column;
align-items: flex-end;
}
#news_important dl{
flex-direction: column;
width:100%;
}
body#top main h2{
font-size: 1.6rem;
}
body#top main h2 small{
margin-top: 0.5rem;
font-size: 0.8rem;
}
#online .fl_box{
flex-wrap: wrap;
aspect-ratio: auto;
}
#online .box1{
width: 55%;
}
#online .box2{
width: 43%;
}
#online .box3{
margin-top: 16px;
width: 100%;
flex-direction: row !important;
gap:16px;
}
#online .box3 div:not(.gd_img_link){
height: auto;
width:22%;
}
#online .box3 .gd_img_link{
height: auto;
aspect-ratio: 3 / 2;
width:30%
}
#online .fl_box .gd_img_link em{
font-size: 1rem;
}
#online .box1 .gd_img_link em{
font-size: 1.4rem;
}
#online .fl_box small{
font-size: 1em;
}
#cocoshin a::before{
top:auto;
bottom:30px;
}
#cocoshin dt br.pc_no{
display: block;
}
#life_plan .fl_box{
align-items: stretch;
}
#life_plan .fl_box section{
padding:30px;
width: 40%;
}
#life_plan section figure{
height: 60px;
}
#life_plan section h2{
display: flex;
flex-direction: column;
align-items: center;
}
#life_plan .fl_box .splide{
width: 60%;
}
#life_plan .splide__track{
height: 100%;
}
#life_plan .splide figure{
aspect-ratio: auto;
height: 100%;
}
#life_plan .splide a::after{
opacity: 1;
bottom:5%;
}
#bn_recruit em{
font-size:1.6rem
}
#bn_recruit span.bl03{
padding:20px 10px;
font-size: 0.8rem;
}
}
@media screen and (min-width: 0px) and (max-width: 600px) {
#visual{
height: auto;
display: flex;
flex-direction: column-reverse;
}
#visual h1,#visual .splide em{
right:auto;
left:10%;
bottom:auto;
top:7%;
font-size: 2rem;
}
#visual .banner{
position: static;
margin:40px auto 0 auto;
width: 80%;
left: auto;
top:auto;
max-height: none;
}
#visual .banner::before{
display:none;
}
#visual .banner a{
display: block;
position: static;
}
#visual .banner a img{
max-width: 100%;
}
#ani_100th .fl_box .txt{
font-size: 1em;
}
#visual .banner.after_100th{
max-width:none;
}
#visual .banner.after_100th a img{
max-width:160px;
display:block;
margin:0 auto;
}
#visual .splide{
aspect-ratio: 3 / 2;
}
@media screen and (max-width: 380px) {
#visual .splide{
aspect-ratio: 4 / 3;
}
}
#visual .splide img.img-sumiyoshi{
object-position: 60%;
}
#visual .splide img.img-right{
object-position: 70%;
}
#visual .splide img.img-100th{
object-position: center right;
}
#news_important dt{
justify-content: center;
}
#news_important dd{
padding:10px;
}
#news_important dd li a{
align-items: center;
}
#news_important .btn_link{
width: 100%;
}
#news_important .btn_link a{
width:100%;
font-size: 80%;
}
#news_important .btn_link a::after{
position: static;
transform: translateY(0);
margin-left: 10px;
vertical-align: middle;
}
#online .box1,
#online .box2,
#online .box3{
width:100%;
}
#online .fl_box > div > div{
margin: 8px 0;
}
#online .fl_box span{
font-size:100%;
text-align: center;
}
#online .fl_box a{
padding: 30px;
}
#online .fl_box a::before{
right: 5%;
opacity: 0.5;
height: 40px;
}
#online .fl_box a:hover::before{
right: 2%;
opacity: 1;
}
#online .fl_box .gd_img_link a::before{
right: 10%;
opacity: 0;
}
#online .fl_box .gd_img_link a:hover::before{
right: -2%;
opacity: 0.5;
}
#online .fl_box .gd_img_link a{
aspect-ratio: 16 / 9;
padding:0;
}
#online .box3{
flex-direction: column !important;
gap:0;
}
#online .box3 div:not(.gd_img_link),
#online .box3 .gd_img_link{
width: 100%;
}
#online .box3 .gd_img_link{
order: 1;
aspect-ratio: auto;
}
#online .box3 .bl01{
order:2;
}
#online .box3 .bl02{
order:3;
}
#online .box3 .bl03{
order:4;
}
#online .box3 .bl02.pc_no{
order:5;
}
#online .box3 .bl01.mailnetz{
order:6;
}
.btn_products{
justify-content: center;
}
.btn_products li{
width: 50%;
}
.btn_products a em{
line-height: 1.2;
text-align: center;
}
#cocoshin .img_box,
#cocoshin .txt_box{
width: 100%;
}
#cocoshin a{
padding: 40px 10% 50px 10%;
border-width:6px;
border-radius: 20px;
}
#cocoshin a::before{
right:20px;
bottom:20px;
}
#cocoshin .img_box{
margin-right: 0;
margin-bottom: 40px;
}
#cocoshin .fukidashi{
font-size:100%;
}
#life_plan .fl_box section,
#life_plan .fl_box .splide{
width: 100%;
}
#life_plan section h2{
flex-direction: row;
justify-content: center;
}
#life_plan h2 span.small{
margin:0 0.5em
}
#life_plan .fl_box figure{
aspect-ratio: 16 / 9;
margin:0 auto;
}
#life_plan .splide em{
font-size:140%
}
#life_plan .thumb-wrapper{
display: none;
}
#life_plan .splide__pagination{
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:-30px;
}
#life_plan .splide__pagination li{
padding:0 5px;
}
#life_plan .splide__pagination button{
border-radius: 50%;
background: #00A7EA;
border: none;
padding:5px;
opacity: 0.3;
}
#life_plan .splide__pagination button.is-active{
opacity: 1;
}
#pickup .splide__arrows{
width: 90%;
}
#news .panel{
padding:20px 0 40px 0;
}
.tablabel li{
width: calc(100% / 3);
flex-grow: 1;
}
.tablabel a{
font-size:0.8em;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10px;
}
.tablabel a br{
display: block;
}
#news .fl_box.sm_bl{
flex-direction: column-reverse;
}
#news .btn,
#news .btn a{
width: 100%;
}
#news .fl_box dl{
flex-direction: column;
margin-top: 40px;
}
#news .fl_box dt{
margin-right: 0;
margin-bottom: 1em;
}
#bn_recruit a{
flex-direction: column-reverse;
aspect-ratio: auto;
}
#bn_recruit .gd_img_link{
width: 100%;
aspect-ratio: 2 / 1;
}
#bn_recruit div.txt{
width: 100%;
height:50%;
aspect-ratio: 2 / 1;
}
#banners li{
display: flex;
align-items: center;
justify-content: center;
border:none;
}
#banners li a{
width: 75%;
border: 1px solid rgba(0, 96, 140,0.2);
background: #fff;
height: 100%;
}
#banners .splide__arrows{
width: 100%;
}
#banners .splide__arrow--prev{
left: 0;
}
#banners .splide__arrow--prev:hover{
left: 0;
}
#banners .splide__arrow--next{
right: 0;
}
#banners .splide__arrow--next:hover{
right: 0;
}
#top_bn_side label.btn{
position:absolute;
right:5px;
top:-20px;
z-index:1;
display:block;
background:#192C55;
color:#fff;
width:24px;
border-radius:50%;
aspect-ratio: 1 / 1;
text-align:center;
cursor:pointer;
}
#top_bn_side .btn:hover{
opacity:0.7;
}
#top_bn_side #close{
display: none;
}
#top_bn_side #close:checked ~ .btn {
display: none;
}
#top_bn_side #close:checked ~ #top_bn_side_box {
display: none;
}
#modal-video .modal-inner{
border-radius: 20px;
}
#modal-video dt{
font-size:200%
}
#modal-video ul > li{
width: 100%;
}
}