@media screen and (min-width: 768px), print { #contentsmain {margin: 0 auto -59px;position: relative;background: url('../images/ocs-functionspec/contentsmain-back01.png')no-repeat top 389px center;padding-bottom: 233px;} #contentsmain .ttl-Box {margin: 0 auto 320px;position: relative;width: 1100px;padding: 107px 0 0;} #contentsmain .ttl-Box p.subttl {position: relative;color: #1A1A1A;font-size: 26px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.6;margin-bottom: 28px;} #contentsmain .ttl-Box p.subttl span.f_m { } #contentsmain .ttl-Box h2.f_m {margin-bottom: 0px;position: relative;color: #1A1A1A;font-size: 54px;font-weight: 500;letter-spacing: 0.1em;line-height: 1.6;} #contentsmain .ttl-Box h2.f_m span {color: #0884A8;} #contentsmain .inner-Box1 {margin: 0 auto 202px;position: relative;width: 1280px;padding: 0 0 0 830px;} #contentsmain .inner-Box1 figure.photo {position: absolute;top: 0;left: -320px;} #contentsmain .inner-Box1 figure.photo img{ } #contentsmain h3 {margin-bottom: 44px;} #contentsmain h3 span{ } #contentsmain h3 img { } #contentsmain p.text {margin-bottom: 30px;position: relative;color: #FFF;text-shadow: 0 4px 15px #45B9ED;font-size: 20px;font-weight: 600;letter-spacing: 0em;line-height: 2.4;} #contentsmain .inner-Box2 {margin: 0 auto;position: relative;width: 1020px;} #contentsmain .inner-Box2 figure.photo {position: absolute;top: 0;right: -130px;} #contentsmain .inner-Box2 figure.photo img{ } #contents01 {margin: 0 auto;position: relative;background: url('../images/ocs-functionspec/contents01-back01.png')no-repeat top center;padding: 210px 0 140px;} #contents01 .inner-Box {margin: 0 auto;position: relative;width: 1100px;padding: 53px 0 0 660px;} #contents01 .inner-Box figure.photo { position: absolute; top: 0; left: 0; } #contents01 .inner-Box figure.photo img{ } #contents01 .inner-Box h2.f_m {margin-bottom: 7px;position: relative;color: #0884A8;font-size: 32px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents01 .inner-Box h3.f_m {margin-bottom: 41px;position: relative;color: #1A1A1A;font-size: 20px;font-weight: 400;letter-spacing: 0em;line-height: 1.8;} #contents01 .inner-Box p.text {margin-bottom: 28px;position: relative;color: #1A1A1A;font-size: 15px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents01 .inner-Box h4 {margin-bottom: 0px;position: relative;color: #0884A8;font-size: 15px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents02 {margin: 0 auto;position: relative;background: url('../images/ocs-functionspec/contents02-back01.png')no-repeat top center;padding-bottom: 79px;} #contents02 .ttl-Box {margin: 0 auto;position: relative;width: 1100px;padding: 224px 0 43px;} #contents02 .ttl-Box h2.f_m {margin-bottom: 0px;position: relative;color: #1A1A1A;font-size: 24px;font-weight: 400;letter-spacing: 0.1em;line-height: 2.4;} #contents02 .ttl-Box h2.f_m span {color: #1A1A1A;font-size: 80px;font-weight: 600;letter-spacing: 0.05em;line-height: 1;display: block;} #contents02 .inner-Box {margin: 0 auto;position: relative;border-top: 1px solid #E6E6E6;padding: 80px 0 40px;} #contents02 .inBox {margin: 0 auto;position: relative;width: 1100px;padding: 47px 0 0 550px;} #contents02 .inBox p.ntext {position: absolute;color: #D6F1F9;text-align: center;font-size: 140px;font-weight: 400;letter-spacing: -0.05em;line-height: 1;top: -140px;right: -10px;} #contents02 .inBox p.ntext span.f_m { } #contents02 .inBox figure.photo { position: absolute; top: 0; left: 0; } #contents02 .inBox figure.photo img{ } #contents02 .inBox h3.f_m {margin-bottom: 6px;position: relative;color: #0884A8;font-size: 26px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents02 .inBox h4.f_m {margin-bottom: 25px;position: relative;color: #1A1A1A;font-size: 18px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents02 .inBox p.text {margin-bottom: 30px;position: relative;color: #1A1A1A;font-size: 15px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 { margin: 0 auto; position: relative; background: url('../images/ocs-functionspec/contents03-back01.png')no-repeat top center; } #contents03 .ttl-Box {margin: 0 auto;position: relative;width: 1100px;padding: 224px 0 213px;} #contents03 .ttl-Box h2.f_m {margin-bottom: 0px;position: relative;color: #1A1A1A;font-size: 24px;font-weight: 400;letter-spacing: 0.1em;line-height: 2.4;} #contents03 .ttl-Box h2.f_m span {color: #1A1A1A;font-size: 80px;font-weight: 600;letter-spacing: 0.05em;line-height: 1;display: block;} #contents03 .inner-Box {margin: 0 auto 370px;position: relative;width: 1100px;} #contents03 .inner-Box .inBox {margin: 0 auto;position: relative;padding: 73px 0 0 606px;} #contents03 .inner-Box .inBox figure.photo { position: absolute; top: 0; left: 0; } #contents03 .inner-Box .inBox figure.photo img{ } #contents03 .inner-Box .inBox h3.f_m {margin-bottom: 8px;position: relative;color: #0884A8;font-size: 32px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents03 .inner-Box .inBox h4.f_m {margin-bottom: 43px;position: relative;color: #1A1A1A;font-size: 20px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents03 .inner-Box .inBox p.text {margin-bottom: 28px;position: relative;color: #1A1A1A;font-size: 15px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box .inBox h5 {margin-bottom: 0px;position: relative;color: #0884A8;font-size: 15px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box2 {margin: 0 auto 290px;position: relative;width: 1100px;} #contents03 .inner-Box2 .inBox {margin: 0 auto;position: relative;padding: 53px 606px 0 0;} #contents03 .inner-Box2 .inBox figure.photo {position: absolute;top: 0;right: 0;} #contents03 .inner-Box2 .inBox figure.photo img{ } #contents03 .inner-Box2 .inBox h3.f_m {margin-bottom: 38px;position: relative;color: #0884A8;font-size: 32px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents03 .inner-Box2 .inBox h4.f_m {margin-bottom: 43px;position: relative;color: #1A1A1A;font-size: 20px;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents03 .inner-Box2 .inBox p.text {margin-bottom: 28px;position: relative;color: #1A1A1A;font-size: 15px;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box2 .inBox h5 {margin-bottom: 0px;position: relative;color: #0884A8;font-size: 15px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents04 {margin: 0 auto 100px;position: relative;} #contents04 .inner-Box { margin: 0 auto; position: relative; } #contents04 .inner-Box figure.photo {position: relative;top: 0;left: 0;} #contents04 .inner-Box figure.photo img{width: 100%;} #contentsbottom h2.ttt{color: #1A1A1A;font-size: 42px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.6;text-align: center;margin-bottom: 17px;} #contentsbottom p.subttl{color: #1A1A1A;font-size: 20px;font-weight: 500;letter-spacing: 0.05em;line-height: 1;text-align: center;margin-bottom: 57px;} } @media screen and (max-width: 767px) { #contentsmain {margin: 0 auto -7vw;position: relative;background: url('../images/ocs-functionspec/sp-contentsmain-back01.png')no-repeat top 43.96vw center;padding-bottom: 21.28vw;background-size: 100% auto;} #contentsmain .ttl-Box {margin: 0 auto 31.39vw;position: relative;padding: 14.35vw 0 0 7vw;} #contentsmain .ttl-Box p.subttl {position: relative;margin-bottom: 2.76vw;color: #1A1A1A;font-size: 3.62vw;font-weight: 500;letter-spacing: 0.05em;line-height: 1.6;} #contentsmain .ttl-Box p.subttl span.f_m { } #contentsmain .ttl-Box h2.f_m {margin-bottom: 0.0vw;position: relative;color: #1A1A1A;font-size: 6.28vw;font-weight: 500;letter-spacing: 0.1em;line-height: 1.6;} #contentsmain .ttl-Box h2.f_m span {color: #0884A8;} #contentsmain .inner-Box1 {margin: 0 7.1vw 16.99vw;position: relative;padding: 0 0 0 0vw;} #contentsmain .inner-Box1 figure.photo {position: relative;top: 0;left: 0vw;margin-right: -2vw;margin-bottom: 3.6vw;} #contentsmain .inner-Box1 figure.photo img{ } #contentsmain h3 {margin-bottom: 3.93vw;margin-right: 19vw;} #contentsmain h3 span{ } #contentsmain h3 img { } #contentsmain p.text {margin-bottom: 7.25vw;position: relative;color: #FFF;text-shadow: 0 4px 15px #45B9ED;font-size: 3.62vw;font-weight: 600;letter-spacing: 0em;line-height: 2.4;} #contentsmain .inner-Box2 {margin: 0 7vw;position: relative;} #contentsmain .inner-Box2 figure.photo {position: relative;top: 0;right: 0vw;margin-bottom: 9.4vw;} #contentsmain .inner-Box2 figure.photo img{ } #contents01 {position: relative;background: url('../images/ocs-functionspec/sp-contents01-back01.png')no-repeat top center;padding: 24.22vw 0 19.82vw;background-size: 100% auto;margin-bottom: -10.9vw;} #contents01 .inner-Box {position: relative;} #contents01 .inner-Box figure.photo {position: relative;top: 0;left: 0;margin-bottom: 3vw;} #contents01 .inner-Box figure.photo img{ } #contents01 .inner-Box h2.f_m {margin: 0 6.9vw 1.69vw;position: relative;color: #0884A8;font-size: 6.28vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents01 .inner-Box h3.f_m {margin: 0 6.9vw 5.69vw;position: relative;color: #1A1A1A;font-size: 3.62vw;font-weight: 400;letter-spacing: 0em;line-height: 1.8;} #contents01 .inner-Box p.text {margin: 0 6.9vw 6.69vw;position: relative;color: #1A1A1A;font-size: 3.62vw;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents01 .inner-Box h4 {margin: 0 6.9vw 1.69vw;position: relative;color: #0884A8;font-size: 3.62vw;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents02 {position: relative;background: url('../images/ocs-functionspec/sp-contents02-back01.png')no-repeat top center;padding-bottom: 12.08vw;background-size: 100% auto;} #contents02 .ttl-Box {margin: 0 7vw;position: relative;padding: 41.21vw 0 0.99vw;} #contents02 .ttl-Box h2.f_m {margin-bottom: 0.0vw;position: relative;color: #1A1A1A;font-size: 4.83vw;font-weight: 400;letter-spacing: 0.1em;line-height: 2.4;} #contents02 .ttl-Box h2.f_m span {display: block;color: #1A1A1A;font-size: 9.18vw;font-weight: 600;letter-spacing: 0.05em;line-height: 1;} #contents02 .inner-Box {position: relative;border-top: 0.24vw solid #E6E6E6;padding: 12.02vw 0 2.96vw;} #contents02 .inBox {margin: 0 7.2vw;position: relative;} #contents02 .inBox p.ntext {position: absolute;color: #D6F1F9;text-align: center;font-size: 19.82vw;font-weight: 400;letter-spacing: -0.05em;line-height: 1;top: -11.8vw;right: -1.6vw;z-index: 3;} #contents02 .inBox p.ntext span.f_m { } #contents02 .inBox figure.photo {position: relative;top: 0;left: 0;margin-bottom: 4vw;} #contents02 .inBox figure.photo img{ } #contents02 .inBox h3.f_m {margin-bottom: 0.65vw;position: relative;color: #0884A8;font-size: 5.80vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents02 .inBox h4.f_m {margin-bottom: 3.34vw;position: relative;color: #1A1A1A;font-size: 4.35vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;} #contents02 .inBox p.text {margin-bottom: 7.25vw;position: relative;color: #1A1A1A;font-size: 3.62vw;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 {position: relative;background: url('../images/ocs-functionspec/sp-contents03-back01.png')no-repeat top center;background-size: 100% auto;} #contents03 .ttl-Box {margin: 0 7vw;position: relative;padding: 27.01vw 0 5.99vw;} #contents03 .ttl-Box h2.f_m {margin-bottom: 0.0vw;position: relative;color: #1A1A1A;font-size: 4.83vw;font-weight: 400;letter-spacing: 0.1em;line-height: 2.4;} #contents03 .ttl-Box h2.f_m span {display: block;color: #1A1A1A;font-size: 9.18vw;font-weight: 600;letter-spacing: 0.05em;line-height: 1;} #contents03 .inner-Box {margin: 0 auto 5.37vw 7.1vw;position: relative;background: #fff;} #contents03 .inner-Box .inBox {position: relative;padding: 0vw 0 10vw 0vw;} #contents03 .inner-Box .inBox figure.photo {position: relative;top: 0;left: 0;margin-right: 7.2vw;margin-bottom: 6.6vw;} #contents03 .inner-Box .inBox figure.photo img{ } #contents03 .inner-Box .inBox h3.f_m {margin-bottom: 1.93vw;position: relative;color: #0884A8;font-size: 6.28vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;margin-left: 7.2vw;} #contents03 .inner-Box .inBox h4.f_m {margin-bottom: 6.39vw;position: relative;color: #1A1A1A;font-size: 4.83vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;margin-left: 7.2vw;} #contents03 .inner-Box .inBox p.text {margin: 0 7.3vw 6.76vw;position: relative;color: #1A1A1A;font-size: 3.62vw;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box .inBox h5 {margin: 0 7.3vw 6.76vw;position: relative;color: #0884A8;font-size: 3.62vw;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box2 {margin: 0 7.1vw 10.07vw 0vw;position: relative;background: #fff;} #contents03 .inner-Box2 .inBox {position: relative;padding: 0vw 0 10vw 0vw;} #contents03 .inner-Box2 .inBox figure.photo {position: relative;top: 0;left: 0;margin-left: 7.2vw;margin-bottom: -2.7vw;} #contents03 .inner-Box2 .inBox figure.photo img{ } #contents03 .inner-Box2 .inBox h3.f_m {margin-bottom: 6.53vw;position: relative;color: #0884A8;font-size: 6.28vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;margin-left: 7.2vw;} #contents03 .inner-Box2 .inBox h4.f_m {margin-bottom: 6.39vw;position: relative;color: #1A1A1A;font-size: 4.83vw;font-weight: 400;letter-spacing: 0em;line-height: 1.6;margin-left: 7.2vw;} #contents03 .inner-Box2 .inBox p.text {margin: 0 7.3vw 6.76vw;position: relative;color: #1A1A1A;font-size: 3.62vw;font-weight: 400;letter-spacing: 0.05em;line-height: 1.87;} #contents03 .inner-Box2 .inBox h5 {margin: 0 7.3vw 6.76vw;position: relative;color: #0884A8;font-size: 3.62vw;font-weight: 500;letter-spacing: 0.05em;line-height: 1.87;} #contents04 {margin: 0 auto 12.15vw;position: relative;} #contents04 .inner-Box {position: relative;} #contents04 .inner-Box figure.photo {position: relative;top: 0;left: 0;} #contents04 .inner-Box figure.photo img{width: 100%;} #contentsbottom h2.ttt{text-align: center;margin-bottom: 0.71vw;color: #1A1A1A;font-size: 5.31vw;font-weight: 500;letter-spacing: 0em;line-height: 1.6;} #contentsbottom p.subttl{text-align: center;margin-bottom: 8.27vw;color: #1A1A1A;font-size: 3.62vw;font-weight: 500;letter-spacing: 0em;line-height: 1.5;} }