@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Old+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=IBM+Plex+Sans+JP&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Old+Mincho&display=swap');



* {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    width: 100%;
    vertical-align: bottom;
}

body {
    font-family: "IBM Plex Sans JP", sans-serif;
    background: #F7F9FC;
    color: #4B5563;
}

a {
    text-decoration: none;
}

/* 共通---------------- */

.container {
    width: 1200px;
    padding: 80px 0;
    margin: 0 auto;
}

main h3 {
    font-size: 32px;
    margin: 80px auto;
    font-weight: medium;
    text-align: center;
}

.btn {
    width: 560px;
    margin: 80px auto 0;
}

.btn a {
    display: block;
    color: #4B5563;
    font-size: 24px;
    background: #fff;
    border: 5px solid #3DB7A5;
    border-radius: 70px;
    padding: 24px 0;
    text-align: center;
    position: relative;
    transition: all .5;
}

.btn a::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}

.btn a:hover {
    font-weight: bold;
    background: #3DB7A5;
    border: 5px solid #fff;
    color: #fff;
    opacity: .7;
}
/* header-------------- */

header {
    background: url(images/fv-img.png) top/cover;
    color: #fff;
    font-weight: bold;
    height: 100vh;
    position: relative;
}

.laboname {
    font-family: "Inter", sans-serif;
    width: 386px;
    padding: 56px;
    line-height: .9;
}

.labo {
 font-size: 48px;
}

.labostudy {
    font-size: 32px;
}

.title {
    width: 623px;
    padding: 56px;
    margin-top: 200px;
}

.title h2 {
    font-size: 36px;
}

.title h1 {
    font-size: 48px;
}

.subtitle {
    width: 100%;
    height: 120px;
    background: rgba(61, 183, 165, .7);
    margin-bottom: 64px;
    padding: 24px 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
}

.workshop {
    font-size: 32px;
}

.sub {
    font-size: 48px;
}

/* day--------------- */

#day {
    width: 620px;
    font-size: 24px;
    font-weight: medium;
    margin: 80px auto 0;
    line-height: 3;
}

#day dl {
    display: flex;
    flex-wrap: wrap;
}

#day dt {
    width: 18%;
    text-align: left;
}

#day dd {
    width: 82%;
    text-align: left;
}

/* concept------------*/

/* program -----------*/

#program {
    background: #01236A;
    color: #fff;
}

#program ul {
    display: flex;
    padding: 32px;
}

#program article {
    display: flex;
}

#program h5 {
    font-size: 24px;
}

.program-no {
    font-family: "Inter", sans-serif;
    color: #3DB7A5;
    font-size: 32px;
    border-right: 4px solid #3DB7A5;
    width: 112px;
    
}

.program-box1-title {
    width: 160px;
    padding: 0 32px;
    font-size: 32px;
    text-align: center;
}

.program-box1-title span {
    font-size: 24px;
}

.program-box1-txt {
    font-size: 20px;
    display: flex;
    align-items: center;
}

.program-box1-txt span {
    font-size: 16px;
}

.program-box2 {
    flex: 1;
}

.program-box2-txt {
    flex: 1;
}

.program-box2-txt h5 {
    font-size: 32px;
    padding-top: 8px;
    margin-bottom: 32px;
}

.program-box2-txtbox {
    flex: 1;
    padding-left: 32px;
}

.program-box1-title h6 {
    margin: 16px auto;
}

.program-box1-title h6 span {
    font-size: 16px;
}

.program-box2 h4 span {
    font-size: 24px;
}

.program-box3 {
    flex: 1;
}

.program-box3 h4 {
    font-size: 32px;
    margin-left: 32px;
}

.program-box3 p {
    margin-top: 16px;
}

.program-box3-name {
    letter-spacing: -1px;
}

.program-box4 {
    margin-left: 32px;
}

.program-box5 {
    margin: 16px 0;
}

.breakbox1 {
    text-align: center;
    line-height: 2;
    padding: 48px 0;
}

.breakbox1-time {
    font-size: 24px;
}

.breakbox1-name {
    font-size: 32px;
}

.program-mcbox {
    width: 35%;
}

.program-mc h6 span {
    font-size: 16px;
}

.program-mc-img {
    width: 160px;
    margin: 0 auto 24px;
}

.program-mc-txtbox {
    flex: 65%;
}


.program-box6 h4 {
    font-size: 32px;
}

.program-box7-txt {
     flex: 1;
    margin-top: 56px;
}

.program-time {
    font-size: 24px;
}

.program-box1-title h4 {
    font-size: 32px;
    text-align: center; 
    line-height: 1;
}

#program h6 {
    font-size: 20px;
    text-align: center;
    line-height: 1.2;
}




/* footer--------- */

footer {
    position: relative;
    height: 300px;
}


small {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

footer .btn a::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
}