@charset "UTF-8";

.st-inner{
width:92%;
max-width:1200px;
margin:0 auto;
font-family:"Hiragino Sans","Meiryo",sans-serif;
position:relative;
}
.st-container{
position:relative;
}
.st-container .title{
display:flex;
flex-direction:column;
}
.st-container .title .logo{
width:30%;
}
.st-container .st-title{
font-size:var(--font-size-34);
margin-bottom:4px;
text-align:left;
}
.st-container .st-title span{
display:block;
color:#9e9e9e;
font-size:var(--font-size-18);
letter-spacing:.1em;
}
.st-circle{
width:320px;
height:320px;
border-radius:50%;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight:700;
font-size:var(--font-size-24);
line-height:1.5;
position:absolute;
z-index:200;
cursor:pointer;
}
.st-circle span{
display:block;
margin-top:10px;
}
.circle-purple{
background:linear-gradient(135deg,#b58ed1,#9469b6);
}
.circle-deep{
background:linear-gradient(135deg,#8b6eb3,#5d4a8b);
}
.circle-blue{
background:linear-gradient(135deg,#7eb6e5,#4d8fcb);
}
.st-text{
background:#f1f1f1;
padding:40px 25px 25px;
border-radius:20px;
font-size:var(--font-size-18);
line-height:1.8;
position:absolute;
width:500px;
height:370px;
box-sizing:border-box;
z-index:100;
opacity:0;
visibility:hidden;
transform:translateY(16px);
transition:opacity .45s ease,transform .45s ease,visibility .45s ease;
pointer-events:none;
}
.st-container .card .st-text p{
font-size:var(--font-size-18);
color:#333;
line-height:1.8em;
}
.st-container .card .st-text p span {
font-weight: 700;
}
.st-container .card{
width:1300px;
display:flex;
flex-wrap:wrap;
justify-content:center;
position:relative;
left:50%;
top:-80px;
transform-origin:top center;
will-change:transform;
margin:0 0 8rem;
translate:-50% 0;
scale:1;
}
.st-container .card .card-01{
width:1300px;
height:370px;
position:relative;
}
.st-container .card .card-02,
.st-container .card .card-03{
width:650px;
position:relative;
}
.card-01 .st-circle{
left:0;
right:0;
margin:auto;
}
.card-01 .st-text{
right:110px;
top:-190px;
}
.card-01 .st-text p{
padding-left:70px;
}
.card-02 .st-circle{
right:30px;
top:-100px;
}
.card-02 .st-text{
left:0;
top:-100px;
}
.card-02 .st-text p{
padding-right:200px;
}
.card-03 .st-circle{
left:30px;
top:-100px;
}
.card-03 .st-text{
right:0;
top:-100px;
}
.card-03 .st-text p{
padding-left:200px;
}
@supports not (translate:-50% 0){
.st-container .card{
transform:translateX(-50%);
}
}
.card-01 .st-circle:hover + .st-text,
.card-02 .st-circle:hover + .st-text,
.card-03 .st-circle:hover + .st-text,
.card-02:hover .st-text,
.card-03:hover .st-text{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}
.st-circle .arrow-icon{
display:inline-block;
margin-top:10px;
transition:transform .35s ease;
}
@media (min-width:769px){
.card-01 .st-circle:hover .arrow-icon,
.card-02 .st-circle:hover .arrow-icon,
.card-03 .st-circle:hover .arrow-icon,
.card-01:hover .st-circle .arrow-icon,
.card-02:hover .st-circle .arrow-icon,
.card-03:hover .st-circle .arrow-icon{
transform:translateX(12px);
}
}
.partner{
padding:40px 0;
margin-top:0;
}
.partner .box{
max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:16px;
border:1px solid #7e1083;
padding:1.5rem;
}
.partner .upper{
position:relative;
min-height:210px;
}
.partner .left,
.partner .right{
position:absolute;
top:0;
height:auto;
min-height:210px;
color:#fff;
padding:26px 44px 1rem;
box-sizing:border-box;
display:block;
}
.partner .left{
left:0;
width:50%;
background:#6f93d0;
clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);
padding-right:120px;
}
.partner .right{
right:0;
width:50%;
background:#a178cf;
clip-path:polygon(18% 0,100% 0,100% 100%,18% 100%,0 50%);
padding-left:120px;
}
.partner .left dl,
.partner .right dl{
width:24vw;
margin:0 auto;
}
.partner dt{
display:block;
width:100%;
margin:0 auto 1rem;
border:2px solid rgba(255,255,255,.7);
font-weight:800;
font-size:22px;
letter-spacing:.04em;
box-sizing:border-box;
text-align:center;
}
.partner dd{
margin:0;
padding-left:1rem;
font-size:18px;
line-height:1.9;
font-weight:700;
opacity:.95;
text-align:left;
}
.partner .center{
position:absolute;
left:50%;
top:105px;
transform:translate(-50%,-50%);
width:220px;
height:220px;
border-radius:50%;
background:rgba(193,13,35,.78);
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
font-size:var(--font-size-30);
font-weight:900;
z-index:5;
line-height:1;
}
.partner .center span{
display:block;
font-size:var(--font-size-50);
letter-spacing:.02em;
margin-bottom:1rem;
}
.partner .arrow{
width:40px;
height:10px;
background:#6f5aa3;
margin:0 auto;
position:relative;
}
.partner .arrow::after{
content:"";
position:absolute;
left:50%;
top:100%;
transform:translateX(-50%);
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:24px solid #6f5aa3;
}
.partner .bottom{
margin-top:1rem;
margin-bottom:0;
background:#6f5aa3;
color:#fff;
text-align:center;
padding:18px 16px;
font-size:22px;
font-weight:900;
letter-spacing:.06em;
box-sizing:border-box;
}
#fields h3{
display:flex;
align-items:center;
font-size:var(--font-size-18);
font-weight:600;
margin:0 0 1.5rem!important;
}
#fields h3::after{
content:"";
flex:1;
border-top:1px dashed #999;
margin-left:1rem;
}
#fields .box{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
margin-bottom:3rem;
}
#fields .box .image{
width:48%;
}
#fields .box dl{
width:50%;
}
#fields .box dt{
font-size:var(--font-size-28);
font-weight:600;
margin-bottom:1rem;
}
#fields .box dd{
font-size:var(--font-size-20);
margin-bottom:1rem;
}
#fields .box dd dl{
width:100%;
}
#fields .box dd dl dt{
display:inline;
font-size:var(--font-size-16);
padding:.5rem 1rem;
background:#848484;
color:#fff;
}
#fields .box dd dl dd{
font-size:var(--font-size-20);
font-weight:600;
margin-top:1rem;
}

