@charset "UTF-8";


@media screen and (min-width: 768px),print {

header {position: absolute;width: 100%;}
header .h-logo img{ -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
header .shuninavi li a{ color: #fff; }
header .shuninavi li::before{background: #fff;}

#cpmainttl{min-height: 76rem;background: url(../images/medium/contentsmain-back01.jpg) no-repeat top center;background-size: cover;margin-bottom: -5.9rem;z-index: 3;position: relative;}
#cpmainttl .inner-Box{text-align: center;padding: 27.2rem 0 0;}
#cpmainttl .inner-Box h1{color: #FFFFFF;position: relative;padding-right: 3rem;margin-bottom: 2.6rem;font-size: 2.0rem;line-height: 1.8;letter-spacing: 0.2em;font-weight: 600;text-align: center;}
#cpmainttl .inner-Box h1::before{}
#cpmainttl .inner-Box h2{padding-right: 1rem;}
#cpmainttl .inner-Box .dicon{width: 18rem;margin-left: 2.8rem;position: absolute;top: 20.6rem;margin-left: 11.9rem;left: 50%;margin-bottom: -6.8rem;-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);transform: scale(-1, 1);}

#contentsmain{background: url(../images/manufacturing/contentsmain-back02.svg) no-repeat calc(50% - 0.2rem) top;padding: 13.1rem 0 8.6rem;margin: 0rem 0 -3.7rem;}
#contentsmain p{font-size: 1.6rem;line-height: 2.5;letter-spacing: 0.2em;font-weight: normal;text-align: center;color: #111111;margin-bottom: 1.5rem;}

#contents01 {position: relative;padding: 0 5vw;margin-bottom: 6.6rem;}
#contents01 .inner-Box {margin: 0 auto;position: relative;max-width: 110rem;}
#contents01 .inner-Box ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2.9091%;}
#contents01 .inner-Box ul li{position:relative;}
#contents01 .inner-Box ul li h3{max-width:23rem;aspect-ratio:1/1;overflow:hidden;position:relative;margin: 0 auto 2rem;font-size:1.8rem;line-height:1.667;letter-spacing:.1em;font-weight:700;text-align:center;color:#fff;display:flex;align-items:center;justify-content:center;border-radius: 50%;}
#contents01 .inner-Box ul li:nth-child(1) h3 { background: url('../images/medium/contents01-photo01.jpg')no-repeat center center; background-size: cover; }
#contents01 .inner-Box ul li:nth-child(2) h3 { background: url('../images/medium/contents01-photo02.jpg')no-repeat center center; background-size: cover; }
#contents01 .inner-Box ul li:nth-child(3) h3 { background: url('../images/medium/contents01-photo03.jpg')no-repeat center center; background-size: cover; }

#contents01 .inner-Box p.ltext {margin-bottom: 3rem;position: relative;font-size: 1.4rem;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: left;}

#contentsflow{padding: 0rem 5vw;margin-bottom: 0rem;}
#contentsflow .inner-Box{margin: 0 auto 6.9rem;max-width: 106rem;display:flex;align-items:flex-start;gap: 3.65rem;position: relative;}
#contentsflow .ttl-Box{width: 28.1rem;flex-shrink:0;}
#contentsflow .system-Box{width:calc(100% - 23.45rem);padding-top: 3.2rem;}
#contentsflow .ttl-Box .dicon{width: 5.3rem;margin-bottom: -0.3rem;}
#contentsflow .ttl-Box .f-en{color: var(--mred);font-size: 1.4rem;line-height: 1.714;letter-spacing: 0.2em;font-weight: 600;text-align: left;padding-left: 2.1rem;margin-bottom: -0.3rem;}
#contentsflow .ttl-Box .f-en span{ color: var(--mbl); }
#contentsflow .ttl-Box h2{font-size: 2.3rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: 700;text-align: left;padding-left: 2.1rem;}

#contentsflow .flow-Box li{display:flex;align-items:flex-start;margin-bottom: 3rem;min-height: 12.2rem;}
#contentsflow .flow-Box li .no{flex: 0 0 15.1667%;background: var(--mred);border-radius: 50%;aspect-ratio: 1 / 1;font-size: 1.6rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: 600;text-align: center;color: #F4F4C8;display: flex;flex-direction:column;justify-content:center;align-items:center;/* align-self:center; */position: relative;padding-top: 0.2rem;padding-left: 0.6rem;}
#contentsflow .flow-Box li .no::before{content:"";width: 0.6rem;height: 2.8rem;display: block;background: url(../images/school-uniform/contentsflow-icon01.svg)repeat-y top center;margin-bottom: 1.2rem;position: absolute;bottom: -4.8rem;left: 50%;margin-left: -0.3rem;}
#contentsflow .flow-Box li:last-child .no::before{ display: none; }
#contentsflow .flow-Box li .no span{font-size: 4.6rem;line-height: 1;letter-spacing: 0.2em;font-weight: 600;text-align: center;color: #F4F4C8;display: block;position: relative;left: 0.2rem;}
#contentsflow .flow-Box li .photo{flex: 0 0 24.2%;margin-right: 2.8333%;padding-left: 2rem;}
#contentsflow .flow-Box li .photo img{width: 100%;height: auto;}
#contentsflow .flow-Box li .text-Box{flex:1;margin-right: -1rem;}
#contentsflow .flow-Box li .sys-ttl{margin-bottom: 0.6rem;color: var(--mred);font-size: 2.0rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: bold;text-align: left;}
#contentsflow .flow-Box li .sys-ttl span{ font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.2em; font-weight: 700; text-align: left;}
#contentsflow .flow-Box li .sys-text{ font-size: 1.6rem; line-height: 1.8; letter-spacing: 0.1em; font-weight: normal; text-align: left; color: #111111;}

#contentsfaq{margin-bottom: 9.6rem;padding: 0 5vw;}
#contentsfaq .ttl-Box{width: 30rem;margin: 0 auto 3.8rem;position: relative;}
#contentsfaq .ttl-Box .dicon{width: 5.2rem;margin: 0 auto -0.3rem;left: -6.5rem;position: relative;}
#contentsfaq .ttl-Box .f-en{font-size: 1.4rem;line-height: 1.714;letter-spacing: 0.2em;font-weight: 600;text-align: -webkit-auto;color: var(--mred);margin-bottom: -0.2rem;margin-left: 8rem;}
#contentsfaq .ttl-Box .f-en span{ color: var(--mbl); }
#contentsfaq .ttl-Box h2{font-size: 2.3rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: bold;text-align: left;color: #111111;position: relative;left: 7.9rem;margin-bottom: 1.9rem;}
#contentsfaq .ttl-Box h2 .big{font-size: 7.5rem;line-height: 1;letter-spacing: 0;font-weight: 600;text-align: left;margin: 0 0.4rem;position: relative;top: 1.6rem;}
#contentsfaq .ttl-Box h2 .col{color: var(--mred);display: block;font-size: 2.0rem;line-height: 1.5;letter-spacing: 0.2em;font-weight: bold;text-align: center;margin-top: -1.6rem;}
#contentsfaq .ttl-Box .subllt{font-size: 1.4rem;line-height: 2.5;letter-spacing: 0.1em;font-weight: 500;text-align: center;color: #111111;margin: 0 -22rem 0;}
#contentsfaq .inner-Box {margin: 0 auto;position: relative;max-width: 110rem;}



}
@media screen and (min-width:768px) and ( max-width:1023px) {
	

	
}

@media screen and (max-width: 767px) {

#pc-glnavi .h-menu{background: #FBFBF4;width: 20.1vw;height: 18.1vw;}
#pc-glnavi .h-menu .zdo_drawer_buttonsp{left: 5.6vw;}
header{position:absolute;width:100%;z-index: 5;}
header .h-logo img{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);}
header .shuninavi li a{color:#fff;}
header .shuninavi li::before{background:#fff;}

#cpmainttl{min-height: 111.9667vw;background:url(../images/medium/sp-contentsmain-back01.jpg) no-repeat top center;background-size:cover;margin-bottom:-17.3333vw;z-index:3;position:relative;}
#cpmainttl .inner-Box{text-align:center;padding: 43.7vw 0 0;}
#cpmainttl .inner-Box h1{color:#fff;position:relative;padding-right: 0;margin-bottom: 4.4vw;font-size: 3.7vw;line-height: 1.3;letter-spacing: 0.2em;font-weight: 600;text-align: center;padding-left: 1vw;}
#cpmainttl .inner-Box h1::before{content:"";}
#cpmainttl .inner-Box h2{margin: 0 9vw 0 7.6vw;}
#cpmainttl .inner-Box .dicon{width: 30.7vw;position:absolute;top: 32.6667vw;right: 5vw;margin-left: 0;margin-bottom:-18.1333vw;-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);transform:scale(-1,1);}

#contentsmain{background: url(../images/manufacturing/contentsmain-back02.svg) no-repeat top 14.7vw center;padding: 27.1vw 0 20.7667vw;background-size: 89.7vw auto;margin-bottom: -15.4vw;}
#contentsmain p{color:#111111;font-size: 3.7vw;line-height: 2;letter-spacing: 0.1em;font-weight: 400;text-align: center;margin-bottom: 4.6vw;}

#contents01{position:relative;padding: 0 6vw;}
#contents01 .inner-Box{margin:0 auto;position:relative;}
#contents01 .inner-Box ul{}
#contents01 .inner-Box ul li{position:relative;}
#contents01 .inner-Box ul li h3{max-width:61.333vw;aspect-ratio:1/1;overflow:hidden;position:relative;margin: 0 auto 5.333vw;font-size:4.8vw;line-height:1.667;letter-spacing:.1em;font-weight:700;text-align:center;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;}
#contents01 .inner-Box ul li:nth-child(1) h3{background:url('../images/medium/contents01-photo01.jpg') no-repeat center center;background-size:cover;}
#contents01 .inner-Box ul li:nth-child(2) h3{background:url('../images/medium/contents01-photo02.jpg') no-repeat center center;background-size:cover;}
#contents01 .inner-Box ul li:nth-child(3) h3{background:url('../images/medium/contents01-photo03.jpg') no-repeat center center;background-size:cover;}
#contents01 .inner-Box p.ltext{margin-bottom: 9.6vw;position:relative;font-size: 3.7vw;line-height: 2.0;letter-spacing: 0.1em;font-weight: 400;text-align: left;}

#contentsflow {padding:0 5vw;margin-bottom: 11.767vw;}
#contentsflow  .inner-Box{}
#contentsflow  .ttl-Box{ margin-bottom: 6.6vw; }
#contentsflow  .system-Box{ margin: 0 0.3vw 8.3vw; }
#contentsflow  .ttl-Box .dicon{width: 12.033vw;margin-bottom: -1.1vw;}
#contentsflow  .ttl-Box .f-en{color:var(--mred);padding-left: 4.6vw;margin-bottom: -0.1vw;font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.2em;font-weight: 600;text-align: left;}
#contentsflow  .ttl-Box .f-en span{color:var(--mbl);}
#contentsflow  .ttl-Box h2{padding-left: 4.6vw;font-size: 5.3vw;line-height: 1.5;letter-spacing: 0.2em;font-weight: 700;text-align: left;}
#contentsflow .system-Box ul{ margin-bottom: -8.8vw; }

#contentsflow .flow-Box li{display:flex;flex-wrap:wrap;align-items:flex-start;padding-bottom: 7.067vw;padding-left: 28vw;position: relative;padding-top: 2vw;}
#contentsflow .flow-Box li .no{width: 23.7vw;flex:none;background:var(--mred);border-radius:50%;aspect-ratio:1/1;font-size: 3.267vw;padding-left: 0.5vw;line-height:1.5;letter-spacing:.2em;font-weight:600;text-align:center;color:#F4F4C8;display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;position: absolute;order:1;top: 0;left: 0vw;}
#contentsflow .flow-Box li::before{content:"";width: 1.2vw;height: 75%;display:block;background:url(../images/school-uniform/contentsflow-icon01.svg) repeat-y top center;margin-bottom:3.2vw;position:absolute;top: 25.5vw;left: 11.5vw;background-size: 100% auto;}
#contentsflow .flow-Box li:last-child::before{display:none;}
#contentsflow .flow-Box li .no span{font-size: 9.567vw;line-height:1;letter-spacing:.2em;font-weight:600;text-align:center;color:#F4F4C8;display:block;position:relative;left: 0.9vw;}
#contentsflow .flow-Box li .text-Box{width: 100%;display:contents;}
#contentsflow .flow-Box li .sys-ttl{order:2;margin-bottom: 1.7667vw;padding-top:0;color:var(--mred);font-size: 4.3vw;line-height: 1.5;letter-spacing: 0.2em;font-weight: bold;text-align: left;top: -1.3vw;position: relative;margin-right: -1vw;}
#contentsflow .flow-Box li .sys-ttl span{font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.2em;font-weight: 700;text-align: left;display: block;}
#contentsflow .flow-Box li .photo{order:3;width: 42.6vw;flex:none;margin-right:0;padding-left:0;}
#contentsflow .flow-Box li .photo img{width:100%;height:auto;}
#contentsflow .flow-Box li .sys-text{order:4;margin-top:2.6667vw;font-size: 3.7vw;line-height: 1.5;letter-spacing: 0.1em;font-weight: normal;text-align: left;color: #111111;padding-right: 0.7vw;}
#contentsflow .mbtn{text-align: right;font-size:4.267vw;line-height:1;letter-spacing:.1em;font-weight:500;position: relative;}
#contentsflow .mbtn a{}
#contentsflow .mbtn .arr{position:relative;transition:all .3s ease-in-out;width: 5.7vw;display: inline-block;margin-left: 0.8vw;top: 1.1vw;}
#contentsflow .mbtn a:hover .arr{right:-1.867vw;}

#contentsfaq{margin: 0 5.3vw 19.9vw;}
#contentsfaq .ttl-Box{margin: 0 auto 6.2vw;position:relative;}
#contentsfaq .ttl-Box .dicon{width: 11.7vw;left: 0vw;position:relative;margin-bottom: -1vw;}
#contentsfaq .ttl-Box .f-en{font-size: 3.233vw;line-height:1.714;letter-spacing:.2em;font-weight:600;text-align:-webkit-auto;color:var(--mred);margin-bottom:-0.533vw;margin-left: 4.233vw;}
#contentsfaq .ttl-Box .f-en span{color:var(--mbl);}
#contentsfaq .ttl-Box h2{font-size: 5.3vw;line-height:1.5;letter-spacing:.2em;font-weight:700;text-align:left;color:#111;position:relative;margin: 0 0 0vw 4.3vw;}
#contentsfaq .ttl-Box h2 .big{font-size:20vw;line-height:1;letter-spacing:0;font-weight:600;text-align:left;margin:0 1.067vw;position:relative;top:4.267vw;}
#contentsfaq .ttl-Box h2 .col{color:var(--mred);display:block;font-size:5.333vw;line-height:1.5;letter-spacing:.2em;font-weight:700;text-align:center;margin-top:-4.267vw;}
#contentsfaq .ttl-Box .subllt{font-size:3.733vw;line-height:2.5;letter-spacing:.1em;font-weight:500;text-align:center;color:#111;margin:0 -58.667vw;}
#contentsfaq .inner-Box{margin:0 auto;position:relative;max-width:110rem;}
}