.fv_block {
position: relative;
}
.fv_block .fv-img {
margin-top: -18px;
}
@media screen and (max-width: 768px) {
.fv_block .fv-img {
margin-top: 0;
}
}  main {
padding-top: 50px;
padding-bottom: 180px;
background: #F2F8FF;
}
@media screen and (max-width: 820px) {
main {
padding-bottom: 100px;
}
}
.h2box_wrap {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 60px 0;
}
@media screen and (max-width: 768px) {
.h2box_wrap {
gap: 38px 0;
}
}
.h2box_wrap .h2box {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 0 22px;
}
@media screen and (max-width: 768px) {
.h2box_wrap .h2box {
width: 45px;
gap: 0 17px;
}
}
.h2box_wrap .h2box h2 {
font-size: 3.2rem;
font-weight: 300;
letter-spacing: 0.5em;
}
@media screen and (max-width: 768px) {
.h2box_wrap .h2box h2 {
font-size: 2.4rem;
}
}
.h2box_wrap .h2box .en {
font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
.h2box_wrap .h2box .en {
font-size: 1.2rem;
}
}
.white01 {
margin-bottom: 140px;
margin-left: 8.19vw;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px 0 0 10px;
}
@media screen and (max-width: 820px) {
.white01 {
margin-bottom: 80px;
margin-left: 4.3vw;
}
}
@media screen and (max-width: 480px) {
.white01 {
margin-left: 20px;
}
}
.sec02 {
padding-bottom: 140px;
}
@media screen and (max-width: 820px) {
.sec02 {
padding-bottom: 80px;
}
}
.white02 {
margin-right: 8.19vw;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 12.47vw;
background: rgba(255, 255, 255, 0.8);
border-radius: 0 10px 10px 0;
}
@media screen and (max-width: 820px) {
.white02 {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
margin-right: 15px;
}
}
@media screen and (max-width: 768px) {
.white02 {
padding-left: 8vw;
}
}
.white03 {
position: relative;
padding-top: 100px;
padding-bottom: 115px;
background: rgba(255, 255, 255, 0.6);
}
.white03::before {
position: absolute;
content: "";
width: 300px;
height: 1px;
background: #E96100;
top: 50px;
left: 0;
}
@media screen and (max-width: 820px) {
.white03::before {
width: 84px;
}
}
.white03::after {
position: absolute;
content: "";
width: 300px;
height: 1px;
background: #009699;
bottom: 50px;
right: 0;
}
@media screen and (max-width: 820px) {
.white03::after {
width: 84px;
}
} .white04 {
margin-top: 140px;
margin-left: 8.19vw;
padding: 90px 0 90px 60px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px 0 0 10px;
}
@media screen and (max-width: 820px) {
.white04 {
margin-left: 4.3vw;
padding: 90px 0 90px 30px;
}
}
@media screen and (max-width: 480px) {
.white04 {
margin-top: 80px;
margin-left: 20px;
padding: 50px 0 50px 13px;
}
}
.sec05_01 {
margin: 140px auto 0;
margin-left: 8.19vw;
margin-right: 8.19vw;
padding: 0 60px;
}
@media screen and (max-width: 820px) {
.sec05_01 {
margin: 80px auto 0;
margin-left: calc(4.3vw + 30px);
margin-right: calc(4.3vw + 30px);
padding: 0;
}
}
@media screen and (max-width: 480px) {
.sec05_01 {
margin: 80px auto 0;
margin-left: 20px;
margin-right: 20px;
padding: 0 0 0 13px;
}
}
@media screen and (max-width: 820px) {
.sec05_01.sec05_01_02 {
margin-left: 4.3vw;
margin-right: 4.3vw;
}
}
@media screen and (max-width: 480px) {
.sec05_01.sec05_01_02 {
margin-left: 20px;
margin-right: 20px;
}
}
.white05 {
padding-top: 90px;
padding-bottom: 90px;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 10px 0 10px;
}
@media screen and (max-width: 820px) {
.white05 {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 480px) {
.white05 {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 13px;
padding-right: 0;
border-radius: 0 20px 0 20px;
}
}  .news_block {
margin-right: 8.19vw;
padding: 90px 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 11.1vw;
}
@media screen and (max-width: 820px) {
.news_block {
margin-right: 0;
padding: 50px 30px;
gap: 0 5.5vw;
}
}
@media screen and (max-width: 480px) {
.news_block {
padding: 50px 28px 50px 13px;
}
}  .message_block {
margin-bottom: 90px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 10.76vw;
}
@media screen and (max-width: 820px) {
.message_block {
margin-bottom: 80px;
}
}
@media screen and (max-width: 480px) {
.message_block {
gap: 0 6.93vw;
}
}
.message_block .message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0 25px;
}
@media screen and (max-width: 768px) {
.message_block .message {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 20px 0;
}
}
.message_block .message p {
font-size: clamp(1.6rem, 1.54vw, 2rem);
letter-spacing: 0.05em;
line-height: 1.8;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media screen and (max-width: 768px) {
.message_block .message p {
padding-right: 20px;
font-size: 1.6rem;
line-height: 1.8;
}
}
.message_block .message .fig {
width: 387px;
}
@media screen and (max-width: 1024px) {
.message_block .message .fig {
width: 220px;
}
}
@media screen and (max-width: 768px) {
.message_block .message .fig {
width: 100%;
}
}
.message_block .message .fig figure {
margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
.message_block .message .fig figure {
margin-bottom: 10px;
}
}
.message_block .message .fig .name {
margin-bottom: 12px;
width: 119px;
}
@media screen and (max-width: 768px) {
.message_block .message .fig .name {
margin-bottom: 8px;
width: 104px;
}
}
.message_block .message .fig p {
font-size: clamp(1.4rem, 1.3vw, 1.6rem);
letter-spacing: 0.08em;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.message_block .message .fig p {
font-size: 1.4rem;
letter-spacing: 0.05em;
}
}  .concept_block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 11.1vw;
}
@media screen and (max-width: 768px) {
.concept_block {
gap: 0 6.93vw;
}
}
.concept_block .concept {
padding-right: 10vw;
}
@media screen and (max-width: 768px) {
.concept_block .concept {
padding-right: 0;
}
}
.concept_block .concept figure {
margin-bottom: 30px;
}
.concept_block .concept p {
margin-bottom: 60px;
font-size: clamp(1.6rem, 1.54vw, 2rem);
letter-spacing: 0.05em;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.concept_block .concept p {
padding-right: 20px;
font-size: 1.6rem;
line-height: 1.8;
}
}
.concept_block .concept .btn_wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
}
@media screen and (max-width: 480px) {
.concept_block .concept .btn_wrap {
padding-right: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 13px 0;
}
}
@media screen and (max-width: 480px) {
.concept_block .concept .btn_wrap02 {
padding-right: 20px;
}
}
.concept_block .concept .btnbox {
width: 50%;
aspect-ratio: 404/244;
display: block;
cursor: pointer; }
@media screen and (max-width: 480px) {
.concept_block .concept .btnbox {
width: 100%;
}
}
.concept_block .concept .btnbox:hover {
opacity: 0.7;
}
.concept_block .concept .btnbox.box03 {
margin-top: 15px;
width: 100%;
aspect-ratio: 821/185;
-webkit-box-shadow: 0px 4px 6.5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 4px 6.5px 0px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 480px) {
.concept_block .concept .btnbox.box03 {
margin-top: 13px;
margin-right: 20px;
aspect-ratio: 251/141;
-webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.09);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.09);
}
}  .recruitment_block {
padding-left: 11.38vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 11.1vw;
}
@media screen and (max-width: 820px) {
.recruitment_block {
padding-left: 50px;
}
}
@media screen and (max-width: 768px) {
.recruitment_block {
padding-left: 8vw;
gap: 0 6.93vw;
}
}
.recruitment_block .recruitment {
overflow: hidden;
}
.recruitment_block .recruitment .swiper {
width: 100%;
overflow: hidden;
}
.recruitment_block .recruitment .swiper .swiper-wrapper {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.recruitment_block .recruitment .swiper .swiper-slide {
width: 170px;
}
@media (min-width: 768px) {
.recruitment_block .recruitment .swiper .swiper-slide {
width: 50%;
}
}
.recruitment_block .recruitment .swiper .swiper-slide img {
width: 100%;
height: auto;
display: block;
}
.recruitment_block .recruitment .txt {
margin-top: 30px;
width: 54vw;
}
@media screen and (max-width: 820px) {
.recruitment_block .recruitment .txt {
width: 84%;
}
}
@media screen and (max-width: 480px) {
.recruitment_block .recruitment .txt {
width: 100%;
}
}
.recruitment_block .recruitment .txt p {
font-size: clamp(1.6rem, 1.54vw, 2rem);
letter-spacing: 0.08em;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.recruitment_block .recruitment .txt p {
padding-right: 20px;
font-size: 1.6rem;
letter-spacing: 0.05em;
text-align: justify;
}
}  .research_block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 11.1vw;
}
@media screen and (max-width: 768px) {
.research_block {
gap: 0 6.93vw;
}
}
.research_block .research_wrap .fig {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 10px;
}
@media screen and (max-width: 768px) {
.research_block .research_wrap .fig {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 10px 0;
}
}
@media screen and (max-width: 768px) {
.research_block .research_wrap .fig figure + figure {
display: none;
}
}
.research_block .research_wrap p {
margin-top: 30px;
width: 74%;
font-size: clamp(1.6rem, 1.54vw, 2rem);
letter-spacing: 0.05em;
line-height: 1.8;
}
@media screen and (max-width: 820px) {
.research_block .research_wrap p {
width: 84%;
}
}
@media screen and (max-width: 480px) {
.research_block .research_wrap p {
margin-top: 20px;
padding-right: 20px;
width: 100%;
font-size: 1.6rem;
}
}  .links_block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 11.1vw;
}
@media screen and (max-width: 768px) {
.links_block {
gap: 0 6.93vw;
}
}
.links_block .links_wrap ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 25px 30px;
}
@media screen and (max-width: 820px) {
.links_block .links_wrap ul {
gap: 15px 12px;
}
}
.links_block .links_wrap ul li {
width: 30%;
}
@media screen and (max-width: 768px) {
.links_block .links_wrap ul li {
width: 46%;
}
}
.links_block .links_wrap ul li a {
padding: 10px;
background: #FFF;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.links_block .links_wrap ul li a img {
width: auto;
}  .optout_block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 11.1vw;
}
@media screen and (max-width: 768px) {
.optout_block {
gap: 0 6.93vw;
}
}
.optout_block .optout_wrap {
padding-right: 4em;
width: 100%;
}
@media (max-width: 1440px) {
.optout_block .optout_wrap {
padding-right: 2em;
}
}
@media screen and (max-width: 768px) {
.optout_block .optout_wrap {
padding-right: 0;
}
}
.optout_block .optout_wrap p {
font-size: clamp(1.6rem, 1.54vw, 2rem);
letter-spacing: 0.05em;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.optout_block .optout_wrap p {
font-size: 1.6rem;
letter-spacing: 0.08em;
}
}
.optout_block .optout_wrap p.small {
color: #505050;
font-size: 1.3rem;
line-height: 1.2;
text-align: center;
}
@media screen and (max-width: 768px) {
.optout_block .optout_wrap p.small {
text-align: left;
line-height: 1.8;
}
}
.optout_block .optout_wrap .btn-optout {
margin: 116px auto 16px;
padding: 15px 18px;
width: 430px;
height: 86px;
color: #FFF;
font-size: 2.4rem;
letter-spacing: 0.05em;
background: #2D3047;
display: -ms-flexbox;
display: -webkit-box;
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-box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
border-radius: 51px;
}
@media screen and (max-width: 768px) {
.optout_block .optout_wrap .btn-optout {
margin: 30px auto 15px;
width: 100%;
height: 60px;
font-size: 1.6rem;
letter-spacing: 0.08em;
}
}
.optout_block .optout_wrap .btn-optout span {
position: relative;
padding-right: 34px;
display: block;
}
.optout_block .optout_wrap .btn-optout span::after {
position: absolute;
content: "";
width: 22px;
height: 22px;
background: url(//diat.umin.jp/wp-content/themes/utokyo/img/common/icn-external.svg) no-repeat 0 0/contain;
top: calc(50% - 10px);
right: 0;
}
.optout_block .optout_wrap .btn-optout:hover {
background: #0061C2;
}  .access_block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0 11.1vw;
}
@media screen and (max-width: 480px) {
.access_block {
gap: 0 6.93vw;
}
}
.access_block .access_wrap .accessbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0 22px;
}
@media screen and (max-width: 480px) {
.access_block .access_wrap .accessbox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px 0;
}
}
@media screen and (max-width: 480px) {
.access_block .access_wrap .accessbox + .accessbox {
margin-top: 40px;
padding-right: 15px;
gap: 40px 0;
}
}
.access_block .access_wrap .accessbox .infobox {
margin-bottom: 60px;
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 15px 0;
}
@media screen and (max-width: 480px) {
.access_block .access_wrap .accessbox .infobox {
margin-bottom: 0;
width: 100%;
gap: 20px 0;
}
}
.access_block .access_wrap .accessbox .infobox dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 70px;
}
@media screen and (max-width: 820px) {
.access_block .access_wrap .accessbox .infobox dl {
gap: 0 20px;
}
}
.access_block .access_wrap .accessbox .infobox dl dt {
min-width: 50px;
font-size: clamp(1.6rem, 1.54vw, 2rem);
font-weight: 700;
letter-spacing: 0.08em;
}
@media screen and (max-width: 480px) {
.access_block .access_wrap .accessbox .infobox dl dt {
min-width: 40px;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.05em;
}
}
.access_block .access_wrap .accessbox .infobox dl dd {
font-size: clamp(1.6rem, 1.5vw, 1.8rem);
letter-spacing: 0.08em;
}
@media screen and (max-width: 480px) {
.access_block .access_wrap .accessbox .infobox dl dd {
font-size: 1.6rem;
line-height: 1.8;
letter-spacing: 0.05em;
}
}
.access_block .access_wrap .accessbox .mapbox {
text-align: center;
}
.access_block .access_wrap .accessbox .mapbox p {
margin-bottom: 16px;
font-size: clamp(1.6rem, 1.54vw, 2rem);
font-weight: 500;
letter-spacing: 0.08em;
}
.access_block .access_wrap .accessbox .mapbox figure figcaption {
padding-top: 16px;
font-size: clamp(1.4rem, 1.3vw, 1.8rem);
letter-spacing: 0.08em;
}