@charset "utf-8";
html {
height: 100%;
background-color:#fff;
width:100%;
max-width:100%;
}
body {
font-family: "Zen Maru Gothic",sans-serif;
width: 100%;
font-size: 16px;
color: #000;
line-height: 1.5;
height: 100%;
overflow-x: hidden;
position: relative;
}
.section-title {
font-weight: bold;
font-size: 32px;
text-align: center;
margin-bottom: 24px;
position: relative;
padding-bottom: 12px;
}
.section-title img {
display: block;
margin: 0 auto;
}
.section-title::before {
content: "";
width: 74px;
height: 1px;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@media screen and (max-width:768px){
.section-title {
font-size: 24px;
}
}
/*--------------------------header----------------------------*/
.header {
position: relative;
z-index: 99;
}
.header-logo a {
width: 23.5%;
position: absolute;
left: 24px;
top: 20px;
display: block;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.header-logo a:hover {
opacity: 0.7;
}
.header-btn {
position: fixed;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
right: 24px;
width: 45%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header-btn__item {
border-left: 2px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-radius: 0 0 20px 20px;
color: #fff;
font-weight: bold;
text-align: center;
width: 49%;
position: relative;
padding: 12px 0 14px;
font-size: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.header-btn__item1 {
background-color: #52BEDC;
}
.header-btn__item_arrow_skyblue {
opacity: 0;
}
.header-btn__item_arrow_yellow {
opacity: 0;
}
.header-btn__item1:hover .header-btn__item_arrow_white {
opacity: 0;
}
.header-btn__item2:hover .header-btn__item_arrow_white {
opacity: 0;
}
.header-btn__item1:hover {
background-color: #fff;
border-left: #52BEDC 2px solid;
border-right: #52BEDC 2px solid;
border-bottom: #52BEDC 2px solid;
color: #52BEDC;
}
.header-btn__item1:hover .header-btn__item_arrow_skyblue {
opacity: 100;
}
.header-btn__item2 {
background-color: #F5AA02;
}
.header-btn__item2:hover {
background-color: #fff;
border-right: #F5AA02 2px solid;
border-left: #F5AA02 2px solid;
border-bottom: #F5AA02 2px solid;
color: #F5AA02;
}
.header-btn__item2:hover .header-btn__item_arrow_yellow {
opacity: 100;
}
.header-btn__item_arrow {
display: block;
width: 22px;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
}
@media screen and (max-width:1220px){
.header-btn {
width: 47%;
}
.header-btn__item {
font-size: 19px;
}
}
@media screen and (max-width:1180px){
.header-btn {
width: 52%;
}
}
@media screen and (max-width:1150px){
.header-logo a {
width: 35%;
}
.header-btn {
width: 55%;
}
.header-btn__item {
font-size: 18px;
}
}
@media screen and (max-width:1000px){
.header-btn__item1 p {
margin-left: -15px;
}
.header-btn__item {
font-size: 17px;
}
.header-btn {
width: 57%;
}
.header-btn__item_arrow {
width: 20px;
}
}
@media screen and (max-width:768px){
.header-logo a {
width: 64%;
position: absolute;
left: 16px;
top: 15px;
display: block;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.header-btn {
top: auto;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
.header-btn__item1 p {
margin-left: 0;
}
.header-btn__item {
width: 50%;
border-radius: 10px 10px 0 0;
border-top: 2px solid #fff;
border-bottom: none;
font-size: 13px;
}
.header-btn__item1:hover {
border-top: #52BEDC 2px solid;
border-bottom: none;
}
.header-btn__item2:hover {
border-top: #F5AA02 2px solid;
border-bottom: none;
}
.header-btn__item_arrow {
width: 14px;
right: 8px;
}
}
@media screen and (max-width:360px){
.header-btn__item1 {
width: 52%;
}
.header-btn__item1 p {
margin-left: -14px;
}
.header-btn__item2 {
width: 48%;
}
}
/*--------------------------mainvisual----------------------------*/
.mainvisual {
position: relative;
}
.mainvisual-pc {
display: block;
width: 100%;
}
.mainvisual-pc2 {
display: none;
width: 100%;
}
.mainvisual-sp {
display: none;
width: 100%;
}
.mainvisual-text {
display: block;
right: 10%;
bottom: 9%;
position: absolute;
width: 38%;
}
@media screen and (max-width:1150px){
.mainvisual-pc2 {
display: block;
}
.mainvisual-pc {
display: none;
}
}
@media screen and (max-width:768px){
.mainvisual-pc2 {
display: none;
}
.mainvisual-sp {
display: block;
}
.mainvisual-text {
right: 5%;
width: 90%;
bottom: 7%;
}
}
/*--------------------------intro----------------------------*/
.intro {
background-image: url("../images/intro_background_pc.png");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
padding: 80px 0 70px;
}
.intro-inner {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.intro-title {
margin: 0 auto;
color: #235D85;
margin-bottom: 28px;
max-width: 656px;
width: 100%;
}
.intro-title__pc {
display: block;
width: 100%;
}
.intro-title__sp {
display: none;
width: 100%;
}
.intro-text {
text-align: center;
font-size: 20px;
}
.intro-background {
display: none;
}
@media screen and (max-width:768px){
.intro {
background-image: none;
padding: 30px 0 40px;
position: relative;
}
.intro-title__pc {
display: none;
}
.intro-title__sp {
display: block;
}
.intro-background {
display: block;
position: absolute;
top: 10%;
right: 8%;
width: 18%;
}
.intro-text {
text-align: left;
font-size: 16px;
}
.intro-title {
margin-bottom: 8px;
}
}
/*--------------------------menu----------------------------*/
.menu {
background-image: url(../images/dot_background2.png);
background-position: bottom left;
background-repeat: repeat;
}
.menu-wrapper {
background-image: url("../images/menu_background_pc.png");
padding: 30px 0 94px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.menu-inner {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.menu-title img {
width: 71px;
}
.menu-title h3 {
color: #fff;
}
.menu-title::before {
border-bottom: 5px dotted #fff;
}
.menu-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.menu-item {
width: 24%;
}
.menu-btn {
background-color: #fff;
border: #235D85 2px solid;
border-radius: 50px;
-webkit-box-shadow: #235D85 5px 5px;
box-shadow: #235D85 5px 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
padding: 12px;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
font-size: 20px;
}
.menu-btn__arrow_white {
opacity: 0;
}
.menu-btn:hover {
background-color: #235D85;
-webkit-box-shadow: #fff 5px 5px;
box-shadow: #fff 5px 5px;
border: 2px solid #fff;
}
.menu-btn:hover .menu-btn__arrow_blue {
opacity: 0;
}
.menu-btn:hover .menu-btn__arrow_white {
opacity: 100;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-btn:hover p {
color: #fff;
}
.menu-btn p {
color: #235D85;
font-weight: bold;
text-align: center;
}
.menu-btn__arrow {
position: absolute;
width: 21px;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
}
@media screen and (max-width:1150px){
.menu-item {
width: 49%;
margin-top: 12px;
}
.menu-item:first-of-type, .menu-item:nth-of-type(2) {
margin-top: 0;
}
}
@media screen and (max-width:768px){
.menu-title img {
width: 53px;
}
.menu-btn {
-webkit-box-shadow: #235D85 3px 3px;
box-shadow: #235D85 3px 3px;
}
.menu-wrapper {
background-image: url("../images/menu_background_sp.png");
}
}
@media screen and (max-width:600px){
.menu-item {
width: 100%;
}
.menu-btn {
font-size: 18px;
}
.menu-item:nth-of-type(2) {
margin-top: 12px;
}
}
/*--------------------------features----------------------------*/
.features {
background-image: url(../images/dot_background2.png);
background-repeat: repeat;
padding: 60px 0 80px;
}
.features-inner {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.features-title {
position: relative;
}
.features-title__blue {
background-color: #235D85;
color: #fff;
font-weight: bold;
max-width: 370px;
width: 100%;
margin: 0 auto;
font-size: 18px;
border-radius: 50px;
padding: 6px 20px 8px;
margin-bottom: -8px;
}
.features-title h3 {
color: #235D85;
}
.features-title h3 span {
color: #F2A800;
}
.features-title h3 strong {
font-size: 54px;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.features-title::before {
border-bottom: #235D85 5px dotted;
}
.features-popup__button {
position: absolute;
width: 30%!important;
max-width: 375px;
right: 0px;
display: block;
top: 0;
margin-right: 40px;
cursor: pointer;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.features-popup__button:hover {
opacity: 0.7;
}
.features-popup__button__pc {
display: block;
width: 100%;
}
.features-popup__button__sp {
display: none;
width: 100%;
}
.features-popup__wrapper {
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.features-popup__cover {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 40px 0;
height: 100%;
}
.features-close {
cursor: pointer;
display: block;
width: 65px;
position: absolute;
right: 24px;
top: 24px;
z-index: 9999999;
}
.features-popup {
width: 100%;
background: #E7F1F7;
border-radius: 30px;
z-index: 1000;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
max-height: 100%;
position: relative;
}
.features-popup::-webkit-scrollbar{
display: none;
}
.features-popup__inner {
position: relative;
padding: 40px;
height: 100%;
}
.features-popup__center {
position: relative;
max-width: 1200px;
width: 90%;
margin: 0 auto;
height: 100%;
}
.features-popup__about_title {
font-size: 32px;
background-color: #235D85;
border-radius: 50px;
padding: 8px 12px;
width: 100%;
max-width: 600px;
margin: 0 auto;
text-align: center;
color: #fff;
font-weight: bold;
}
.features-popup__about {
margin-bottom: 12px;
}
.features-popup__about_text {
text-align: center;
font-size: 20px;
margin-top: 12px;
}
.features-popup__about_text span {
color: #F5AA02;
font-weight: bold;
font-size: 32px;
}
.features-popup__content_title {
color: #235D85;
font-weight: bold;
font-size: 28px;
padding-left: 16px;
position: relative;
border-bottom: 3px dotted #235D85;
padding-bottom: 12px;
margin-bottom: 20px;
}
.features-popup__content_title::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #235D85;
width: 20px;
height: 20px;
border-radius: 20px;
margin-top: 15px;
}
.features-popup__item_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.features-popup__item {
width: 49%;
background-color: #fff;
border-radius: 20px;
padding: 20px 24px 24px;
margin-top: 20px;
}
.features-popup__item4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.features-popup__item:first-of-type, .features-popup__item:nth-of-type(2) {
margin-top: 0;
}
.features-popup__item_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.features-popup__item_number {
background-color: #52BEDC;
color: #fff;
font-weight: bold;
width: 46px;
height: 46px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 46px;
font-size: 24px;
font-family: "M PLUS Rounded 1c", sans-serif;
margin-right: 8px;
}
.features-popup__item_title h5 {
font-size: 24px;
color: #235D85;
font-weight: bold;
width: calc(100% - 54px);
}
.features-popup__item_title h5 span {
background: -o-linear-gradient(transparent 70%, #FAEA6C 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(20%, #FAEA6C));
background: linear-gradient(transparent 70%, #FAEA6C 20%);
}
.features-popup__item_text {
margin-top: 8px;
}
.features-popup__list_wrapper {
margin-top: 8px;
}
.features-popup__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.features-popup__list:not(:first-of-type) {
margin-top: 4px;
}
.features-popup__list_check {
width: 19px;
margin-right: 4px;
margin-top: 4px;
}
.features-popup__list p {
width: calc(100% - 13px);
}
.features-popup__item_image_pc {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto;
margin-top: 12px;
}
.features-popup__item_image_sp {
display: none;
width: 100%;
margin-top: 12px;
}
.features-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.features-item {
width: 48.5%;
background-color: #fff;
border: #235D85 2px solid;
border-radius: 40px;
-webkit-box-shadow: #235D85 6px 6px;
box-shadow: #235D85 6px 6px;
padding: 32px 32px 40px;
position: relative;
}
.features-item {
margin-top: 36px;
}
.features-item:first-of-type, .features-item:nth-of-type(2) {
margin-top: 0;
}
.features-item__number {
position: absolute;
left: 40px;
top: -12px;
}
.features-item__number1 {
display: block;
width: 94px;
}
.features-item__number2 {
display: block;
width: 110px;
}
.features-item__number3 {
display: block;
width: 107px;
}
.features-item__number4 {
display: block;
width: 115px;
}
.features-item__number5 {
display: block;
width: 109px;
}
.features-item__number6 {
display: block;
width: 114px;
}
.features-item__image {
width: 100%;
max-width: 430px;
margin: 0 auto;
display: block;
}
.features-item__title {
margin: 12px 0 8px;
font-weight: bold;
font-size: 24px;
color: #235D85;
display: inline-block;
}
.features-item__title span {
background: -o-linear-gradient(transparent 70%, #FAEA6C 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(20%, #FAEA6C));
background: linear-gradient(transparent 70%, #FAEA6C 20%);
}
.features-item__title strong {
font-size: 32px;
}
.features-content__sp {
display: none;
}
.slick-dots {
text-align: center;
margin-top: 20px;
padding: 0;
list-style: none;
}
.slick-dots li {
display: inline-block;
margin: 0 10px;
}
.slick-dots li button {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background-color: #A2B1CE;
cursor: pointer;
padding: 0;
}
.slick-dots li.slick-active button {
background-color: #F2A801;
opacity: 1;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
color: transparent;
}
.features-br__sp {
display: none;
}
@media screen and (max-width:1300px){
.features-popup__button {
margin-right: 30px;
}
}
@media screen and (max-width:1200px){
.features-popup__button {
margin-right: 10px;
}
}
@media screen and (max-width:1100px){
.features-popup__button {
margin-right: 0;
}
}
@media screen and (max-width:1050px){
.features-popup__button {
width: 29%!important;
}
.features-item__title {
font-size: 20px;
}
.features-item__title strong {
font-size: 24px;
}
}
@media screen and (max-width:1000px){
.features-popup__button {
width: 28%!important;
}
}
@media screen and (max-width:950px){
.features-popup__button__pc {
display: none;
}
.features-popup__button__sp {
display: block;
position: relative;
margin: 0 auto;
margin-top: -15px;
margin-bottom: 28px;
max-width: 400px;
width: 100%!important;
}
.features-item {
padding: 20px;
}
}
@media screen and (max-width:900px){
.features-popup__about_title {
max-width: 350px;
}
}
@media screen and (max-width:768px){
.features {
padding: 40px 0;
overflow: hidden;
}
.features-title__blue {
font-size: 16px;
max-width: 332px;
margin-bottom: -4px;
}
.features-popup {
border-radius: 20px;
}
.features-popup__inner {
padding: 48px 16px 28px;
}
.features-close {
top: 12px;
right: 12px;
width: 42px;
}
.features-popup__about_title {
font-size: 20px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 8px 20px;
}
.features-popup__about_text {
font-size: 16px;
}
.features-popup__about_text span {
font-size: 20px;
}
.features-popup__about_text {
margin-top: 8px;
}
.features-popup__about {
margin-bottom: 20px;
}
.features-popup__content_title {
font-size: 20px;
margin-bottom: 12px;
}
.features-popup__content_title::before {
width: 16px;
height: 16px;
margin-top: 8px;
}
.features-popup__item {
width: 100%;
margin-top: 12px;
}
.features-popup__item:nth-of-type(2) {
margin-top: 12px;
}
.features-popup__item_title h5 {
font-size: 20px;
}
.features-popup__item_image_pc {
display: none;
}
.features-popup__item_image_sp {
display: block;
margin: 0 auto;
max-width: 300px;
margin-top: 12px;
}
.features-popup__item {
border-radius: 10px;
padding: 20px 16px;
}
.features-content__pc {
display: none;
}
.features-content__sp {
display: block;
}
.features-content__sp .slick-list{
overflow: visible;
}
.features-content__sp .slick-track {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.features-content__sp .slick-slide {
height: auto !important;
}
.features-item {
margin: 0 6px;
border-radius: 20px;
-webkit-box-shadow: #20587E 3px 3px;
box-shadow: #20587E 3px 3px;
}
.features-item__number {
left: 16px;
top: -7px;
}
.features-item__number1 {
width: 70px;
}
.features-item__number2 {
width: 83px;
}
.features-item__number3 {
width: 80px;
}
.features-item__number4 {
width: 86px;
}
.features-item__number5 {
width: 82px;
}
.features-item__number6 {
width: 85px;
}
.features-br__sp {
display: block;
}
.features-title h3 strong {
font-size: 40px;
}
.features-item {
padding: 20px 16px;
}
}
@media screen and (max-width:370px){
.features-popup__about_text span {
font-size: 18px;
}
}
@media screen and (max-width:340px){
.features-popup__about_text span {
font-size: 17px;
}
.features-popup__about_text {
font-size: 15px;
}
}
/*--------------------------cv----------------------------*/
.cv {
background-image: url("../images/cv_background.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 0;
}
.cv-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1000px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
width: 90%;
}
.cv-item {
border: 2px solid #fff;
border-radius: 100px;
width: 48.5%;
position: relative;
color: #fff;
text-align: center;
font-weight: bold;
padding: 24px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: #fff 3px 3px;
box-shadow: #fff 3px 3px;
font-size: 26px;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.cv-item1 {
background-color: #52BEDC;
}
.cv-item2 {
background-color: #F5AA02;
}
.cv-arrow__skyblue {
opacity: 0;
}
.cv-arrow__yellow {
opacity: 0;
}
.cv-item1:hover {
background-color: #fff;
border: #52BEDC 2px solid;
-webkit-box-shadow: #52BEDC 3px 3px;
box-shadow: #52BEDC 3px 3px;
color: #52BEDC;
}
.cv-item1:hover .cv-arrow__white {
opacity: 0;
}
.cv-item1:hover .cv-arrow__skyblue {
opacity: 100;
}
.cv-item2:hover {
background-color: #fff;
border: #F5AA02 2px solid;
-webkit-box-shadow: #F5AA02 3px 3px;
box-shadow: #F5AA02 3px 3px;
color: #F5AA02;
}
.cv-item2:hover .cv-arrow__white {
opacity: 0;
}
.cv-item2:hover .cv-arrow__yellow {
opacity: 100;
}
.cv-item img {
position: absolute;
right: 16px;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
display: block;
}
.cv-br__sp {
display: none;
}
@media screen and (max-width:1050px){
.cv-br__sp {
display: block;
}
}
@media screen and (max-width:850px){
.cv-item {
font-size: 20px;
}
}
@media screen and (max-width:768px){
.cv {
padding: 40px 0;
}
.cv-item {
font-size: 18px;
padding: 20px;
width: 100%;
}
.cv-item2 {
margin-top: 16px;
}
}
/*--------------------------department----------------------------*/
.department {
background-image: url("../images/border_background.png");
padding: 80px 0;
}
.department-title h3 {
color: #fff;
}
.department-title::before {
border-bottom: 5px dotted #fff;
}
.department-title img {
width: 163px;
}
.department-inner {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.department-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 60px;
}
.department-menu__item {
background-color: #fff;
border-radius: 12px;
width: 32%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.department-menu__item:hover {
opacity: 0.7;
}
.department-menu__item1 {
border: #CD5333 2px solid;
}
.department-menu__item1 .department-menu__bottom {
background-color: #CD5333;
}
.department-menu__item1 .department-menu__text p {
color: #CD5333;
}
.department-menu__item2 {
border: #499C4C 2px solid;
}
.department-menu__item2 .department-menu__bottom {
background-color: #499C4C;
}
.department-menu__item2 .department-menu__text p {
color: #499C4C;
}
.department-menu__item3 {
border: #CB487C 2px solid;
}
.department-menu__item3 .department-menu__bottom {
background-color: #CB487C;
}
.department-menu__item3 .department-menu__text p {
color: #CB487C;
}
.department-menu__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 16px 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.department-menu__text {
width: 53%;
}
.department-menu__text p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.department-menu__text img {
display: block;
width: 126px;
margin: 0 auto;
}
.department-menu__image {
width: 45%;
}
.department-menu__image img {
display: block;
width: 100%;
border-radius: 10px;
}
.department-menu__bottom {
border-radius: 0 0 10px 10px;
padding: 12px;
}
.department-menu__bottom img {
display: block;
margin: 0 auto;
width: 20px;
}
.department-item {
background-color: #fff;
border-radius: 20px;
padding: 4px 40px 40px;
position: relative;
}
.department-item1 {
border: #CD5333 2px solid;
-webkit-box-shadow: #CD5333 6px 6px;
box-shadow: #CD5333 6px 6px;
}
.department-item2 {
border: #499C4C 2px solid;
-webkit-box-shadow: #499C4C 6px 6px;
box-shadow: #499C4C 6px 6px;
margin-top: 54px;
}
.department-item3 {
border: #CB487C 2px solid;
-webkit-box-shadow: #CB487C 6px 6px;
box-shadow: #CB487C 6px 6px;
margin-top: 54px;
}
.department-decoration {
position: absolute;
width: 288px;
top: -24.5px;
left: 0;
right: 0;
margin: auto;
}
.department-item__title {
margin-bottom: 20px;
position: relative;
z-index: 12;
}
.department-item__title img {
width: 126px;
display: block;
margin: 0 auto;
}
.department-item__title h4 {
font-size: 32px;
font-weight: bold;
text-align: center;
}
.department-item1 .department-item__title h4 {
color: #CD5333;
}
.department-item2 .department-item__title h4 {
color: #499C4C;
}
.department-item3 .department-item__title h4 {
color: #CB487C;
}
.department-item__text {
font-size: 20px;
margin-bottom: 40px;
}
.department-contents__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.department-contents {
border-radius: 20px;
padding: 48px 32px 32px;
position: relative;
}
.department-item1 .department-contents {
background-color: #F8E5E0;
}
.department-item2 .department-contents {
background-color: #E4F0E4;
}
.department-item3 .department-contents {
background-color: #F7E3EB;
}
.department-contents__title {
position: absolute;
top: -26px;
left: 0;
right: 0;
margin: auto;
font-weight: bold;
font-size: 24px;
background-color: #fff;
border-radius: 50px;
text-align: center;
max-width: 280px;
width: 90%;
padding: 8px 12px;
}
.department-item1 .department-contents__title {
border: #CD5333 2px solid;
color: #CD5333;
}
.department-item2 .department-contents__title {
border: #499C4C 2px solid;
color: #499C4C;
}
.department-item3 .department-contents__title {
border: #CB487C 2px solid;
color: #CB487C;
}
.department-item__title_flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.department-item__title_flex p {
color: #CB487C;
font-weight: bold;
margin-left: 8px;
margin-bottom: 4px;
}
.department-contents {
margin-top: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.department-contents1 {
width: 63%;
margin-top: 0;
}
.department-contents2 {
width: 35%;
margin-top: 0;
}
.department-contents__bundle {
width: 35%;
margin-top: 0;
}
.department-contents7 .department-contents__item p {
white-space: nowrap;
}
.department-contents3 {
width: 33%;
}
.department-contents4 {
width: 65%;
}
.department-contents5 {
width: 100%;
}
.department-contents6 {
margin-top: 0;
width: 100%;
}
.department-contents7 {
width: 100%;
}
.department-contents__inner {
width: 100%;
}
.department-contents__recommendation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.department-recommendation__item {
width: 32%;
aspect-ratio: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: #fff;
font-weight: bold;
position: relative;
border-radius: 100px;
}
.department-contents__cutout {
display: block;
position: absolute;
z-index: 10;
bottom: -40px;
max-inline-size: none;
max-block-size: none;
}
.department-contents__cutout1 {
width: 70px;
left: -57px;
}
.department-contents__cutout2 {
width: 67px;
right: -50px;
}
.department-contents__cutout3 {
width: 55px;
left: -43px;
}
.department-contents__cutout4 {
right: -37px;
width: 55px;
}
.department-contents__cutout5 {
left: -46px;
width: 62px;
}
.department-contents__cutout6 {
right: -36px;
width: 71px;
}
.department-item1 .department-recommendation__item {
background-color: #CD5333;
}
.department-item2 .department-recommendation__item {
background-color: #499C4C;
}
.department-item3 .department-recommendation__item {
background-color: #CB487C;
}
.department-contents2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.department-contents__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 19px;
}
.department-contents__item p {
width: calc(100% - 23px);
}
.department-contents__item:not(:first-of-type) {
margin-top: 4px;
}
.department-contents__check {
width: 19px;
margin: 5px 4px 0 0;
}
.department-contents__check img {
display: block;
width: 100%;
}
.department-contents__employmentRate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.department-employmentRate__balloon {
width: 49%;
}
.department-employmentRate__balloon_pc {
display: block;
width: 100%;
}
.department-employmentRate__balloon_sp {
display: none;
width: 100%;
}
.department-employmentRate__graph {
width: 49%;
}
.department-employmentRate__graph__pc {
width: 100%;
display: block;
}
.department-employmentRate__graph__sp {
display: none;
width: 100%;
}
.department-contents__attention {
text-align: right;
margin-top: 4px;
font-size: 12px;
}
.department-contents__point {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.department-point__item {
width: 31%;
}
.department-point__title{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 12px;
}
.department-point__number {
width: 58px;
height: 58px;
color: #fff;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 24px;
margin-right: 8px;
border-radius: 58px;
}
.department-point__title h6 {
font-size: 20px;
font-weight: bold;
width: calc(100% - 66px);
}
.department-item1 .department-point__number {
background-color: #CD5333;
}
.department-item2 .department-point__number {
background-color: #499C4C;
}
.department-item3 .department-point__number {
background-color: #CB487C;
}
.department-button {
margin: 0 auto;
display: block;
width: 100%;
max-width: 448px;
background-color: #235D85;
-webkit-box-shadow: #6AC7E2 10px 10px;
box-shadow: #6AC7E2 10px 10px;
-moz-text-align-last: center;
text-align-last: center;
font-weight: bold;
font-size: 28px;
color: #fff;
position: relative;
padding: 16px;
border-radius: 80px;
margin-top: 24px;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.department-button:hover {
opacity: 0.7;
}
.department-button__arrow {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
display: block;
}
.department-br__sp {
display: none;
}
.department-br2 {
display: none;
}
.department-recommendation__item3 .department-contents__cutout {
display: none;
}
.department-decoration_sp {
display: none;
}
.department-contents7 .department-contents__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.department-contents7 .department-contents__item:not(:first-of-type) {
margin: 0;
}
.department-contents7 .department-contents__item:first-of-type {
margin-right: 32px;
}
.department-contents6 {
height: 43%;
}
.department-contents7 {
height: 43%;
}
@media screen and (max-width:1200px){
.department-menu__text p {
font-size: 18px;
}
.department-menu__top {
padding: 12px;
}
.department-recommendation__item {
font-size: 14px;
}
}
@media screen and (max-width:1130px){
.department-br1 {
display: none;
}
}
@media screen and (max-width:1080px){
.department-contents__recommendation {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.department-recommendation__item {
width: 48%;
border-radius: 150px;
max-width: 180px;
}
.department-recommendation__item1 {
margin-right: 1%;
}
.department-recommendation__item2 {
margin-left: 1%;
}
.department-recommendation__item3 {
margin-top: -10px;
}
.department-recommendation__item2 .department-contents__cutout {
display: none;
}
.department-recommendation__item3 .department-contents__cutout {
display: block;
}
.department-contents__cutout1 {
left: -67px;
}
.department-contents__cutout2 {
right: -60px;
}
.department-contents__cutout3 {
left: -58px;
}
.department-contents__cutout4 {
right: -57px;
}
.department-contents__cutout5 {
left: -60px;
}
.department-contents__cutout6 {
right: -54px;
}
.department-contents__cutout {
bottom: 30px;
}
.department-contents {
padding: 48px 20px 32px;
}
.department-item3 .department-contents {
height: 45%;
}
.department-item {
padding: 4px 20px 40px;
}
}
@media screen and (max-width:1050px){
.department-br__sp {
display: block;
}
.department-menu__text img {
width: 114px;
}
}
@media screen and (max-width:980px){
.department-contents__point {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.department-point__item {
width: 100%;
}
.department-point__item:not(:first-of-type) {
margin-top: 20px;
}
.department-br1 {
display: block;
}
.department-br2 {
display: block;
}
}
@media screen and (max-width:950px){
.department-contents__title {
font-size: 19px;
max-width: 205px;
top: -22px;
}
}
@media screen and (max-width:850px){
.department-menu__text {
width: 100%;
}
.department-menu__image {
width: 100%;
margin-top: 8px;
}
.department-br__sp {
display: none;
}
}
@media screen and (max-width:768px){
.department {
padding: 40px 0;
}
.department-menu {
margin-bottom: 76px;
}
.department-menu__text {
width: 53%;
}
.department-menu__image {
width: 45%;
margin-top: 0;
}
.department-br__sp {
display: block;
}
.department-menu__item {
width: 100%;
}
.department-menu__item2 {
margin-top: 12px;
}
.department-menu__item3 {
margin-top: 12px;
}
.department-menu__text p {
font-size: 20px;
}
.department-menu__top {
padding: 12px 16px;
}
.department-contents1 {
width: 100%;
}
.department-contents2 {
width: 100%;
}
.department-contents3 {
width: 100%;
}
.department-contents4 {
width: 100%;
}
.department-contents__bundle {
width: 100%;
}
.department-contents1 .department-contents__inner {
max-width: 350px;
}
.department-item__title h4 {
font-size: 28px;
}
.department-contents {
padding: 36px 16px 20px;
border-radius: 10px;
}
.department-point__title h6 {
font-size: 18px;
}
.department-contents2 {
margin-top: 40px;
}
.department-contents__bundle {
margin-top: 40px;
}
.department-item3 .department-contents {
height: auto;
}
.department-item {
padding: 4px 16px 32px;
}
.department-contents__item {
font-size: 16px;
}
.department-contents3 .department-contents__inner {
max-width: 300px;
margin: 0 auto;
}
.department-contents__employmentRate {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.department-employmentRate__balloon {
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin: 0 auto;
max-width: 300px;
}
.department-contents__attention {
text-align: left;
}
.department-employmentRate__balloon_pc {
display: none;
}
.department-employmentRate__balloon_sp {
display: block;
}
.department-employmentRate__graph {
width: 100%;
max-width: 300px;
margin: 0 auto;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.department-employmentRate__graph__pc {
display: none;
}
.department-employmentRate__graph__sp {
display: block;
}
.department-button {
font-size: 24px;
-webkit-box-shadow: #6AC7E2 5px 5px;
box-shadow: #6AC7E2 5px 5px;
}
.department-item__text {
font-size: 16px;
}
.department-item__title_flex {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.department-item__title_flex p {
margin-left: 0;
}
.department-item__title {
margin-bottom: 12px;
margin-top: -12px;
}
.department-item1 {
-webkit-box-shadow: #CD5333 3px 3px;
box-shadow: #CD5333 3px 3px;
}
.department-item2 {
-webkit-box-shadow: #499C4C 3px 3px;
box-shadow: #499C4C 3px 3px;
margin-top: 80px;
}
.department-item3 {
-webkit-box-shadow: #CB487C 3px 3px;
box-shadow: #CB487C 3px 3px;
margin-top: 80px;
}
.department-item3 .department-item__title h4 {
width: 100%;
}
.department-title img {
width: 122px;
}
.department-decoration_pc {
display: none;
}
.department-decoration_sp {
display: block;
}
.department-decoration {
width: 258px;
top: -52.5px;
}
.department-item__text {
position: relative;
z-index: 9;
}
.department-contents7 .department-contents__item {
width: 100%;
}
}
@media screen and (max-width:450px){
.department-contents__cutout {
bottom: 10px;
}
.department-contents__cutout1 {
width: 48%;
}
.department-contents__cutout2 {
width: 45%;
}
.department-contents__cutout3 {
width: 40%;
}
.department-contents__cutout4 {
width: 39%;
}
.department-contents__cutout5 {
width: 42%;
}
.department-contents__cutout6 {
width: 46%;
}
}
@media screen and (max-width:380px){
.department-recommendation__item {
font-size: 13px;
}
.department-contents1 {
padding: 36px 12px 20px;
}
}
@media screen and (max-width:360px){
.department-recommendation__item {
font-size: 12px;
}
.department-point__title h6 {
font-size: 15px;
}
.department-point__number {
width: 40px;
height: 40px;
font-size: 20px;
}
}
/*--------------------------real----------------------------*/
.real {
padding: 80px 0;
}
.real-inner {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.real-title img {
width: 57px;
}
.real-title::before {
border-bottom: #6AC7E2 dotted 5px;
}
.real-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.real-item__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
.real-item {
background-color: #E7F1F7;
border-radius: 20px;
padding: 55px 40px 28px;
margin-top: 56px;
position: relative;
}
.real-item__title {
top: -32px;
left: 0;
right: 0;
margin: auto;
border: 2px #235D85 solid;
color: #235D85;
font-weight: bold;
background-color: #fff;
border-radius: 80px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 8px 12px;
font-size: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.real-item__title_q {
background-color: #235D85;
color: #fff;
width: 50px;
height: 50px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-bottom: 3px;
margin-right: 8px;
}
.real-item__title h4 {
margin-top: -2px;
}
.real-item1, .real-item2 {
margin-top: 32px;
}
.real-item__small {
width: 49%;
}
.real-item__big {
width: 100%;
padding: 55px 40px 44px;
}
.real-item__ratio__pc {
display: block;
width: 100%;
}
.real-item__ratio__sp {
display: none;
width: 100%;
}
.real-item__text {
text-align: right;
margin-top: 4px;
}
.real-item__residence {
max-width: 389px;
width: 100%;
margin: 0 auto;
display: block;
}
.real-item__residence_text {
max-width: 389px;
width: 100%;
margin: 0 auto;
margin-top: 8px;
}
.real-item__transportation {
width: 100%;
}
.real-item__scholarship {
max-width: 218px;
width: 100%;
display: block;
margin: 0 auto;
}
.real-item__scholarship_text {
text-align: center;
margin: -25px 0 0 260px;
}
.real-item__balloon_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.real-item__balloon {
width: 49%;
border-radius: 20px;
color: #fff;
padding: 28px 32px;
position: relative;
}
.real-item__balloon_blue {
background-color: #235D85;
}
.real-item__balloon_yellow {
background-color: #F5AA02;
}
.real-item__balloon_skyblue {
background-color: #52BEDC;
}
.real-item__balloon__title {
font-size: 24px;
font-weight: bold;
border-bottom: #fff dotted 3px;
padding-bottom: 12px;
margin-bottom: 12px;
}
.real-item__balloon__cutout {
position: absolute;
display: block;
bottom: -76px;
}
.real-item__balloon__cutout1 {
width: 86px;
left: -70px;
}
.real-item__balloon__cutout2 {
width: 138px;
right: -64px;
}
.real-item__balloon__cutout3 {
width: 132px;
left: -106px;
}
.real-item__balloon__cutout4 {
width: 138px;
right: -85px;
}
.real-item__balloon__tail {
position: absolute;
bottom: -22px;
width: 30px;
}
.real-item__balloon__tail1, .real-item__balloon__tail3 {
left: 40px;
}
.real-item__balloon__tail2, .real-item__balloon__tail4 {
right: 40px;
}
.real-item__balloon__tail4 {
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.real-br__sp {
display: none;
}
@media screen and (max-width:1300px){
.real-item__balloon__cutout3 {
width: 120px;
left: -92px;
}
}
@media screen and (max-width:1050px){
.real-item__title h4 {
font-size: 20px;
}
.real-item__title_q {
width: 40px;
height: 40px;
}
.real-item {
padding: 55px 24px 28px;
}
.real-item__big {
padding: 55px 24px 44px;
}
.real-item__balloon__cutout {
bottom: -50px;
}
.real-item__balloon__cutout1 {
width: 64px;
left: -50px;
}
.real-item__balloon__cutout2 {
width: 105px;
right: -60px;
}
.real-item__balloon__cutout3 {
width: 97px;
left: -64px;
}
.real-item__balloon__cutout4 {
width: 100px;
right: -45px;
}
}
@media screen and (max-width:950px){
.real-item__scholarship_text {
margin: 0;
text-align: right;
}
}
@media screen and (max-width:900px){
.real-item__title h4 {
font-size: 18px;
}
.real-item__title_q {
width: 30px;
height: 30px;
font-size: 18px;
margin-right: 4px;
}
.real-item__title {
top: -22px;
padding: 8px;
}
}
@media screen and (max-width:768px){
.real {
padding: 40px 0;
}
.real-title img {
width: 43px;
}
.real-item__title {
padding: 8px 16px;
}
.real-item {
padding: 40px 16px 20px;
border-radius: 10px;
}
.real-item__small {
width: 100%;
}
.real-item__balloon {
width: 100%;
padding: 16px 16px 20px;
border-radius: 10px;
}
.real-item__balloon:first-of-type {
margin-bottom: 40px;
}
.real-item__balloon__title {
font-size: 19px;
}
.real-item__balloon__tail2, .real-item__balloon__tail4 {
right: auto;
left: 40px;
}
.real-item__balloon__tail2 {
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.real-item__balloon__tail4 {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.real-item__balloon__cutout {
bottom: auto;
top: -25px;
}
.real-item__balloon__cutout1 {
width: 46px;
left: auto;
right: -2px;
}
.real-item__balloon__cutout2 {
width: 76px;
right: auto;
right: -10px;
}
.real-item__balloon__cutout3 {
width: 67px;
left: auto;
right: -12px;
}
.real-item__balloon__cutout4 {
width: 69px;
right: auto;
right: -12px;
}
.real-item__big {
padding: 55px 16px 44px;
}
.real-br__sp {
display: block;
}
.real-item__big .real-item__title {
top: -32px;
}
.real-item4 .real-item__title {
top: -32px;
}
.real-item4 {
padding: 55px 16px 20px;
}
.real-item1 {
margin-top: 18px;
}
.real-item2, .real-item3 {
margin-top: 45px;
}
.real-item__ratio__pc {
display: none;
}
.real-item__ratio__sp {
display: block;
}
}
/*--------------------------opencampus----------------------------*/
.opencampus {
padding: 80px 0;
background-image: url("../images/dot_background.png");
background-repeat: repeat;
}
.opencampus-inner {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.opencampus-title::before {
border-bottom: #235D85 dotted 5px;
}
.opencampus-flow {
background-color: #fff;
border-radius: 20px;
border: #235D85 2px solid;
-webkit-box-shadow: #235D85 6px 6px;
box-shadow: #235D85 6px 6px;
padding: 32px 40px 40px;
}
.opencampus-content__title {
text-align: center;
}
.opencampus-content__title img {
display: block;
margin: 0 auto;
}
.opencampus-content__title h4 {
font-weight: bold;
font-size: 32px;
color: #235D85;
display: inline-block;
position: relative;
}
.opencampus-flow__title {
margin-bottom: 56px;
}
.opencampus-voice__title {
margin-bottom: 24px;
}
.opencampus-content__title h4::before {
content: "";
position: absolute;
display: block;
width: 4px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 80%;
bottom: 0;
left: -30px;
background-color: #235D85;
border-radius: 4px;
}
.opencampus-content__title h4::after {
content: "";
position: absolute;
display: block;
width: 4px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
height: 80%;
bottom: 0;
right: -30px;
background-color: #235D85;
border-radius: 4px;
}
.opencampus-flow__title img {
width: 59px;
}
.opencampus-flow__title p {
margin-top: 12px;
}
.opencampus-flow__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.opencampus-flow__item {
background-color: #E7F1F7;
border-radius: 20px;
padding: 28px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.opencampus-flow__item_small {
width: calc(49% - 12px);
}
.opencampus-flow__item_big {
width: 100%;
}
.opencampus-flow__step {
width: 84px;
position: absolute;
top: -38px;
right: -15px;
}
.opencampus-flow__item1 .opencampus-flow__image {
width: 48%;
margin-top: -10%;
}
.opencampus-flow__item2 .opencampus-flow__image {
width: 44%;
}
.opencampus-flow__item1 .opencampus-flow__image img {
max-width: 154px;
margin: 0 auto;
width: 100%;
display: block;
}
.opencampus-flow__item2 .opencampus-flow__image img, .opencampus-flow__item3 .opencampus-flow__image img, .opencampus-flow__item4 .opencampus-flow__image img {
display: block;
border-radius: 20px;
}
.opencampus-flow__item3 .opencampus-flow__image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 50%;
}
.opencampus-flow__item4 .opencampus-flow__image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 66%;
}
.opencampus-flow__image img {
display: block;
}
.opencampus-flow__item3 .opencampus-flow__image img {
width: 49%;
}
.opencampus-flow__item4 .opencampus-flow__image img {
width: 49%;
}
.opencampus-flow__item1 .opencampus-flow__text {
width: 52%;
}
.opencampus-flow__item2 .opencampus-flow__text {
width: 51%;
}
.opencampus-flow__item3 .opencampus-flow__text {
width: 47%;
}
.opencampus-flow__item4 .opencampus-flow__text {
width: 31%;
}
.oencampus-flow__time {
color: #235D85;
font-weight: 800;
font-family: "M PLUS Rounded 1c", sans-serif;
}
.opencampus-flow__item1 .opencampus-flow__text p {
font-size: 28px;
}
.opencampus-flow__item1 .opencampus-flow__text .oencampus-flow__time {
font-size: 44px;
margin-bottom: -8px;
}
.opencampus-flow__item2 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item3 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item4 .opencampus-flow__text .oencampus-flow__time {
font-size: 32px;
margin-bottom: 4px;
}
.opencampus-flow__text_blue {
background-color: #235D85;
color: #fff;
border-radius: 50px;
text-align: center;
font-weight: bold;
font-size: 20px;
padding: 4px 12px;
margin-bottom: 8px;
}
.opencampus-flow__item3 .opencampus-flow__text_blue {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 8px 12px;
}
.opencampus-flow__text_white {
color: #235D85;
background-color: #fff;
padding: 2px 8px;
border-radius: 50px;
font-size: 16px;
margin-left: 8px;
}
.opencampus-flow__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 20px;
}
.opencampus-flow__item3 .opencampus-flow__list {
font-size: 16px;
}
.opencampus-flow__list p {
width: calc(100% - 23px);
}
.opencampus-flow__list:not(:first-of-type) {
margin-top: 2px;
}
.opencampus-flow__check {
margin-right: 4px;
width: 19px;
margin-top: 2px;
}
.opencampus-flow__arrow_right {
width: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.opencampus-flow__arrow img {
width: 100%;
display: block;
}
.opencampus-flow__arrow_bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.opencampus-flow__arrow_bottom img {
width: 24px;
}
.opencampus-satisfactionLevel {
background-color: #fff;
border-radius: 20px;
border: #235D85 2px solid;
-webkit-box-shadow: #235D85 6px 6px;
box-shadow: #235D85 6px 6px;
padding: 28px 40px 28px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 32px;
}
.opencampus-satisfactionLevel__title {
width: 36%;
}
.opencampus-satisfactionLevel__pc {
display: block;
width: 100%;
}
.opencampus-satisfactionLevel__sp {
display: none;
width: 100%;
}
.opencampus-satisfactionLevel__graph {
width: 19%;
}
.opencampus-satisfactionLevel__graph img {
display: block;
width: 100%;
}
.opencampus-satisfactionLevel__text {
width: 30%;
margin-right: 5%;
position: relative;
}
.opencampus-satisfactionLevel__text img {
display: block;
width: 100%;
}
.opencampus-satisfactionLevel__decoration {
position: absolute;
top: -58px;
right: -60px;
width: 72px!important;
max-inline-size: none;
max-block-size: none;
}
.opencampus-voice {
background-color: #fff;
border-radius: 20px;
border: #235D85 2px solid;
-webkit-box-shadow: #235D85 6px 6px;
box-shadow: #235D85 6px 6px;
padding: 32px 40px 40px;
margin-top: 32px;
}
.opencampus-voice__title img {
width: 69px;
}
.opencampus-voice__item {
border-radius: 20px;
padding: 32px 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.opencampus-voice__item:not(:first-of-type) {
margin-top: 24px;
}
.opencampus-voice__item_blue {
background-color: #E7F1F7;
}
.opencampus-voice__item_skyblue {
background-color: #E9F7FA;
}
.opencampus-voice__item_yellow {
background-color: #FEF5E0;
}
.opencampus-voice__about {
width: 150px;
}
.opencampus-voice__interview {
width: calc(100% - 190px);
}
.opencampus-voice__about_image {
display: block;
width: 100%;
}
.opencampus-voice__about_text {
text-align: center;
font-size: 18px;
margin-top: 12px;
font-weight: 500;
}
.opencampus-voice__interview_item:not(:first-of-type) {
margin-top: 20px;
}
.opencampus-voice__interview_item h5 {
font-weight: bold;
padding-bottom: 12px;
margin-bottom: 12px;
font-size: 24px;
}
.opencampus-voice__item_blue .opencampus-voice__interview_item h5{
border-bottom: 3px dotted #235D85;
color: #235D85;
}
.opencampus-voice__item_skyblue .opencampus-voice__interview_item h5{
border-bottom: 3px dotted #52BEDC;
color: #52BEDC;
}
.opencampus-voice__item_yellow .opencampus-voice__interview_item h5{
border-bottom: 3px dotted #F5AA02;
color: #F5AA02;
}
.opencampus-voice__content_sp {
display: none;
}
.opencampus-voice__br_sp {
display: none;
}
.opencampus-br__sp {
display: none;
}
.opencampus-flow__image_sp {
display: none!important;
}
@media screen and (max-width:1200px){
.opencampus-flow__item1 .opencampus-flow__text .oencampus-flow__time {
font-size: 40px;
}
.opencampus-flow__item1 .opencampus-flow__text p {
font-size: 24px;
}
.opencampus-flow__item2 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item3 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item4 .opencampus-flow__text .oencampus-flow__time {
font-size: 28px;
}
}
@media screen and (max-width:1120px){
.opencampus-flow__text_blue {
font-size: 16px;
}
.opencampus-flow__text_white {
font-size: 15px;
}
.opencampus-flow__list {
font-size: 16px;
}
}
@media screen and (max-width:1020px){
.opencampus-flow__item3 .opencampus-flow__text_blue {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 4px 18px 6px;
}
.opencampus-flow__item3 .opencampus-flow__text_blue p {
width: 100%;
}
.opencampus-flow__text_white {
margin-left: 0;
margin-top: 4px;
}
.opencampus-flow__item4 .opencampus-flow__image {
width: 60%;
}
.opencampus-flow__item4 .opencampus-flow__text {
width: 37%;
}
.opencampus-flow__item1 .opencampus-flow__text .oencampus-flow__time {
font-size: 32px;
}
.opencampus-flow__item1 .opencampus-flow__text p {
font-size: 20px;
}
.opencampus-satisfactionLevel__decoration {
width: 60px!important;
top: -54px;
right: -47px;
}
}
@media screen and (max-width:870px){
.opencampus-flow__item1 .opencampus-flow__text .oencampus-flow__time {
font-size: 28px;
}
.opencampus-flow__item1 .opencampus-flow__text p {
font-size: 17px;
}
}
@media screen and (max-width:768px){
.opencampus {
padding: 40px 0;
}
.opencampus-title img {
width: 134px;
}
.opencampus-content__title h4 {
font-size: 24px;
}
.opencampus-flow {
padding: 32px 16px;
-webkit-box-shadow: #235D85 3px 3px;
box-shadow: #235D85 3px 3px;
}
.opencampus-flow__title img {
width: 44px;
}
.opencampus-flow h4::before {
left: 0px;
height: 50%;
}
.opencampus-flow__title p {
text-align: left;
}
.opencampus-flow h4::after {
right: 0px;
height: 50%;
}
.opencampus-flow__item_small {
width: 100%;
}
.opencampus-flow__arrow_right {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 100%;
}
.opencampus-flow__arrow_right img {
width: 24px;
}
.opencampus-flow__image_pc {
display: none!important;
}
.opencampus-flow__image_sp {
display: block!important;
width: 100%;
}
.opencampus-flow__item {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 16px 16px 20px;
border-radius: 10px;
}
.opencampus-flow__item2 .opencampus-flow__image img, .opencampus-flow__item3 .opencampus-flow__image img, .opencampus-flow__item4 .opencampus-flow__image img {
border-radius: 10px;
}
.opencampus-flow__item1 .opencampus-flow__image {
margin-top: 0;
}
.opencampus-flow__item2 .opencampus-flow__image {
width: 100%;
}
.opencampus-flow__item2 .opencampus-flow__text {
width: 100%;
margin-top: 12px;
}
.opencampus-flow__item3 .opencampus-flow__image {
width: 100%;
}
.opencampus-flow__item3 .opencampus-flow__text {
width: 100%;
margin-top: 12px;
}
.opencampus-flow__item4 .opencampus-flow__image {
width: 100%;
}
.opencampus-flow__item4 .opencampus-flow__text {
width: 100%;
margin-top: 12px;
}
.opencampus-flow__item1 .opencampus-flow__text p {
font-size: 18px;
}
.opencampus-flow__item1 .opencampus-flow__text .oencampus-flow__time {
margin-bottom: 0;
}
.opencampus-flow__step {
top: -8px;
right: -8px;
width: 57px;
}
.opencampus-flow__item2 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item3 .opencampus-flow__text .oencampus-flow__time, .opencampus-flow__item4 .opencampus-flow__text .oencampus-flow__time {
text-align: center;
}
.opencampus-flow__text_blue {
font-size: 20px;
}
.opencampus-flow__text_white {
font-size: 16px;
}
.opencampus-flow__item4 .opencampus-flow__image {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.opencampus-flow__item4 .opencampus-flow__image img {
width: 100%;
}
.opencampus-flow__item4 .opencampus-flow__image img:first-of-type {
margin-bottom: 8px;
}
.opencampus-flow__item1 {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.opencampus-flow__item1 .opencampus-flow__image {
max-width: 106px;
}
.opencampus-flow__item1 .opencampus-flow__text {
width: 60%;
max-width: 140px;
}
.opencampus-satisfactionLevel {
padding: 20px 16px 32px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-shadow: #235D85 3px 3px;
box-shadow: #235D85 3px 3px;
}
.opencampus-satisfactionLevel__title {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.opencampus-satisfactionLevel__graph {
width: 100%;
margin: 0 auto;
max-width: 264px;
margin-bottom: 12px;
}
.opencampus-satisfactionLevel__decoration {
width: 49px !important;
top: -53px;
right: 0;
}
.opencampus-satisfactionLevel__text {
width: 100%;
margin-right: 0;
max-width: 400px;
margin: 0 auto;
}
.opencampus-voice h4::before {
left: -20px;
}
.opencampus-voice h4::after {
right: -20px;
}
.opencampus-voice {
padding: 32px 10px;
-webkit-box-shadow: #235D85 3px 3px;
box-shadow: #235D85 3px 3px;
}
.opencampus-voice__title {
margin-bottom: 24px;
}
.opencampus-voice__content_sp {
display: block;
}
.opencampus-voice__content_pc {
display: none;
}
.opencampus-voice__item {
margin: 0 6px;
padding: 20px 16px 24px;
}
.opencampus-voice__item:not(:first-of-type) {
margin-top: 0;
}
.opencampus-voice__about {
width: 100%;
}
.opencampus-voice__interview {
width: 100%;
}
.opencampus-voice__content_sp .slick-track {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.opencampus-voice__content_sp .slick-slide {
height: auto !important;
}
.opencampus-voice__about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 16px;
}
.opencampus-voice__about_image {
width: 130px;
}
.opencampus-voice__about_text {
margin-left: 8px;
text-align: left;
font-size: 18px;
}
.opencampus-voice__item_blue .opencampus-voice__about_text {
color: #235D85;
}
.opencampus-voice__item_skyblue .opencampus-voice__about_text {
color: #52BEDC;
}
.opencampus-voice__item_yellow .opencampus-voice__about_text {
color: #F5AA02;
}
.opencampus-voice__content_sp .slick-dots {
margin-top: 12px;
}
.opencampus-voice__interview_item h5 {
font-size: 18px;
}
.opencampus-voice__br_sp {
display: block;
}
.opencampus-br__sp {
display: block;
}
.opencampus-voice__title img {
width: 51px;
}
.opencampus-flow__title {
margin-bottom: 16px;
}
}
@media screen and (max-width:500px){
.opencampus-satisfactionLevel__graph {
max-width: 204px;
}
}
@media screen and (max-width:450px){
.opencampus-flow__item1 .opencampus-flow__image {
max-width: 66px;
margin-right: 20px;
}
.opencampus-voice__about_image {
width: 80px;
}
.opencampus-voice__about_text {
font-size: 16px;
}
.opencampus-voice__interview_item h5 {
font-size: 15px;
margin-bottom: 8px;
padding-bottom: 8px;
}
.opencampus-voice__interview_item p {
font-size: 13px;
}
.opencampus-voice__interview_item:not(:first-of-type) {
margin-top: 12px;
}
.opencampus-voice__about {
margin-bottom: 12px;
}
.opencampus-voice__item {
padding: 16px 12px 16px;
}
.opencampus-voice__content_sp .slick-dots {
margin-top: 0;
}
}
@media screen and (max-width:350px){
.opencampus-voice__br_sp {
display: none;
}
}
@media screen and (max-width:340px){
.opencampus-flow__item1 .opencampus-flow__image {
margin-right: 10px;
}
}
/*--------------------------access----------------------------*/
.access {
padding: 80px 0;
}
.access-inner {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.access-title::before {
border-bottom: #52BEDC dotted 5px;
}
.access-title img {
width: 93px;
}
.access-item__inner {
background-color: #E7F1F7;
border-radius: 40px;
padding: 60px 40px 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.access-item {
position: relative;
}
.access-item:first-of-type {
margin-bottom: 68px;
margin-top: 57px;
}
.access-item__title {
position: absolute;
top: -33px;
left: 0;
right: 0;
margin: auto;
background-color: #235D85;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 32px;
width: 90%;
max-width: 546px;
border-radius: 80px;
padding: 12px;
}
.access-item__image {
width: 50%;
}
.access-item__image_pc {
display: block;
}
.access-item__image_sp {
display: none;
}
.access-item__map {
width: 47%;
height: 100%;
}
.access-item__map iframe {
height: 21vw;
max-height: 276px;
width: 100%;
}
.access-br__sp {
display: none;
}
@media screen and (max-width:950px){
.access-item__title {
font-size: 28px;
}
}
@media screen and (max-width:768px){
.access {
padding: 40px 0;
}
.access-title img {
width: 70px;
}
.access-br__sp {
display: block;
}
.access-item__title {
font-size: 20px;
max-width: 253px;
top: -24px;
}
.access-item__inner {
border-radius: 10px;
padding: 40px 16px 20px;
}
.access-item:first-of-type {
margin: 42px 0 48px;
}
.access-item__inner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.access-item__image {
width: 100%;
}
.access-item__image_pc {
display: none;
}
.access-item__image_sp {
display: block;
margin: 0 auto;
max-width: 450px;
width: 100%;
}
.access-item__map {
width: 100%;
margin-top: 16px;
}
.access-item__map iframe {
height: 50vw;
max-height: none;
}
}
@media screen and (max-width:450px){
.access-item__map iframe {
height: 55vw;
}
}
/*--------------------------admissionInformation----------------------------*/
.admissionInformation {
padding: 60px 0;
background-image: url("../images/border_background.png");
background-repeat: repeat;
}
.admissionInformation-inner {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.admissionInformation-title h3 {
color: #fff;
}
.admissionInformation-title img {
width: 297px;
display: block;
}
.admissionInformation-title::before {
border-bottom: 5px dotted #fff;
}
.admissionInformation-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.admissionInformation-item {
width: 32%;
}
.admissionInformation-button {
background-color: #fff;
border-radius: 80px;
border: 2px solid #235D85;
-webkit-box-shadow: #235D85 5px 5px;
box-shadow: #235D85 5px 5px;
display: block;
width: 100%;
height: 100%;
text-align: center;
position: relative;
color: #235D85;
font-weight: bold;
font-size: 26px;
padding: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.admissionInformation-button:hover {
background-color: #235D85;
color: #fff;
border: #fff 2px solid;
-webkit-box-shadow: #fff 5px 5px;
box-shadow: #fff 5px 5px;
}
.admissionInformation-button__arrow {
position: absolute;
width: 20px;
right: 16px;
top: 0;
bottom: 0;
margin: auto;
}
.admissionInformation-button__arrow_blue {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.admissionInformation-button__arrow_white {
opacity: 0;
}
.admissionInformation-button:hover .admissionInformation-button__arrow_blue {
opacity: 0;
}
.admissionInformation-button:hover .admissionInformation-button__arrow_white {
opacity: 100;
}
.admissionInformation-button__br {
display: none;
}
@media screen and (max-width:1200px){
.admissionInformation-button {
font-size: 24px;
}
}
@media screen and (max-width:1100px){
.admissionInformation-button {
font-size: 20px;
}
}
@media screen and (max-width:950px){
.admissionInformation-button {
font-size: 18px;
}
.admissionInformation-button__arrow {
right: 12px;
}
}
@media screen and (max-width:850px){
.admissionInformation-button__br {
display: block;
}
}
@media screen and (max-width:768px){
.admissionInformation {
padding: 40px 0;
}
.admissionInformation-item {
width: 100%;
}
.admissionInformation-button {
font-size: 20px;
-webkit-box-shadow: #235D85 3px 3px;
box-shadow: #235D85 3px 3px;
}
.admissionInformation-item:not(:first-of-type) {
margin-top: 12px;
}
.admissionInformation-title img {
width: 223px;
}
.admissionInformation-button__br {
display: none;
}
}
/*--------------------------footer----------------------------*/
.catch_img {
position: relative;
height: 400px;
margin-top: 150px;
background: url(../images/top/img_catch02.jpg) no-repeat top center;
background-size: cover;
}
.catch_img .txt {
position: absolute;
top: 135px;
width: 100%;
color: #ffffff;
font-weight: 600;
font-size: 24px;
font-family: "Noto Serif JP", serif;
text-align: center;
}
.under .catch_img {
margin-top: 0;
}
footer {
background-color: #f5f5f5;
overflow: hidden;
}
footer .footer_inner {
max-width: 1200px;
margin: 0 auto;
width: 96%;
}
footer .f_top {
padding: 60px 0;
border-bottom: solid 1px #cccccc;
font-weight: 500;
font-size: 14px;
}
footer .f_top_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer .f_top .f_txt {
margin-left: 10px;
}
footer .f_top .f_txt span {
display: inline-block;
line-height: 1;
}
footer .f_top .f_address {
margin-left: 60px;
line-height: 1.2;
}
footer .f_sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 30px;
}
footer .f_sns > * + * {
margin-left: 15px;
}
footer .f_top .txt {
padding-left: 54px;
line-height: 1.2;
}
footer .f_mid {
padding: 60px 0;
border-bottom: solid 1px #cccccc;
}
footer .f_navi {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
footer .f_navi_list span {
display: block;
font-weight: 500;
line-height: 1;
}
footer .f_navi_list ul {
margin-top: 25px;
}
footer .f_navi_list ul li {
margin-top: 15px;
}
footer .f_navi_list ul li:first-child {
margin-top: 0;
}
footer .f_nav_item {
display: block;
font-size: 14px;
line-height: 1;
-webkit-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
footer .f_mid .f_mid_bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 30px;
}
footer .f_mid_bnr {
margin-top: 30px;
}
/*footer .f_sns .sns_fb {
margin-right: 15px;
}
footer .f_sns .sns_tw {
margin-right: 15px;
}*/
/*footer .f_navi_list:nth-child(1) {
margin-right: 130px;
}
footer .f_navi_list:nth-child(2) {
margin-right: 130px;
}
footer .f_navi_list:nth-child(3) {
margin-right: 52px;
}*/
.fx_bnr {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -0.5em;
}
.fx_bnr > .item {
padding: 0 0.5em;
}
.fx_bnr > .item > a {
display: block;
}
footer .f_navi.bottom li {
margin-right: 48px;
}
footer .f_navi.bottom .f_nav_item {
position: relative;
padding-left: 14px;
}
footer .f_navi.bottom .f_nav_item:before {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 6px;
height: 8px;
background: url(../images/common/icon_arrow03.png) no-repeat;
background-size: contain;
content: "";
}
footer .f_bottom {
padding: 50px 0;
}
footer .f_bottom .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
footer .f_bottom .item + .item {
margin-top: 20px;
}
footer .f_bottom .logo_box {
margin-right: 50px;
}
footer .copy {
padding: 29px 0;
background: #225d85;
color: #ffffff;
font-size: 12px;
line-height: 1;
font-family: "Roboto", sans-serif;
text-align: center;
}
@media screen and (min-width: 768px) {
footer .f_nav_item:hover {
color: #225d85;
}
}
.fix-navi {
position: fixed;
top: calc(100vh - 243px);
right: 0;
z-index: 95;
text-align: center;
-webkit-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
.fix-navi.fixed {
top: calc(100vh - 566px);
/* top: calc(100vh - 485px); */
-webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
}
.fix-navi .fix_item {
display: block;
width: 80px;
height: 80px;
margin-top: 1px;
padding-top: 48px;
color: #ffffff;
font-size: 14px;
line-height: 1;
-webkit-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.fix-navi .fix_item:first-child {
margin-top: 0;
}
.fix-navi .fix_item.orientation {
/*padding-top: 44px;*/
padding-top: 52px;
background: url(../images/common/icon_orien_wh.png) no-repeat center top 13px #97c4e2;
background-size: 26px;
font-size: 12px;
}
.fix-navi .fix_item.orientation span {
font-size: 11px;
}
.fix-navi .fix_item.opencampus {
background: url(../images/common/icon_open_wh.png) no-repeat center top 18px #75a9cc;
background-size: 32px;
font-size: 12px;
}
.fix-navi .fix_item.consultation {
background: url(../images/common/icon_consultation_wh.png) no-repeat center top 13px #5689ab;
background-size: 32px;
font-size: 12px;
}
.fix-navi .fix_item.access {
background: url(../images/common/icon_map.png) no-repeat center top 20px #225d85;
background-size: 15px;
}
.fix-navi .fix_item.document {
background: url(../images/common/icon_book.png) no-repeat center top 20px #06446e;
background-size: 30px;
}
.fix-navi .fix_item.mail {
background: url(../images/common/icon_mail.png) no-repeat center top 20px #12224e;
background-size: 26px;
}
.fix-navi .fix_item.totop {
-webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
background: url(../images/common/icon_arrow_top.png) no-repeat center #ffffff;
background-size: 14px;
}
.fix-navi .fix_item.pamphlet {
-webkit-box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
background: url(../images/common/icon_book02.png) no-repeat center top 10px #224886;
background-size: 32px;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.fix-navi .fix_item:hover {
background-color: #ffffff;
}
.fix-navi .fix_item.orientation:hover {
background-image: url(../images/common/icon_orien_over.png);
color: #97c4e2;
}
.fix-navi .fix_item.opencampus:hover {
background-image: url(../images/common/icon_open_over.png);
color: #75a9cc;
}
.fix-navi .fix_item.consultation:hover {
background-image: url(../images/common/icon_consultation_over.png);
color: #75a9cc;
}
.fix-navi .fix_item.access:hover {
background-image: url(../images/common/icon_map_over.png);
color: #225d85;
}
.fix-navi .fix_item.document:hover {
background-image: url(../images/common/icon_book_over.png);
color: #06446e;
}
.fix-navi .fix_item.mail:hover {
background-image: url(../images/common/icon_mail_over.png);
color: #12224e;
}
.fix-navi .fix_item.pamphlet:hover {
background-image: url(../images/common/icon_book02_bl.png);
color: #224886;
}
.fix-navi .fix_item.totop:hover {
opacity: 0.7;
}
}
.insta {
}
.insta .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.insta h3.flex {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 1em;
}
.insta h3 i {
}
.insta h3 span {
font-weight: normal;
font-size: 36px;
line-height: 1;
font-family: "Crimson Text", serif;
letter-spacing: 0;
}
.insta_gallary {
}
.insta_slider_bloc.flex {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1em;
}
.gallery-item {
width: calc(100% / 6 - 1em);
aspect-ratio: 4 / 4;
border: solid 1px #cccccc;
}
.gallery-item a {
background-size: cover;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
background-color: white;
/* padding-top: 14%; */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: block;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.3s linear;
transition: -webkit-transform 0.3s linear;
-o-transition: transform 0.3s linear;
transition: transform 0.3s linear;
transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.gallery-item a:hover {
opacity:0.8;
}
@media screen and (max-width: 768px) {
.insta h3 i {
width: 2em;
}
.insta h3 span {
font-size: 20px;
}
.gallery-item {
width: calc(100% / 2 - 1em);
height: 100%;
}
}
table a {
color: blue;
text-decoration: underline;
}
table a:hover {
text-decoration: none;
}
footer a img {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
footer a:hover img {
opacity: 0.7;
}
@media screen and (max-width:768px){
.catch_img {
height: 200px;
margin-top: 0;
background: url(../images/common/img_catch_sp.jpg) no-repeat top center;
background-size: cover;
}
.catch_img .txt {
top: 30%;
font-size: 18px;
}
.catch_img .img_txt {
position: absolute;
bottom: 15%;
width: 100%;
text-align: center;
}
.catch_img .img_txt img {
max-width: 80%;
}
footer {
background-position: center;
}
footer .footer_inner {
display: block;
padding: 20px 0;
}
footer .f_top {
padding: 0 20px 20px;
text-align: center;
}
footer .f_top_inner {
display: block;
}
footer .f_top_inner .txt {
margin-top: 5px;
padding-left: 0;
font-size: 12px;
line-height: 1.3;
text-align: left;
}
footer .f_top .f_txt {
margin: 0;
}
footer .f_logo {
width: 80%;
margin: 0 auto 10px;
}
footer .f_top .f_address {
display: inline-block;
margin-top: 20px;
margin-left: 0;
text-align: left;
}
footer .f_mid {
padding: 20px 0;
}
footer .f_mid > nav,
footer .f_mid > .f_mid_bottom {
display: none;
}
footer .f_mid_bnr {
max-width: 90%;
margin: 0 auto;
}
footer .fx_bnr {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
footer .fx_bnr > .item {
max-width: 70%;
}
footer .f_bottom {
padding: 20px 0 0 0;
}
footer .f_bottom .item {
display: block;
}
footer .f_bottom .item + .item {
margin-top: 15px;
}
footer .f_bottom .logo_box {
width: 80%;
margin: 15px auto 0;
text-align: center;
}
footer .f_bottom .logo_box:first-child {
margin-top: 0;
}
footer .btn_contact {
margin-right: auto;
margin-left: auto;
}
footer .copy {
padding: 15px 20px 10px 20px;
font-size: 11px;
text-align: center;
}
footer .f_sns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 15px;
margin-left: 0;
}
.fix-navi {
top: inherit;
bottom: 5%;
}
.fix-navi.fixed {
top: inherit;
bottom: 5%;
}
.fix-navi .fix_item {
width: 45px;
height: 45px;
padding-top: 45px;
background-position: center !important;
font-size: 0;
}
.fix-navi .fix_item.pamphlet {
font-size: 0;
}
.fix-navi .fix_item:not(.totop) {
display: none;
}
footer .copy {
padding-bottom: 80px;
}
}