@charset "UTF-8";

.first{background: url(../../images/application/guideline/first_bg.jpg)top center no-repeat;padding: 12vw 5vw 11vw;position: relative;background-size: cover;}
.first img{width: 100%;margin-bottom: 4vw;}
.first .en{position: absolute;width: 50vw;z-index: 2;top: 7vw;left: 2vw;margin-bottom: 0;}
.first .deco{width: 24vw;top: 62vw;position: absolute;right: 2vw;}
.first .ttl{border-left: 3px solid var(--pink);padding: 2vw 0 0 3vw;margin-bottom: 3vw;}
.first .ttl .mini{font-weight: bold;display: block;line-height: 1;}
.first .ttl .big{font-size: 6vw;font-family: var(--mincho);color: var(--pink);}

.step{margin-bottom: 10vw;}
.step ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.step li{background: var(--pink02);margin-bottom: 8vw;text-align: center;width: 48%;padding: 4%;}
.step li span{background: var(--pink);color: #fff;text-align: center;display: table;margin: -6vw auto 2vw;font-family: trajan-pro-3;font-optical-sizing: auto;font-weight: 400;padding: 1.5vw 2.5vw;line-height: 1;border-radius: 30px;}

.course .read{color: var(--pink);font-size: 5vw;font-family: var(--mincho);margin-bottom: 1vw;font-weight: 600;}
.course .link{margin-bottom: 4vw;}
.course .link a{margin: 0 auto 10px 0;}
.course ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.course li{width: 48%;margin-bottom: 4vw;}
.course li img{width: 100%;margin-bottom: 3vw;}
.course li p{text-align: center;line-height: 1.3;font-weight: bold;}

.notes dl {background: #f9f8f6;padding: 5vw;margin-bottom: 10px;line-height: 1.3;}
.notes dt{border-left: 4px solid #dbd5c8;padding-left: 2vw;font-weight: bold;margin-bottom: 3vw;}
.notes dd{margin-bottom: 3vw;padding-left: 1em;text-indent: -1em;text-align:justify;text-justify:auto;font-size: 3.4vw;font-feature-settings: "palt";letter-spacing: .04em;line-height: 1.7;}
.notes dd.no-ast{padding-left: 0;text-indent: 0;}
.notes dd.no-ast:before{content:"";}
.notes dd:last-child { margin-bottom: 0;}
.notes a{margin: 0 auto 0 0;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {

.first{background: url(../../images/application/guideline/first_bg.jpg)top center no-repeat;padding: 90px 0 100px;position: relative;}
.first_in{width: clamp(730px, 90%, 1200px);margin: 0 auto;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-justify-content: space-between;-ms-flex-pack: space-between;justify-content: space-between;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;position: relative;}
.first img{z-index: 2;margin: 0;width: min(50%,700px);position: absolute;right: 0;top: 0;}
.first .en{width: 400px;top: -90px;left: -30px;}
.first .deco{width: 100px;top: -30px;right: 20px;}
.first .text{position: relative;padding: 30px 7vw 30px 30px;background: #fff;max-width: 660px;margin: 140px auto 0 0;width: 50vw;}
.first .ttl{padding: 10px 0 0 16px;margin-bottom: 20px;}
.first .ttl .big{font-size: 30px;}
.first a{margin: 0 auto 0 0;}

.step{margin-bottom: 100px;}
.step li{margin-bottom: 0;padding: 40px 30px 30px;width: 24%;}
.step li span{margin: -56px auto 20px;padding: 10px 20px;}

.course .read{font-size: 24px;margin-bottom: 10px;}
.course .link{margin-bottom: 20px;display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;margin-bottom: 40px;}
.course .link a{margin: 0 20px 0 0;}
.course ul{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;}
.course .l03{-webkit-justify-content: center;justify-content: center;}
.course .l03 li{margin: 0 10px;}
.course li{width: 23%;margin-bottom: 0;}
.course li img{width: 100%;margin-bottom: 20px;}

.notes dl {padding: 40px;}
.notes dt{margin-bottom: 20px;font-size: 16px;padding-left: 10px;}
.notes dt small{ font-size: 80%;}
.notes dd{margin-bottom: 10px;font-size: 14px;}

}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.first{background-image: url(../../images/application/guideline/first_bg@2x.jpg);}
}