@charset "UTF-8";
/* Sub FV
-------------------------------*/
.subfv { position: relative; padding-bottom: 120px; }
.subfv::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 310px; background: url("../img/curriculum/ptn_subfv_sp.png") no-repeat 50% 0/680px auto; clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); content: ""; opacity: .3; mix-blend-mode: color-burn; z-index: 10; }
.subfv__inner { display: flex; justify-content: center; align-items: flex-end; height: 250px; background-color: var(--c-mustard); }
.subfv__ttl { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 50; }
.subfv__ttl__en { font: 400 2.4rem var(--ff-grmd); line-height: 1; letter-spacing: 0.36em; text-indent: 0.36em; color: rgba(255,255,255,0.6); }
.subfv__ttl__jp { margin-top: 21px; font-size: 3.2rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.1em; text-indent: 0.1em; }
.subfv__deco { position: absolute; width: 100%; background: var(--c-mustard); }
.subfv__deco--left,
.subfv__deco--right { bottom: 0; height: 120px; opacity: .4; }
.subfv__deco--left { clip-path: polygon(0 0, 0% 100%, 100% 0); }
.subfv__deco--right { clip-path: polygon(0 0, 100% 100%, 100% 0); }
.subfv__deco--center { bottom: 60px; left: 50%; transform: translateX(-50%); height: 60px; clip-path: polygon(0 0, 50% 100%, 100% 0); }
@media screen and (max-width: 680px) {
	
}
@media screen and (min-width: 681px) {
	.subfv { padding-bottom: 240px; }
	.subfv::before { height: 460px; background-image: url("../img/curriculum/ptn_subfv_pc.png"); background-size: 1400px auto; clip-path: polygon(100% 0, 100% 74%, 50% 100%, 0 74%, 0 0); }
	.subfv__inner { height: 340px; padding-bottom: 21px; }
	.subfv__ttl {  }
	.subfv__ttl__en { font-size: 4.8rem; }
	.subfv__ttl__jp { font-size: 4.8rem; line-height: 1; letter-spacing: 0.05em; text-indent: 0.05em; }
	.subfv__deco--left,
	.subfv__deco--right { height: 240px; }
	.subfv__deco--center { bottom: 120px; height: 120px; }
}
@media screen and (min-width: 1401px) {
	.subfv { padding-bottom: 240px; }
	.subfv::before { background-position: center bottom; background-size: cover; }
}