@media (max-width:1300px){
.st-container .card{
scale:.98;
}
.partner{
margin-top:-10px;
}
}
@media (max-width:1200px){
.st-container .card{
scale:.92;
}
.partner{
margin-top:-25px;
}
}
@media (max-width:1120px){
.st-container .card{
scale:.86;
}
.partner{
margin-top:-45px;
}
}
@media (max-width:1040px){
.st-container .card{
scale:.8;
}
.partner{
margin-top:-70px;
}
}
@media (max-width:980px){
.st-container .card{
scale:.74;
}
.partner{
margin-top:-100px;
}
}
@media (max-width:920px){
.st-container .card{
scale:.7;
}
.partner{
margin-top:-130px;
}
}
@media (max-width:860px){
.st-container .card{
scale:.66;
}
.partner{
margin-top:-160px;
}
}
@media (max-width:820px){
.st-container .card{
scale:.63;
}
.partner{
margin-top:-190px;
}
}
@media (max-width:768px){
.st-container{
min-height:auto;
}
.st-container .card{
width:100%;
display:block;
transform:none;
scale:1;
margin:20px auto 2rem;
left:auto;
top:auto;
translate:0;
}
.st-container .card .card-01,
.st-container .card .card-02,
.st-container .card .card-03{
width:100%;
height:auto;
margin-bottom:32px;
position:relative;
}
.st-container .title .logo{
width:50%;
}
.st-circle,
.card-01 .st-circle,
.card-02 .st-circle,
.card-03 .st-circle{
position:relative;
width:260px;
height:260px;
margin:0 auto 16px;
top:auto;
left:auto;
right:auto;
}
.st-text,
.card-01 .st-text,
.card-02 .st-text,
.card-03 .st-text{
position:relative;
width:100%;
height:auto;
margin:0 auto;
top:auto;
left:auto;
right:auto;
padding:25px;
opacity:1;
visibility:visible;
transform:none;
pointer-events:auto;
}
.card-01 .st-circle p {
padding-top: 2rem;
}
.card-01 .st-text p,
.card-02 .st-text p,
.card-03 .st-text p{
padding:0;
}
.st-circle .arrow-icon{
font-size:0;
}
.st-circle .arrow-icon::before{
content:"↓";
font-size:22px;
display:inline-block;
}
.partner{
margin-top:0;
}
.partner .upper{
display:flex;
flex-direction:column;
align-items:center;
height:auto;
}
.partner .left{
position:relative;
width:100%;
padding:2rem 1.5rem 7rem;
text-align:center;
clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
}
.partner .right{
position:relative;
width:100%;
padding:7rem 1.5rem 2rem;
text-align:center;
clip-path:polygon(0 20%,50% 0,100% 20%,100% 100%,0 100%);
}
.partner .left dl,
.partner .right dl{
width:90%;
margin:0 auto;
}
.partner .center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:180px;
height:180px;
z-index:10;
}
.partner dl{
width:100%;
text-align:center;
}
.partner dd{
text-align:center;
}
.partner .arrow{
margin:0 auto 0;
}
.partner .bottom{
margin-top:1rem;
font-size:1rem;
}
#fields .box{
display:flex;
flex-direction:column;
}
#fields .box .image,
#fields .box dl{
width:100%;
}
#fields .box .image{
margin-bottom:1.5rem;
}
#fields .box .image img{
width:100%;
}
#contents .subject{
padding:5rem 0 0;
}
}