/* Flow
-------------------------------*/
.sec--flow { padding-top: 26px; padding-bottom: 29px; }
.flow-ttl { font-size: 2.4rem; font-weight: 500; line-height: 1.5; text-align: center; }
.flow { margin-top: 45px; }
.flow__header { display: flex; justify-content: space-between; }
.flow__label { position: relative; font-size: 2.0rem; font-weight: 500; line-height: 1; }
.flow__label::before { position: absolute; right: 0; top: 29px; display: block; width: calc(100% + 24px); height: 1px; background: #000; content: ""; }
.flow__tag-wrap {  }
.flow__tag { font: 400 1.2rem var(--ff-nosa); line-height: 1; letter-spacing: 0.02em; }
.flow__tag::before { content: "\025cf"; margin-right: 4px; }
.flow__tag:not(:first-of-type) { margin-top: 5px; }
.flow__tag:nth-of-type(1)::before { color: #427bbf; }
.flow__tag:nth-of-type(2)::before { color: #9166a9; }
.flow__tag:nth-of-type(3)::before { color: #ec6d81; }
.flow__chart { margin-top: 36px; }
.flow__chart img { max-width: none; width: 800px; }
@media screen and (max-width: 680px) {
	.flow__chart { margin-right: -24px; }
	.flow__chart__btn { display: none; }
}
@media screen and (min-width: 681px) {
	.sec--flow { padding-top: 32px; padding-bottom: 60px; }
	.flow-ttl { font-size: 4.0rem; }
	.flow { margin-top: 69px; }
	.flow__label { font-size: 3.2rem; }
	.flow__label::before { top: 48px; width: 100vw; }
	.flow__tag-wrap {  }
	.flow__tag { font-size: 1.4rem; }
	.flow__tag:not(:first-of-type) { margin-top: 7px; }
	.flow__chart { position: relative; margin-top: 50px; }
	.flow__chart img { width: 100%; }
	.flow__chart__btn { position: absolute; transition: .4s; display: block; width: 25px; height: 25px; z-index: 10; }
	.flow__chart__btn:hover { filter: brightness(130%); }
	.flow__chart__btn--1 { top: 180px; left: 456px; }
	.flow__chart__btn--2 { top: 203px; left: 697px; }
	.flow__chart__btn--3 { top: 203px; left: 434px; }
	.flow__chart__btn--4 { top: 115px; left: 265px; }
	.flow__chart__btn--5 { top: 115px; left: 486px; }
}


/* 
-------------------------------*/
.sec--crcl { padding-top: 29px; }
.crcl-ttl { position: relative; display: flex; align-items: center; height: 44px; background: #ebf4ec; font: 400 1.6rem var(--ff-grmd); line-height: 1; letter-spacing: 0.2em; color: var(--c-dgreen); }
.crcl-ttl::before { position: absolute; top: 0; left: 100%; display: block; width: 24px; height: 100%; background: #ebf4ec; clip-path: polygon(0 0, 0% 100%, 100% 0); content: ""; }

.crcl-wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 46px; grid-row-gap: 0px; margin-top: 40px; }
.crcl { align-self: start; }

.crcl--1 { grid-area: 1 / 1 / 2 / 3; }
.crcl--2 { grid-area: 2 / 1 / 3 / 2; }
.crcl--3 { grid-area: 2 / 2 / 3 / 3; }
.crcl--4 { grid-area: 3 / 1 / 4 / 2; }
.crcl--5 { grid-area: 3 / 2 / 4 / 3; }
.crcl__img { position: relative; }
.crcl__img::before { position: absolute; top: 0; left: 0; display: block; width: 48px; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: contain; content: ""; }
.crcl__ttl { padding-top: 13px; font: 500 1.6rem var(--ff-nosa); line-height: 1.5; color: var(--c-dgreen); }
.crcl__trg { position: relative; display: flex; align-items: center; width: 100%; height: 30px; padding-left: 27px; font: 500 1.2rem var(--ff-nosa); line-height: 1; text-align: left; color: #3c5a5a; }
.crcl__trg::before { position: absolute; left: 5px; top: 50%; transform: translateY(-70%) rotate(135deg); transform-origin: center; width: 8px; height: 8px; border-right: 2px solid #3c5a5a; border-top: 2px solid #3c5a5a; content: ""; opacity: .5; }
.crcl__trg::after { content: "もっと見る"; }
.crcl__trg.is-opened::before { transform: translateY(-30%) rotate(-45deg); }
.crcl__trg.is-opened::after { content: "閉じる"; }

.crcl__content { position: relative; display: none; background: #fff; border: 2px solid var(--c-dgreen); margin-top: 16px; padding: 35px 30px 25px; font-family: var(--ff-nosa); font-weight: 500; }
.crcl__content::before { position: absolute; left: 25px; bottom: 100%; width: 12px; height: 15px; background: #fff; border-style: solid; border-color: var(--c-dgreen); border-width: 2px 2px 0 2px; border-radius: 8px 8px 0 0; content: ""; }
.crcl__content__ttl { position: relative; padding-left: 44px; font-size: 1.6rem; color: var(--c-dgreen); }
.crcl__content__ttl::before,
.crcl__content__ttl::after { position: absolute; top: 50%; transform: translateY(-50%); display: block; content: ""; }
.crcl__content__ttl::before { left: 0; width: 31px; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: contain; }
.crcl__content__ttl::after { right: calc(100% + 25px); width: 6px; height: 32px; background: var(--c-dgreen); }
.crcl__content__txt { position: relative; margin-top: 19px; padding-top: 10px; font-size: 1.4rem; font-weight: 400; line-height: 1.75; }
.crcl__content__txt::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background: url("../img/curriculum/ptn_dot.png") repeat-x 0 50%/6px auto; content: ""; }

.crcl__content__close { position: absolute; top: 0; right: 0; width: 36px; height: 36px; }
.crcl__content__close::before,
.crcl__content__close::after { position: absolute; top: 50%; left: 50%; display: block; width: 18px; height: 2px; background: var(--c-dgreen); border-radius: 1px; content: ""; }
.crcl__content__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.crcl__content__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.crcl--1 .crcl__img::before { background-image: url("../img/curriculum/icon_magni_1.jpg"); }
.crcl--2 .crcl__img::before { background-image: url("../img/curriculum/icon_magni_2.jpg"); }
.crcl--3 .crcl__img::before { background-image: url("../img/curriculum/icon_magni_3.jpg"); }
.crcl--4 .crcl__img::before { background-image: url("../img/curriculum/icon_magni_4.jpg"); }
.crcl--5 .crcl__img::before { background-image: url("../img/curriculum/icon_magni_5.jpg"); }

.crcl--1 .crcl__content__ttl::before { background-image: url("../img/curriculum/icon_magni_inner_1.png"); }
.crcl--2 .crcl__content__ttl::before { background-image: url("../img/curriculum/icon_magni_inner_2.png"); }
.crcl--3 .crcl__content__ttl::before { background-image: url("../img/curriculum/icon_magni_inner_3.png"); }
.crcl--4 .crcl__content__ttl::before { background-image: url("../img/curriculum/icon_magni_inner_4.png"); }
.crcl--5 .crcl__content__ttl::before { background-image: url("../img/curriculum/icon_magni_inner_5.png"); }

.crcl--3 .crcl__content::before,
.crcl--5 .crcl__content::before { left: calc(50% + 50px); }

@media screen and (max-width: 680px) {
	.crcl-ttl { width: calc(100% - 10px); margin-left: -24px; padding-left: 24px; }
	.crcl-wrap { position: relative; }
	.crcl-wrap::before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: 1px; height: 100%; background: #dcdcdc; content: ""; z-index: -1; }
	.crcl { background: #fff; padding-bottom: 22px; }
	.crcl:nth-child(n+4) { padding-bottom: 0; }
	
	.crcl__content { width: calc(100% * 2 + 46px); }
	.crcl--1 .crcl__content { width: 100%; }
	
	.crcl--1 .crcl__ttl,
	.crcl--3 .crcl__ttl,
	.crcl--5 .crcl__ttl { line-height: 3.0; }
	.crcl--3 .crcl__content,
	.crcl--5 .crcl__content { right: calc(100% + 46px); }
}
@media screen and (min-width: 681px) {
	.sec--crcl { padding-top: 60px; }
	.crcl-ttl { width: calc(100% - 47px); height: 88px; font-size: 4.0rem; letter-spacing: 0.06em; }
	.crcl-ttl::before { width: 47px; }
	.crcl-ttl::after { position: absolute; top: 0; right: calc(100% - 1px); width: 50vw; height: 100%; background: #ebf4ec; content: ""; }
	
	.crcl-wrap { grid-template-columns: repeat(3, 1fr); grid-column-gap: 39px; grid-row-gap: 50px; width: 840px; margin-top: 80px; margin-left: auto; margin-right: auto; }
	.crcl--1 { grid-area: 1 / 1 / 2 / 3; }
	.crcl--2 { grid-area: 1 / 3 / 2 / 4; }
	.crcl--3 { grid-area: 2 / 1 / 3 / 2; }
	.crcl--4 { grid-area: 2 / 2 / 3 / 3; }
	.crcl--5 { grid-area: 2 / 3 / 3 / 4; } 
	
	.crcl__img::before { width: 56px; }
	.crcl__ttl { padding-top: 8px; padding-bottom: 5px; font-size: 2.4rem; }
	.crcl__trg { display: inline-flex; width: auto; height: 40px; padding-left: 38px; font-size: 1.4rem; }
	.crcl__trg::before { left: 8px; width: 12px; height: 12px; }

	.crcl__content { margin-top: 26px; padding: 43px 50px 45px; }
	.crcl__content::before { left: 37px; height: 24px; }
	.crcl__content__ttl { padding-left: 54px; font-size: 2.4rem; }
	.crcl__content__ttl::before { width: 36px; }
	.crcl__content__ttl::after { right: calc(100% + 44px); width: 8px; height: 36px; }
	.crcl__content__txt { margin-top: 24px; padding-top: 26px; font-size: 1.8rem; }
	
	.crcl__content__close { width: 54px; height: 54px; }
	.crcl__content__close::before,
	.crcl__content__close::after { width: 22px; }
	
	.crcl__content { width: calc(100% * 3 + 78px); }
	.crcl--1 .crcl__content { width: calc(100% + 293px); }
	
	.crcl--1 .crcl__ttl,
	.crcl--3 .crcl__ttl,
	.crcl--5 .crcl__ttl { line-height: 3.0; }
	.crcl--2 .crcl__content,
	.crcl--5 .crcl__content { right: calc(100% * 2 + 78px); }
	.crcl--4 .crcl__content { left: calc(-100% - 39px); }
	
	.crcl--3 .crcl__content::before { left: 37px; }
	.crcl--4 .crcl__content::before { left: 50%; transform: translateX(-550%); }
	.crcl--2 .crcl__content::before,
	.crcl--5 .crcl__content::before { left: auto; right: 197px; }
}